/**
 * Blog Post Styles — brizz-post.css
 * 
 * Styles for single.php (Screen 2: Blog Post / Guide).
 * Mobile-first. Content maxWidth: 680px (per wireframe v5.1).
 * BEM naming convention (§15.4).
 * No framework — custom styles only (§8.3).
 *
 * Color tokens reference brizz-global.css custom properties:
 *   --brizz-primary: #6813a5
 *   --brizz-primary-light: #8b3cc7
 *   --brizz-secondary: #ff304d
 *   --brizz-dark: #1A1A2E
 *   --brizz-bg: #dbd3ea
 *   --brizz-bg-light: #f3f0f8
 *   --brizz-white: #ffffff
 *   --brizz-g50 through --brizz-g900
 *
 * @package Brizz_Astra_Child
 * @since 1.0.0
 */

/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb — v5.7 token table values ─────────────────────────────
   Targets BOTH our fallback HTML and Rank Math's generated output.
   Uses !important to beat Rank Math's own stylesheet + Astra defaults.
   ──────────────────────────────────────────────────────────────────── */

.brizz-breadcrumb {
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; /* v5.7 token: 11px mobile */
    color: var(--brizz-g600);
    background: var(--brizz-g50);
    border-bottom: 1px solid var(--brizz-g200);
}

@media (min-width: 769px) {
    .brizz-breadcrumb {
        font-size: 12px; /* v5.7 token: 12px desktop */
    }
}

.brizz-breadcrumb__inner {
    max-width: 680px;
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.brizz-breadcrumb__inner a,
.brizz-breadcrumb__sep {
    flex-shrink: 0;
}

.brizz-breadcrumb__sep {
    margin: 0 6px;
    color: var(--brizz-g400);
}

.brizz-breadcrumb__current {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--brizz-g600);
}

@media (max-width: 768px) {
    .brizz-breadcrumb__inner {
        max-width: 100%;
    }
}

/* Links — purple + underline (beats Rank Math's color:inherit) */
.brizz-breadcrumb a,
.brizz-breadcrumb .rank-math-breadcrumb a {
    color: var(--brizz-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transition: color 200ms ease-out;
}

.brizz-breadcrumb a:hover,
.brizz-breadcrumb .rank-math-breadcrumb a:hover {
    color: var(--brizz-primary-light) !important;
    text-decoration: underline !important;
}

/* Separator — all variants (our fallback + Rank Math) */
.brizz-breadcrumb__sep,
.brizz-breadcrumb__separator,
.brizz-breadcrumb .separator {
    margin: 0 4px;
    color: var(--brizz-g500) !important;
}

/* Current page (last item) — g800, no underline */
.brizz-breadcrumb__current,
.brizz-breadcrumb .last,
.brizz-breadcrumb .rank-math-breadcrumb .last {
    color: var(--brizz-g800) !important;
    font-weight: 500;
    text-decoration: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ARTICLE HEADER / HERO — Contained card (wireframe v5.1)
   Image with rounded top corners, text below in dark colors.
   ══════════════════════════════════════════════════════════════════════ */

.brizz-post__header {
    margin-bottom: 16px;
}

.brizz-post__header-card {
    /* No extra margin needed — sits inside main column */
}

.brizz-post__hero {
    width: 100%;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.brizz-post__hero-img {
    width: 100%;
    height: auto;
    display: block;
}

.brizz-post__header-inner {
    padding: 16px 14px 0;
}

.brizz-post__category-badge {
    display: inline-block;
    padding: 3px 8px;
    margin-bottom: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brizz-primary);
    background: var(--brizz-bg-light);
    border-radius: 4px;
    text-decoration: none;
    transition: background 200ms ease-out;
}

.brizz-post__category-badge:hover {
    background: var(--brizz-bg);
    color: var(--brizz-primary);
}

.brizz-post__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* 24px mobile */
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--brizz-g900);
}

.brizz-post__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.6;
    color: var(--brizz-g900); /* v5.6: text color audit → g900 */
    margin: 0 0 14px;
}

.brizz-post__meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    color: var(--brizz-g600);
    border-bottom: 1px solid var(--brizz-g200);
    padding-bottom: 14px;
}

.brizz-post__meta-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brizz-post__author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--brizz-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.brizz-post__meta-info {
    flex: 1;
    min-width: 150px;
}

.brizz-post__meta-author {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brizz-g800);
    font-family: 'Quicksand', sans-serif;
}

.brizz-post__meta-details {
    display: block;
    font-size: 0.6875rem; /* 11px — wireframe v5.2 secondary/meta text */
    color: var(--brizz-g700); /* #374151 per v5.4 — secondary text tier */
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin-top: 1px;
}

.brizz-post__meta-details time {
    color: inherit;
}

.brizz-post__verified {
    display: inline-block;
    margin-top: 8px;
    color: var(--brizz-g700);
    font-weight: 500;
    font-size: 0.75rem;
    cursor: help;
}


/* ── Share Buttons ────────────────────────────────────────────────────── */

.brizz-share-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.brizz-share-buttons__btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--brizz-g100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    color: var(--brizz-g600);
    text-decoration: none;
    transition: background 200ms ease-out;
}

.brizz-share-buttons__btn:hover {
    background: var(--brizz-g200);
    color: var(--brizz-g800);
}


/* ══════════════════════════════════════════════════════════════════════
   CONTENT LAYOUT
   Desktop: sidebar left margin reserved, content centered at 680px
   Mobile: single column, full width
   ══════════════════════════════════════════════════════════════════════ */

.brizz-post__layout {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    gap: 0;
}

.brizz-post__main {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 16px 48px;
}


/* ══════════════════════════════════════════════════════════════════════
   QUICK SUMMARY BOX (wireframe v5.8 — collapsible)
   Full text always in DOM for AEO. CSS max-height collapse, not JS render.
   Short summaries (≤4 lines) render fully open — JS adds .is-collapsible.
   ══════════════════════════════════════════════════════════════════════ */

.brizz-quick-summary {
    background: var(--brizz-bg-light);
    border: 1px solid var(--brizz-bg);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 16px;
}

.brizz-quick-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* Only show pointer when collapsible */
.brizz-quick-summary.is-collapsible .brizz-quick-summary__header {
    cursor: pointer;
}

.brizz-quick-summary__label {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    color: var(--brizz-primary);
}

/* Chevron — hidden until JS confirms collapsible */
.brizz-quick-summary__chevron {
    font-size: 14px;
    color: var(--brizz-primary);
    line-height: 1;
    display: none;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.brizz-quick-summary.is-collapsible .brizz-quick-summary__chevron {
    display: inline-block;
}

.brizz-quick-summary.is-expanded .brizz-quick-summary__chevron {
    transform: rotate(90deg);
}

/* Content body — collapsed by default when .is-collapsible */
.brizz-quick-summary__body {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Not collapsible = no max-height constraint */
.brizz-quick-summary:not(.is-collapsible) .brizz-quick-summary__body {
    max-height: none;
}

/* Collapsible + collapsed */
.brizz-quick-summary.is-collapsible:not(.is-expanded) .brizz-quick-summary__body {
    max-height: 88px; /* ~4 lines mobile */
}

/* Collapsible + expanded */
.brizz-quick-summary.is-collapsible.is-expanded .brizz-quick-summary__body {
    max-height: 500px;
}

.brizz-quick-summary__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem; /* 13px mobile */
    line-height: 1.7;
    color: var(--brizz-g900);
}

.brizz-quick-summary__text p {
    margin: 0;
}

/* Gradient fade — visible only when collapsed */
.brizz-quick-summary__fade {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(to bottom, rgba(243, 240, 248, 0), #F3F0F8);
    pointer-events: none;
}

.brizz-quick-summary.is-collapsible:not(.is-expanded) .brizz-quick-summary__fade {
    display: block;
}

/* "Read more" toggle — visible only when collapsed */
.brizz-quick-summary__readmore {
    display: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--brizz-primary);
    margin-top: 4px;
    cursor: pointer;
}

.brizz-quick-summary.is-collapsible:not(.is-expanded) .brizz-quick-summary__readmore {
    display: flex;
    align-items: center;
    gap: 4px;
}

.brizz-quick-summary__readmore span {
    font-size: 10px;
}

@media (min-width: 769px) {
    .brizz-quick-summary {
        padding: 16px 20px;
    }

    .brizz-quick-summary__text {
        font-size: 0.875rem; /* 14px desktop */
    }

    .brizz-quick-summary.is-collapsible:not(.is-expanded) .brizz-quick-summary__body {
        max-height: 143px; /* ~6 lines desktop */
    }
}


/* ══════════════════════════════════════════════════════════════════════
   INLINE TABLE OF CONTENTS — Mobile Only (wireframe v5.1)
   Desktop uses the floating sidebar nav instead.
   ══════════════════════════════════════════════════════════════════════ */

.brizz-inline-toc {
    background: var(--brizz-white);
    border: 1px solid var(--brizz-g200);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 20px;
}

/* Hidden on desktop — desktop has floating sidebar */
@media (min-width: 769px) {
    .brizz-inline-toc {
        display: none;
    }
}

.brizz-inline-toc__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    transition: margin 0.3s;
}

