/* =========================
   PotterForm shared shell (UI-2A)
   Header + footer used by Shape Archive, Single Shape and the My
   PotterForm page template. One stylesheet, one markup source
   (template-parts/potterform/header.php and footer.php) - no per-page
   copies.

   Faithfully reproduces the header/footer from the authoritative landing
   site (PotterForm Website 2.0/site/assets/css/style.css: .site-header,
   .header-inner, .wordmark, .nav-desktop*, .nav-mobile*, .site-footer,
   .footer-grid, .footer-*), renamed to a pf-shell- prefix so this shell
   never collides with any existing Archive/Single/theme selector. Colour
   and radius values come from the shared --pf-* tokens in
   potterform-design-system.css (loaded on every page this stylesheet is
   used on - see functions.php enqueue), not local literals.
   ========================= */

.pf-shell-header,
.pf-shell-footer{
  --pf-shell-container-max: 75rem;
  --pf-shell-gutter: clamp(1.25rem, 3vw, 2.5rem);
  --pf-shell-header-height: 64px;
}

@media (min-width: 64rem){
  .pf-shell-header,
  .pf-shell-footer{
    --pf-shell-header-height: 72px;
  }
}

.pf-shell-skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--pf-color-primary, #6E3B5B);
  color: var(--pf-white, #FFFDFC);
  padding: 12px 20px;
  border-radius: 0 0 var(--pf-radius-small, 8px) 0;
  z-index: 100;
  font-weight: 600;
  text-decoration: none;
}

.pf-shell-skip-link:focus{
  left: 0;
}

/* ---------- Header ---------- */

.pf-shell-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pf-canvas, #FBF8F4);
  border-bottom: 1px solid var(--pf-surface-strong, #E7DED8);
}

/* UI-2A.1: when the WordPress front-end admin bar is present (visible only
   to manage_options users - see functions.php's show_admin_bar filter),
   the admin bar is a fixed element sitting at the true viewport top, above
   this header's own sticky position. WordPress already bumps the whole
   page down via its own admin-bar margin on <html>/<body> - this only
   moves where THIS header sticks once scrolling starts, so it doesn't
   slide up underneath the bar; it is not a second page-wide offset.
   32px/46px and the 782px breakpoint are WordPress's own standard
   admin-bar dimensions, unchanged here. */
body.admin-bar .pf-shell-header{
  top: 32px;
}

@media (max-width: 782px){
  body.admin-bar .pf-shell-header{
    top: 46px;
  }
}

