/**
 * AssurePort — Site Chrome (canonical header + footer styling)
 * v1.0 (2026-08-07) — Marketing UI/UX Kampanyası FOUNDATION-B (#9, çözer #2/#3/#8/#13-yarısı).
 *
 * Bu dosya /assets/site-chrome.js'in enjekte ettiği <header class="nav"> ve
 * <footer role="contentinfo"> için TEK KAYNAK stil setidir. Load order:
 *   design-tokens.css -> components.css -> site-chrome.css -> mobile-nav.css
 * (components.css .btn/.badge tanımlarını tüketir; bu dosya kendi renk sabiti
 * taşımaz, design-tokens.css custom property'lerine bağımlıdır.)
 *
 * Sayfanın kendi inline <style>'ındaki eski .nav/.nav-inner/.brand/.nav-links/
 * #lang-switcher/footer/.foot-* kuralları placeholder'a geçen sayfalarda
 * KALDIRILDI — bu dosya artık o seçicilerin TEK sahibi. Bu dosyayı düzenlerken
 * her public sayfayı etkilediğini unutma.
 *
 * Breakpoint kararı (review #3 — nav-taşma-bandı 1100-1250px):
 *   Kanonik header 9 menü öğesi + 2 CTA + dil-seçici taşıyor (eski varyantların
 *   çoğundan daha kalabalık — TR/DE çevirileri de daha uzun). Ara-sıkışma
 *   durumunu (flex-wrap ile 2 satıra taşma) tamamen ortadan kaldırmak için ORTA
 *   breakpoint YOK — mobile-nav.js'in hamburger eşiği bu dosyayla birlikte
 *   assets/mobile-nav.css içinde 720px -> 1360px'e çıkarıldı (tek yerde, bkz o
 *   dosyanın başlığı). 1360px'in altında her genişlikte tam-genişlik çekmece
 *   (drawer) var; üstünde nav-inner tek satırda kalacak şekilde ölçüldü
 *   (max-width 1320 + 28px yatay boşluk + 18px gap). Patron tarayıcıda görsel
 *   doğrulayacak — büyük harf değişikliklerinde bu üç sayı (1320/1360/18)
 *   birlikte ayarlanmalı.
 */

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(251, 250, 246, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .nav,
html.dark .nav {
  background: rgba(15, 20, 25, .88);
}

.nav .nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -.01em;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}

.nav .nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.nav .nav-links a {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s;
}
.nav .nav-links a:hover { color: var(--text); }
.nav .nav-links a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}
/* .nav-links a.btn — 2026-08-08 Marketing Dark Mode audit: `.nav .nav-links a`
   above (2 classes + element = 0,2,1) is MORE specific than `.btn.primary` /
   `.btn.ghost` in components.css (2 classes = 0,2,0), so it silently won and
   painted the nav's signup/sign-in buttons with --text-2 instead of their
   intended --btn-primary-fg (white) / --btn-ghost-fg. Invisible in light mode
   (--text-2 on the beacon fill still read, just duller than intended) but a
   real AA failure in dark (~2.7:1 on the primary button, --text-2 dark value
   is tuned for body text on --bg, not for text on a bright beacon fill).
   `white-space` was already carved out here as a precedent; color needed the
   same override — restore the .btn cascade instead of re-inventing colors. */
.nav .nav-links a.btn { white-space: nowrap; color: var(--btn-fg); }
.nav .nav-links a.btn:hover { color: var(--btn-hover-fg); }
.nav .nav-links a.btn.primary,
.nav .nav-links a.btn.primary:hover { color: var(--btn-primary-fg); }
.nav .nav-links a.btn.ghost { color: var(--btn-ghost-fg); }
.nav .nav-links a.btn.ghost:hover { color: var(--btn-ghost-hover-fg); }

/* ============================================================
   LANGUAGE SWITCHER (Harbor & Beacon, single source)
   ============================================================ */
#lang-switcher {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 7px 28px 7px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  /* Arrow re-drawn with currentColor via var(--primary) inline SVG so it tracks
     the light/dark token instead of a hardcoded hex (old per-page copies used
     a literal #E14B2E, which drifted from the token after the P0 beacon-hex
     update on 2026-08-07). */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C63D22' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#lang-switcher:hover {
  border-color: var(--primary);
  background-color: var(--elevated);
  box-shadow: 0 0 0 3px rgba(198, 61, 34, .12);
}
#lang-switcher:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}
#lang-switcher option {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 500;
}

/* ============================================================
   THEME TOGGLE — Light / Dark / Auto (2026-08-08 Marketing Dark Mode)
   Mirrors the console's #theme-toggle (app.html, UI/UX P2 #19) so the two
   surfaces look and behave identically. Cycles on click; icon + accessible
   name reflect the current mode via [data-mode]. Markup + cycle logic live
   in site-chrome.js (this file only styles it). The `.theme-toggle-label`
   span is hidden on the desktop row (icon-only, 44px touch target) and
   revealed as a full-width row inside the mobile drawer — see
   assets/mobile-nav.css's `.nav-links .theme-toggle` override.
   ============================================================ */
.nav .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: var(--transition-base);
}
.nav .theme-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}
.nav .theme-toggle svg { width: 18px; height: 18px; display: none; flex-shrink: 0; }
.nav .theme-toggle[data-mode="light"] .ti-sun  { display: block; }
.nav .theme-toggle[data-mode="dark"]  .ti-moon { display: block; }
.nav .theme-toggle[data-mode="auto"]  .ti-auto { display: block; }
.nav .theme-toggle .theme-toggle-label { display: none; }

/* ============================================================
   FOUC-min — placeholders reserve height before injection runs.
   Header height matches .nav-inner's fixed 64px; footer reserves a
   conservative floor (real footer is taller, so this only trims the
   worst of the jump — see site-chrome.js header comment for why we
   don't try to reserve the exact footer height).
   ============================================================ */
[data-site-header] { display: block; min-height: 64px; }
[data-site-footer] { display: block; min-height: 200px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer[role="contentinfo"] {
  border-top: 1px solid var(--border);
  padding: 60px 0 32px;
  background: var(--bg);
}
footer[role="contentinfo"] .foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto 50px;
  padding: 0 32px;
}
footer[role="contentinfo"] .foot-grid h5 {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
}
footer[role="contentinfo"] .foot-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer[role="contentinfo"] .foot-grid a {
  color: var(--text-2);
  font-size: 14px;
}
footer[role="contentinfo"] .foot-grid a:hover { color: var(--text); }
footer[role="contentinfo"] .foot-brand .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
}
footer[role="contentinfo"] .foot-brand p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 300px;
}
footer[role="contentinfo"] .foot-social {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px 32px;
}
footer[role="contentinfo"] .foot-social a {
  color: var(--muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
footer[role="contentinfo"] .foot-social a:hover { color: var(--text-2); }
footer[role="contentinfo"] .foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 1180px;
  margin: 24px auto 0;
  padding: 24px 32px 0;
}
footer[role="contentinfo"] .compliance-badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer[role="contentinfo"] .compliance-badges span {
  display: flex;
  align-items: center;
  gap: 6px;
}
footer[role="contentinfo"] .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--safe);
  flex-shrink: 0;
}

@media (max-width: 880px) {
  footer[role="contentinfo"] .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 640px) {
  footer[role="contentinfo"] .foot-grid { grid-template-columns: 1fr; gap: 24px; }
}