.brizz-inline-toc--open .brizz-inline-toc__header {
    margin-bottom: 10px;
}

.brizz-inline-toc__chevron {
    display: inline-block;
    font-size: 16px;
    color: var(--brizz-primary);
    line-height: 1;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    margin-right: 4px;
}

.brizz-inline-toc--open .brizz-inline-toc__chevron {
    transform: rotate(90deg);
}

.brizz-inline-toc__label {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brizz-g800);
    display: flex;
    align-items: center;
    gap: 2px;
}

.brizz-inline-toc__count {
    font-size: 0.625rem;
    color: var(--brizz-g400);
    font-family: 'Montserrat', sans-serif;
}

/* Collapsible body — animated */
.brizz-inline-toc__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.brizz-inline-toc--open .brizz-inline-toc__body {
    max-height: 500px;
    opacity: 1;
}

.brizz-inline-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-counter;
}

.brizz-inline-toc__item {
    counter-increment: toc-counter;
    padding: 5px 0 5px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; /* v5.7 token table */
    color: var(--brizz-g900);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: color 200ms, border-color 200ms, font-weight 200ms;
}

.brizz-inline-toc__item::before {
    content: counter(toc-counter) ". ";
    font-weight: 600;
    color: inherit;
}

.brizz-inline-toc__item:hover {
    color: var(--brizz-primary);
}

.brizz-inline-toc__item--active {
    color: var(--brizz-primary);
    font-weight: 600;
    border-left-color: var(--brizz-primary);
}

.brizz-inline-toc__item a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

/* v5.8: TOC truncation — hide items beyond first 2 */
.brizz-inline-toc__item--hidden {
    display: none;
}

.brizz-inline-toc__showmore {
    padding: 6px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--brizz-g100);
    cursor: pointer;
    text-align: center;
}

.brizz-inline-toc__showmore-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--brizz-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ══════════════════════════════════════════════════════════════════════
   AT-A-GLANCE SUMMARY BOX
   ══════════════════════════════════════════════════════════════════════ */

.brizz-at-a-glance {
    margin: 0 0 16px;
    background: var(--brizz-white);
    border: 1px solid var(--brizz-g200);
    border-radius: 10px;
    overflow: hidden;
}

.brizz-at-a-glance__header {
    background: var(--brizz-primary);
    padding: 8px 16px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.75rem; /* 12px */
    color: var(--brizz-white);
}

.brizz-at-a-glance__list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.brizz-at-a-glance__item {
    display: flex;
    padding: 8px 16px;
    border-bottom: 1px solid var(--brizz-g100);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
}

.brizz-at-a-glance__item:last-child {
    border-bottom: none;
}

.brizz-at-a-glance__label {
    width: 160px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--brizz-g500);
    margin: 0;
}

.brizz-at-a-glance__value {
    font-weight: 600;
    color: var(--brizz-g800);
    margin: 0;
}

@media (max-width: 768px) {
    .brizz-at-a-glance__item {
        padding: 8px 14px;
    }

    .brizz-at-a-glance__label {
        width: 120px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   PLUGIN TOC OVERRIDE — Hide plugin TOCs (we use brizz-inline-toc + floating-nav)
   Three layers: CSS hide → PHP strip → JS remove (belt + suspenders + duct tape)
   ══════════════════════════════════════════════════════════════════════ */

.pk-toc,
.pk-toc-container,
.wp-block-uagb-table-of-contents,
div[class*="uagb-toc"],
.wp-block-rank-math-toc-block,
.rank-math-toc-block,
nav.rank-math-toc,
#rank-math-toc,
div[id*="rank-math-toc"],
div[class*="rank-math-toc"],
div[class*="wp-block-rank-math"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════
   IN-CONTENT SECTION STYLING
   Quick Summary and At-a-Glance when written directly in post body
   (not ACF fields). Applied via brizz_style_content_sections() filter.
   ══════════════════════════════════════════════════════════════════════ */

/* Quick Summary — Light purple box matching wireframe */
.brizz-qs-box {
    background: var(--brizz-bg-light);
    border: 1px solid var(--brizz-bg);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.brizz-qs-box__label {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    color: var(--brizz-primary);
    margin-bottom: 6px;
}

.brizz-qs-box p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--brizz-g600);
    margin: 0 0 4px;
}

.brizz-qs-box p:last-child {
    margin-bottom: 0;
}

.brizz-qs-box ul,
.brizz-qs-box ol {
    font-size: 0.8125rem;
    color: var(--brizz-g600);
    padding-left: 20px;
    margin: 4px 0 0;
}

.brizz-qs-box li {
    margin-bottom: 2px;
}

/* At-a-Glance — Purple header bar, white card */
/* ── At-a-Glance — Pure capsule wrapper ──────────────────────────────
   Purple title bar + rounded container. Table inside inherits
   global table styles (Style A). No special overrides needed.
   ───────────────────────────────────────────────────────────────────── */
.brizz-aag-box {
    background: var(--brizz-white);
    border: 1px solid var(--brizz-g200);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.brizz-aag-box__header {
    background: var(--brizz-primary);
    padding: 8px 16px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brizz-white);
}

/* Reset figure/table inside capsule — no extra borders/margins */
.brizz-aag-box figure,
.brizz-aag-box figure.wp-block-table {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}

.brizz-aag-box table {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

@media (max-width: 768px) {
    .brizz-qs-box {
        padding: 12px 14px;
    }
}

@media (min-width: 1024px) {
    .brizz-qs-box {
        padding: 16px 20px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   POST CONTENT — Typography & Element Styling
   ══════════════════════════════════════════════════════════════════════ */

.brizz-post__content {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem; /* 14px mobile — v5.5 readability bump */
    font-weight: 400;
    line-height: 1.7;
    color: var(--brizz-g900); /* #111827 per v5.4 typography ref */
}

/* ── Section H2 — Divider + purple accent + numbered badge (v5.2) ──
   Structure: .brizz-section-h2 > .brizz-section-h2__inner > badge + h2
   ───────────────────────────────────────────────────────────────────── */

.brizz-section-h2 {
    border-top: 1px solid var(--brizz-g200);
    padding-top: 20px;
    margin: 48px 0 14px;
    scroll-margin-top: 120px;
}

.brizz-section-h2:first-child {
    margin-top: 0;
}

.brizz-section-h2__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 3px solid var(--brizz-primary);
}

.brizz-section-h2__badge {
    height: 28px;
    border-radius: 8px;
    background: var(--brizz-primary); /* #6813A5 per v5.5 */
    color: var(--brizz-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px; /* auto-width per v5.4 */
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    flex-shrink: 0;
}

/* H2 inside the wrapper — reset margins, inherit typography */
.brizz-section-h2 h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.1875rem; /* 19px mobile */
    line-height: 1.3;
    color: var(--brizz-g800);
    margin: 0;
    padding: 0;
    scroll-margin-top: 120px; /* ID lives on heading — anchor offset */
}

/* ── SectionH3 — 2px accent + h24 auto-width badge ── */
.brizz-section-h3 {
    border-top: 1px solid var(--brizz-g200);
    padding-top: 16px;
    margin: 32px 0 12px;
    scroll-margin-top: 120px;
}

.brizz-section-h3__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--brizz-primary);
}

.brizz-section-h3__badge {
    height: 24px;
    border-radius: 6px;
    background: var(--brizz-primary); /* v5.5: unified to primary */
    color: var(--brizz-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    flex-shrink: 0;
}

.brizz-section-h3 h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1rem; /* 16px mobile */
    line-height: 1.35;
    color: var(--brizz-g800);
    margin: 0;
    padding: 0;
}

/* ── SectionH4 — 1.5px accent + h22 auto-width badge ── */
.brizz-section-h4 {
    border-top: 1px solid var(--brizz-g100);
    padding-top: 12px;
    margin: 24px 0 10px;
    scroll-margin-top: 120px;
}

.brizz-section-h4__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    border-left: 1.5px solid var(--brizz-primary);
}

.brizz-section-h4__badge {
    height: 22px;
    border-radius: 5px;
    background: var(--brizz-primary); /* v5.5: unified to primary */
    color: var(--brizz-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    flex-shrink: 0;
}

.brizz-section-h4 h4 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.875rem; /* 14px mobile */
    line-height: 1.4;
    color: var(--brizz-g800);
    margin: 0;
    padding: 0;
}

/* ── SectionH5 — 1px accent + h20 auto-width badge ── */
.brizz-section-h5 {
    border-top: 1px solid var(--brizz-g100);
    padding-top: 10px;
    margin: 20px 0 8px;
    scroll-margin-top: 120px;
}

.brizz-section-h5__inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--brizz-primary);
}

