@charset "utf-8";

/* ============================================================================
   Tier 4 of 4 — page frame: header, content, footer

   The structural shell every generated page renders. Class names match the
   markup src/Runtime/Shell.php emits, so the two are read together.

   Four header types are supported, selected per page and switched on a body
   class so a project can restyle one type without touching the others:

     default      brand mark plus a disclosure menu
     logo_only    brand mark alone
     title_only   page title, optional eyebrow and back link
     custom       nothing is rendered here; App_CustomHeader owns the markup

   Ownership: system-owned.
   ========================================================================= */

/* ---- page frame --------------------------------------------------------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 72rem;
    margin: 0 auto
}

/* The single horizontal safe-area lever for the whole frame. Every band -
   header, content, footer - puts its content in an .inner, so widening the
   gutter here keeps text and controls clear of a landscape cutout without
   any band needing its own rule. The background of each band still runs
   edge to edge, which is the intent: the inset belongs to the content, not
   to the colour behind it. */
.inner {
    width: 100%;
    max-width: var(--inner-max-width);
    margin: 0 auto;
    padding-left: calc(var(--inner-padding-x) + var(--safe-left));
    padding-right: calc(var(--inner-padding-x) + var(--safe-right));
}

.wrap {
    flex: 1 1 auto;
    width: 100%;
    /* padding-top: var(--space-lg); */
    padding-bottom: var(--space-2xl);
}

/* Normally the footer is the last band and clears the home indicator for
   the page. On a screen rendered without one the content itself is last, so
   it takes over that job. */
.wrap:last-child {
    padding-bottom: calc(var(--space-2xl) + var(--safe-bottom));
}

.sec + .sec {
    margin-top: var(--space-2xl);
}

.sec__title {
    margin-bottom: var(--space-md);
}

/* ---- header, shared across all types ------------------------------------- */
/* The header is the topmost band, so it absorbs the top inset for the whole
   page: the padding pushes the logo and menu below the notch while the
   header's own background keeps filling the status bar area. */
.site-header {
    position: relative;
    z-index: var(--z-header);
    padding-top: var(--safe-top);
    background-color: var(--color-bg);
    /* border-bottom: var(--size-hairline) solid var(--color-line); */
}

.site-header > .inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--header-height);
}

.site-header__logo {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--fs-title);
}

.site-header__logo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
}

.site-header__logo-icon {
    width: 2.8rem;
    height: auto;
}

.site-header__logo-text {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    color: var(--color-primary);
}

.site-header__extra {
    margin-left: auto;
}

/* ---- header type: default ------------------------------------------------
   The menu is a <details>/<summary> disclosure, so it opens and closes with
   no JavaScript at all. A generated project that never loads a script still
   has a working navigation menu. */
.site-header__menu {
    position: relative;
    margin-left: auto;
}

.site-header__menu-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--color-text-sub);
    list-style: none;
    cursor: pointer;
    border: var(--size-hairline) solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.site-header__menu-button::-webkit-details-marker {
    display: none;
}

.site-header__menu-panel {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    z-index: var(--z-overlay);
    min-width: 18rem;
    padding: var(--space-xs);
    background-color: var(--color-bg-card);
    border: var(--size-hairline) solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised);
}

.site-header__menu-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__menu-item a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-body);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
}

.site-header__menu-item a:hover,
.site-header__menu-item.is-active a {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
}

/* ---- header type: title_only --------------------------------------------- */
body.header-type-title_only .site-header > .inner {
    display: block;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.site-header__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.4rem;
    font-size: var(--fs-caption);
    color: var(--color-text-mute);
}

.site-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-caption);
    color: var(--color-text-sub);
    text-decoration: none;
}

.site-header__page-title {
    margin-top: var(--space-4);
    font-size: var(--fs-page-title);
}

.site-header__page-desc {
    margin-top: var(--space-4);
    font-size: var(--fs-caption);
    color: var(--color-text-mute);
}

/* ---- header type: custom -------------------------------------------------
   Everything inside .custom-header belongs to App_CustomHeader. The template
   supplies the outer band and the gutter and stops there, on purpose: a
   project that reached for the escape hatch does not want the frame's
   opinions inside it. */
.custom-header {
    position: relative;
    z-index: var(--z-header);
    background-color: var(--color-bg);
}

/* ---- footer -------------------------------------------------------------- */
.site-footer {
    border-top: var(--size-hairline) solid var(--color-line);
    background-color: var(--color-bg-soft);
}

/* Last band on the page, so it clears the home indicator. Composed with the
   existing gap rather than replacing it: with no indicator the footer keeps
   exactly its designed --space-md. */
.site-footer > .inner {
    padding-top: var(--space-md);
    padding-bottom: calc(var(--space-md) + var(--safe-bottom));
}

.site-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__item a {
    display: inline-block;
    padding: var(--space-4) 0;
    font-size: var(--fs-caption);
    color: var(--color-text-sub);
    text-decoration: none;
}

.site-footer__item a:hover,
.site-footer__item.is-active a {
    color: var(--color-primary);
}

.site-footer__meta {
    margin-top: var(--space-sm);
    font-size: var(--fs-caption);
    color: var(--color-text-mute);
}

/* ---- ad slots ------------------------------------------------------------
   The reserved box exists whether or not an ad is enabled, so a page does
   not reflow when one appears. Nothing here loads anything. */
.ad-slot {
    display: block;
    width: 100%;
    margin: var(--space-lg) 0;
    text-align: center;
}

.ad-slot__inner {
    display: block;
    width: 100%;
}

.ad-slot--placeholder .ad-slot__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    font-size: var(--fs-caption);
    color: var(--color-text-mute);
    background-color: var(--color-bg-soft);
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
}

/* ---- wide viewport -------------------------------------------------------- */
@media (min-width: 48em) {
    .wrap {
        padding-top: var(--space-xl);
    }

    .site-footer__list {
        gap: var(--space-sm) var(--space-2xl);
    }
}