/* ============================================================================
   coreLayout.css — the page frame
   ----------------------------------------------------------------------------
   ONE source of truth for horizontal layout. Everything is driven by CSS
   variables + existing body classes; there is no JS layout math.

   The model (see the user's spec):

       ┌───────────────────────── app-header (sticky, full width) ─────────────┐
       ├─ nav ─┬──────────────── .coreInnerPage (the "region") ──────┬─ panel ─┤
       │ menu  │  band: hero / nav bars span the FULL region width   │  refs   │
       │ (fix) │  ┌──────────── .middleColumn (centered) ─────────┐  │ (fixed) │
       │       │  │  hero content · sections · footer  all align  │  │         │
       │       │  └───────────────────────────────────────────────┘  │         │
       └───────┴──────────────────────────────────────────────────────┴────────┘

   • .coreInnerPage is inset on the left by the fixed left menu (when menu mode
     is active) and on the right by the docked pub-refs panel (when docked).
     Those insets are the ONLY things that move the content column, so the
     header band, the main content, and the footer all shift + re-center
     together and therefore always line up.
   • Full-width bands (hero, nav bars, footer bg) are direct children of the
     region, so their background spans edge-to-edge of the region.
   • .middleColumn / .headerMiddleColumn center the readable content inside the
     region to a shared max-width. Bands that have no inner wrapper (the nav
     bars) reproduce the same centering with symmetric padding.
   ============================================================================ */

:root {
    /* Fixed furniture widths — used BOTH to size the element and to reserve
       its space, so the two can never drift apart. */
    --nav-w:    230px;   /* left section menu (aside.fap-side-menu)   */
    --panel-w:  460px;   /* docked pub-refs panel (#pub-refs-pop)     */
    --col-max: 1100px;   /* centered readable content column          */
    --col-pad:   1rem;   /* min side gutter for the centered column   */

}


/* ─── App header: the global top bar (full width, not part of the column) ─── */
.app-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.scrolledDown .app-header {
    box-shadow: var(--shadow-down);
}

.scrolledDown .dynamicNav {
    box-shadow: var(--shadow-down);
    position: fixed;
    top: calc(var(--dyn-app-header-h, 64px) + var(--dyn-header-h, 52px));
    z-index: 80;
    background-color: var(--bg-color, white);
    left: 0;
    width: 100%;
    text-align: center;
}



/* ─── The region shell ─────────────────────────────────────────────────────
   .corePage is a plain full-width block. .coreInnerPage is the region whose
   left/right edges are pulled in by the fixed furniture. Because the inset is
   padding on this single element, every descendant band + column inherits the
   same usable width and centre line. */
.corePage { position: relative; }

.coreInnerPage {
    transition: padding-left 0.2s ease, padding-right 0.16s ease;
}

/* Insets applied directly by the body-state classes (page_nav.js sets
   .fap-menu-active; PubRefsPop.js sets .prp-docked). A descendant selector is
   used rather than an inherited custom property so the reserved space is
   unambiguous and can't be lost to variable-inheritance edge cases. */
body.fap-menu-active .coreInnerPage { padding-left:  var(--nav-w); }
body.prp-docked      .coreInnerPage { padding-right: var(--panel-w); }


/* ─── The shared centered column ────────────────────────────────────────────
   Applied identically to the hero's inner bar (.headerMiddleColumn), the main
   sections wrapper (.middleColumn), and the footer's inner wrapper. Same rule
   → same box → they align. */
.middleColumn,
.headerMiddleColumn {
    max-width: var(--col-max);
    margin: 0 auto;
    padding-left:  var(--col-pad);
    padding-right: var(--col-pad);
    box-sizing: border-box;
}

/* Full-width page-title band (hub / index pages): a .dynamicHeader that spans
   the region edge-to-edge, with an inner .headerMiddleColumn centering the
   title text. Small vertical padding so the band reads as a header strip. */
.titleBand {
    padding-top: 0.9rem;
    padding-bottom: 0.7rem;
    margin-bottom: 1.25rem;
}

/* Full-width band with NO inner wrapper (the nav bars): reproduce the column's
   centre line with symmetric padding so the buttons sit under the content,
   while the band's own border/background still runs the full region width. */
.bandColumn {
    /* Match .middleColumn's content edge exactly: the centering gap PLUS the
       column's own inner gutter, clamped to the gutter on narrow screens. */
    padding-left:  max(var(--col-pad), calc((100% - var(--col-max)) / 2 + var(--col-pad)));
    padding-right: max(var(--col-pad), calc((100% - var(--col-max)) / 2 + var(--col-pad)));
    box-sizing: border-box;
}


/* ─── Main content wrapper ─────────────────────────────────────────────────
   Full width of the region (a band host); its children opt into .middleColumn
   for centering. */
