/* ============================================================
   FABLE5 — FOUNDATION (Header / Shell)  ·  PREMIUM PASS
   Light "control surface" header floating above the Forge hero.
   Visual layer for templates/fable5/partials/site_header.php.
   ------------------------------------------------------------
   Light surface (global --mt-* tokens are still light), so header text is
   dark for legibility, with a refined hierarchy: LOGO anchors the left, the
   CTA is the single accent action at the right, navigation reads calm and
   secondary between them, and a thin ember "instrument edge" hands the
   surface off into the dark forge below. Scope: namespaced under
   .fbl-foundry; loaded ONLY by fable5's head-css.php; OVERRIDES 02-layout
   for fable5 (incl. its .nav-link::before underline hook) — shared files
   never edited. Header-local --fbl-h-* vars only; no global token renamed.
   MVP: CSS only — no JS, no scroll state.
   ============================================================ */

:root {
  /* Single-tier header height — generous for premium breathing room.
     The spacer override references it; the header sits ABOVE the hero. */
  --fbl-header-h: 84px;

  /* Header palette (light surface) */
  --fbl-h-surface:  #ffffff;
  --fbl-h-ink:      #16202e;                 /* logo-adjacent / strongest */
  --fbl-h-text:     #3b4654;                 /* nav — calm secondary */
  --fbl-h-muted:    #6b7686;                 /* descriptor — whisper */
  --fbl-h-accent:   #0076CE;                 /* forge ember (readable on white) */
  --fbl-h-accent-d: #0a5fa3;                 /* accent hover/active */
  --fbl-h-hairline: rgba(15, 23, 42, 0.08);
  --fbl-h-tintbg:   rgba(0, 118, 206, 0.08); /* hover/active tint */
  --fbl-h-sans:     "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 991px) { :root { --fbl-header-h: 72px; } }
@media (max-width: 767px) { :root { --fbl-header-h: 64px; } }

/* ---------- The surface (clean white bar floating above the dark hero) ---------- */
.fbl-foundry.site-header { background: transparent; }

.fbl-foundry .fixed-header-stack {
  background: var(--fbl-h-surface);
  border-bottom: 1px solid var(--fbl-h-hairline);
  /* soft depth so the white bar reads as floating over the dark forge */
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 10px 30px rgba(2, 6, 14, 0.26);
}

/* TRANSITION INTO THE FORGE — a thin ember "instrument edge" at the bottom
   of the surface that fades at the sides: the white header hands off into
   the dark forge with the hero's own accent colour. */
.fbl-foundry .fixed-header-stack::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 118, 206, 0.55), transparent);
  pointer-events: none;
}

.fbl-foundry .fbl-foundry__bar {
  min-height: var(--fbl-header-h);
  padding-top: 0;
  padding-bottom: 0;
}
.fbl-foundry .fbl-foundry__inner {
  min-height: var(--fbl-header-h);
  align-items: center;
}

/* Spacer matches the single-tier height (overrides 02-layout's 130/110/100).
   No bleed: the forge begins cleanly below the floating surface. */
.header-spacer { height: var(--fbl-header-h); }

/* ---------- Identity lockup (the anchor) ---------- */
.fbl-foundry .fbl-foundry__lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  text-decoration: none;
}
.fbl-foundry .fbl-foundry__mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.fbl-foundry .fbl-foundry__logo {
  height: clamp(40px, calc(var(--fbl-header-h) - 34px), 50px); /* ~+13% — the anchor */
  max-height: none;                            /* override 02-layout's mobile cap */
  width: auto;
  display: block;
}
/* status pip — a soft "system online" glow near the logo (control-center cue) */
.fbl-foundry .fbl-foundry__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #6cc0ff, var(--fbl-h-accent));
  box-shadow: 0 0 0 3px rgba(0, 118, 206, 0.12),
              0 0 9px rgba(0, 118, 206, 0.75);
  animation: fblStatusPulse 2.6s ease-in-out infinite;
}
@keyframes fblStatusPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 3px rgba(0,118,206,0.12), 0 0 9px rgba(0,118,206,0.75); }
  50%      { opacity: 0.78; box-shadow: 0 0 0 3px rgba(0,118,206,0.05), 0 0 5px rgba(0,118,206,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .fbl-foundry .fbl-foundry__status { animation: none; }
}
.fbl-foundry .fbl-foundry__descriptor {
  position: relative;
  padding-left: 18px;
  font: 600 9.5px/1.35 var(--fbl-h-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fbl-h-muted);
  white-space: nowrap;
}
.fbl-foundry .fbl-foundry__descriptor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--fbl-h-hairline);
}
/* On collapsed-nav widths the beside-logo descriptor gives way to the
   centred mobile identity micro-label (below). */
