/* ==========================================================================
   ANewLog — Global chrome (Phase C)
   Header, primary/mobile navigation, shared buttons, and footer. Ported
   from REFERENCE/APPROVED-PROTOTYPE/css/style.css, keeping the prototype's
   own class names (.site-header, .mobile-nav, .btn, .site-footer, etc.)
   rather than Astra's generated builder classes, per the Blueprint's own
   Section 7.1 approach. Astra's native header/footer rendering is disabled
   for this site (inc/header-footer.php) in favor of this markup + CSS.

   Depends on design-tokens.css (custom properties) and global.css (reset,
   .eyebrow, .container, .section--dark, etc.) being enqueued first.
   ========================================================================== */

/* ------------------------------- Header ----------------------------------- */
/* Astra's own <header id="masthead"> already carries a class of
   "site-header" among its others (confirmed by inspecting the rendered
   markup) - these rules target that element directly; no extra wrapper
   needed. */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(240, 245, 248, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-med) var(--ease-out);
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled::after{ opacity: 1; }

.header-inner{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--edge);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand{ display: flex; align-items: center; }
/* Blueprint 3.1: Logo Width 210px desktop (exceeds the Logo Usage Standards'
   180px preferred minimum); native aspect ratio preserved, no distortion. */
.brand img{ width: 210px; max-width: 45vw; height: auto; }

.main-nav{ display: none; }
@media (min-width: 900px){
  .main-nav{
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin-inline: auto;
  }
  .main-nav a{
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--anl-dark-grey);
    position: relative;
    padding-bottom: 4px;
  }
  .main-nav a::after{
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform: scaleX(1); }
  .main-nav a[aria-current="page"]{ color: var(--ink-strong); }
}

.header-actions{ display: flex; align-items: center; gap: var(--sp-3); }

.menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (min-width: 900px){ .menu-toggle{ display: none; } }
.menu-toggle svg{ width: 18px; height: 18px; }