.brizz-section-h5__badge {
    height: 20px;
    border-radius: 4px;
    background: var(--brizz-primary); /* v5.5: unified to primary */
    color: var(--brizz-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    font-size: 0.5625rem; /* 9px */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    flex-shrink: 0;
}

.brizz-section-h5 h5 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.4;
    color: var(--brizz-g800);
    margin: 0;
    padding: 0;
}

/* Fallback: bare H2s not yet wrapped (shouldn't happen, but safe) */
.brizz-post__content > h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.1875rem; /* 19px mobile */
    line-height: 1.3;
    color: var(--brizz-g800);
    margin: 48px 0 16px;
    padding-top: 8px;
    scroll-margin-top: 120px;
}

/* Fallback: bare H3/H4/H5 not inside wrapper */
.brizz-post__content > h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--brizz-g800);
    margin: 32px 0 12px;
    scroll-margin-top: 120px;
}

.brizz-post__content > h4 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--brizz-g800);
    margin: 24px 0 10px;
    scroll-margin-top: 120px;
}

.brizz-post__content > h5 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--brizz-g800);
    margin: 20px 0 8px;
}

.brizz-post__content h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.75rem; /* 12px — wireframe v5.1 */
    line-height: 1.4;
    color: var(--brizz-g600);
    margin: 16px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brizz-post__content p {
    margin: 0 0 10px; /* wireframe v5.2: 10px between paragraphs */
}

.brizz-post__content a {
    color: var(--brizz-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 200ms ease-out;
}

.brizz-post__content a:hover {
    color: var(--brizz-primary-light);
}

/* ── Unordered Lists — purple circle markers (v5.5 Content Patterns) ──
   Marker: 6px circle · #6813A5 · flex layout · gap 10px
   ─────────────────────────────────────────────────────────────────────── */

.brizz-post__content ul,
.brizz-post__content ol {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.brizz-post__content ul > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
    line-height: 1.6;
}

.brizz-post__content ul > li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--brizz-primary);
    margin-top: 0.55em; /* align with first line of text */
    flex-shrink: 0;
}

/* Nested UL — smaller 4px dot, indented */
.brizz-post__content ul ul {
    margin: 6px 0 6px 16px;
}

.brizz-post__content ul ul > li::before {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--brizz-primary);
    opacity: 0.5;
}

/* ── Ordered Lists — numbered circle badges (v5.5 Content Patterns) ──
   22px circle · bg #F3F0F8 · Quicksand 700 · 11px · primary color
   ─────────────────────────────────────────────────────────────────────── */

.brizz-post__content ol {
    counter-reset: brizz-ol;
}

.brizz-post__content ol > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    line-height: 1.6;
    counter-increment: brizz-ol;
}

.brizz-post__content ol > li::before {
    content: counter(brizz-ol);
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 11px;
    background: var(--brizz-bg-light);
    color: var(--brizz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Nested OL — smaller counter, indented */
.brizz-post__content ol ol {
    counter-reset: brizz-ol-nested;
    margin: 6px 0 6px 16px;
}

.brizz-post__content ol ol > li {
    counter-increment: brizz-ol-nested;
}

.brizz-post__content ol ol > li::before {
    content: counter(brizz-ol-nested);
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 9px;
    font-size: 10px;
}

.brizz-post__content li {
    margin-bottom: 8px;
}

.brizz-post__content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--brizz-primary);
    background: var(--brizz-bg-light);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--brizz-g700);
}

/* ── Table Styles ─────────────────────────────────────────────────────
   ONE style for ALL tables: Purple column headers, center-aligned.
   At-a-Glance is a separate capsule (purple title bar) — the table
   inside it follows these same rules.
   
   Uses border-collapse: separate (not collapse) to prevent ghost
   border lines between the purple header and body rows.
   ───────────────────────────────────────────────────────────────────── */

/* ── NUCLEAR RESET — kill ALL default WP table borders ── */
.brizz-post__content table,
.brizz-post__content table th,
.brizz-post__content table td,
.brizz-post__content figure.wp-block-table table,
.brizz-post__content figure.wp-block-table th,
.brizz-post__content figure.wp-block-table td,
.brizz-aag-box table,
.brizz-aag-box th,
.brizz-aag-box td {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Shared table base ── */
.brizz-post__content table,
.brizz-post__content figure.wp-block-table table,
.brizz-aag-box table {
    width: 100%;
    table-layout: auto; /* Columns size to content, not equal widths */
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem; /* 13px — bumped from 12px for readability beside 14/15px body */
}

/* ── Table containers (rounded card with border) ── */
.brizz-post__content figure.wp-block-table {
    margin: 24px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--brizz-g200);
}

/* v5.8: Desktop table bleed — tables auto-size to content, capped at 800px (sidebar-safe).
   Parent .brizz-post__main is max-width 680px. Tables bleed right only (into the
   196px gap between content and sidebar). Left edge stays aligned with body text. */
@media (min-width: 769px) {
    .brizz-post__content figure.wp-block-table {
        width: max-content;
        min-width: 100%;
        max-width: 800px;
        overflow-x: auto;
    }
}

.brizz-post__content > table,
.brizz-post__content div:not(.brizz-aag-box):not(.brizz-qs-box) > table {
    margin: 24px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--brizz-g200);
}

/* ── Purple column headers — ALL tables ── */
.brizz-post__content thead th,
.brizz-aag-box thead th {
    background: var(--brizz-primary) !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 700 !important;
    color: var(--brizz-white) !important;
    padding: 9px 16px !important;
    text-align: center;
    vertical-align: middle;
}

