/* static/css/base.css
   CTFLY Public Site (Wagtail) — base styles
   Tokens + reset + global layout + header/nav + footer + shared buttons + shared responsive
*/

/* ===============================
   Design Tokens
=============================== */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;

  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --accent:#38bdf8;

  --surface:#f8fafc;
  --surface-2:#f1f5f9;

  --shadow:0 10px 30px rgba(2,6,23,.10);
  --shadow-sm:0 6px 18px rgba(2,6,23,.08);

  --radius:14px;
  --radius-sm:10px;

  --container:1200px;

  /* Dark UI tokens (used for quote/contact pages) */
  --dark-bg-0:#070b14;
  --dark-bg-1:#090f1d;
  --dark-bg-2:#0b1224;

  --dark-text:#e8eefc;
  --dark-muted:rgba(232,238,252,.72);
  --dark-border:rgba(255,255,255,.10);

  --dark-input-bg:rgba(10, 14, 26, 0.78);
  --dark-input-border:rgba(255,255,255,.14);
}

/* ===============================
   Base / Reset
=============================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:rgba(56,189,248,.35); }

/* ===============================
   Layout Utilities
=============================== */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}

.container.narrow,
.narrow{
  max-width:820px;
  margin:0 auto;
}

.section{ padding:4rem 0; }

/* Offset for sticky header when using anchor links */
section{ scroll-margin-top:90px; }

.section-title{
  text-align:center;
  font-size:2rem;
  margin:0 0 3rem;
  letter-spacing:-.01em;
}

/* ===============================
   Announcement Bar (optional)
=============================== */
.announcement-bar{
  background:#0f172a;
  color:#ffffff;
  font-size:.95rem;
}

.announcement-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem 1.5rem;
}

.announcement-cta{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

.announcement-cta:hover{ text-decoration:underline; }

/* ===============================
   Header / Navigation
=============================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8, 12, 22, 0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}

.logo{
  font-size:1.25rem;
  font-weight:900;
  text-decoration:none;
  letter-spacing:.5px;
  display:inline-flex;
  flex-direction:column;
  line-height:1.05;
  color:#ffffff;
}

.logo-sub{
  display:block;
  font-size:.7rem;
  font-weight:600;
  opacity:.75;
  margin-top:.2rem;
  color:rgba(232,238,252,.75);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
}

.nav-link{
  text-decoration:none;
  font-weight:600;
  color:rgba(232,238,252,.82);
  padding:.45rem .55rem;
  border-radius:10px;
  transition:opacity 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-link:hover{
  opacity:1;
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}

.nav-link.active{
  opacity:1;
  font-weight:800;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.nav-cta{
  margin-left:.35rem;
  padding:.55rem 1.1rem;
  background:linear-gradient(135deg, #2563eb, #06b6d4);
  color:#ffffff;
  text-decoration:none;
  font-weight:750;
  border-radius:12px;
  transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  box-shadow:0 12px 26px rgba(37,99,235,.22);
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
}

.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(37,99,235,.28);
  filter:saturate(1.05);
}

/* ===============================
   Buttons (shared)
=============================== */
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:12px;
  padding:.85rem 1.2rem;
  font-weight:750;
  text-decoration:none;
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
  white-space:nowrap;
}

.btn-primary{
  background:linear-gradient(135deg, #2563eb, #06b6d4);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.22);
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 38px rgba(37,99,235,.30);
}

.btn-secondary{
  background:transparent;
  color:#ffffff;
  border:1px solid rgba(56,189,248,.75);
}

.btn-secondary:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,1);
}

.btn-large{
  padding:1rem 2rem;
  font-size:1.05rem;
}

/* ===============================
   Main Content (layout only)
=============================== */
.site-main{
  min-height:60vh;
  min-height:calc(100vh - 140px);
}

/* ===============================
   Footer
=============================== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(8, 12, 22, 0.70);
  color:rgba(232,238,252,.75);
  margin-top:0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem 0;
  font-size:.9rem;
}

.site-footer p{ margin:0; }

/* ===============================
   Responsive (shared)
=============================== */
@media (max-width: 980px){
  .footer-inner{
    flex-direction:column;
    gap:1rem;
    align-items:flex-start;
  }
}

