/**
 * Shetha Naji - Astra Override Stylesheet
 * Loads at priority 9999 AFTER all Astra styles.
 * Every rule uses high specificity + !important to guarantee it wins.
 *
 * @package    Shetha Naji Theme
 * @author     Cheshire Cat Marketing
 */

/* ─── KILL ASTRA WRAPPERS ─────────────────────────────────────── */

body.sn-fullwidth #page,
body.sn-fullwidth #page .site-content,
body.sn-fullwidth #page #content,
body.sn-fullwidth #page .ast-container,
body.sn-fullwidth #page #primary,
body.sn-fullwidth #page .content-area,
body.sn-fullwidth #page main,
body.sn-fullwidth #page .site-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    float: none !important;
}

body.sn-fullwidth .ast-separate-container .ast-article-single,
body.sn-fullwidth .ast-separate-container .ast-article-post,
body.sn-fullwidth .ast-separate-container article,
body.sn-fullwidth .ast-plain-container article,
body.sn-fullwidth article.page,
body.sn-fullwidth article.post,
body.sn-fullwidth article.type-sn_treatment,
body.sn-fullwidth article.type-sn_concern {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.sn-fullwidth .entry-content,
body.sn-fullwidth .page-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* Kill Astra page header / breadcrumb gap */
body.sn-fullwidth .ast-archive-description,
body.sn-fullwidth .entry-header,
body.sn-fullwidth .page-header,
body.sn-fullwidth .ast-breadcrumbs-wrapper,
body.sn-fullwidth .ast-single-post-order {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kill Astra header/footer remnants */
body.sn-custom-header #masthead,
body.sn-custom-header .site-header,
body.sn-custom-header .main-header-bar,
body.sn-custom-header .ast-primary-header,
body.sn-custom-header .ast-above-header,
body.sn-custom-header .ast-below-header,
body.sn-custom-header .ast-mobile-header-wrap {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.sn-custom-footer .site-footer,
body.sn-custom-footer #colophon,
body.sn-custom-footer .ast-footer-overlay,
body.sn-custom-footer .ast-small-footer {
    display: none !important;
}


/* ─── HEADER NAV ──────────────────────────────────────────────── */

.sn-header .sn-header__nav a,
.sn-header .sn-header__nav .sn-header__dropdown-toggle {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.sn-header .sn-header__nav a:hover,
.sn-header .sn-header__nav a.is-active,
.sn-header .sn-header__nav .sn-header__dropdown-toggle:hover {
    color: #b8876f !important;
}


/* ─── DROPDOWN MENUS ──────────────────────────────────────────── */

.sn-header .sn-header__dropdown {
    position: relative !important;
    padding-bottom: 15px !important;
    margin-bottom: -15px !important;
}

.sn-header .sn-header__dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

.sn-header .sn-header__dropdown-toggle svg {
    width: 10px !important;
    height: 6px !important;
    transition: transform 0.15s ease !important;
    flex-shrink: 0 !important;
}

.sn-header .sn-header__dropdown:hover .sn-header__dropdown-toggle svg {
    transform: rotate(180deg) !important;
}

.sn-header .sn-header__dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 260px !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 20px 0 12px !important;
    background: #FDFCFA !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 15px 50px rgba(25,36,49,0.18), 0 5px 15px rgba(25,36,49,0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
    z-index: 500 !important;
}

/* Bridge: invisible hover zone between toggle and dropdown */
.sn-header .sn-header__dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
    border: none !important;
}

.sn-header .sn-header__dropdown:hover .sn-header__dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sn-header .sn-header__dropdown-menu a.sn-header__dropdown-link,
.sn-header .sn-header__dropdown-menu .sn-header__dropdown-link {
    display: block !important;
    padding: 8px 24px !important;
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #192431 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    background: transparent !important;
}

.sn-header .sn-header__dropdown-menu a.sn-header__dropdown-link:hover {
    background: #F5F0E8 !important;
    color: #9E6A55 !important;
}

.sn-header .sn-header__dropdown-divider {
    height: 1px !important;
    margin: 8px 24px !important;
    background: rgba(196,181,165,0.3) !important;
    border: none !important;
}


/* ─── BUTTONS (reset Astra's aggressive styling) ──────────────── */

body .sn-btn,
body button.sn-btn,
body a.sn-btn,
body .sn-header .sn-btn,
body .sn-footer .sn-btn,
body .sn-cta .sn-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

body .sn-btn--primary,
body a.sn-btn--primary,
body button.sn-btn--primary {
    background: linear-gradient(145deg, #C9A38B 0%, #9E6A55 40%, #7D5443 100%) !important;
    color: #FDFCFA !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 8px rgba(158,106,85,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1) !important;
}

body .sn-btn--primary:hover {
    background: linear-gradient(145deg, #D4AE96 0%, #A97A65 40%, #8B5F4E 100%) !important;
    box-shadow: 0 4px 14px rgba(158,106,85,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-1px) !important;
}

body .sn-btn--outline,
body a.sn-btn--outline {
    background: transparent !important;
    color: #192431 !important;
    border: 1px solid #192431 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body .sn-btn--outline:hover {
    background: #192431 !important;
    color: #FDFCFA !important;
}

body .sn-btn--white-outline,
body a.sn-btn--white-outline {
    background: transparent !important;
    color: #FDFCFA !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: none !important;
}

body .sn-btn--white-outline:hover {
    background: #FDFCFA !important;
    color: #192431 !important;
}


/* ─── FOOTER ──────────────────────────────────────────────────── */

.sn-footer {
    background: #192431 !important;
    color: #FDFCFA !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sn-footer .sn-footer__grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    gap: 2.5rem !important;
}

.sn-footer .sn-footer__logo-img {
    height: 90px !important;
    width: auto !important;
    max-width: 90px !important;
}

.sn-footer .sn-footer__social {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
}

.sn-footer .sn-footer__social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    color: #FDFCFA !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.sn-footer .sn-footer__social a:hover {
    background: #9E6A55 !important;
}

.sn-footer .sn-footer__social a svg,
.sn-footer .sn-footer__social svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0 !important;
}

.sn-footer .sn-footer__col-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sn-footer .sn-footer__col-links li {
    list-style: none !important;
}

.sn-footer .sn-footer__col-links a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
}

.sn-footer .sn-footer__col-links a:hover {
    color: #FDFCFA !important;
}

@media (max-width: 768px) {
    .sn-footer .sn-footer__grid {
        grid-template-columns: 1fr !important;
    }
}


/* ─── FAQ BUTTONS (Astra styles all buttons) ──────────────────── */

body .sn-faq__q,
body button.sn-faq__q {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 1.5rem 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #192431 !important;
    line-height: 1.3 !important;
}

body .sn-faq__q:hover {
    color: #9E6A55 !important;
}


/* ─── HAMBURGER TOGGLE (Astra styles buttons) ────────────────── */

body .sn-header__toggle,
body button.sn-header__toggle {
    display: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px !important;
    cursor: pointer !important;
}

@media (max-width: 1024px) {
    body .sn-header__toggle,
    body button.sn-header__toggle {
        display: block !important;
    }
}


/* ─── KILL THE GAP BETWEEN HEADER AND CONTENT ─────────────────── */
/* Astra adds spacing via multiple wrappers. Zero them all. */

body.sn-fullwidth #page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.sn-fullwidth .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Astra sometimes adds a transparent header spacer */
body.sn-fullwidth .ast-above-header,
body.sn-fullwidth .ast-below-header,
body.sn-fullwidth .ast-header-break-point .site-header,
body.sn-fullwidth .ast-mobile-header-wrap,
body.sn-fullwidth .ast-main-header-wrap {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force first child of content area to have no extra top margin */
body.sn-fullwidth #primary > *:first-child,
body.sn-fullwidth main > *:first-child,
body.sn-fullwidth .site-main > *:first-child,
body.sn-fullwidth article > *:first-child,
body.sn-fullwidth .entry-content > *:first-child {
    margin-top: 0 !important;
}

/* Some Astra layouts add top padding to #content based on header height */
body.sn-fullwidth .ast-plain-container #content,
body.sn-fullwidth .ast-page-builder-template #content {
    padding-top: 0 !important;
}


/* ─── ACCESSIBILITY ───────────────────────────────────────────── */

/* Skip to content link */
.sn-skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}
.sn-skip-link:focus {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    background: #192431 !important;
    color: #FDFCFA !important;
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    outline: 2px solid #9E6A55 !important;
    outline-offset: 2px !important;
}