/* ── Body rows ── */
.brizz-post__content tbody td,
.brizz-aag-box tbody td {
    padding: 9px 16px !important;
    font-size: 0.8125rem; /* 13px */
    color: var(--brizz-g900); /* v5.6: text color audit → g900 */
    vertical-align: middle;
    /* Row dividers */
    border-bottom: 1px solid var(--brizz-g100) !important;
}

/* Zebra striping */
.brizz-post__content tbody tr:nth-child(even),
.brizz-aag-box tbody tr:nth-child(even) {
    background: var(--brizz-g50);
}

/* First column: bold label */
.brizz-post__content tbody td:first-child,
.brizz-aag-box tbody td:first-child {
    font-weight: 600;
    color: var(--brizz-g900); /* v5.6: text color audit → g900 */
}

/* Last row: no bottom border */
.brizz-post__content tbody tr:last-child td,
.brizz-aag-box tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Narrow columns for serial numbers / short content ── */
.brizz-post__content td:first-child:is([data-narrow]),
.brizz-post__content th:first-child:is([data-narrow]) {
    width: 1%;
    white-space: nowrap;
}

/* Auto-narrow: if first column content looks like a number (handled via PHP) */
.brizz-table--narrow-first th:first-child,
.brizz-table--narrow-first td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 8px !important;
}

/* ── Mobile table adjustments ── */
@media (max-width: 767px) {
    .brizz-post__content thead th,
    .brizz-aag-box thead th {
        padding: 8px 12px !important;
        font-size: 0.75rem !important; /* 12px mobile — proportional step from 13px desktop */
    }

    .brizz-post__content tbody td,
    .brizz-aag-box tbody td {
        padding: 8px 12px !important;
        font-size: 0.6875rem; /* 11px */
    }

    /* Table responsive: horizontal scroll on small screens */
    .brizz-post__content figure.wp-block-table,
    .brizz-post__content > table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════════════════════════════
   v5.8 — MOBILE TABLE PATTERNS M1 / M2 / M3
   Breakpoint: 640px (wireframe spec). Below this, 3+ column
   tables switch to one of these mobile-optimised layouts.
   Desktop tables remain Style A/B above.
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop/Mobile toggle wrappers ── */
.brizz-table-desktop { display: block; }
.brizz-table-mobile  { display: none; }
.brizz-table-cards   { display: block; } /* Entity cards — shown at all breakpoints */

@media (max-width: 639px) {
    .brizz-table-desktop { display: none !important; }
    .brizz-table-mobile  { display: block !important; }
}

/* ────────────────────────────────────────────────────────
   PATTERN M1 — Horizontal Scroll + Sticky First Column
   Best for: cost comparisons, salary thresholds, timelines
   ──────────────────────────────────────────────────────── */
.brizz-m1 {
    position: relative;
    margin-bottom: 16px;
}

.brizz-m1__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid var(--brizz-g200);
}

.brizz-m1__inner {
    min-width: 480px;
}

/* M1 header row */
.brizz-m1__header {
    display: flex;
    background: var(--brizz-primary);
    padding: 8px 0;
}

.brizz-m1__header-cell {
    flex-shrink: 0;
    padding: 0 12px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    color: var(--brizz-white);
}

/* M1 first column — sticky */
.brizz-m1__header-cell:first-child,
.brizz-m1__cell:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 130px;
}

.brizz-m1__header-cell:first-child {
    background: var(--brizz-primary);
}

/* M1 data rows */
.brizz-m1__row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid var(--brizz-g100);
}

.brizz-m1__row:last-child {
    border-bottom: none;
}

.brizz-m1__row:nth-child(odd) {
    background: transparent;
}

.brizz-m1__row:nth-child(even) {
    background: var(--brizz-g50);
}

/* M1 data cells */
.brizz-m1__cell {
    flex-shrink: 0;
    padding: 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 400;
    color: var(--brizz-g900);
}

.brizz-m1__cell:first-child {
    font-weight: 600;
    background: inherit;
}

/* M1 sticky col bg must match row */
.brizz-m1__row:nth-child(odd) .brizz-m1__cell:first-child {
    background: var(--brizz-white);
}

.brizz-m1__row:nth-child(even) .brizz-m1__cell:first-child {
    background: var(--brizz-g50);
}

/* M1 right fade overlay — scroll affordance */
.brizz-m1__fade {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    border-radius: 0 10px 10px 0;
    transition: opacity 0.2s ease;
}

.brizz-m1__fade--hidden {
    opacity: 0;
}

/* ────────────────────────────────────────────────────────
   PATTERN M2 — Card Stack (Row → Card)
   Best for: entity/location tables (offices, job portals,
   city info, resources). Row label → card title.
   ──────────────────────────────────────────────────────── */
.brizz-m2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.brizz-m2__card {
    background: var(--brizz-white);
    border: 1px solid var(--brizz-g200);
    border-left: 3px solid var(--brizz-primary);
    border-radius: 10px;
    padding: 12px 14px;
}

.brizz-m2__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: var(--brizz-g900);
    margin-bottom: 8px;
}

.brizz-m2__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.brizz-m2__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    color: var(--brizz-g500);
    margin-bottom: 2px;
}

.brizz-m2__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: var(--brizz-g900);
}

.brizz-m2__value a {
    color: var(--brizz-primary);
    text-decoration: none;
}

.brizz-m2__value a:hover {
    text-decoration: underline;
}

/* Desktop: slightly larger card padding, wider field gap */
@media (min-width: 769px) {
    .brizz-m2__card {
        padding: 14px 18px;
    }

    .brizz-m2__fields {
        gap: 6px 24px;
    }

    .brizz-m2__title {
        font-size: 0.9375rem; /* 15px */
    }
}

/* ────────────────────────────────────────────────────────
   PATTERN M3 — Expandable Rows
   Best for: 4+ col dense tables where only 2 cols matter
   at first glance. Tap row to reveal remaining columns.
   ──────────────────────────────────────────────────────── */
.brizz-m3 {
    border-radius: 10px;
    border: 1px solid var(--brizz-g200);
    overflow: hidden;
    margin-bottom: 16px;
}

.brizz-m3__row {
    border-bottom: 1px solid var(--brizz-g100);
}

.brizz-m3__row:last-child {
    border-bottom: none;
}

/* M3 collapsed header (always visible) */
.brizz-m3__header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.brizz-m3__header:hover {
    background: var(--brizz-g50);
}

.brizz-m3__row.is-expanded .brizz-m3__header {
    background: var(--brizz-bgLight);
}

.brizz-m3__primary {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    color: var(--brizz-g900);
}

.brizz-m3__secondary {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem; /* 11px */
    color: var(--brizz-g500);
    margin-top: 2px;
}

/* M3 chevron */
.brizz-m3__chevron {
    font-size: 14px;
    color: var(--brizz-g400);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
    line-height: 1;
}

.brizz-m3__row.is-expanded .brizz-m3__chevron {
    color: var(--brizz-primary);
    transform: rotate(90deg);
}

/* M3 expanded fields area */
.brizz-m3__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: var(--brizz-bgLight);
}

.brizz-m3__row.is-expanded .brizz-m3__details {
    /* max-height set via JS based on content */
}

.brizz-m3__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    padding: 0 14px 12px;
}

.brizz-m3__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.625rem; /* 10px */
    font-weight: 500;
    color: var(--brizz-g500);
    margin-bottom: 2px;
}

.brizz-m3__value {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: var(--brizz-g900);
}

.brizz-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* Image captions — secondary/meta text per wireframe v5.2 */
.brizz-post__content figcaption {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem; /* 11px */
    font-weight: 400;
    color: var(--brizz-g700); /* v5.4 secondary text */
    line-height: 1.6;
    text-align: center;
    margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════════
   VENUE LISTING — v5.8 (Restaurants, Stores, Services, Temples)
   Three variants: Standard (3-line), Compact (2-line), Expandable.
   Reusable across all city guides.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared container ── */
.brizz-venue-list {
    border: 1px solid var(--brizz-g200);
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0;
}

/* ── Row base ── */
.brizz-venue-list__row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--brizz-g100);
    border-left: 3px solid #e8566d;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.brizz-venue-list__row:last-child {
    border-bottom: none;
}

