/* ============================================================================
   PoliMoney — Layout  (layout.css)
   Header (sticky + condense-on-scroll), primary nav, mobile menu (checkbox/JS
   toggle), 3-column footer shell, logo. Depends on tokens.css + base.css.
   ============================================================================ */

/* ============================================================================
   BRAND LOGO (wordmark used in header + footer + mobile menu)
   ============================================================================ */
.pm-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
}
.pm-logo__mark { flex: 0 0 auto; }
.pm-logo__word {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  font-size: 1.5rem;
}
.pm-logo__word .pm-logo__poli { color: var(--teal-400); }
.pm-logo__word .pm-logo__money {
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--neutral-50) 65%, transparent);
}
.pm-logo--sm .pm-logo__word { font-size: 1.25rem; }

/* ============================================================================
   HEADER (sticky, glass, condense-on-scroll)
   ============================================================================ */
.pm-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  border-bottom: 1px solid transparent;
  background-color: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
/* JS adds .is-scrolled once the page is scrolled */
.pm-header.is-scrolled {
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-2);
}
.pm-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 4.5rem; /* 72px */
  transition: height var(--dur-base) var(--ease-out);
}
.pm-header.is-scrolled .pm-header__bar { height: 3.75rem; } /* condense to 60px */

/* Primary nav (desktop) */
.pm-nav { display: none; }
@media (min-width: 1024px) { .pm-nav { display: block; } }
.pm-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.pm-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out);
}
.pm-nav__link:hover { color: var(--text-primary); }
/* Teal underline indicator */
.pm-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -2px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--teal-400);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-expo);
}
.pm-nav__link:hover::after { opacity: 0.5; transform: scaleX(0.7); }
.pm-nav__link[aria-current="page"] { color: var(--text-primary); }
.pm-nav__link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }

/* Header CTA (desktop only) */
.pm-header__cta { display: none; }
@media (min-width: 1024px) { .pm-header__cta { display: inline-flex; } }

/* Hamburger (mobile + tablet; desktop nav takes over at >=1024px) */
.pm-burger { display: inline-flex; }
@media (min-width: 1024px) { .pm-burger { display: none; } }

/* ============================================================================
   MOBILE MENU  —  full-coverage opaque overlay
   ----------------------------------------------------------------------------
   Open state = one fixed overlay (inset:0, 100vw x 100dvh) on the brand navy
   #001B33, OPAQUE so nothing bleeds through, above the sticky header and all
   content. Progressive enhancement: a hidden checkbox drives open/close with
   CSS only; main.js layers ARIA + Esc + scroll-lock + focus on top. Works with
   JS disabled (label[for] toggles the checkbox).

   IMPORTANT FIX: .pm-header uses backdrop-filter, which establishes a
   containing block for position:fixed descendants. That trapped this overlay
   inside the 72px header bar (top bar only / bleed-through / ghost logo).
   While the menu is open we drop the header's backdrop-filter (it is fully
   covered anyway), so inset:0 resolves against the viewport again.
   ============================================================================ */
.pm-mobile-toggle {        /* the checkbox */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Dissolve the backdrop-filter containing-block trap while the menu is open
   so the fixed overlay can cover the true viewport (and hide the underlying
   sticky header + its ghost logo entirely). */
.pm-header:has(.pm-mobile-toggle:checked),
.pm-header:has(.pm-mobile[data-open="true"]) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pm-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);   /* above the sticky header and all content */
  display: none;           /* removed from a11y tree until opened */
  width: 100vw;
  height: 100vh;           /* fallback */
  height: 100dvh;
}
.pm-mobile-toggle:checked ~ .pm-mobile { display: block; }
/* When JS is present, .pm-mobile is shown/hidden via [data-open] instead of :checked */
.pm-mobile[data-open="true"] { display: block; }

/* The scrim is the full opaque navy backdrop (also the no-JS close target). */
.pm-mobile__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background-color: var(--bg); /* #001B33 — OPAQUE, no bleed-through */
  cursor: default;
  opacity: 0;
  animation: pm-fade-in var(--dur-base) var(--ease-out) forwards;
}

/* The panel is the full overlay (header row + nav + CTA), not a drawer. */
.pm-mobile__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--bg); /* #001B33 opaque */
  color: var(--text-primary);
  /* Respect the notch / rounded corners so it covers flush to the true edges */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  transform: translateY(-8px);
  opacity: 0;
  animation: pm-menu-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes pm-menu-in { to { transform: translateY(0); opacity: 1; } }

/* Header row inside the overlay: logo left, X right, flush top, no seam. */
.pm-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 4.5rem;          /* matches .pm-header__bar — flush, no jump */
  padding-inline: var(--space-4);
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px));
}
.pm-mobile__head .pm-btn-icon { color: var(--text-primary); }
.pm-mobile__head .pm-btn-icon:hover {
  color: var(--text-primary);
  background-color: var(--ghost-fill-hover);
}

/* Nav: vertical list, generous spacing, on-brand light text. */
.pm-mobile__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.pm-mobile__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pm-mobile__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;     /* >= 52px tap target */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.pm-mobile__link:hover,
.pm-mobile__link:focus-visible {
  background-color: var(--ghost-fill-hover);
  color: var(--text-primary);
}
.pm-mobile__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color);
  outline-offset: 2px;
}
.pm-mobile__link[aria-current="page"] {
  background-color: var(--ghost-fill-hover);
  color: var(--text-primary);
  box-shadow: inset 3px 0 0 0 var(--teal-400);
}

.pm-mobile__foot {
  padding: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================================
   FOOTER (3-column UA shell + brand col + bottom bar) — recessed sunken well
   ============================================================================ */
.pm-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
}
.pm-footer__inner { padding-block: var(--space-16); }
.pm-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .pm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
}
.pm-footer__brand { max-width: 22rem; }
.pm-footer__tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.pm-footer__social { margin-top: var(--space-5); display: flex; gap: var(--space-2); }
.pm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-expo);
}
.pm-footer__social a:hover { color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-2px); }
.pm-footer__social svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; }

.pm-footer__col-title {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}
.pm-footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.pm-footer__links a {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.pm-footer__links a:hover { color: var(--text-primary); }

.pm-footer__entity {
  margin-top: var(--space-12);
  max-width: 70ch;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}
.pm-footer__bottom {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
@media (min-width: 768px) {
  .pm-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================================
   MAIN content wrapper
   ============================================================================ */
.pm-main { flex: 1 1 auto; }