/* Focus-visible styles for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: 2px !important;
}

/* Specific focus styles for nav items */
.sn-header .sn-header__nav a:focus-visible,
.sn-header .sn-header__dropdown-toggle:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}

.sn-header .sn-header__dropdown-link:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: -2px !important;
    background: #F5F0E8 !important;
    color: #9E6A55 !important;
}

/* Button focus */
body .sn-btn:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: 3px !important;
}

body .sn-btn--primary:focus-visible {
    outline-color: #FDFCFA !important;
}

/* Footer link focus */
.sn-footer a:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: 2px !important;
}

/* Form field focus (contact page) */
.sn-ct-field__input:focus-visible,
.sn-ct-field__select:focus-visible,
.sn-ct-field__textarea:focus-visible {
    outline: none !important;
    border-color: #9E6A55 !important;
    box-shadow: 0 0 0 3px rgba(158,106,85,0.15) !important;
}

/* FAQ button focus */
body .sn-faq__q:focus-visible {
    outline: 2px solid #9E6A55 !important;
    outline-offset: 4px !important;
}

/* Fix failing contrast: replace #9CA3AF (3.0:1) with #6B7280 (5.1:1) for small text */
/* This targets Astra's default muted text that might use the lighter grey */
.sn-footer__col-links a,
.sn-ct-form__note,
.sn-dash__stat-label {
    color: #6B7280 !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto !important; }
}


