/*
  PriceArk — Public Shell (Slice 1A)

  Header, navigation, footer and page-container primitives for the shared
  public shell. Depends on deep-vault-foundation.css (Slice 0) for tokens
  and base components — this file adds only what the shell itself needs
  and does not restate or override approved Slice 0 values.

  Values copied verbatim from the approved design source:
    Brand Book §05 (mobile home header), §07 (desktop shell/app bar)
    Phase 02 §10 (catalogue app bar variant)
    Phase 04 §33 (footer system — desktop grid and mobile accordion)

  Visual only. No business logic.
*/

/* ==========================================================================
   SHELL-SPECIFIC TOKENS (values that appear only in shell surfaces)
   ========================================================================== */

:root {
  --pa-s-footer-body: oklch(0.155 0.012 250); /* footer ground (Phase 04 §33) */
  --pa-t-84:          oklch(0.84 0.008 250);  /* footer disclosure copy */
  --pa-t-64:          oklch(0.64 0.012 250);  /* mobile footer crawl label */
}

/* ==========================================================================
   PAGE CONTAINER — content width, gutters, section rhythm
   ========================================================================== */

/* The approved design source resets this on every page (`html, body
   { margin:0; padding:0 }`). Without it the browser's default 8px body
   margin silently widens every gutter — measured 24px instead of the
   approved 16px on mobile. */
html, body { margin: 0; padding: 0; }

.pa-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pa-bg);
}
.pa-page__main { flex: 1; }

/* Contained content column. Mobile gutter 16px per the approved rule;
   desktop shell padding 32px per the app-bar/results padding in source. */
/* One shell breakpoint (900px) for gutters, header and footer alike, so
   there is never a width where the content gutter and the header gutter
   disagree. The approved design specifies a 390px phone and a 1360px
   desktop and nothing between, so the exact switch point is an
   implementation choice; keeping it single and consistent is the part
   that matters. */
.pa-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 900px) {
  .pa-wrap { padding-left: 32px; padding-right: 32px; }
}
/* Full-bleed band that still aligns its inner content to .pa-wrap */
.pa-band { width: 100%; }

/* Section rhythm — 32px base per the Brand Book spacing rule */
.pa-section { padding-top: 32px; padding-bottom: 32px; }

/* ==========================================================================
   HEADER — desktop app bar (Brand Book §07) + mobile (Brand Book §05)
   ========================================================================== */

.pa-header {
  border-bottom: 1px solid var(--pa-b-hair);
  background: var(--pa-bg);
}

/* -- Mobile header row: logo left, locale + account right -- */
.pa-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 14px;
}
.pa-header__right { display: flex; align-items: center; gap: 8px; }

/* Keystone lockup */
.pa-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.pa-brand__word { font: 800 19px/1 var(--pa-font); letter-spacing: -0.04em; color: var(--pa-t-hi); }

/* Account placeholder circle (mobile, Brand Book §05) — visual only,
   no account functionality exists */
.pa-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pa-s-tag); flex: none; }

/* Mobile search sits below the bar, full width inside the gutter */
.pa-header__search { padding: 0 16px 12px; }

/* Crawl/freshness proof line under mobile search (Brand Book §05) */
.pa-crawlline {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  background: var(--pa-s-panel);
  border-radius: 10px;
}
.pa-crawlline__text { font: 400 11px/1.4 var(--pa-mono); color: var(--pa-t-66); }

/* -- Desktop app bar -- */
.pa-appbar-full {
  display: none;
  align-items: center;
  gap: 28px;
  padding: 16px 32px;
}
.pa-appbar-full .pa-brand__word { font-size: 20px; }
.pa-navlinks { display: flex; gap: 22px; font: 500 14px/1 var(--pa-font); color: var(--pa-t-76); }
.pa-navlinks a { color: var(--pa-t-76); }
.pa-navlinks a:hover { color: var(--pa-t-hi); }
/* Destinations with no public route yet render as plain text, exactly as
   the approved footer does for its not-yet-available Browse column */
.pa-navlinks span { color: var(--pa-t-76); cursor: default; }

.pa-appbar-full__search { flex: 1; max-width: 520px; }
.pa-appbar-full__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Sign in — visual shell only; no auth exists (see PRODUCT_CONTRACT.md) */
.pa-signin-btn {
  font: 600 13px/1 var(--pa-font);
  color: var(--pa-t-invert);
  background: var(--pa-fill-invert);
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
}

@media (min-width: 900px) {
  .pa-header__bar,
  .pa-header__search,
  .pa-crawlline { display: none; }
  .pa-appbar-full { display: flex; }
}

/* ==========================================================================
   MOBILE BOTTOM NAV — approved 4-destination bar (Phase 02 §10)
   The foundation defines .pa-mobilenav; the shell only positions it and
   reserves space so it never obscures page content.
   ========================================================================== */