/* --------------------------- Mobile nav overlay ---------------------------- */
.mobile-nav{
  position: fixed;
  inset: 0;
  background: var(--anl-charcoal);
  color: var(--anl-white);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--edge) var(--sp-6);
  transform: translateY(-100%);
  /* visibility, not just the transform, is what actually keeps closed-drawer
     links out of Tab order and the accessibility tree — a transform alone
     (the prototype's original approach) leaves them focusable off-screen.
     Delayed on close so it doesn't cut the slide-up animation short. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-nav.is-open{
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-nav-top{
  display: flex; align-items: center; justify-content: space-between; height: 76px;
}
.mobile-nav-close{
  width: 42px; height: 42px;
  border: 1px solid #3A4145;
  border-radius: var(--radius-sm);
  background: none; color: var(--anl-white);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mobile-nav-links{ margin-top: var(--sp-6); display: flex; flex-direction: column; }
.mobile-nav-links a{
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.75rem);
  padding-block: var(--sp-2);
  border-bottom: 1px solid #343B3E;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.mobile-nav-links a .num{ font-size: 0.9rem; color: #7E929B; }
.mobile-nav-foot{ margin-top: auto; padding-top: var(--sp-5); }
.mobile-nav-foot .btn{ width: 100%; justify-content: center; }
.mobile-nav-foot p{ margin-top: var(--sp-3); color: #8FA0A8; font-size: 0.875rem; }

/* -------------------------------- Buttons ---------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--anl-cta);
  /* Charcoal (not white) on CTA Blue: white-on-#1BA9EB measures ~2.65:1,
     which fails WCAG AA. Charcoal-on-#1BA9EB measures ~5.5:1. */
  color: var(--anl-charcoal);
}
.btn-primary:hover{ background: #22B3F3; }
.btn-secondary{
  background: transparent;
  border-color: var(--anl-cta-secondary);
  color: var(--ink-strong);
}
.btn-secondary:hover{ border-color: var(--anl-dark-grey); background: rgba(73,86,95,0.06); }
.section--dark .btn-secondary{ color: var(--anl-white); border-color: #4A5559; }
.section--dark .btn-secondary:hover{ border-color: #7E929B; background: rgba(255,255,255,0.05); }
.btn-ghost{
  background: none;
  color: var(--anl-link);
  padding: 0.4em 0;
  border-radius: 0;
}
.section--dark .btn-ghost{
  /* anl-link (#1173A0) measures ~2.8:1 on charcoal - fails AA. Light Blue
     measures ~8:1 on charcoal, so dark sections use it instead. */
  color: var(--anl-light-blue);
}
.btn-ghost::after{
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.btn-ghost:hover::after{ transform: translateX(3px); }
.btn svg{ width: 1em; height: 1em; }

/* This rule is written for the hand-authored header/footer buttons, where
   .btn-ghost is a class on the <a> itself. A Gutenberg block's "Additional
   CSS Class" setting instead lands on the *wrapper* <div>
   (.wp-block-button.btn-ghost), which also matches the selector above --
   producing a second, block-level arrow one line below the link's own
   content (confirmed live, Phase D1's Home page "Read our approach" button,
   then again on Security's "Read the Privacy Policy" button in D2). Every
   block-authored ghost button instead uses a literal arrow character in the
   link text (see home-content.php / security-content.php), so the
   wrapper-div's own arrow is cancelled here, sitewide, rather than patched
   per page. */
.wp-block-button.btn-ghost::after{ content: none; }

/* ------------------------- Block-authored buttons -------------------------- */
/* core/button's "Additional CSS Class" lands on the outer .wp-block-button
   wrapper, not the <a> itself -- unlike the hand-written <a class="btn
   btn-primary"> above, so these target the link as a descendant of the
   classed wrapper rather than assuming the class is on the link. Originally
   scoped to home.css (Phase D1, Home body only); moved here sitewide in
   Phase D2 after About/Security's block-authored buttons ("Join Early
   Access", "Contact us", "Read the Privacy Policy") were found rendering
   with Astra's default 4px-radius, solid-fill button style instead of the
   approved pill/ghost treatment -- the rules existed but were never loaded
   on those pages. Same root-cause class as the duplicate-arrow bug above. */
.wp-block-buttons.btn-group{ gap: var(--sp-3); }
.wp-block-button .wp-block-button__link{
  /* inline-block, not inline-flex: the ghost variant's ::after ("→") becomes
     a flex item under inline-flex, which blockifies it per the CSS Flexbox
     spec regardless of its own declared display -- it then wraps onto its
     own line at narrow widths. Plain inline-block avoids that entirely. */
  display: inline-block;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.wp-block-button .wp-block-button__link:active{ transform: translateY(1px); }
.wp-block-button.btn-primary .wp-block-button__link{
  background: var(--anl-cta);
  /* Charcoal, not white, on CTA Blue -- see the hand-authored .btn-primary's
     identical note above (WCAG AA). */
  color: var(--anl-charcoal);
}
.wp-block-button.btn-primary .wp-block-button__link:hover{ background: #22B3F3; }
.wp-block-button.btn-ghost .wp-block-button__link{
  background: none;
  color: var(--anl-link);
  padding: 0.4em 0;
  border-radius: 0;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover{ text-decoration: none; }
/* anl-link (#1173A0) measures ~2.8:1 on charcoal -- fails AA, same issue as
   the hand-authored .section--dark .btn-ghost above. Found on Security's
   "Read the Privacy Policy" button (Our Privacy Commitment dark section). */
.section--dark .wp-block-button.btn-ghost .wp-block-button__link{ color: var(--anl-light-blue); }

/* -------------------------------- Footer ------------------------------------ */
.site-footer{
  background: var(--anl-charcoal);
  color: #C3CBCF;
  padding-block: var(--sp-7) var(--sp-5);
}
.footer-top{
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid #343B3E;
}
@media (min-width: 800px){
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-brand img{ height: 24px; margin-bottom: var(--sp-3); }
.footer-brand p{ max-width: 32ch; color: #8FA0A8; font-size: 0.9375rem; }
/* Phase E accessibility fix: was h4, a heading-level skip on every page
   (each page's own content tops out at h1/h2/h3 before the footer) --
   confirmed sitewide, not page-specific, since this is shared global chrome.
   Bumped to h2 (never skips regardless of a given page's own last heading
   level) with this selector updated to match; visual treatment is entirely
   class/selector-driven here, not tag-driven, so appearance is unchanged. */
.footer-col h2{ color: var(--anl-white); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); font-weight: 500; margin-bottom: var(--sp-3); }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a{ color: #C3CBCF; font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--anl-white); }
.footer-bottom{
  padding-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--muted-on-dark);
}
.footer-bottom .legal-links{ display: flex; gap: var(--sp-3); }
.footer-bottom a:hover{ color: #C3CBCF; }
.status-dot{
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
}
.status-dot i{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--anl-red);
  box-shadow: 0 0 0 0 rgba(206,21,27,0.5);
  animation: pulse-dot 2.4s var(--ease-out) infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow: 0 0 0 0 rgba(206,21,27,0.45); }
  70%{ box-shadow: 0 0 0 6px rgba(206,21,27,0); }
  100%{ box-shadow: 0 0 0 0 rgba(206,21,27,0); }
}