/**
 * Section: Procedures Page (Flexible Content)
 *
 * Figma reference: node 431:2077.
 * All values use CSS custom properties from :root in style.css.
 * BEM namespace: .azuri-proc
 *
 * Layouts:
 *   .azuri-proc-section--intro
 *   .azuri-proc-section--notice
 *   .azuri-proc-section--labeled
 *   .azuri-proc-section--grid
 *   .azuri-proc-section--bullets
 *   .azuri-proc-section--stat-cards
 *   .azuri-proc-section--checklist
 */

/* ==========================================================================
   Shared section shell
   ========================================================================== */

.azuri-proc-section {
	padding-top:    var(--azuri-space-8);
	padding-bottom: var(--azuri-space-8);
}

/* Divider between sections (mirrors Figma's border-t-[0.5px] on most blocks) */
.azuri-proc-section + .azuri-proc-section {
	border-top: 1px solid var(--azuri-color-border, #deeaec);
}

/* First section (intro) has no top border */
.azuri-proc-section--intro {
	border-top: none;
	padding-top: var(--azuri-space-10);
}

/* ==========================================================================
   Shared content wrapper
   ========================================================================== */

.azuri-proc__content {
	display:        flex;
	flex-direction: column;
	gap:            var(--azuri-space-4);
}

/* ==========================================================================
   Overline label (teal uppercase, Figma: SemiBold 11px / tracking 2px)
   ========================================================================== */

.azuri-proc__overline {
	font-family:     var(--azuri-font-family-base);
	font-size:       var(--azuri-font-size-2xs, 11px);
	font-weight:     600;
	letter-spacing:  0.125rem;
	text-transform:  uppercase;
	color:           var(--azuri-color-teal, #2aadb5);
	line-height:     1.5;
	margin:          0;
}

/* ==========================================================================
   Heading (H2 — light weight, Figma: Light 32px)
   ========================================================================== */

.azuri-proc__heading {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-3xl, 32px);
	font-weight:    300;
	line-height:    var(--azuri-line-height-tight, 1.25);
	letter-spacing: -0.0625rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0;
}

/* ==========================================================================
   Body paragraphs (Figma: Regular 15px / line-height 27px)
   ========================================================================== */

.azuri-proc__paragraphs {
	display:        flex;
	flex-direction: column;
	gap:            var(--azuri-space-4);
}

.azuri-proc__paragraph {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 15px);
	font-weight:    400;
	line-height:    1.8;
	letter-spacing: -0.015rem;
	color:          var(--azuri-color-body, #5a6f80);
	margin:         0;
}

/* ==========================================================================
   Info Notice — teal left-border callout (Figma: bg rgba(42,173,181,.04))
   ========================================================================== */

.azuri-proc__notice {
	border-left:      3px solid var(--azuri-color-teal, #2aadb5);
	background-color: rgba(42, 173, 181, 0.04);
	border-radius:    0 var(--azuri-radius-sm, 10px) var(--azuri-radius-sm, 10px) 0;
	padding:          var(--azuri-space-5) var(--azuri-space-6);
}

.azuri-proc__notice-text {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 14px);
	font-weight:    400;
	line-height:    1.75;
	letter-spacing: -0.01rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0;
}

/* ==========================================================================
   Conditions Grid — 2-column card grid (Figma: bg #f5f9fa, border #deeaec)
   ========================================================================== */

.azuri-proc__card-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--azuri-space-4);
}

