/* ================================================================
   theme.css — Fog Wizards shared design system
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0d1b2a;
  --mist:   #4fc3f7;
  --teal:   #00bfa5;
  --smoke:  #e8f4f8;
  --white:  #ffffff;
  --gray:   #6b7280;
  --light:  #f0f9ff;
  --border: #e2e8f0;
  --green:  #10b981;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--navy);
  background: var(--white);
  line-height: 1.6;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; height: 68px;
  background: rgba(13,27,42,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(79,195,247,.15);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo svg { width:34px; height:34px; }
.nav-logo-text { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--white); letter-spacing:.02em; }
.nav-logo-text span { color:var(--mist); }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:rgba(255,255,255,.8); text-decoration:none; font-size:.875rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--mist); }
.nav-cta { background:var(--teal); color:var(--white)!important; padding:.5rem 1.25rem; border-radius:6px; }
.nav-cta:hover { background:var(--mist)!important; color:var(--navy)!important; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  position: relative; height: 380px;
  display: flex; align-items: flex-end; padding: 0 5vw 4rem; overflow: hidden;
}
.page-hero-bg, .hero-bg { position: absolute; inset: 0; }
.hero-content, .page-hero-content {
  position: relative; max-width: 1200px; width: 100%; margin: 0 auto;
}
.breadcrumb { font-size:.8125rem; color:rgba(255,255,255,.5); margin-bottom:.75rem; }
.breadcrumb a { color:var(--mist); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); color:var(--white); line-height:1.15; margin-bottom:.75rem; }
.page-hero p { font-size:1.0625rem; color:rgba(255,255,255,.68); max-width:540px; }

/* ── SECTION SHARED ── */
.section-label { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:.75rem; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.75rem); color:var(--navy); line-height:1.2; margin-bottom:1rem; }
.section-sub { font-size:1rem; color:var(--gray); max-width:540px; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--teal); color:var(--white); text-decoration:none; font-weight:600; font-size:.9375rem; padding:.8125rem 1.75rem; border-radius:8px; transition:background .2s,transform .15s; }
.btn-primary:hover { background:#00a896; transform:translateY(-1px); }

.btn-ghost { display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(255,255,255,.35); color:var(--white); text-decoration:none; font-weight:500; font-size:.9375rem; padding:.8125rem 1.75rem; border-radius:8px; transition:border-color .2s,background .2s; }
.btn-ghost:hover { border-color:var(--mist); background:rgba(79,195,247,.1); }

.btn-white { display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--teal); text-decoration:none; font-weight:700; font-size:.9375rem; padding:.875rem 2rem; border-radius:8px; transition:transform .15s,box-shadow .2s; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }

/* ── CTA BANNER (teal gradient) ── */
.cta-banner { background:linear-gradient(135deg,var(--teal) 0%,#0097a7 100%); padding:4rem 5vw; text-align:center; color:var(--white); }
.cta-banner h2 { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.5rem); margin-bottom:.75rem; }
.cta-banner p { font-size:1.0625rem; opacity:.88; margin-bottom:2rem; }

/* ── FOOTER ── */
footer { background:var(--navy); color:rgba(255,255,255,.6); padding:3rem 5vw 1.5rem; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand p { font-size:.875rem; line-height:1.7; margin-top:.75rem; max-width:260px; }
.footer-col h5 { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-col ul a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.875rem; transition:color .2s; }
.footer-col ul a:hover { color:var(--mist); }
.footer-bottom { max-width:1200px; margin:1.5rem auto 0; display:flex; justify-content:space-between; align-items:center; font-size:.8125rem; flex-wrap:wrap; gap:.5rem; }
.footer-social { display:flex; gap:.75rem; }
.footer-social a { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); text-decoration:none; font-size:.875rem; transition:border-color .2s,color .2s; }
.footer-social a:hover { border-color:var(--mist); color:var(--mist); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .footer-inner { grid-template-columns:1fr; }
}