/* Alternating rows — g100 for visible stripe */
.brizz-venue-list__row--alt {
    background: var(--brizz-g100);
}

/* ── Content (left side) ── */
.brizz-venue-list__content {
    flex: 1;
    min-width: 0;
}

.brizz-venue-list__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #e8566d;
    margin-bottom: 3px;
    line-height: 1.3;
}

.brizz-venue-list__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--brizz-g700);
    margin-bottom: 4px;
    line-height: 1.4;
}

.brizz-venue-list .brizz-venue-list__link {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--brizz-primary);
    text-decoration: none;
}

.brizz-venue-list .brizz-venue-list__link:hover {
    text-decoration: underline;
}

/* ── Chevron (right side) ── */
.brizz-venue-list__chevron {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    font-size: 20px;
    color: #e8566d;
    line-height: 1;
    transition: color 0.2s ease, transform 0.3s ease;
}

/* ── Expandable variant — detail area ── */
.brizz-venue-list__details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 3px solid #e8566d;
}

.brizz-venue-list__row.is-expanded + .brizz-venue-list__details,
.brizz-venue-list__row.is-expanded .brizz-venue-list__details {
    max-height: 300px;
}

.brizz-venue-list__detail-inner {
    background: var(--brizz-bg-light);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 14px 12px;
}

.brizz-venue-list__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
}

.brizz-venue-list__field-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--brizz-g700);
    margin-bottom: 2px;
}

.brizz-venue-list__field-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--brizz-g900);
}

/* Expanded state — chevron rotates + turns primary */
.brizz-venue-list__row.is-expanded .brizz-venue-list__chevron {
    color: var(--brizz-primary);
    transform: rotate(90deg);
}

/* ── Desktop overrides ── */
@media (min-width: 769px) {
    .brizz-venue-list__row {
        padding: 14px 16px;
    }

    .brizz-venue-list__name {
        font-size: 15px;
    }

    .brizz-venue-list__detail-inner {
        margin: 0 16px 14px;
    }
}


/* ── Callout Boxes — 4 standardized types (wireframe v5.2) ───────────
   Shared: 4px left accent, 1px border on other 3 sides, 8px radius,
   Quicksand 700 title 12px, Montserrat 400 body 12px, line-height 1.6.
   Margin: 8px top + bottom. Max 2-3 per section.
   ───────────────────────────────────────────────────────────────────── */

/* ── Shared callout base ── */
.brizz-callout {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}

.brizz-callout__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    margin-bottom: 4px;
}

.brizz-callout__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    line-height: 1.6;
    /* v5.6: opacity removed — full color per type-specific rules */
}