main.main-content {
    padding: 0 0 2rem 0;
    min-height: calc(100vh - 300px);
}


/* ─── Left section menu (menu mode) ────────────────────────────────────────
   Fixed to the left edge; its width is the same token that reserves its space
   (--nav-w), so the two are always in sync. Shown by page_nav.css in menu
   mode. */
aside.fap-side-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: var(--nav-w);
    background: var(--bg-card, #fff);
    border-right: 1px solid var(--border-color, #e2e6f0);
    overflow-y: auto;
    padding: 1rem 0.5rem;
    z-index: 25;
}


/* ─── Footer: full-width band, content aligned to the same column ──────────── */
/* Professional footer palette. Deep-slate band with a primary accent edge; the
   colours are fixed (not theme-tokened) so the footer reads as a consistent,
   branded anchor in both light and dark mode. */
.app-footer {
    --ftr-bg:      #0f172a;   /* deep slate                       */
    --ftr-text:    #cbd5e1;   /* body / link text                 */
    --ftr-muted:   #94a3b8;   /* tagline, secondary copy          */
    --ftr-heading: #f8fafc;   /* column titles + logo             */
    --ftr-accent:  var(--primary-color, #3b82f6);
    --ftr-rule:    rgba(255, 255, 255, 0.08);

    margin-top: 3rem;
    border-top: 3px solid var(--ftr-accent);
    background-color: var(--ftr-bg);
    color: var(--ftr-text);
    font-size: 0.9rem;
}

/* Upper region: brand block on the left, link columns on the right. */
.app-footer .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2.75rem 0 2rem;
}

.app-footer .footer-brand { max-width: 360px; }

.app-footer .footer-logo {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ftr-heading);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.app-footer .footer-logo span { color: var(--ftr-accent); }
.app-footer .footer-logo:hover { color: #fff; }

.app-footer .footer-tagline {
    margin: 0.75rem 0 0;
    line-height: 1.55;
    color: var(--ftr-muted);
    font-size: 0.875rem;
}

.app-footer .footer-social { margin-top: 1.1rem; }
.app-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ftr-rule);
    color: var(--ftr-text);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.app-footer .footer-social-link:hover {
    background: var(--ftr-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Link columns. */
.app-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}
.app-footer .footer-col-title {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ftr-heading);
}
.app-footer .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-footer .footer-col li { margin-bottom: 0.6rem; }
.app-footer .footer-col a {
    color: var(--ftr-text);
    text-decoration: none;
    transition: color 0.15s ease;
}
.app-footer .footer-col a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Lower bar: copyright + attribution, divided from the columns. */
.app-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1.1rem 0 1.4rem;
    border-top: 1px solid var(--ftr-rule);
    font-size: 0.8rem;
    color: var(--ftr-muted);
}
.app-footer .footer-bottom a {
    color: var(--ftr-muted);
    text-decoration: none;
}
.app-footer .footer-bottom a:hover {
    color: var(--ftr-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tablet / small: stack brand above the link columns and centre the whole
   footer as one column, so nothing hangs off to one side. */
@media (max-width: 640px) {
    .app-footer { margin-top: 2rem; }

    .app-footer .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
        padding: 2.25rem 0 1.5rem;
    }

    .app-footer .footer-brand { max-width: 30rem; }
    .app-footer .footer-social { text-align: center; }

    .app-footer .footer-links {
        width: 100%;
        justify-content: center;
        gap: 2.5rem 3.5rem;
        text-align: center;
    }
    .app-footer .footer-col { min-width: 8rem; }

    .app-footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
    }
}

/* Phone: widen the side gutter so text isn't flush to the screen edge, and
   drop the link columns into a single centred stack. */
@media (max-width: 480px) {
    .app-footer .footer-top,
    .app-footer .footer-bottom {
        padding-left:  1.35rem;
        padding-right: 1.35rem;
    }
    .app-footer .footer-top { padding-top: 2rem; }

    .app-footer .footer-links {
        flex-direction: column;
        gap: 1.75rem;
    }

    .app-footer .footer-bottom {
        padding-top: 1.1rem;
        padding-bottom: 1.5rem;
    }
}


/* ─── Responsive: shrink / drop the furniture, insets follow automatically ── */
@media (max-width: 900px) {
    :root { --nav-w: 200px; }
}
@media (max-width: 700px) {
    /* Left menu becomes a static, full-width block above the content — so it
       no longer reserves a side inset. */
    body.fap-menu-active .coreInnerPage { padding-left: 0; }
    main.navMode_menu aside.fap-side-menu {
        position: static;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e2e6f0);
        margin-bottom: 1rem;
    }
}
@media (max-width: 560px) {
    /* Phone: the docked panel goes full-screen (PubRefsPop.css), so stop
       reserving its side inset. */
    body.prp-docked .coreInnerPage { padding-right: 0; }
}