.pf-shell-header-inner{
  max-width: var(--pf-shell-container-max);
  margin: 0 auto;
  padding: 0 var(--pf-shell-gutter);
  height: var(--pf-shell-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pf-shell-wordmark{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--pf-font-display, "Newsreader", Georgia, serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  color: var(--pf-ink, #2B2729);
  letter-spacing: -0.01em;
}

.pf-shell-wordmark:hover{
  color: var(--pf-ink, #2B2729);
}

.pf-shell-wordmark svg{
  flex: 0 0 auto;
}

.pf-shell-nav-desktop{
  display: none;
}

.pf-shell-nav-desktop-list{
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-shell-nav-link{
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--pf-ink, #2B2729);
  /* Reuses the landing's own transition timing/easing (see
     .nav-mobile-toggle's identical .16s cubic-bezier(.22,1,.36,1) above
     and PotterForm Website 2.0/site's --motion-fast/--ease-out tokens) so
     the account icon's currentColor - and every other nav link's colour -
     eases on hover/focus-visible/aria-current instead of snapping. A
     colour transition only; no scale/opacity/movement, so no
     prefers-reduced-motion override is needed here. */
  transition: color .16s cubic-bezier(.22,1,.36,1);
}

.pf-shell-nav-link:hover,
.pf-shell-nav-link:focus-visible{
  color: var(--pf-ink, #2B2729);
  text-decoration: underline;
}

.pf-shell-nav-link[aria-current="page"]{
  color: var(--pf-color-primary, #6E3B5B);
}

/* UI-2A.1: the authenticated "My PotterForm" nav item is icon + text
   inside one link (never an icon button next to a separate text link).
   Small and subordinate to the label - see header.php's decorative,
   aria-hidden SVG - aligned via flex gap rather than a header-height or
   font-size change. */
.pf-shell-nav-link--account{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-shell-nav-icon{
  flex: 0 0 auto;
}

/* The toggle sits inside header-inner's row visually, but <details> is a
   sibling of header-inner (a direct child of the sticky .pf-shell-header)
   so its panel renders as a normal block, in normal document flow, full
   width, directly below the header row - never a floating overlay. The
   toggle is pinned to that row via absolute positioning against
   .pf-shell-header (its sticky positioning context). Matches the landing
   site's own .nav-mobile structure exactly. */
.pf-shell-nav-mobile{
  display: block;
}

.pf-shell-nav-mobile-toggle{
  position: absolute;
  top: calc((var(--pf-shell-header-height) - 48px) / 2);
  right: var(--pf-shell-gutter);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--pf-control-border, #776C72);
  border-radius: var(--pf-radius-control, 10px);
  background: var(--pf-canvas, #FBF8F4);
  cursor: pointer;
  transition: background .16s cubic-bezier(.22,1,.36,1);
}

.pf-shell-nav-mobile-toggle::-webkit-details-marker{
  display: none;
}

.pf-shell-nav-mobile-toggle:hover{
  background: var(--pf-surface, #F3EEE9);
}

.pf-shell-nav-mobile-toggle:focus-visible{
  outline: 2px solid var(--pf-color-primary, #6E3B5B);
  outline-offset: 3px;
}

.pf-shell-nav-mobile-panel{
  border-top: 1px solid var(--pf-surface-strong, #E7DED8);
  background: var(--pf-canvas, #FBF8F4);
  padding: 20px var(--pf-shell-gutter) 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
}

.pf-shell-nav-mobile-panel .pf-shell-nav-link{
  font-size: 16px;
}

@media (min-width: 64rem){
  .pf-shell-nav-desktop{
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .pf-shell-nav-mobile{
    display: none;
  }
}

/* ---------- Footer ---------- */

.pf-shell-footer{
  background: var(--pf-white, #FFFDFC);
  border-top: 1px solid var(--pf-surface-strong, #E7DED8);
  padding: clamp(3rem, 6vw, 4.5rem) var(--pf-shell-gutter);
}

.pf-shell-footer-grid{
  max-width: var(--pf-shell-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.pf-shell-footer-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pf-shell-footer-brand-name{
  font-family: var(--pf-font-display, "Newsreader", Georgia, serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--pf-ink, #2B2729);
}

.pf-shell-footer-tagline{
  font-size: 14px;
  color: var(--pf-text-muted, #625B5F);
  margin: 0;
}

.pf-shell-footer-heading{
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-text-muted, #625B5F);
  margin: 0 0 16px;
}

.pf-shell-footer-links{
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-shell-footer-links a{
  font-size: 15px;
  color: var(--pf-ink, #2B2729);
  text-decoration: none;
}

.pf-shell-footer-links a:hover{
  text-decoration: underline;
}

.pf-shell-footer-links a:focus-visible,
.pf-shell-nav-link:focus-visible,
.pf-shell-wordmark:focus-visible{
  outline: 2px solid var(--pf-color-primary, #6E3B5B);
  outline-offset: 3px;
}

/* UI-2B: public-surface Share links only (Archive/Single Shape) - see
   footer.php's $sbsg_share_url. Matches the landing's own .share-link
   sizing/border/hover treatment (36px box, --pf-surface-strong border,
   --pf-surface hover background), reusing --pf-radius-small (8px) instead
   of the landing's literal 8px so it stays on the shared token system. */
.pf-shell-share-links{
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-shell-share-link{
  width: 36px;
  height: 36px;
  border: 1px solid var(--pf-surface-strong, #E7DED8);
  border-radius: var(--pf-radius-small, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-ink, #2B2729);
  transition: background .16s cubic-bezier(.22,1,.36,1);
}

.pf-shell-share-link:hover{
  background: var(--pf-surface, #F3EEE9);
}

.pf-shell-share-link:focus-visible{
  outline: 2px solid var(--pf-color-primary, #6E3B5B);
  outline-offset: 3px;
}

/* ---------- Scroll to top (Astra-owned markup) ---------- */

/* UI-2A.1: #ast-scroll-top is Astra parent-theme frontend markup (a
   circular icon control, its icon in .ast-icon/.ast-arrow-svg) - not
   Blocksy, not PotterForm-authored. Astra's own theme files are never
   modified; this is a colour-only override living in the PotterForm shell
   stylesheet, which loads only on Shape Archive, Single Shape and My
   PotterForm (see functions.php's sbsg_child_enqueue_shell_styles()) - so
   it never reaches any unrelated WordPress page. Position, size,
   visibility threshold, appear/disappear animation, keyboard behaviour and
   device visibility are all untouched; only colour changes. Matches the
   same solid-Plum family already used for .btn-primary/.sb-sg-btn-primary
   elsewhere in this codebase (normal: --pf-color-primary background/white
   icon, hover: --pf-color-primary-hover, active: the same
   transform:translateY(1px) press already used by .sb-sg-btn:active,
   focus-visible: the same Plum outline used across this shell).
   !important is used only where needed to beat Astra's own specificity on
   third-party markup this repo does not own - never to override anything
   inside this codebase's own components. */
#ast-scroll-top{
  background: var(--pf-color-primary, #6E3B5B) !important;
  border-color: var(--pf-color-primary, #6E3B5B) !important;
  color: var(--pf-white, #FFFDFC) !important;
  transition: background .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1);
}

#ast-scroll-top .ast-icon,
#ast-scroll-top .ast-arrow-svg,
#ast-scroll-top svg,
#ast-scroll-top svg path,
#ast-scroll-top svg polygon,
#ast-scroll-top svg polyline{
  fill: currentColor !important;
  stroke: currentColor !important;
}

#ast-scroll-top:hover{
  background: var(--pf-color-primary-hover, #5A304C) !important;
  border-color: var(--pf-color-primary-hover, #5A304C) !important;
}

#ast-scroll-top:focus-visible{
  outline: 2px solid var(--pf-color-primary, #6E3B5B);
  outline-offset: 3px;
}

#ast-scroll-top:active{
  transform: translateY(1px);
}