/* ── 🇮🇳 Desi Tip (warm cream) — India-specific cultural advice ── */
.brizz-callout--desi {
    background: #fef9ee;
    border-left: 4px solid #f59e0b;
    border-top: 1px solid #fcd34d;
    border-right: 1px solid #fcd34d;
    border-bottom: 1px solid #fcd34d;
}
.brizz-callout--desi .brizz-callout__title,
.brizz-callout--desi .brizz-callout__body { color: #92400e; }

/* ── 💡 Insider Tip (blue) — lesser-known local knowledge ── */
.brizz-callout--insider {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-top: 1px solid #93c5fd;
    border-right: 1px solid #93c5fd;
    border-bottom: 1px solid #93c5fd;
}
.brizz-callout--insider .brizz-callout__title,
.brizz-callout--insider .brizz-callout__body { color: #1e40af; }

/* ── ⚡ Reality Check (red) — honest warnings, myth-busting ── */
.brizz-callout--reality {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    border-top: 1px solid #f87171;
    border-right: 1px solid #f87171;
    border-bottom: 1px solid #f87171;
}
.brizz-callout--reality .brizz-callout__title,
.brizz-callout--reality .brizz-callout__body { color: #991b1b; }

/* ── ✅ Pro Tip (green) — actionable shortcuts ── */
.brizz-callout--pro {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    border-top: 1px solid #22c55e;
    border-right: 1px solid #22c55e;
    border-bottom: 1px solid #22c55e;
}
.brizz-callout--pro .brizz-callout__title,
.brizz-callout--pro .brizz-callout__body { color: #166534; }

/* ── ⚠️ Warning (burnt orange) — critical caution ── */
.brizz-callout--warning {
    background: #fdf2f2;
    border-left: 4px solid #c2410c;
    border-top: 1px solid #f97316;
    border-right: 1px solid #f97316;
    border-bottom: 1px solid #f97316;
}
.brizz-callout--warning .brizz-callout__title,
.brizz-callout--warning .brizz-callout__body { color: #7c2d12; }

/* ── ❗ Important (same as Warning) — must-know info ── */
.brizz-callout--important {
    background: #fdf2f2;
    border-left: 4px solid #c2410c;
    border-top: 1px solid #f97316;
    border-right: 1px solid #f97316;
    border-bottom: 1px solid #f97316;
}
.brizz-callout--important .brizz-callout__title,
.brizz-callout--important .brizz-callout__body { color: #7c2d12; }

/* ── 📢 Heads Up (same as Warning) — neutral informational notice ── */
.brizz-callout--headsup {
    background: #fdf2f2;
    border-left: 4px solid #c2410c;
    border-top: 1px solid #f97316;
    border-right: 1px solid #f97316;
    border-bottom: 1px solid #f97316;
}
.brizz-callout--headsup .brizz-callout__title,
.brizz-callout--headsup .brizz-callout__body { color: #7c2d12; }

/* ── ::before auto-titles ── */
.brizz-callout--desi::before      { content: "🇮🇳 Desi Tip"; }
.brizz-callout--insider::before   { content: "💡 Insider Tip"; }
.brizz-callout--reality::before   { content: "⚡ Reality Check"; }
.brizz-callout--pro::before       { content: "✅ Pro Tip"; }
.brizz-callout--warning::before   { content: "⚠️ Warning"; }
.brizz-callout--important::before { content: "❗ Important"; }
.brizz-callout--headsup::before   { content: "📢 Heads Up"; }

.brizz-callout--desi::before,
.brizz-callout--insider::before,
.brizz-callout--reality::before,
.brizz-callout--pro::before,
.brizz-callout--warning::before,
.brizz-callout--important::before,
.brizz-callout--headsup::before {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 4px;
}
.brizz-callout--desi::before      { color: #92400e; }
.brizz-callout--insider::before   { color: #1e40af; }
.brizz-callout--reality::before   { color: #991b1b; }
.brizz-callout--pro::before       { color: #166534; }
.brizz-callout--warning::before   { color: #7c2d12; }
.brizz-callout--important::before { color: #7c2d12; }
.brizz-callout--headsup::before   { color: #7c2d12; }

/* Suppress ::before when inner .brizz-callout__title exists */
.brizz-callout:has(.brizz-callout__title)::before {
    display: none;
}

/* ── Backward compatibility — old class names ── */
.brizz-post__content .brizz-tip {
    background: #fef9ee;
    border-left: 4px solid #f59e0b;
    border-top: 1px solid #fcd34d;
    border-right: 1px solid #fcd34d;
    border-bottom: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}
.brizz-post__content .brizz-tip::before {
    content: "🇮🇳 Desi Tip";
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #92400e;
    margin-bottom: 4px;
}

.brizz-post__content .brizz-warning {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    border-top: 1px solid #f87171;
    border-right: 1px solid #f87171;
    border-bottom: 1px solid #f87171;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
}
.brizz-post__content .brizz-warning::before {
    content: "⚠️ Reality Check";
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #991b1b;
    margin-bottom: 4px;
}

/* ── Mobile callout adjustments ── */
@media (max-width: 767px) {
    .brizz-callout,
    .brizz-post__content .brizz-tip,
    .brizz-post__content .brizz-warning {
        padding: 10px 14px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   CHECKLIST (v5.6 Content Patterns)
   Card-style rows: checked green bg, unchecked gray bg
   ══════════════════════════════════════════════════════════════════════ */

.brizz-checklist {
    background: var(--brizz-white);
    border-radius: 10px;
    border: 1px solid var(--brizz-g200);
    overflow: hidden;
    margin: 12px 0 20px;
}

.brizz-checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--brizz-g100);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.brizz-checklist__item:last-child {
    border-bottom: none;
}

.brizz-checklist__item--checked {
    background: #f0fdf4;
}

.brizz-checklist__item--unchecked {
    background: #f9fafb;
}

.brizz-checklist__box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.brizz-checklist__item--checked .brizz-checklist__box {
    background: #22c55e;
    color: var(--brizz-white);
    border: none;
}

.brizz-checklist__item--unchecked .brizz-checklist__box {
    background: transparent;
    border: 1.5px solid var(--brizz-g300);
}

.brizz-checklist__item--checked .brizz-checklist__text {
    color: var(--brizz-g800); /* v5.6: readable with line-through */
    text-decoration: line-through;
}

.brizz-checklist__item--unchecked .brizz-checklist__text {
    color: var(--brizz-g900); /* v5.6 */
}

@media (max-width: 768px) {
    .brizz-checklist__item {
        padding: 10px 14px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   PROS & CONS (v5.6 Content Patterns)
   Two-column grid, stacks on mobile
   ══════════════════════════════════════════════════════════════════════ */

.brizz-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 20px;
}

@media (max-width: 768px) {
    .brizz-pros-cons {
        grid-template-columns: 1fr;
    }
}

.brizz-pros-cons__col {
    border-radius: 10px;
    padding: 14px 16px;
}

.brizz-pros-cons__col--pro {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.brizz-pros-cons__col--con {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.brizz-pros-cons__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.brizz-pros-cons__col--pro .brizz-pros-cons__title {
    color: #166534;
}

.brizz-pros-cons__col--con .brizz-pros-cons__title {
    color: #991b1b;
}

.brizz-pros-cons__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.brizz-pros-cons__col--pro .brizz-pros-cons__item {
    color: #166534;
}

.brizz-pros-cons__col--con .brizz-pros-cons__item {
    color: #991b1b;
}

.brizz-pros-cons__marker {
    flex-shrink: 0;
    font-weight: 600;
}

@media (max-width: 768px) {
    .brizz-pros-cons__col {
        padding: 12px 14px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   GUIDE SERIES TABLE
   ══════════════════════════════════════════════════════════════════════ */

.brizz-guide-series {
    margin: 48px 0 32px;
    padding: 24px 20px;
    background: var(--brizz-bg-light);
    border-radius: 8px;
    border: 1px solid var(--brizz-g200);
}

.brizz-guide-series__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: var(--brizz-g900);
}

.brizz-guide-series__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--brizz-g500);
    margin: 0 0 20px;
}

.brizz-guide-series__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.brizz-guide-series__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--brizz-g200);
}

.brizz-guide-series__item:last-child {
    border-bottom: none;
}

.brizz-guide-series__item--current {
    background: rgba(104, 19, 165, 0.06);
    margin: 0 -20px;
    padding: 12px 20px;
    border-radius: 8px;
    border-bottom-color: transparent;
}

.brizz-guide-series__number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--brizz-primary);
    background: rgba(104, 19, 165, 0.1);
    border-radius: 50%;
}

.brizz-guide-series__item--current .brizz-guide-series__number {
    color: var(--brizz-white);
    background: var(--brizz-primary);
}

.brizz-guide-series__link {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    color: var(--brizz-primary);
    text-decoration: none;
    transition: color 200ms ease-out;
}

.brizz-guide-series__link:hover {
    color: var(--brizz-primary-light);
    text-decoration: underline;
}

.brizz-guide-series__link--current {
    color: var(--brizz-g900);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brizz-guide-series__badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brizz-primary);
    background: rgba(104, 19, 165, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.brizz-guide-series__time {
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--brizz-g400);
}


/* ══════════════════════════════════════════════════════════════════════
   FAQ SECTION — Collapsible Accordion (v5.2)
   City Guides: PHP outputs <details>/<summary> directly.
   Blog Posts: JS (brizz-faq.js) converts Rank Math block → accordion.
   ══════════════════════════════════════════════════════════════════════ */

/* Hide Rank Math's raw output until JS converts it — prevents FOUC */
#rank-math-faq {
    display: none;
}

.brizz-faq {
    margin: 48px 0 32px;
}

.brizz-faq__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--brizz-g900);
    margin: 0 0 20px;
}

.brizz-faq__item {
    border: 1px solid var(--brizz-g200);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 200ms ease-out;
}

.brizz-faq__item[open] {
    border-color: var(--brizz-primary);
}

.brizz-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px; /* mobile — token table */
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.875rem; /* 14px mobile — v5.7 token table */
    font-weight: 600;
    color: var(--brizz-g900); /* v5.7: was g700, token says g900 */
    list-style: none;
    min-height: 44px; /* WCAG touch target */
}

.brizz-faq__question::-webkit-details-marker {
    display: none;
}

.brizz-faq__question:hover {
    background: var(--brizz-g50);
}

.brizz-faq__icon {
    flex-shrink: 0;
    transition: transform 300ms ease-out;
    color: var(--brizz-primary);
}

.brizz-faq__item[open] .brizz-faq__icon {
    transform: rotate(180deg);
}

.brizz-faq__answer {
    padding: 0 14px 11px; /* mobile — wireframe v5.2 */
    border-top: 1px solid var(--brizz-g100);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px — wireframe v5.2 */
    line-height: 1.6;
    color: var(--brizz-g900); /* v5.5: content text → g900 */
}


/* ══════════════════════════════════════════════════════════════════════
   CONTEXTUAL PLATFORM CTA — Inline Banner (v5.8)
   Icon left · title+subtitle center · button right.
   Injected after relevant H2 sections (Housing → Rentals, Services → Services, etc.)
   ══════════════════════════════════════════════════════════════════════ */

.brizz-contextual-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brizz-bg-light);
    border: 1px solid rgba(104, 19, 165, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 24px 0 16px;
    transition: box-shadow 0.2s;
}

.brizz-contextual-cta:hover {
    box-shadow: 0 2px 8px rgba(104, 19, 165, 0.1);
}

.brizz-contextual-cta__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.brizz-contextual-cta__body {
    flex: 1;
    min-width: 0;
}

.brizz-contextual-cta__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--brizz-g900);
    margin-bottom: 2px;
}

.brizz-contextual-cta__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: var(--brizz-g600);
}

.brizz-contextual-cta__button {
    display: inline-block;
    background: var(--brizz-primary);
    color: var(--brizz-white) !important;
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.brizz-contextual-cta__button:hover {
    background: var(--brizz-primary-light);
    color: var(--brizz-white) !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .brizz-contextual-cta {
        flex-wrap: wrap;
    }

    .brizz-contextual-cta__button {
        width: 100%;
        text-align: center;
        padding: 8px 14px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   BRIZZ CTA — Branded Community Section (wireframe v5.4)
   Gradient bg, purple accent, logo mark, Find/Share groups + CTA btn.
   Placed 1× per page before FAQ section.
   ══════════════════════════════════════════════════════════════════════ */

.brizz-cta {
    background: linear-gradient(135deg, var(--brizz-bg-light), #ffffff);
    border-left: 4px solid var(--brizz-primary);
    border-top: 1px solid rgba(104, 19, 165, 0.19);
    border-right: 1px solid rgba(104, 19, 165, 0.19);
    border-bottom: 1px solid rgba(104, 19, 165, 0.19);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}

/* Header: logo mark + title */
.brizz-cta__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.brizz-cta__logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    object-fit: cover;
}

.brizz-cta__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem; /* 16px mobile */
    font-weight: 700;
    color: var(--brizz-g800);
    line-height: 1.3;
}

.brizz-cta__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    color: var(--brizz-g700);
    margin-top: 2px;
}

.brizz-cta__brand {
    color: var(--brizz-primary);
    font-weight: 700;
}

/* Find/Share groups */
.brizz-cta__group {
    margin-bottom: 14px;
}

.brizz-cta__group-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    color: var(--brizz-g800);
    margin-bottom: 8px;
}

.brizz-cta__items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brizz-cta__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px */
    color: var(--brizz-g900);
    line-height: 1.5;
}

.brizz-cta__item-icon {
    flex-shrink: 0;
    font-size: 13px;
}

.brizz-cta__item-link {
    color: var(--brizz-g700);
}

.brizz-cta__item-bold {
    color: var(--brizz-primary);
    font-weight: 600;
    text-decoration: none;
}

.brizz-cta__item-bold:hover {
    text-decoration: underline;
}

/* Footer CTA */
.brizz-cta__footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brizz-cta__btn {
    display: inline-block;
    background: var(--brizz-primary);
    color: var(--brizz-white);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease-out;
}

.brizz-cta__btn:hover {
    background: var(--brizz-primary); /* v5.5: unified to primary */
    color: var(--brizz-white);
    text-decoration: none;
}

.brizz-cta__visit {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem; /* 11px */
    color: var(--brizz-g700);
}

/* ── Desktop overrides ── */
@media (min-width: 769px) {
    .brizz-cta {
        padding: 20px 24px;
    }

    .brizz-cta__title {
        font-size: 1.125rem; /* 18px */
    }
}


/* ══════════════════════════════════════════════════════════════════════
   DISCLAIMER (wireframe v5.1)
   ══════════════════════════════════════════════════════════════════════ */

.brizz-disclaimer {
    background: var(--brizz-g100);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px; /* v5.7 token table */
    color: var(--brizz-g600);
    line-height: 1.5; /* v5.7 token table */
    margin: 24px 0;
}

.brizz-disclaimer strong {
    font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════════════
   PLATFORM CTA (3-card grid — retained for platform-cta-post.php)
   ══════════════════════════════════════════════════════════════════════ */

.brizz-platform-cta {
    margin: 48px 0 32px;
    padding: 32px 20px;
    background: var(--brizz-dark);
    border-radius: 8px;
    text-align: center;
}

.brizz-platform-cta__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--brizz-white);
    margin: 0 0 8px;
}

.brizz-platform-cta__subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px;
}

.brizz-platform-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.brizz-platform-cta__card {
    display: block;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    text-decoration: none;
    text-align: left;
    transition: background 200ms ease-out, transform 200ms ease-out;
}

.brizz-platform-cta__card:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.brizz-platform-cta__icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.brizz-platform-cta__card-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--brizz-white);
    margin: 0 0 6px;
}

