/* ─────────────────────────────────────────────────────────────────────
   EAS SINGLE POST — FINAL SEAL PATCH
   APPEND to END of eas-single-post.css — do not replace anything
   Fixes: sticky sidebar, intent CTA overlay, header/footer, TOC
───────────────────────────────────────────────────────────────────── */


/* ── FIX 1: STICKY SIDEBAR ROOT CAUSE ───────────────────────────────────
   overflow-x:hidden on a parent creates a formatting context that kills
   position:sticky in every browser. Switch to overflow-x:clip which
   clips overflow visually without creating a formatting context.
   This is the single fix that unlocks sticky for margin col + sidebar.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root {
    overflow-x: clip !important; /* replaces hidden — sticky now works */
}

/* Sidebar sticky — correct top values for both admin-bar states */
.eas-st-root .eas-st-sidebar {
    position: sticky !important;
    top: 76px;           /* our nav height */
    align-self: start !important;
    overflow-y: visible;
    max-height: none;
}
.admin-bar .eas-st-root .eas-st-sidebar {
    top: 108px;          /* nav + WP admin bar (32px) */
}

/* Margin column sticky — same offsets */
.eas-st-root .eas-st-margin-col {
    position: sticky !important;
    top: 76px;
    align-self: start !important;
}
.admin-bar .eas-st-root .eas-st-margin-col {
    top: 108px;
}

/* Magazine body must not clip children */
.eas-st-root .eas-st-magazine-body {
    overflow: visible !important;
}


/* ── FIX 2: INTENT CTA — in-sidebar card, always relative ───────────────
   Sits inside sticky sidebar. Animates in at 55% scroll depth.
   Dismissible via × button — state persisted in sessionStorage.
───────────────────────────────────────────────────────────────────────── */
.eas-st-sb-intent {
    position: relative !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    background: var(--eas-paper) !important;
    border: 1px solid var(--eas-rule) !important;
    border-top: 3px solid var(--eas-accent) !important;
    box-shadow: 0 12px 40px rgba(30,26,21,.16) !important;
    padding: 22px 22px 20px !important;
    margin-top: 24px !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
}
.eas-st-sb-intent.eas-st-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}
.eas-st-sb-intent.eas-st-dismissed {
    display: none !important;
}
.eas-st-sb-intent-close {
    position: absolute;
    top: 10px; right: 14px;
    font-size: 16px;
    color: var(--eas-ink-4);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}


/* ── FIX 3: SUPPRESS FOXIZ HEADER + FOOTER ONLY ─────────────────────────
   Targets Foxiz/rb-* elements only. #eas-header and #eas-footer are the
   EAS custom nav/footer loaded via get_header()/get_footer() in single.php
   and must render — they are intentionally excluded from this list.
───────────────────────────────────────────────────────────────────────── */
.single #rb-header,
.single .rb-header,
.single #rb-footer,
.single .rb-footer,
.single .site-header,
.single .site-footer,
.single #foxiz-header,
.single #foxiz-footer,
.single [class*="rb-header"],
.single [class*="rb-footer"] {
    display: none !important;
}
/* Always keep WP admin bar */
.single #wpadminbar { display: flex !important; }


/* ── FIX 4: TOC CSS SUPPRESSION ─────────────────────────────────────────
   Belt-and-braces alongside the PHP content filter in functions.php.
   Catches any TOC block that survives the PHP strip.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .rb-toc,
.eas-st-root .foxiz-toc,
.eas-st-root .wp-block-foxiz-toc,
.eas-st-root [class*="rb-toc"],
.eas-st-root [class*="foxiz-toc"] {
    display: none !important;
}


/* ── FIX 5: NAV TOP OFFSET FOR ADMIN BAR ────────────────────────────────
   Our fixed nav sits at top:0. When admin bar present it needs offset.
───────────────────────────────────────────────────────────────────────── */
.admin-bar .eas-st-nav {
    top: 32px !important;
}


/* ── FIX 6: WATERMARK — FULLY REMOVED ───────────────────────────────────
   Real post images have dark areas where any opacity is visible.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .eas-st-title-wm {
    display: none !important;
}


/* ── FIX 7: BODY TEXT JUSTIFY (redundant belt-and-braces) ───────────────
───────────────────────────────────────────────────────────────────────── */
.eas-st-root .eas-st-copy p,
.eas-st-root .eas-st-copy > p {
    text-align: justify !important;
    text-justify: inter-word;
}


/* ── FIX 8: GUTENBERG CONTENT HEADING TYPOGRAPHY ────────────────────────
   eas-single-post.css surgical reset (line 66) sets font-weight:inherit
   on all h1–h4 inside .eas-st-root. The root has font-weight:300, so
   every Gutenberg h2/h3/h4 inside .eas-st-copy renders at 300 — identical
   to body text. These rules restore editorial weight for article headings.
───────────────────────────────────────────────────────────────────────── */
.eas-st-copy h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important;
    font-weight: 600 !important;
    color: var(--eas-ink) !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    margin-top: 56px !important;
    margin-bottom: 20px !important;
}
.eas-st-copy h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.15rem, 2.1vw, 1.6rem) !important;
    font-weight: 500 !important;
    color: var(--eas-ink) !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
}
.eas-st-copy h4 {
    font-family: 'Overpass Mono', monospace !important;
    font-size: .75rem !important;
    font-weight: 400 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--eas-accent) !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
}