/* ─── WIDE DROPDOWN (concerns - 2 columns) ────────────────────── */

.sn-header .sn-header__dropdown-menu--wide {
    min-width: 480px !important;
    max-height: none !important;
    overflow-y: visible !important;
    column-count: 2 !important;
    column-gap: 0 !important;
    transform: translateX(-50%) !important;
}

.sn-header .sn-header__dropdown-menu--wide .sn-header__dropdown-link {
    break-inside: avoid !important;
}

.sn-header .sn-header__dropdown-menu--wide .sn-header__dropdown-divider {
    column-span: all !important;
}

@media (max-width: 768px) {
    .sn-header .sn-header__dropdown-menu--wide {
        min-width: 260px !important;
        column-count: 1 !important;
    }
}


/* ─── HOMEPAGE HERO FIX (v1.1.5) ──────────────────────────────
 * Earlier versions of front-page.php had a CSS bug combo that made
 * the hero full-viewport-height with vertically-centered content,
 * producing a massive empty band above the title. Fix shipped in
 * the inline template CSS in v1.1.3 — but inline CSS lives in the
 * HTML response and gets cached by Cloudflare / hosting / browser.
 * This override lives in the version-busted CSS file, so it forces
 * the correction even when cached HTML is being served.
 *
 * Resets needed: min-height (was calc(100vh - 100px)), display
 * (was flex), padding (shorthand was wiping padding-top), and
 * align-items on the grid container.
 */

body .sn-hero {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    padding-top: 120px !important;
    padding-bottom: var(--sn-space-16, 4rem) !important;
}

@media (max-width: 1024px) {
    body .sn-hero {
        padding-top: 130px !important;
    }
}

@media (max-width: 768px) {
    body .sn-hero {
        padding-top: 110px !important;
        padding-bottom: var(--sn-space-12, 3rem) !important;
    }
}

/* Signature stack — defensive reset against Astra block spacing AND
 * against the older broken markup that wrapped the three lines in
 * an extra <div> and used flex on the parent. */