.brizz-platform-cta__card-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px;
    line-height: 1.5;
}

.brizz-platform-cta__card-btn {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brizz-primary-light);
    transition: color 200ms ease-out;
}

.brizz-platform-cta__card:hover .brizz-platform-cta__card-btn {
    color: var(--brizz-white);
}

/* Color accents per pillar */
.brizz-platform-cta__card--events { border-left: 3px solid var(--brizz-primary); }
.brizz-platform-cta__card--services { border-left: 3px solid var(--brizz-secondary); }
.brizz-platform-cta__card--rentals { border-left: 3px solid #10b981; }


/* ══════════════════════════════════════════════════════════════════════
   NEWSLETTER CTA
   ══════════════════════════════════════════════════════════════════════ */

.brizz-newsletter {
    margin: 32px 0;
    padding: 32px 20px;
    background: var(--brizz-bg-light);
    border-radius: 8px;
    border: 1px solid var(--brizz-g200);
    text-align: center;
}

.brizz-newsletter__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brizz-g900);
    margin: 0 0 8px;
}

.brizz-newsletter__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    color: var(--brizz-g500);
    margin: 0 0 20px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.brizz-newsletter__form-wrap {
    display: flex;
    gap: 8px;
    max-width: 440px;
    margin: 0 auto 12px;
}

.brizz-newsletter__input {
    flex: 1;
    padding: 10px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    border: 1px solid var(--brizz-g300);
    border-radius: 8px;
    outline: none;
    transition: border-color 200ms ease-out;
    min-height: 44px; /* WCAG touch target */
}

.brizz-newsletter__input:focus {
    border-color: var(--brizz-primary);
    box-shadow: 0 0 0 2px rgba(104, 19, 165, 0.15);
}

.brizz-newsletter__btn {
    padding: 10px 20px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brizz-white);
    background: var(--brizz-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 200ms ease-out;
    min-height: 44px; /* WCAG touch target */
    white-space: nowrap;
}

.brizz-newsletter__btn:hover {
    background: var(--brizz-primary); /* v5.5: unified to primary */
}

.brizz-newsletter__btn:focus-visible {
    outline: 2px solid var(--brizz-primary);
    outline-offset: 2px;
}

.brizz-newsletter__privacy {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--brizz-g400);
    margin: 0;
}

.brizz-newsletter__privacy a {
    color: var(--brizz-primary);
}


/* ══════════════════════════════════════════════════════════════════════
   STICKY SECTION NAV BAR — v5.7 unified capsule pills
   ══════════════════════════════════════════════════════════════════════ */

.brizz-sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20; /* Below header at 50 */
    background: var(--brizz-white);
    border-bottom: 1px solid var(--brizz-g200);
    transform: translateY(-100%); /* Hidden: slides above viewport */
    transition: transform 300ms ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Visible: slides down to sit below header — uses JS-measured --header-h */
.brizz-sticky-nav[data-visible="true"] {
    transform: translateY(var(--header-h, 46px));
}

/* Progress Bar */
.brizz-sticky-nav__progress {
    height: 3px;
    background: var(--brizz-g100);
    overflow: hidden;
}

.brizz-sticky-nav__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--brizz-secondary, #FF304D);
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Capsule Pill Strip — visible on mobile + desktop */
.brizz-sticky-nav__pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 16px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brizz-primary) rgba(104, 19, 165, 0.12);
}

@media (min-width: 769px) {
    .brizz-sticky-nav__pills {
        gap: 8px;
        padding: 8px 24px 10px;
    }
}

/* Purple branded scrollbar */
.brizz-sticky-nav__pills::-webkit-scrollbar {
    height: 3px;
}

.brizz-sticky-nav__pills::-webkit-scrollbar-track {
    background: rgba(104, 19, 165, 0.12);
    border-radius: 2px;
}

.brizz-sticky-nav__pills::-webkit-scrollbar-thumb {
    background: var(--brizz-primary);
    border-radius: 2px;
}

/* Individual Pill — Inactive */
.brizz-sticky-nav__pill {
    padding: 5px 12px;
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: var(--brizz-white);
    color: var(--brizz-g900); /* v5.7: black inactive text */
    font-size: 11px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid rgba(104, 19, 165, 0.25);
    box-shadow: none;
}