@media (max-width: 991px) {
  .fbl-foundry .fbl-foundry__descriptor { display: none; }
}

/* Mobile-only centred identity micro-label — fills the gap between the logo
   and the hamburger; hidden on desktop and on very small screens. */
.fbl-foundry .fbl-foundry__micro { display: none; }
@media (max-width: 991px) {
  .fbl-foundry .fbl-foundry__micro {
    display: block;
    flex: 1 1 auto;
    text-align: center;
    margin: 0 12px;
    font: 600 9px/1 var(--fbl-h-sans);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--fbl-h-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 480px) {
  .fbl-foundry .fbl-foundry__micro { display: none; }
}

/* ---------- Navigation (calm secondary, dark text on white) ---------- */
.fbl-foundry .navbar-nav { gap: 2px; }
.fbl-foundry .navbar-nav .nav-link {
  color: var(--fbl-h-text);
  font: 500 0.9rem/1 var(--fbl-h-sans);
  letter-spacing: 0.015em;
  padding: 10px 18px;
  transition: color 0.18s ease;
}
.fbl-foundry .navbar-nav .nav-link:hover,
.fbl-foundry .navbar-nav .nav-link:focus { color: var(--fbl-h-accent); }
.fbl-foundry .navbar-nav .nav-link.active {
  color: var(--fbl-h-accent);
  font-weight: 600;
}
/* Recolour 02-layout's existing ::before underline to the forge ember +
   refine it (centred, subtle). The scaleX in/out behaviour is inherited. */
.fbl-foundry .navbar-nav .nav-link::before {
  left: 18px;
  right: 18px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fbl-h-accent), #2D9CFF);
}

/* ---------- Dropdowns (domain / service menus — light) ---------- */
.fbl-foundry .navbar-nav .dropdown-menu {
  background: var(--fbl-h-surface);
  border: 1px solid var(--fbl-h-hairline);
  border-radius: 12px;
  padding: 8px;
  margin-top: 10px;
  box-shadow: 0 14px 34px rgba(2, 6, 14, 0.16);
}
.fbl-foundry .navbar-nav .dropdown-item {
  color: var(--fbl-h-text);
  border-radius: 7px;
  padding: 9px 14px;
  font: 500 0.9rem/1.2 var(--fbl-h-sans);
  transition: background 0.15s ease, color 0.15s ease;
}
.fbl-foundry .navbar-nav .dropdown-item:hover,
.fbl-foundry .navbar-nav .dropdown-item:focus {
  background: var(--fbl-h-tintbg);
  color: var(--fbl-h-accent-d);
}
.fbl-foundry .navbar-nav .dropdown-item.active {
  background: var(--fbl-h-tintbg);
  color: var(--fbl-h-accent-d);
}

/* ---------- CTA — the single accent action (is_cta → .btn.btn-primary.btn-sm) ----------
   Ember outline pill with a motion cue. Label + link stay admin-driven. */