.pa-page__main { padding-bottom: 0; }
@media (max-width: 899px) {
  .pa-page__main { padding-bottom: 8px; }
  .pa-mobilenav--fixed {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
  /* Reserve the bar's height so fixed navigation never covers content */
  .pa-page--hasnav { padding-bottom: 86px; }
}
@media (min-width: 900px) {
  .pa-mobilenav, .pa-mobilenav--fixed { display: none; }
}

/* ==========================================================================
   FOOTER (Phase 04 §33)
   ========================================================================== */

.pa-footer {
  background: var(--pa-s-footer-body);
  border-top: 1px solid var(--pa-b-card);
}

/* Disclosure band — its own background step and icon, above the links */
.pa-footer__disclosure {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 16px;
  background: var(--pa-s-panel);
  border-bottom: 1px solid var(--pa-b-hair);
}
.pa-footer__disclosure-icon { flex: none; font: 400 13px/1.3 var(--pa-mono); color: var(--pa-cyan); }
.pa-footer__disclosure-text { font: 400 13px/1.6 var(--pa-font); color: var(--pa-t-84); }
@media (min-width: 900px) {
  .pa-footer__disclosure { padding: 30px 40px; gap: 20px; }
  .pa-footer__disclosure-icon { font-size: 14px; }
  .pa-footer__disclosure-text { font-size: 15px; line-height: 1.65; max-width: 900px; }
}

/* Identity block */
.pa-footer__idline { margin-top: 16px; font: 400 14px/1.6 var(--pa-font); color: var(--pa-t-70); max-width: 280px; }
/* Unresolved values render as visible cyan placeholders — the approved
   design's own convention for data that is not yet decided. Never invent
   operator identity, VAT number, or counts. */
.pa-unresolved { color: var(--pa-cyan-text); font-family: var(--pa-mono); font-size: 13px; }

.pa-footer__chips { margin-top: 18px; display: flex; gap: 9px; }

/* Link columns */
.pa-footer__cols { padding: 24px 16px 20px; display: grid; gap: 28px; }
@media (min-width: 900px) {
  .pa-footer__cols { padding: 36px 40px 30px; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 36px; }
}
/* Same information architecture, two approved compositions: a 5-column
   grid on desktop, an accordion on mobile. Only one is ever rendered. */
.pa-footer__col-desktop { display: none; }
.pa-footer__acc-mobile  { display: block; }
@media (min-width: 900px) {
  .pa-footer__col-desktop { display: block; }
  .pa-footer__acc-mobile  { display: none; }
}
.pa-footer__coltitle { font: 500 10px/1 var(--pa-mono); letter-spacing: 0.16em; color: var(--pa-t-58); }
.pa-footer__links { margin-top: 16px; display: grid; gap: 11px; font: 400 14px/1.3 var(--pa-font); }
.pa-footer__links a { color: var(--pa-cyan-text); }
.pa-footer__links a:hover { color: var(--pa-cyan-hover); }
/* Destination exists in the approved IA but has no public route yet */
.pa-footer__links span { color: var(--pa-t-80); }

/* Legal strip */
.pa-footer__legal {
  padding: 18px 16px 24px;
  border-top: 1px solid var(--pa-b-hair);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
@media (min-width: 900px) { .pa-footer__legal { padding: 18px 40px 24px; } }
.pa-footer__operator { font: 400 12px/1.5 var(--pa-mono); color: var(--pa-cyan-text); }
/* SHELL-4 accessibility baseline amendment (2026-10-06): --pa-t-55 on the
   footer surface measured 4.02:1, below AA for normal text. Raised to the
   lowest existing token that clears 4.5 on the SAME background (measured
   in-browser: 0.56 -> 4.19, 0.58 -> 4.56). The token itself is unchanged. */
.pa-footer__copy { font: 400 12px/1.5 var(--pa-mono); color: var(--pa-t-58); }
@media (min-width: 900px) { .pa-footer__copy { margin-left: auto; } }

/* Mobile accordion groups (Phase 04 §33 mobile) — <details>/<summary>,
   so it works with zero JavaScript and stays keyboard-accessible. */
.pa-acc { border-bottom: 1px solid var(--pa-b-hair); }
.pa-acc > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0;
  font: 600 15px/1 var(--pa-font);
  color: var(--pa-t-hi);
  cursor: pointer;
  list-style: none;
}
.pa-acc > summary::-webkit-details-marker { display: none; }
.pa-acc > summary::after {
  content: '+';
  font: 400 14px/1 var(--pa-mono);
  color: var(--pa-t-62);
}
.pa-acc[open] > summary::after { content: '−'; }
.pa-acc__body { margin-top: 14px; display: grid; gap: 13px; font: 400 14px/1.3 var(--pa-font); padding-bottom: 6px; }
.pa-acc__body a { color: var(--pa-cyan-text); }
.pa-acc__body span { color: var(--pa-t-80); }

/* ==========================================================================
   ACCESSIBILITY HELPERS
   ========================================================================== */

.pa-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pa-brass);
  color: var(--pa-t-invert);
  font: 700 14px/1 var(--pa-font);
  padding: 12px 16px;
  border-radius: 0 0 9px 0;
  z-index: 100;
}
.pa-skiplink:focus { left: 0; }

.pa-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}