@media (min-width: 769px) {
    .brizz-sticky-nav__pill {
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* Individual Pill — Active */
.brizz-sticky-nav__pill--active {
    background: var(--brizz-primary);
    color: var(--brizz-white);
    border-color: var(--brizz-primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(104, 19, 165, 0.35);
}

/* Pill emoji icon */
.brizz-sticky-nav__pill-icon {
    margin-right: 4px;
}


/* ═══ FAB Button — Mobile only ═══ */

.brizz-sticky-nav__fab {
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: var(--brizz-primary);
    color: var(--brizz-white);
    font-size: 18px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 20px rgba(104, 19, 165, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.brizz-sticky-nav__fab:active {
    transform: scale(0.95);
}

/* Hide FAB on desktop */
@media (min-width: 769px) {
    .brizz-sticky-nav__fab {
        display: none;
    }
}


/* ═══ Mobile Bottom Sheet ═══ */

.brizz-section-sheet {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    align-items: flex-end;
}

.brizz-section-sheet[hidden] {
    display: none;
}

.brizz-section-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.brizz-section-sheet__content {
    position: relative;
    width: 100%;
    max-height: 60vh;
    background: var(--brizz-white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 80px; /* Extra bottom for FAB clearance */
}

.brizz-section-sheet__header {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--brizz-g900);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.brizz-section-sheet__chevron {
    font-size: 14px;
    color: var(--brizz-primary);
    display: inline-block;
    transform: rotate(90deg);
    line-height: 1;
}

.brizz-section-sheet__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brizz-section-sheet__row {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease;
}

.brizz-section-sheet__row:hover {
    background: var(--brizz-g50);
}

.brizz-section-sheet__row--active {
    background: var(--brizz-bg-light, #f3f0f8);
}

.brizz-section-sheet__row-chevron {
    font-size: 14px;
    color: var(--brizz-g400);
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease, color 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
}

.brizz-section-sheet__row--active .brizz-section-sheet__row-chevron {
    color: var(--brizz-primary);
    transform: rotate(90deg);
}

.brizz-section-sheet__row-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.brizz-section-sheet__row-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--brizz-g900); /* v5.7: black inactive */
    font-weight: 400;
}

.brizz-section-sheet__row--active .brizz-section-sheet__row-label {
    color: var(--brizz-primary);
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR NAV — v5.7 card style
   ══════════════════════════════════════════════════════════════════════ */

.brizz-floating-nav {
    display: none; /* Hidden on mobile — FAB replaces it */
}

.brizz-floating-nav__card {
    position: sticky;
    top: 100px; /* Below Nav 46px + StickyBar ~54px */
    background: var(--brizz-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--brizz-g200);
    padding: 12px 8px;
}

.brizz-floating-nav__title {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--brizz-g900);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--brizz-g100);
    margin-bottom: 4px;
}

.brizz-floating-nav__list {
    margin: 0;
    padding: 0;
}

/* Section Item — uses <a> tags */
.brizz-floating-nav__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 1px;
    cursor: pointer;
    background: transparent;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}

.brizz-floating-nav__item:hover {
    background: var(--brizz-g50);
}

/* Active state — left-border accent + bgLight */
.brizz-floating-nav__item--active {
    border-left-color: var(--brizz-primary);
    background: var(--brizz-bg-light, #f3f0f8);
}

.brizz-floating-nav__icon {
    font-size: 12px;
    flex-shrink: 0;
}

.brizz-floating-nav__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--brizz-g900); /* v5.7: black inactive */
}

.brizz-floating-nav__item--active .brizz-floating-nav__label {
    color: var(--brizz-primary);
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════
   AD SLOTS — Reserved Dimensions (CLS-safe, §5, §8)
   ══════════════════════════════════════════════════════════════════════ */

.brizz-ad {
    contain: layout style;
    margin: 24px 0;
    text-align: center;
}

.brizz-ad--empty {
    /* Collapse gracefully when no ad assigned (non-admin) */
    display: none;
}

/* Show placeholder to admins */
body.logged-in .brizz-ad--empty {
    display: block;
    background: var(--brizz-g100);
    border: 2px dashed var(--brizz-g300);
    border-radius: 8px;
    padding: 20px;
    font-size: 0.75rem;
    color: var(--brizz-g400);
}

/* 16:9 native ad format (per Kalyan — no AdSense) */
.brizz-ad__native {
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.brizz-ad__native img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brizz-ad__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    color: var(--brizz-g400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════════
   RELATED GUIDES GRID
   ══════════════════════════════════════════════════════════════════════ */

.brizz-related-guides {
    margin: 48px 0 32px;
}

.brizz-related-guides__title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brizz-g900);
    margin: 0 0 16px;
}

.brizz-related-guides__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.brizz-related-guides__card {
    display: block;
    padding: 16px;
    background: var(--brizz-white);
    border: 1px solid var(--brizz-g200);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.brizz-related-guides__card:hover {
    border-color: var(--brizz-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.brizz-related-guides__card-cat {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--brizz-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.brizz-related-guides__card-title {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--brizz-g900);
    margin: 0 0 6px;
    line-height: 1.3;
}

.brizz-related-guides__card-meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem; /* 12px — wireframe secondary text range */
    color: var(--brizz-g700); /* v5.4 secondary text */
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP (min-width: 1024px)
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

    .brizz-post__title {
        font-size: 1.875rem; /* 30px desktop */
    }

    .brizz-post__header-inner {
        padding: 20px 0 0;
    }

    .brizz-post__subtitle {
        font-size: 0.875rem; /* 14px */
    }

    /* Sidebar + Content layout */
    .brizz-post__layout {
        display: flex;
        gap: 24px; /* v5.2 DesignSystemRef */
    }

    .brizz-floating-nav {
        display: block;
        width: 180px; /* v5.7 spec */
        flex-shrink: 0;
        order: 2; /* Right side */
    }

    .brizz-post__main {
        flex: 1;
        max-width: 680px;
        padding: 16px 0 64px;
        order: 1;
        overflow: visible; /* v5.8: allow table bleed beyond 680px */
    }

    /* Platform CTA grid: 3 columns */
    .brizz-platform-cta__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Related guides: 2 columns */
    .brizz-related-guides__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .brizz-section-h2 h2,
    .brizz-post__content > h2 {
        font-size: 1.375rem; /* 22px desktop — wireframe v5.2 */
    }

    .brizz-section-h3 h3,
    .brizz-post__content > h3 {
        font-size: 1.125rem; /* 18px desktop — wireframe v5.1 */
    }

    .brizz-section-h4 h4,
    .brizz-post__content > h4 {
        font-size: 0.9375rem; /* 15px desktop — wireframe v5.1 */
    }

    .brizz-section-h5 h5,
    .brizz-post__content > h5 {
        font-size: 0.875rem; /* 14px desktop */
    }

    .brizz-post__content {
        font-size: 0.9375rem; /* 15px desktop — v5.5 readability bump */
    }

    /* BrizzCTA desktop — wireframe v5.4 */
    .brizz-cta {
        padding: 20px 24px;
    }

    .brizz-cta__title {
        font-size: 1.125rem; /* 18px desktop */
    }

    /* FAQ desktop — v5.7 token table */
    .brizz-faq__question {
        padding: 12px 16px;
        font-size: 0.9375rem; /* 15px desktop — v5.7 token table */
    }

    .brizz-faq__answer {
        padding: 0 16px 12px;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (min-width: 768px)
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

    .brizz-post__title {
        font-size: 2rem;
    }

    .brizz-post__main {
        padding: 32px 24px 48px;
    }

    .brizz-newsletter__form-wrap {
        flex-direction: row;
    }

    .brizz-platform-cta__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .brizz-related-guides__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES (max-width: 767px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .brizz-newsletter__form-wrap {
        flex-direction: column;
    }

    .brizz-newsletter__btn {
        width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   FOCUS STATES — Global (§4.5, §12.2)
   "Focus indicators: 2px solid #6813A5, offset 2px — never removed."
   ══════════════════════════════════════════════════════════════════════ */

.brizz-post a:focus-visible,
.brizz-post button:focus-visible,
.brizz-post summary:focus-visible,
.brizz-post input:focus-visible {
    outline: 2px solid var(--brizz-primary);
    outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ══════════════════════════════════════════════════════════════════════ */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal;
}

.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    background: var(--brizz-white);
    color: var(--brizz-primary);
    font-size: 1rem;
    padding: 12px 16px;
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}