.fbl-foundry .navbar-nav .btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--fbl-h-accent);
  --bs-btn-color: var(--fbl-h-accent);
  --bs-btn-hover-bg: var(--fbl-h-accent);
  --bs-btn-hover-border-color: var(--fbl-h-accent);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--fbl-h-accent-d);
  --bs-btn-active-border-color: var(--fbl-h-accent-d);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1.5px solid var(--fbl-h-accent);
  color: var(--fbl-h-accent);
  border-radius: 999px;
  padding: 10px 24px;
  font: 600 0.8rem/1 var(--fbl-h-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
/* motion cue — a forge arrow that nudges forward on hover */
.fbl-foundry .navbar-nav .btn-primary::after {
  content: "\2192"; /* → */
  font-size: 1.02em;
  line-height: 0;
  transition: transform 0.2s ease;
}
.fbl-foundry .navbar-nav .btn-primary:hover,
.fbl-foundry .navbar-nav .btn-primary:focus {
  background: var(--fbl-h-accent);
  border-color: var(--fbl-h-accent);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 118, 206, 0.28);
}
.fbl-foundry .navbar-nav .btn-primary:hover::after,
.fbl-foundry .navbar-nav .btn-primary:focus::after { transform: translateX(3px); }

/* ---------- Mobile toggle (dark on white) ---------- */
.fbl-foundry .navbar-toggler {
  border: 1px solid var(--fbl-h-hairline);
  padding: 6px 9px;
}
.fbl-foundry .navbar-toggler:focus { box-shadow: none; }
.fbl-foundry .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(22,32,46,0.82)' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* ---------- Mobile collapse panel (light) ---------- */
@media (max-width: 991px) {
  .fbl-foundry .fbl-foundry__collapse {
    background: var(--fbl-h-surface);
    border: 1px solid var(--fbl-h-hairline);
    border-radius: 12px;
    margin-top: 12px;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(2, 6, 14, 0.16);
  }
  .fbl-foundry .navbar-nav { gap: 0; }
  .fbl-foundry .navbar-nav .nav-link { padding: 12px 14px; }
  .fbl-foundry .navbar-nav .btn-primary {
    display: inline-flex;
    margin: 10px 14px 6px;
  }
}


/* ============================================================
   FABLE5 — FOOTER  ·  "Foundry Shutdown Sequence" / Final Instrument Layer
   ------------------------------------------------------------
   The final quiet signal: a deep-coal band continuing the dark canvas — a
   closing statement, a "// Signal" contact, a minimal nav row, and an
   instrument base bar ("Core · Standby"). No sitemap, no map, no bright
   panels. Emitted by templates/fable5/partials/site_footer.php (.fbl-footer).
   Footer-local dark --fbl-* vars (loaded only by fable5's head-css).
============================================================ */
.fbl-footer {
  --fbl-coal:        #020509;
  --fbl-ink:         #E8F1FA;
  --fbl-smoke:       rgba(214, 232, 248, 0.60);
  --fbl-smoke-dim:   rgba(214, 232, 248, 0.34);
  --fbl-accent:      #2D9CFF;
  --fbl-accent-core: #0076CE;
  --fbl-ice:         #9BD1FF;
  --fbl-fhairline:   rgba(214, 232, 248, 0.10);
  --fbl-sans:        "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fbl-serif:       "Cormorant Garamond", Georgia, serif;

  position: relative;
  overflow: hidden;
  background: var(--fbl-coal);
  border-top: 1px solid var(--fbl-fhairline);
  padding: clamp(48px, 6vw, 84px) 0 clamp(20px, 3vw, 30px);
  color: var(--fbl-ink);
}
.fbl-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 70% at 8% 0%, rgba(0, 118, 206, 0.06), transparent 60%);
}
.fbl-footer__inner { position: relative; }

