/* ====================================
   PUBLIC APP LAYOUT
   ==================================== */

/* IMPORTANT: never style the bare `header` element here. Public pages use
   <header> tags inside <article>, <section>, and section heads, and a bare
   `header { background: navy; position: fixed }` rule (which used to live
   here) painted every nested <header> as a dark navy bar. The public top
   navbar is styled in section/header.css via its `.app-header` class. */

/* The public navbar uses Bootstrap's `sticky-top` (in document flow), so the
   page content sits flush beneath it — no compensating top padding needed. */
#app-content {
    min-height: 100vh;
}

/* ============================================================================
   PAGE HEADER (shared hero)
   Used by 16 public pages. Modifications here propagate everywhere, so each
   addition is non-breaking — layered via pseudo-elements and pattern overlays
   on top of the existing primary-gradient background. Per-page tweaks should
   use a modifier class (e.g. .page-header--publications).

   NOTE: base.css also defines a `.page-header` for the *admin* chrome. This
   file loads after base.css and only on the public layout, so the hero wins
   here without touching admin pages.
   ============================================================================ */

.page-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

/* Accent-color underline bar — small visual punctuation under every page H1.
   Inline-block on .page-title means the bar centres under the text (not the
   full container) so it scales with title length. */
.page-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.6rem;
    transform: translateX(-50%);
    width: 5rem;
    height: 4px;
    background: var(--accent-color);
    border-radius: 4px;
}

.page-header {
    background: var(--primary-gradient);
    padding: 100px 0 80px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Dot pattern overlay — radial-gradient repeated as a tile. Sits above the
   primary gradient but below text. 8% white opacity reads as texture, not
   noise. */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* Wave divider at the bottom — smooth transition from coloured hero into
   the content below. Pure inline SVG, no extra HTTP request. */
.page-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,32L60,32C120,32,240,32,360,26.7C480,21,600,11,720,16C840,21,960,43,1080,48C1200,53,1320,43,1380,37.3L1440,32L1440,60L1380,60C1320,60,1200,60,1080,60C960,60,840,60,720,60C600,60,480,60,360,60C240,60,120,60,60,60L0,60Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Lift the actual hero content above the overlays */
.page-header > * {
    position: relative;
    z-index: 1;
}

/* Mobile: tighter padding so the hero doesn't eat half the phone screen */
@media (max-width: 768px) {
    .page-header {
        padding: 70px 0 60px;
    }
    .page-title {
        font-size: 2rem;
    }
    .page-header::after {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 55px 0 50px;
    }
    .page-title {
        font-size: 1.65rem;
    }
}

/* ============================================================================
   BACK TO TOP
   The floating button lives in templates/app.blade.php and is toggled by
   js/public.js, which adds .is-visible past 300px of scroll. Hidden (and
   non-interactive) until then, so it never traps clicks at the top of a page.
   ============================================================================ */

#scrollTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--z-fixed, 1030);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;

    border: 1px solid rgba(var(--primary-rgb, 0, 103, 79), .18);
    border-radius: var(--border-radius, 0);
    background: var(--primary-color, #00674F);
    color: var(--text-inverted, #ffffff);
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: var(--shadow-medium, 0 8px 24px rgba(15, 35, 26, .08));

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s var(--ease-out, ease),
                transform .2s var(--ease-out, ease),
                visibility .2s var(--ease-out, ease),
                background-color .2s var(--ease-out, ease);
}

#scrollTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTop:hover,
#scrollTop:focus-visible {
    background: var(--primary-dark-color, #003d2e);
    color: var(--text-inverted, #ffffff);
}

#scrollTop:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 103, 79, .28));
}

@media (prefers-reduced-motion: reduce) {
    #scrollTop { transition: opacity .2s ease, visibility .2s ease; transform: none; }
    #scrollTop.is-visible { transform: none; }
}

@media (max-width: 480px) {
    #scrollTop { right: .85rem; bottom: .85rem; width: 40px; height: 40px; }
}