body .sn-hero .sn-hero__signature {
    display: block !important;
    margin: 0 0 var(--sn-space-8, 2rem) 0 !important;
    padding: 0 !important;
}
body .sn-hero .sn-hero__signature > div {
    margin: 0 !important;
    padding: 0 !important;
}
body .sn-hero .sn-hero__signature-name {
    line-height: 1.3 !important;
    margin: 0 !important;
}
body .sn-hero .sn-hero__signature-title {
    line-height: 1.4 !important;
    margin: 2px 0 0 0 !important;
}
body .sn-hero .sn-hero__credentials {
    line-height: 1.4 !important;
    margin: 6px 0 0 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* Hub-style heroes (centered text on home.php, treatments-hub,
 * concerns-hub, contact). These templates had the same padding-
 * shorthand bug. Defensive reset so cached HTML can't bring it back. */
body .sn-jn-hero,
body .sn-ct-hero,
body .sn-hub-hero {
    min-height: 0 !important;
    display: block !important;
    padding-top: 200px !important;
    padding-bottom: var(--sn-space-12, 3rem) !important;
}

@media (max-width: 768px) {
    body .sn-jn-hero,
    body .sn-ct-hero,
    body .sn-hub-hero {
        padding-top: 150px !important;
        padding-bottom: var(--sn-space-10, 2.5rem) !important;
    }
}


/* ─── TEXT ON DARK BACKGROUNDS ─────────────────────────────────── */
/* Astra sets heading colors globally. These must override with !important */

/* White headings on ALL dark sections */
body .sn-sw-hero h1,
body .sn-sw-hero h2,
body .sn-sw-hero h3,
body .sn-sw-hero .sn-sw-hero__title,
body .sn-spotlight h1,
body .sn-spotlight h2,
body .sn-spotlight h3,
body .sn-spotlight__title,
body .sn-hub-featured h1,
body .sn-hub-featured h2,
body .sn-hub-featured h3,
body .sn-hub-featured__title,
body .sn-cta--navy h1,
body .sn-cta--navy h2,
body .sn-cta--navy h3,
body .sn-cta--navy .sn-cta__title,
body .sn-cn-hero h1,
body .sn-cn-hero h2,
body .sn-cn-hero__title,
body .sn-post-hero h1,
body .sn-post-hero h2 {
    color: #FDFCFA !important;
}

/* White body text on dark sections */
body .sn-sw-hero p,
body .sn-sw-hero__subtitle,
body .sn-spotlight p,
body .sn-spotlight__text,
body .sn-hub-featured p,
body .sn-hub-featured__text,
body .sn-cta--navy p,
body .sn-cta--navy .sn-cta__text,
body .sn-cn-hero p,
body .sn-cn-hero__subtitle,
body .sn-post-hero p {
    color: rgba(255,255,255,0.8) !important;
}

/* Rose gold labels on dark sections */
body .sn-sw-hero__badge,
body .sn-spotlight__label,
body .sn-hub-featured__label,
body .sn-cta--navy .sn-cta__label {
    color: #b8876f !important;
}


/* ─── MOBILE MENU CENTERING ───────────────────────────────────── */

body .sn-mobile-menu__nav,
body ul.sn-mobile-menu__nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

body .sn-mobile-menu__nav li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
    text-align: center !important;
}