/* ── Closing zone ── */
.fbl-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  padding-bottom: clamp(30px, 4vw, 48px);
  border-bottom: 1px solid var(--fbl-fhairline);
}
.fbl-footer__brand { max-width: 44ch; }
.fbl-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 700 14px/1 var(--fbl-sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fbl-ink);
}
.fbl-footer__spark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, var(--fbl-ice), var(--fbl-accent-core));
  box-shadow: 0 0 10px rgba(45, 156, 255, 0.7);
  animation: fblFooterSpark 2.8s ease-in-out infinite;
}
@keyframes fblFooterSpark { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.fbl-footer__descriptor {
  display: block;
  margin-top: 12px;
  font: 600 9px/1 var(--fbl-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fbl-accent);
}
.fbl-footer__statement {
  margin: 16px 0 0;
  font: italic 500 clamp(15px, 1.4vw, 18px)/1.7 var(--fbl-serif);
  color: var(--fbl-smoke);
}

.fbl-footer__signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 30px);
}
.fbl-footer__signal-label {
  font: 700 8.5px/1 var(--fbl-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fbl-smoke-dim);
}
.fbl-footer__contact {
  font: 500 0.92rem/1.4 var(--fbl-sans);
  color: var(--fbl-smoke);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fbl-footer__contact:hover { color: var(--fbl-ice); }
.fbl-footer__social { display: flex; gap: 14px; margin-top: 6px; }
.fbl-footer__social a {
  color: var(--fbl-smoke-dim);
  font-size: 1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}
.fbl-footer__social a:hover { color: var(--fbl-accent); transform: translateY(-2px); }

/* ── Identity (left) + Location map (right) ── */
.fbl-footer__identity { flex: 1 1 340px; max-width: 52ch; }
.fbl-footer__location { flex: 0 1 400px; min-width: 260px; }
.fbl-footer__map {
  margin-top: 12px;
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--fbl-fhairline);
  border-radius: 12px;
  overflow: hidden;
  background: #04101E;
  /* floated instrument panel — depth + faint ember halo */
  box-shadow: 0 18px 44px rgba(2, 6, 14, 0.60), 0 0 30px rgba(0, 118, 206, 0.07);
}
.fbl-footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* fit the dark canvas (night-mode map) */
  filter: invert(0.90) hue-rotate(180deg) brightness(0.92) contrast(0.95);
}
/* HUD overlay — edge vignette (depth + blend to coal) + ember corner ticks */
.fbl-footer__map-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(2, 6, 14, 0.62);
}
.fbl-footer__map-hud::before,
.fbl-footer__map-hud::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(45, 156, 255, 0.55);
}
.fbl-footer__map-hud::before { top: 9px;    left: 9px;  border-right: 0; border-bottom: 0; }
.fbl-footer__map-hud::after  { bottom: 9px; right: 9px; border-left: 0;  border-top: 0; }
.fbl-footer__addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font: 500 0.82rem/1.4 var(--fbl-sans);
  color: var(--fbl-smoke-dim);
}
.fbl-footer__addr i { color: var(--fbl-accent); }

/* ── Minimal nav ── */
.fbl-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(22px, 3vw, 34px) 0;
}
.fbl-footer__nav a {
  font: 500 0.82rem/1 var(--fbl-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fbl-smoke-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fbl-footer__nav a:hover { color: var(--fbl-ice); }

/* ── Instrument base ── */
.fbl-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--fbl-fhairline);
  font: 700 8.5px/1.8 var(--fbl-sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fbl-smoke-dim);
}
.fbl-footer__status { display: inline-flex; align-items: center; gap: 9px; }
.fbl-footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fbl-accent);
  box-shadow: 0 0 8px rgba(45, 156, 255, 0.65);
}
.fbl-footer__powered a {
  color: var(--fbl-smoke);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fbl-footer__powered a:hover { color: var(--fbl-accent); }

@media (prefers-reduced-motion: reduce) {
  .fbl-footer__spark { animation: none; }
}
@media (max-width: 767px) {
  .fbl-footer__top  { flex-direction: column; gap: 26px; }
  .fbl-footer__identity { width: 100%; flex-basis: auto; max-width: none; }
  .fbl-footer__location { display: none; } /* map hidden on mobile */
  .fbl-footer__base { flex-direction: column; align-items: flex-start; gap: 10px; }
}