/* ── FIX 9: POST CONTENT IMAGES — RESPONSIVE HEIGHT FIX ─────────────────
   Gutenberg adds width/height HTML attributes (e.g. width="1200" height="800")
   to all images for CLS prevention. eas-single-post.css has max-width:100%
   but no height:auto. On mobile, max-width caps the rendered width, but the
   HTML height attribute forces the full pixel height → image squishes to tiny.
   height:auto overrides the HTML attribute and lets the image scale naturally.
───────────────────────────────────────────────────────────────────────── */
.eas-st-root img {
    max-width: 100% !important;
    height: auto !important;
}
.eas-st-copy figure,
.eas-st-copy .wp-block-image {
    max-width: 100% !important;
}
.eas-st-copy figure img,
.eas-st-copy .wp-block-image img {
    width: 100% !important;
    height: auto !important;
}


/* ── FIX 10: CURSOR RING — VISIBLE BY DEFAULT ────────────────────────────
   Ring had opacity:0 — only appeared at 0.45 on link hover (.is-link).
   Set to 0.6 base so the ring is always visible as a lagging ring.
   Hover state (is-link) keeps full opacity.
───────────────────────────────────────────────────────────────────────── */
@media (pointer:fine) {
    #eas-cursor-ring {
        opacity: 0.6 !important;
    }
}

/* ── FIX 11: TRANSPARENT HEADER OVER HERO — belt-and-braces ─────────────
   header.js adds is-transparent on body.single before first paint.
   body:has(.eas-header.is-transparent) removes padding-top in style.css.
   This rule is belt-and-braces for browsers with weak :has() support.
───────────────────────────────────────────────────────────────────────── */
body.single {
    padding-top: 0 !important;
}


/* ── FIX 1 (SESSION 2026-05-14): ADMIN BAR PUSHES #EAS-HEADER DOWN ──────
   WordPress adds margin-top:32px to <html> when logged in. The global
   #eas-header is position:fixed at top:0. Offset it down by the admin
   bar height so it still overlaps the hero for logged-in preview.
   Real visitors (logged out) are unaffected.
───────────────────────────────────────────────────────────────────────── */
body.admin-bar.single #eas-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.single #eas-header {
        top: 46px; /* WP admin bar is 46px on mobile */
    }
}


/* ── FIX 3 (SESSION 2026-05-14): MOBILE FONT SIZE BELOW PHOTO BAND ───────
   Mobile rules in eas-single-post.css set deck + body copy to 1rem (16px).
   Luxury brand minimum: 17px. Seal override applied here.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eas-st-copy p,
    .eas-st-deck {
        font-size: 17px !important;
        line-height: 1.75 !important;
    }
}


/* ── FIX 4 (SESSION 2026-05-14): ACACIA SILHOUETTE CSS BELT-AND-BRACES ───
   SVG removed from single.php (primary fix). This CSS rule is a fallback
   in case the element is re-introduced without updating single.php.
───────────────────────────────────────────────────────────────────────── */
.eas-st-photo-flora {
    display: none !important;
}


/* ── FIX 5 (SESSION 2026-05-14): LOGO CLIP ON MOBILE ─────────────────────
   .eas-logo img has width="180" HTML attribute. On mobile the container
   has no explicit max-width, causing the image to clip or wrap text.
   CSS width:auto overrides the HTML attribute; max-width caps the render.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eas-logo img {
        max-width: 140px !important;
        width: auto !important;
        height: auto !important;
    }
    .eas-logo {
        max-width: 160px !important;
        overflow: visible !important;
    }
}


/* ── FIX 6 (SESSION 2026-05-14): RELATED POST TITLE WEIGHT ───────────────
   Root font-weight:300 can bleed into .eas-st-rcard-title via cascade.
   Force explicit Playfair weight on title and confirm excerpt stays light.
───────────────────────────────────────────────────────────────────────── */
.eas-st-related-section .eas-st-rcard-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600 !important;
}
.eas-st-related-section .eas-st-rcard-deck {
    font-weight: 300 !important;
    font-size: 14px !important;
}


/* ── FIX 7 (SESSION 2026-05-14): SIDEBAR VISIBLE ON MOBILE ───────────────
   Base CSS hides sidebar at 768px. Journey CTA and departure cards are
   conversion elements — they must stack below content on mobile.
   position:static removes sticky so it flows normally in single-column grid.
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .eas-st-root .eas-st-sidebar {
        display: block !important;
        width: 100% !important;
        margin-top: 48px !important;
        padding: 0 20px 64px !important;
        position: static !important;
    }
}