@media (max-width: 600px){
  .trust-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    text-align:left;
  }
}


/* =========================
   Navigation Dropdown
   ========================= */
.nav-link-dropdown::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.75rem;
}

.dropdown-panel {
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.nav-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 12px 20px;
  color: #222;
  font-weight: 500;
  text-decoration: none;
}

.dropdown-item:hover {
  background: #f5f7fa;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
}

/* ======================================================
   ENTERPRISE ENHANCEMENTS — A7.10 → A7.15
   (No existing styles removed)
====================================================== */

/* ===============================
   Trust & Credibility Section
=============================== */
.section-trust-credibility{
  background:linear-gradient(180deg, var(--surface), #ffffff);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.trust-cred-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2rem;
  margin-top:2rem;
}

.trust-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
  transition:transform 180ms ease, box-shadow 180ms ease;
}

.trust-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.trust-card h4{
  margin:0 0 .5rem;
  font-size:1.1rem;
}

.trust-card p{
  margin:0;
  color:var(--muted);
}

/* ===============================
   Accessibility Focus States
=============================== */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
  outline:3px solid rgba(56,189,248,.45);
  outline-offset:2px;
}

/* ===============================
   Smooth Scrolling
=============================== */
html{
  scroll-behavior:smooth;
}

/* ===============================
   Performance Image Rendering
=============================== */
img[loading="lazy"]{
  filter:blur(0);
  transition:opacity .3s ease;
}

/* ===============================
   CTA Visual Enhancement
=============================== */
.section-cta{
  position:relative;
  overflow:hidden;
}

.section-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(37,99,235,.25), transparent 60%);
  opacity:.6;
}

/* ===============================
   Contact Info Strip
=============================== */
.contact-info-strip{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:2rem 0;
  font-size:.95rem;
  color:var(--muted);
  border:1px solid var(--border);
  padding:1rem;
  border-radius:var(--radius-sm);
  background:var(--surface);
}

/* ===============================
   Privacy Note
=============================== */
.privacy-note{
  margin-top:1rem;
  font-size:.85rem;
  color:var(--dark-muted);
  opacity:.85;
}

/* ===============================
   Enterprise Support Section
=============================== */
.enterprise-support{
  margin-top:3rem;
  padding:2rem;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  text-align:center;
}

.enterprise-support h3{
  margin-bottom:.75rem;
}

/* ===============================
   Mobile Enhancements
=============================== */
@media (max-width: 768px){
  .trust-cred-grid{
    grid-template-columns:1fr;
  }

  .contact-info-strip{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Dropdown open state for JS (mobile + keyboard) */
.nav-dropdown.is-open .dropdown-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ===============================
   Cookie banner
=============================== */
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:2000;
  background:rgba(8, 12, 22, 0.92);
  color:rgba(232,238,252,.90);
  border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}

.cookie-banner__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 1.5rem;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

.cookie-banner__inner p{
  margin:0;
  font-size:.95rem;
  line-height:1.35;
}

.cookie-banner__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 700px){
  .cookie-banner__inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   FIX: Header + Dropdown final override (do not remove older rules)
   Place at END of base.css
========================= */

/* Keep header dark (matches existing nav-link colors) */
.site-header{
  background:rgba(8, 12, 22, 0.72) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(10px) !important;
}

/* Ensure dropdown panel is readable */
.dropdown-panel{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:12px !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.15) !important;
}

/* Dropdown items */
.dropdown-item{
  color:#0f172a !important;
  font-weight:600 !important;
}

.dropdown-item:hover{
  background:#f5f7fa !important;
}

/* CTA should stay gradient (avoid later override turning it black) */
.nav-cta-primary{
  background:linear-gradient(135deg, #2563eb, #06b6d4) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(37,99,235,.22) !important;
}

.nav-cta-primary:hover{
  background:linear-gradient(135deg, #1d4ed8, #0891b2) !important;
}