.azuri-proc__card {
	background-color: var(--azuri-color-surface-alt, #f5f9fa);
	border:           1px solid var(--azuri-color-border, #deeaec);
	border-radius:    var(--azuri-radius-sm, 10px);
	padding:          var(--azuri-space-5);
	display:          flex;
	flex-direction:   column;
	gap:              var(--azuri-space-2);
}

.azuri-proc__card-title {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 15px);
	font-weight:    500;
	line-height:    1.5;
	letter-spacing: -0.015rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0;
}

.azuri-proc__card-desc {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-xs, 13px);
	font-weight:    400;
	line-height:    1.7;
	letter-spacing: -0.005rem;
	color:          var(--azuri-color-body, #5a6f80);
	margin:         0;
}

/* ==========================================================================
   Bullet List (Figma: teal circle dot + text, border-b between items)
   ========================================================================== */

.azuri-proc__bullet-list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.azuri-proc__bullet-item {
	display:        flex;
	align-items:    center;
	gap:            var(--azuri-space-3);
	padding-top:    var(--azuri-space-3);
	padding-bottom: var(--azuri-space-3);
	border-bottom:  1px solid var(--azuri-color-border-light, #e4edf0);
}

.azuri-proc__bullet-item:last-child {
	border-bottom: none;
}

.azuri-proc__bullet-icon {
	flex-shrink:      0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            var(--azuri-space-5, 20px);
	height:           var(--azuri-space-5, 20px);
	background-color: var(--azuri-color-teal, #2aadb5);
	border-radius:    50%;
	color:            var(--azuri-color-white, #fff);
}

.azuri-proc__bullet-icon svg {
	width:  10px;
	height: 10px;
}

.azuri-proc__bullet-text {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 14px);
	font-weight:    400;
	line-height:    1.65;
	letter-spacing: -0.01rem;
	color:          var(--azuri-color-heading, #2e404f);
}

/* ==========================================================================
   Stat Cards (Figma: centred label + value, bg #f5f9fa, 3-across)
   ========================================================================== */

.azuri-proc__stat-cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--azuri-space-4);
	margin-top:            var(--azuri-space-6);
}

.azuri-proc__stat-card {
	background-color: var(--azuri-color-surface-alt, #f5f9fa);
	border:           1px solid var(--azuri-color-border, #deeaec);
	border-radius:    var(--azuri-radius-sm, 10px);
	padding:          var(--azuri-space-4) var(--azuri-space-4);
	text-align:       center;
	display:          flex;
	flex-direction:   column;
	gap:              var(--azuri-space-2);
}

.azuri-proc__stat-card-label {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-2xs, 11px);
	font-weight:    400;
	letter-spacing: 0.035rem;
	text-transform: uppercase;
	color:          var(--azuri-color-muted, #9aabb8);
	line-height:    1.5;
	margin:         0;
}

.azuri-proc__stat-card-value {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-md, 16px);
	font-weight:    500;
	line-height:    1.5;
	letter-spacing: -0.02rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0;
}

/* ==========================================================================
   Two-Column Checklist
   ========================================================================== */

.azuri-proc__checklist {
	list-style:            none;
	margin:                0;
	padding:               0;
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--azuri-space-3) var(--azuri-space-6);
}

.azuri-proc__checklist-item {
	display:     flex;
	align-items: center;
	gap:         var(--azuri-space-3);
}

.azuri-proc__checklist-text {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 14px);
	font-weight:    400;
	line-height:    1.65;
	letter-spacing: -0.01rem;
	color:          var(--azuri-color-heading, #2e404f);
}

/* ==========================================================================
   Responsive — tablet & mobile (≤ 1023.98px collapse to single column)
   ========================================================================== */

@media (max-width: 1023.98px) {

	.azuri-proc__card-grid {
		grid-template-columns: 1fr;
	}

	.azuri-proc__stat-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.azuri-proc__checklist {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 600px) {

	.azuri-proc__heading {
		font-size: var(--azuri-font-size-2xl, 26px);
	}

	.azuri-proc__stat-cards {
		grid-template-columns: 1fr;
	}

}

/* ==========================================================================
   FAQ Section (node 431:2346)
   Full-width below sidebar + content. Always expanded. BEM: .azuri-proc-faq
   ========================================================================== */

.azuri-proc-faq {
	background-color: var(--azuri-color-surface-alt, #f5f9fa);
	padding-top:      var(--azuri-space-10);
	padding-bottom:   var(--azuri-space-10);
	width:            100%;
}

/* Heading — light 28px (Figma) */
.azuri-proc-faq__heading {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-2xl, 28px);
	font-weight:    300;
	line-height:    1.5;
	letter-spacing: -0.001rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0 0 var(--azuri-space-8);
}

/* 2-column grid */
.azuri-proc-faq__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   0 var(--azuri-space-10);
}

/* FAQ item — always visible */
.azuri-proc-faq__item {
	border-bottom: 1px solid var(--azuri-color-border, #deeaec);
	padding:       var(--azuri-space-4) 0; 
    padding-bottom: 32px;
}

/* Question */
.azuri-proc-faq__question {
	font-family:    var(--azuri-font-family-base);
	font-size:      15px;
	font-weight:    500;
	line-height:    1.5;
	letter-spacing: -0.015rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0 0 var(--azuri-space-2);
}

/* Answer */
.azuri-proc-faq__answer {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 14px);
	font-weight:    400;
	line-height:    1.75;
	letter-spacing: -0.01rem;
	color:          var(--azuri-color-body, #5a6f80);
	margin:         0;
}

/* Responsive */
@media (max-width: 1023.98px) {
	.azuri-proc-faq__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Page body layout — 2-col (content 8 + sidebar 4)
   ========================================================================== */

.azuri-proc-page-body {
	background-color: var(--azuri-color-white, #fff);
	padding-top:      var(--azuri-space-8);
	padding-bottom:   var(--azuri-space-8);
}

/* Remove azuri_inner padding from content column so sections manage own spacing */
.azuri-proc-page-body__content.azuri_inner {
	padding: 0;
}

/*
 * Sidebar column — sticky on scroll.
 *
 * CRITICAL: align-self must be stretch (NOT flex-start).
 * flex-start collapses the sidebar column to its own content height, which
 * makes the sticky element fill 100% of the col — leaving zero scroll room.
 * With stretch, the col fills the full content-column height, giving the
 * sticky sidebar a tall parent to travel within.
 */
.azuri-proc-page-body__sidebar-col {
	align-self: stretch;
}

.azuri-proc-page-body__sidebar.azuri_inner {
	height:   auto;   /* Override .azuri_inner height:100% — sticky el must be < parent height */
	padding:  0;
	position: sticky;
	top:      var(--azuri-space-6, 24px);
}

/* Sidebar widgets — spacing between each widget */
.azuri-proc-page-body__sidebar .widget {
	margin-bottom: var(--azuri-space-6);
}

.azuri-proc-page-body__sidebar .widget:last-child {
	margin-bottom: 0;
}

/* GP's default inner-padding on aside widgets */
.azuri-proc-page-body__sidebar .widget.inner-padding {
	padding: var(--azuri-space-5);
}

/* Remove top border from first section — page body provides the spacing */
.azuri-proc-page-body .azuri-proc-section:first-child {
	padding-top: 0;
}

/* Sections inside the content column fill available width — no extra container needed */
.azuri-proc-page-body__content .azuri-proc-section .azuri-container {
	max-width:     none;
	padding-left:  0;
	padding-right: 0;
}
.azuri-proc-page-body{
	padding-top: 70px;
    padding-bottom: 70px !important;
}
section.azuri-proc-faq {
    padding-top: 80px;
    padding-bottom: 100px !important;
}
@media (max-width: 1023.98px) {
	.azuri-proc-page-body__sidebar.azuri_inner {
		position: static;
	}
}
@media only screen and ( min-width:240px) and (max-width:1023px) {
    .azuri-container .azuri-container {
        padding: 0 !important;
    }
    section.azuri-proc-faq {
        padding-top: 40px;
        padding-bottom: 40px !important;
    }
    .azuri-proc-faq__item {
        padding-bottom: 22px;
    }
}

/* ==========================================================================
   Rich Text Block — WYSIWYG free-form content
   ul li automatically styled as the teal icon checklist
   ========================================================================== */

.azuri-proc__rich-text h2,
.azuri-proc__rich-text h3,
.azuri-proc__rich-text h4 {
	font-family:    var(--azuri-font-family-base);
	font-weight:    300;
	line-height:    var(--azuri-line-height-tight, 1.25);
	letter-spacing: -0.0625rem;
	color:          var(--azuri-color-heading, #2e404f);
	margin:         0 0 var(--azuri-space-3);
}
.azuri-proc__rich-text h2.small{
	font-family:     var(--azuri-font-family-base);
	font-size:       var(--azuri-font-size-2xs, 11px);
	font-weight:     600;
	letter-spacing:  0.125rem;
	text-transform:  uppercase;
	color:           var(--azuri-color-teal, #2aadb5);
	line-height:     1.5;
	margin:          0;
}
.azuri-proc__rich-text h2 { font-size: var(--azuri-font-size-3xl, 32px); }
.azuri-proc__rich-text h3 { font-size: var(--azuri-font-size-2xl, 26px); }
.azuri-proc__rich-text h4 { font-size: var(--azuri-font-size-xl, 20px); }

.azuri-proc__rich-text p {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 15px);
	font-weight:    400;
	line-height:    1.8;
	letter-spacing: -0.015rem;
	color:          var(--azuri-color-body, #5a6f80);
	margin:         0 0 var(--azuri-space-3);
}

.azuri-proc__rich-text p:last-child { margin-bottom: 0; }

/* ul — icon checklist style (mirrors .azuri-proc__bullet-list) */
.azuri-proc__rich-text ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.azuri-proc__rich-text ul li {
	display:        flex;
	align-items:    center;
	gap:            var(--azuri-space-3);
	padding-top:    var(--azuri-space-3);
	padding-bottom: var(--azuri-space-3);
	border-bottom:  1px solid var(--azuri-color-border-light, #e4edf0);
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 14px);
	font-weight:    400;
	line-height:    1.65;
	letter-spacing: -0.01rem;
	color:          var(--azuri-color-heading, #2e404f);
}

.azuri-proc__rich-text ul li:last-child {
	border-bottom: none;
}

/* Teal circle check icon via SVG background — no extra markup needed */
.azuri-proc__rich-text ul li::before {
	content:          '';
	flex-shrink:      0;
	display:          inline-block;
	width:            var(--azuri-space-5, 20px);
	height:           var(--azuri-space-5, 20px);
	border-radius:    50%;
	background-color: var(--azuri-color-teal, #2aadb5);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
}

/* ol — standard numbered list styling */
.azuri-proc__rich-text ol {
	margin:     0;
	padding:    0 0 0 var(--azuri-space-5);
}

.azuri-proc__rich-text ol li {
	font-family:    var(--azuri-font-family-base);
	font-size:      var(--azuri-font-size-sm, 15px);
	font-weight:    400;
	line-height:    1.8;
	letter-spacing: -0.015rem;
	color:          var(--azuri-color-body, #5a6f80);
	margin-bottom:  var(--azuri-space-2);
}

@media (max-width: 600px) {
	.azuri-proc__rich-text h2 { font-size: var(--azuri-font-size-2xl, 26px); }
	.azuri-proc__rich-text h3 { font-size: var(--azuri-font-size-xl, 20px); }
}