body .sn-mobile-menu__cta {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

body .sn-mobile-menu__contact {
    text-align: center !important;
    width: 100% !important;
}

/* ============================================================
   Section spacing — mobile tightening (v1.7.2)
   Every major section on every template uses space-14 (56px) on
   desktop. On narrow viewports that's too airy — halve it.
   Targets every section class that carries `padding:var(--sn-space-14) 0`
   without re-declaring every one individually.
   ============================================================ */
@media (max-width: 768px) {
    .sn-body,
    .sn-cards,
    .sn-faq,
    .sn-tr-ba,
    .sn-cta,
    .sn-sw-body,
    .sn-sw-case,
    .sn-sw-areas,
    .sn-reviews,
    .sn-treatments,
    .sn-spotlight,
    .sn-instagram,
    .sn-fp-cta,
    .sn-ab-section,
    .sn-ab-quote,
    .sn-ab-accred,
    .sn-jn-grid,
    .sn-hub-grid,
    .sn-hub-featured,
    .sn-cnhub-grid,
    .sn-post-body,
    .sn-ct-body,
    .sn-footer__main {
        padding-top: var(--sn-space-10) !important;
        padding-bottom: var(--sn-space-10) !important;
    }

    /* Internal spacing between headings and their section content — tighten */
    .sn-ab-section__grid {
        gap: var(--sn-space-6) !important;
    }
    .sn-cards__header,
    .sn-faq__header,
    .sn-tr-ba__header,
    .sn-reviews__header {
        margin-bottom: var(--sn-space-6) !important;
    }
    /* Section titles don't need the same dramatic scale on mobile */
    .sn-tr-ba__title,
    .sn-faq__title,
    .sn-cta__title {
        font-size: var(--sn-text-2xl) !important;
    }
}

/* ==========================================================================
   Astra scroll-to-top widget — override default rose/orange fill that's
   conflicting with our palette. Force to navy with white chevron, or hide
   it entirely if we don't want it. Astra uses #ast-scroll-top.
   ========================================================================== */
#ast-scroll-top,
.ast-scroll-to-top {
    background-color: var(--sn-navy) !important;
    color: #FDFCFA !important;
    border: 0 !important;
    box-shadow: 0 4px 14px rgba(25, 36, 49, .25) !important;
    border-radius: 50% !important;
    transition: background-color var(--sn-transition-fast), transform var(--sn-transition-fast) !important;
}
#ast-scroll-top:hover,
.ast-scroll-to-top:hover {
    background-color: var(--sn-rose) !important;
    color: #FDFCFA !important;
    transform: translateY(-2px);
}
#ast-scroll-top svg,
#ast-scroll-top .ast-arrow-svg,
.ast-scroll-to-top svg {
    fill: #FDFCFA !important;
    color: #FDFCFA !important;
}

/* ==========================================================================
   MOBILE POLISH PASS (v1.7.46)
   ==========================================================================
   Focused on touch targets, thumb reach, readability, and spacing on
   phone-sized viewports. Desktop layout unchanged. Priority is making
   every interactive element easily tappable without mis-fires, and
   reducing vertical page length so users don't scroll fatigue.
   ========================================================================== */

@media (max-width: 768px) {

    /* -----------------------------------------------------------
       1. TOUCH TARGETS — enforce 44×44px minimum everywhere
       Apple HIG recommends 44pt min; Material 48dp. 44px is the
       pragmatic floor. Previously the footer social icons were
       40px and the BA carousel arrows were 40px — both miss the
       minimum and make one-handed tapping error-prone.
       ----------------------------------------------------------- */

    .sn-footer__social a {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .sn-sw-ba__nav {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
    .sn-sw-ba__nav svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Carousel pagination dots — bump to a comfortable tap zone
       with an invisible hit area (the visible dot stays small). */
    .sn-sw-ba__dots {
        gap: 0 !important;
    }
    .sn-sw-ba__dot {
        position: relative;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 12px !important;
        background: transparent !important;
    }
    .sn-sw-ba__dot::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(25, 36, 49, .2);
        transition: background var(--sn-transition-fast), transform var(--sn-transition-fast);
    }
    .sn-sw-ba__dot.is-active::before {
        background: var(--sn-rose);
        transform: translate(-50%, -50%) scale(1.35);
    }

    /* FAQ accordion buttons — already roomy via padding, but make
       sure the tap area extends full-width so thumb-at-edge still
       triggers open/close. */
    .sn-faq__q {
        min-height: 56px !important;
    }

    /* Any inline phone/email links in contact details — make tap
       area larger vertically so fat fingers don't miss. */
    .sn-ct-detail__value a {
        display: inline-block;
        padding: 4px 0;
        min-height: 28px;
    }
    .sn-ct-detail__whatsapp {
        min-height: 44px !important;
        padding: var(--sn-space-2) 0;
    }

    /* -----------------------------------------------------------
       2. PRIMARY BUTTONS — full-width by default on mobile
       Hero/CTA buttons should span the content column so they're
       easy to hit with a thumb. Keeps them visible and inviting.
       ----------------------------------------------------------- */

    /* Don't override buttons that are already full-width (forms,
       carousels, navs). Only affect primary CTAs inside content
       sections. */
    .sn-cn-hero__content .sn-btn,
    .sn-hub-hero .sn-btn,
    .sn-ct-hero .sn-btn,
    .sn-ab-hero__content .sn-btn,
    .sn-fp-cta__inner .sn-btn,
    .sn-tr-hero__ctas .sn-btn,
    .sn-spotlight__cta .sn-btn {
        width: 100%;
        max-width: 320px;
        min-height: 52px;
        justify-content: center;
    }

    /* Stack any .sn-hero__ctas or hero button groups so they fill
       column width rather than cramming into a horizontal row. */
    .sn-tr-hero__ctas,
    .sn-hub-hero__ctas,
    .sn-spotlight__cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sn-space-3);
    }

    /* -----------------------------------------------------------
       3. SECTION PADDING — reduce vertical bloat on mobile
       Desktop's space-16/20 (64/80px) padding per section creates
       a very long scroll on a 667-896px tall mobile viewport.
       Trim to space-10/12 (40/48px) for a tighter rhythm.
       ----------------------------------------------------------- */

    .sn-hub-grid,
    .sn-hub-featured,
    .sn-ab-section,
    .sn-ab-accred,
    .sn-sw-ba,
    .sn-sw-videos,
    .sn-sw-faq,
    .sn-tr-ba,
    .sn-tr-cards,
    .sn-tr-faq,
    .sn-cn-body,
    .sn-cn-treatments,
    .sn-reviews,
    .sn-ct-body,
    .sn-ct-media,
    .sn-instagram,
    .sn-fp-cta,
    .sn-spotlight,
    .sn-cards,
    .sn-tr-areas-image {
        padding-top: var(--sn-space-12) !important;
        padding-bottom: var(--sn-space-12) !important;
    }

    /* Headers are tighter too — reduce the gap between a section
       title and its content */
    .sn-hub-hero,
    .sn-ab-hero,
    .sn-ct-hero,
    .sn-cn-hero,
    .sn-tr-hero {
        padding-bottom: var(--sn-space-8) !important;
    }

    /* -----------------------------------------------------------
       4. TYPOGRAPHY — balance readability against screen real estate
       Hero titles at desktop size look monumental on mobile but eat
       too much vertical space. Scale them down while keeping them
       elegant. Body text stays at 16px (iOS focus-zoom prevention).
       ----------------------------------------------------------- */

    .sn-hub-hero__title,
    .sn-ab-hero__title,
    .sn-ct-hero__title,
    .sn-cn-hero__title,
    .sn-tr-hero__title,
    .sn-fp-hero__title {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        line-height: 1.15 !important;
    }

    /* Section titles (h2s) are more controlled */
    .sn-ab-section h2,
    .sn-sw-ba__title,
    .sn-sw-videos__title,
    .sn-cn-treatments__title,
    .sn-tr-ba__title,
    .sn-tr-cards__title,
    .sn-cta__title,
    .sn-fp-cta__title,
    .sn-reviews__title,
    .sn-instagram__title,
    .sn-cards__title {
        font-size: var(--sn-text-2xl) !important;
        line-height: 1.2 !important;
    }

    /* Body copy — keep at 16px everywhere for legibility */
    .sn-ab-section p,
    .sn-ab-hero__text,
    .sn-ct-hero__text,
    .sn-cn-hero__text,
    .sn-tr-hero__text,
    .sn-fp-hero__text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* -----------------------------------------------------------
       5. HORIZONTAL OVERFLOW PROTECTION
       Prevent any runaway element from causing horizontal scroll.
       Long words, fixed-width inline elements, and overflowing
       images are the usual culprits. Also a sitewide clip on html.
       ----------------------------------------------------------- */

    html, body {
        overflow-x: hidden;
    }
    img, video, iframe {
        max-width: 100%;
    }

    /* -----------------------------------------------------------
       6. CONTACT FORM — thumb-friendly submission
       Make the form feel immediate on mobile: inputs tall enough
       to tap cleanly, generous spacing between fields to avoid
       mis-taps on adjacent controls, submit button prominent.
       ----------------------------------------------------------- */

    .sn-ct-field {
        margin-bottom: var(--sn-space-5) !important;
    }
    .sn-ct-field__input,
    .sn-ct-field__select,
    .sn-ct-field__textarea {
        min-height: 52px !important;
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
    .sn-ct-field__textarea {
        min-height: 140px !important;
    }
    .sn-ct-form__submit {
        min-height: 56px !important;
        font-size: 1rem !important;
    }

    /* Row split collapses to single column for name+phone */
    .sn-ct-field__row {
        grid-template-columns: 1fr !important;
        gap: var(--sn-space-5) !important;
    }

    /* Form column: remove the top padding that was aligning H2s with
       the details box on desktop — on mobile they stack, no alignment
       needed, and the padding creates a weird gap before the form. */
    .sn-ct-form {
        padding-top: 0 !important;
    }

    /* -----------------------------------------------------------
       7. HEADER — breathing room so logo + hamburger don't crash
       Increase the tap zone around the hamburger and ensure the
       logo doesn't overlap it on narrow screens.
       ----------------------------------------------------------- */

    .sn-header__logo-img {
        height: 55px !important;
    }
    .sn-header__inner {
        padding: var(--sn-space-2) var(--sn-space-4) !important;
    }
    .sn-header__toggle {
        width: 48px !important;
        height: 48px !important;
    }

    /* -----------------------------------------------------------
       8. FOOTER — stack columns, centered alignment
       The 4-column desktop grid needs to stack gracefully. Add
       separators between sections so it doesn't feel like one
       long list.
       ----------------------------------------------------------- */

    .sn-footer__grid {
        grid-template-columns: 1fr !important;
        gap: var(--sn-space-8) !important;
        text-align: center;
    }
    .sn-footer__social {
        justify-content: center !important;
    }

    /* -----------------------------------------------------------
       9. CAROUSELS / MEDIA — ensure native swipe works smoothly
       iOS Safari has quirks with scroll-snap + momentum. Explicitly
       enable touch scrolling on carousel tracks.
       ----------------------------------------------------------- */

    .sn-sw-ba__track {
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--sn-gutter);
    }

    /* Video play overlays — bigger on mobile since thumbs are
       less precise than mouse cursors. */
    .sn-video-overlay__btn {
        width: 72px !important;
        height: 72px !important;
    }
    .sn-video-overlay__btn svg {
        width: 30px !important;
        height: 30px !important;
    }

    /* -----------------------------------------------------------
       10. REDUCE DECORATIVE ANIMATIONS on mobile
       Hover transforms, pulse animations, parallax — all feel
       jittery on touch devices where "hover" is ambiguous. Neutralise
       anything non-essential to preserve battery + smoothness.
       ----------------------------------------------------------- */

    .sn-cn-tcard:hover,
    .sn-hub-card:hover,
    .sn-card:hover,
    .sn-jn-post:hover {
        transform: none !important;
    }

    /* Respect user preference explicitly */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* -----------------------------------------------------------
       11. SAFE AREAS (iOS notch/home indicator)
       Ensure nothing critical sits in the camera-notch zone or
       the home-indicator swipe area.
       ----------------------------------------------------------- */

    .sn-header {
        padding-top: env(safe-area-inset-top, 0);
    }
    .sn-footer {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* -----------------------------------------------------------
       12. GRID IMAGES — reduce aspect-ratio dominance on mobile
       Concern cards have 160px tall images — that's fine. But
       hub featured cards have 400px images which eat half a
       mobile screen. Trim.
       ----------------------------------------------------------- */

    .sn-spotlight__image img {
        height: 280px !important;
    }
    .sn-hub-featured__image img,
    .sn-hub-featured__image {
        max-height: 280px !important;
    }

    /* -----------------------------------------------------------
       13. CONTACT MEDIA ROW (video + map) — tighter spacing
       ----------------------------------------------------------- */

    .sn-ct-media__video,
    .sn-ct-media__map {
        height: 320px !important;
    }

} /* end @media (max-width: 768px) */


/* ==========================================================================
   EXTRA-SMALL VIEWPORTS (≤420px) — iPhone SE, compact phones
   Further typography tightening and tighter button stacking.
   ========================================================================== */

@media (max-width: 420px) {
    .sn-hub-hero__title,
    .sn-ab-hero__title,
    .sn-ct-hero__title,
    .sn-cn-hero__title,
    .sn-tr-hero__title,
    .sn-fp-hero__title {
        font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important;
    }

    /* Pre-footer CTA button fills more of the screen */
    .sn-fp-cta__inner .sn-btn {
        max-width: 100% !important;
    }

    .sn-container {
        padding-left: var(--sn-space-4) !important;
        padding-right: var(--sn-space-4) !important;
    }
}


/* ─── AUTHOR BIO BYLINE & MODAL — override Astra button styling ──────
   Astra restyles every <button> with its default solid background and
   pill borders, which blows out our custom byline chip and modal close
   button. These rules force our colours back. */

body button.sn-post-body__author,
body .sn-post-body button.sn-post-body__author {
    background: var(--sn-champagne) !important;
    color: var(--sn-text-primary) !important;
    border: 1px solid var(--sn-border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-size: inherit !important;
    padding: var(--sn-space-5) !important;
    line-height: inherit !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

body button.sn-post-body__author:hover,
body .sn-post-body button.sn-post-body__author:hover {
    background: #FCF7F0 !important;
    border-color: var(--sn-rose) !important;
    color: var(--sn-text-primary) !important;
    transform: none !important;
}

body button.sn-post-body__author .sn-post-body__author-name {
    color: var(--sn-navy) !important;
}

body button.sn-author-modal__close {
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--sn-navy) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    text-shadow: none !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body button.sn-author-modal__close:hover {
    background: var(--sn-white) !important;
    color: var(--sn-navy) !important;
    transform: none !important;
}

/* Image inside the modal — protect from any Astra figure/img wrapper rules */
body .sn-author-modal__photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Avatar inside the byline — same protection */
body .sn-post-body__author-img {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* ─── BEFORE/AFTER COMPARE PANEL — Astra button override ──────────────
   The compare panel is a <button>. Without scoped !important rules
   Astra restyles it with its default solid-blue button background,
   producing a bright blue rectangle behind the image (visible during
   hover/focus, and across the whole panel when the image doesn't
   completely fill the aspect-ratio container). Force champagne
   background so the panel reads as a white/cream surface. */

body button.sn-tr-ba__comp-panel,
body button.sn-sw-ba__comp-panel {
    background: var(--sn-white) !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    transition: none !important;
}

body button.sn-tr-ba__comp-panel:hover,
body button.sn-sw-ba__comp-panel:hover,
body button.sn-tr-ba__comp-panel:focus,
body button.sn-sw-ba__comp-panel:focus {
    background: var(--sn-white) !important;
    color: inherit !important;
    transform: none !important;
}


/* ─── TYPOGRAPHY: WIDOW / RUNT PREVENTION ─────────────────────── */
/* `text-wrap: pretty` lets modern browsers (Chrome/Edge 117+, Safari
   17.4+, Firefox 124+) automatically rebalance lines so the final
   line doesn't end with a single orphaned word. Older browsers
   simply ignore this property — the PHP sn_widont() helper handles
   them where it matters most.

   Applied to display headings + body prose only. Skipped on lists,
   tables, code blocks where each item should keep its own wrap. */
h1, h2, h3, h4, h5, h6,
.sn-hub-hero__title, .sn-hub-hero__text,
.sn-hero__title, .sn-hero__subtitle,
.sn-hub-featured__title, .sn-hub-featured__text,
.sn-tr-hero__title, .sn-tr-hero__text,
.sn-cn-hero__title, .sn-cn-hero__text,
.sn-sw-hero__title, .sn-sw-hero__subtitle,
.sn-post-hero__title,
.sn-cta__title, .sn-cta__text,
.sn-treatments__title, .sn-treatments__subtitle,
.sn-faq__title,
.sn-ab-hero__title, .sn-ab-hero__text,
.sn-section__title, .sn-section__intro,
article.sn-post-body__content p {
    text-wrap: pretty;
}


/* ─── ASTRA LINK COLOR OVERRIDE ───────────────────────────────── */
/* Astra applies a global blue link hover colour via theme.json /
   :root --ast-global-color-1, which leaks through any anchor we
   haven't explicitly painted. The rule below pins ALL link states
   inside our scoped components (anything with class starting `sn-`)
   to currentColor so the parent's color value wins.

   :where() keeps specificity at zero so component-level rules with
   real colors continue to win — this is purely a safety net for
   anchors that don't define their own hover/visited states. */
:where([class*="sn-"]) a,
:where([class*="sn-"]) a:link,
:where([class*="sn-"]) a:visited,
:where([class*="sn-"]) a:hover,
:where([class*="sn-"]) a:focus,
:where([class*="sn-"]) a:active {
    color: inherit;
}

/* For specific anchors with their own brand color, make sure all
   states match. Wildcard suffix catches reviews link, more-link,
   read-more, view-link, etc. without listing each by name. */
a.sn-reviews__link,
a.sn-reviews__link:link,
a.sn-reviews__link:visited,
a.sn-reviews__link:hover,
a.sn-reviews__link:focus,
a.sn-reviews__link:active {
    color: var(--sn-rose) !important;
    text-decoration: none !important;
}
a.sn-reviews__link:hover,
a.sn-reviews__link:focus-visible {
    border-bottom-color: var(--sn-rose) !important;
}


/* ─── VIDEO ELEMENT BACKGROUND OVERRIDE ───────────────────────── */
/* Astra paints <video> elements with its global accent colour after
   playback ends (visible as a flash of brand-blue when the clip stops
   on the SN logo end-frame). Force every video inside our scoped
   wrappers to a transparent background so only the video content
   itself shows. */
video,
video.sn-video__el,
.sn-video-wrap video,
.sn-video-wrap .sn-video__el,
.sn-ab-video video,
.sn-ab-video__player,
.sn-sw-video video,
.sn-ct-video video {
    background: transparent !important;
    background-color: transparent !important;
    color: transparent !important;
}

/* The wrapper carries the brand cream so anything showing through a
   transparent video element matches the page rather than browser
   defaults. */
.sn-video-wrap,
.sn-ab-video,
.sn-sw-video,
.sn-ct-video {
    background-color: #FDFCFA !important;
}


/* ─── VIDEO STILL HOVER LOCK ──────────────────────────────────── */
/* The js-injected .sn-video-still img sits on top of the video
   element after playback ends. Astra (and some content-container
   rules) apply a hover background to images inside certain wrappers
   — that's the brand-blue tint appearing on hover. Lock everything
   in the video stack so no hover state can repaint it. */
.sn-video-wrap,
.sn-video-wrap:hover,
.sn-video-wrap:focus,
.sn-video-wrap:focus-within,
.sn-video-wrap.is-playing,
.sn-video-wrap .sn-video-still,
.sn-video-wrap .sn-video-still:hover,
.sn-video-wrap .sn-video__el,
.sn-video-wrap .sn-video__el:hover,
.sn-video-wrap video,
.sn-video-wrap video:hover {
    background: #FDFCFA !important;
    background-color: #FDFCFA !important;
    transition: none !important;
    filter: none !important;
}

.sn-video-wrap .sn-video-still {
    background: #FDFCFA !important;
    background-color: #FDFCFA !important;
}