/*
  AEEDTCCU — Coming Soon — styles.css  (v3 — GoDaddy-hardened)
  ==============================================================
  Key fixes vs previous version:
  - Google Fonts loaded via <link> in HTML (not @import here)
  - ALL SVG icons have explicit width/height in HTML attributes
    so they cannot blow up even if CSS is slow to load
  - contact-card__icon has overflow:hidden + hard pixel sizes
  - No reliance on SVG inheriting container dimensions
  - Defensive fallback font stack so layout holds without Nunito
  ==============================================================

  Palette: Royal Blue + White, Red accent (from logo)
  Fonts:   Nunito (headings) · Merriweather (body)
*/

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2vw, 1.0625rem);
  line-height: 1.75;
  color: #0f1f3d;
  background: #f7faff;
  overflow-x: hidden;
  min-height: 100vh;
}

img  { display: block; max-width: 100%; height: auto; }
/* CRITICAL: SVG must never grow beyond what we explicitly set */
svg  { display: block; flex-shrink: 0; overflow: visible; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2 {
  font-family: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  line-height: 1.15;
}

:focus-visible {
  outline: 3px solid #2e6fca;
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }


/* ── Skip link ────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.6rem 1rem;
  background: #c0282a;
  color: #fff;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  border-radius: 0 0 4px 4px;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }


/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
  position: relative;
  overflow: hidden;
  background: #0d2f6e;          /* navy — hardcoded, no var() */
  color: #ffffff;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

/* Decorative blobs */
.header-bg { position: absolute; inset: 0; pointer-events: none; }
.wave { position: absolute; border-radius: 50%; opacity: 0.10; }
.wave--1 {
  width: 600px; height: 600px;
  background: #2e6fca;
  top: -280px; left: -120px;
}
.wave--2 {
  width: 400px; height: 400px;
  background: #1a56a5;
  bottom: -180px; right: -80px;
}

/* Logo */
.logo-wrap {
  position: relative;
  z-index: 1;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  padding: 5px;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 4px 28px rgba(0,0,0,0.35);
  animation: floatLogo 4s ease-in-out infinite;
  flex-shrink: 0;
}
.logo-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Name */
.org-name-wrap { position: relative; z-index: 1; }

.org-abbr {
  font-family: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.org-full {
  font-size: clamp(0.78rem, 1.8vw, 0.9375rem);
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
  line-height: 1.55;
}


/* ── Tagline ──────────────────────────────────────────────── */
.tagline-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.tagline {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  color: #ffffff;
}
.tagline-prefix {
  color: #ddeeff;
  margin-right: 0.3em;
}
.tagline-toggle {
  font-size: 0.75rem;
  font-family: 'Nunito', Arial, sans-serif;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 9999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tagline-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.55); }


/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 4rem 1.5rem 5rem;
  background: linear-gradient(160deg, #1a4a9a 0%, #0d2f6e 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Dot grid texture */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Wave bottom */
.hero::before {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 48px;
  background: #f0f6ff;
  clip-path: ellipse(55% 100% at 50% 100%);
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 54ch;
  animation: fadeUp 0.7s ease 0.3s both;
}
.hero-heading {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 1.25rem;
}
.hero-desc {
  font-size: clamp(0.9rem, 2vw, 1.0625rem);
  color: rgba(255,255,255,0.82);
  margin: 0 auto 2rem;
  max-width: 50ch;
}
.hero-desc strong { color: #ddeeff; }


/* ── Coming-soon badge ────────────────────────────────────── */
.hero-badge {
  position: relative;
  /* Hard pixel size — prevents any SVG blowout */
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  z-index: 1;
  animation: fadeUp 0.7s ease 0.1s both;
}
/* The ring SVG fills its container */
.badge-ring {
  position: absolute;
  top: 0; left: 0;
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 7;
}
.ring-fill {
  fill: none;
  stroke: #c0282a;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  animation: ringFill 2.4s cubic-bezier(0.4,0,0.2,1) 0.7s forwards;
}
.badge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}


/* ── Notify widget ────────────────────────────────────────── */
.notify-wrap { animation: fadeUp 0.7s ease 0.55s both; }

.notify-label {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.65rem;
  letter-spacing: 0.03em;
}
.notify-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.notify-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.6rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 9999px;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.9375rem;
}
.notify-input::placeholder { color: rgba(255,255,255,0.38); }
.notify-btn {
  padding: 0.6rem 1.4rem;
  background: #c0282a;
  color: #ffffff;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  border-radius: 9999px;
  box-shadow: 0 3px 14px rgba(192,40,42,0.35);
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.notify-btn:hover { background: #a01f21; transform: translateY(-1px); }
.notify-btn:active { transform: translateY(0); }
.notify-hint { margin-top: 0.6rem; font-size: 0.875rem; min-height: 1.4em; }


/* ── CONTACT ──────────────────────────────────────────────── */
.contact {
  padding: 4rem 1.5rem;
  background: #f0f6ff;
  text-align: center;
}
.section-heading {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  color: #0d2f6e;
  margin-bottom: 0.5rem;
}
.section-sub {
  color: #3a4a6b;
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 0.9375rem;
}
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}
.contact-card {
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: #ffffff;
  border: 1px solid #c8d8ef;
  border-radius: 14px;
  padding: 1.25rem 1.75rem;
  box-shadow: 0 4px 24px rgba(26,74,154,0.10);
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(26,74,154,0.15);
}

/* CRITICAL FIX: hard-size the icon box; overflow:hidden stops SVG escape */
.contact-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d2f6e;
  color: #ddeeff;
  border-radius: 6px;
  overflow: hidden;         /* belt-and-braces: clips any SVG overflow */
}

.contact-card__label {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #1a56a5;
  margin-bottom: 0.25rem;
}
.contact-card__value {
  display: block;
  font-size: 0.9375rem;
  color: #0f1f3d;
  line-height: 1.65;
  transition: color 0.2s;
}
.contact-card__value:hover {
  color: #2e6fca;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── SOCIAL ───────────────────────────────────────────────── */
.social {
  padding: 4rem 1.5rem;
  background: #ffffff;
  text-align: center;
}
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 680px;
  margin: 0 auto;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  color: #ffffff;
  transition: transform 0.18s, box-shadow 0.18s;
  line-height: 1;
}
.social-link:hover { transform: translateY(-2px); }

.social-link--facebook {
  background: #1877f2;
  box-shadow: 0 2px 12px rgba(24,119,242,0.30);
}
.social-link--facebook:hover { box-shadow: 0 6px 20px rgba(24,119,242,0.48); }

.social-link--x {
  background: #000000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.social-link--x:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.38); }

.social-link--instagram {
  background: linear-gradient(135deg, #f09433, #bc1888);
  box-shadow: 0 2px 12px rgba(188,24,136,0.30);
}
.social-link--instagram:hover { box-shadow: 0 6px 20px rgba(188,24,136,0.48); }

.social-link--youtube {
  background: #ff0000;
  box-shadow: 0 2px 12px rgba(255,0,0,0.30);
}
.social-link--youtube:hover { box-shadow: 0 6px 20px rgba(255,0,0,0.48); }


/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background: #0d2f6e;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.8125rem;
  line-height: 2;
}
.footer-reg {
  color: rgba(255,255,255,0.32);
  font-style: italic;
  font-size: 0.75rem;
}


/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes ringFill {
  to { stroke-dashoffset: 78; }
}


/* ── Tablet ≥ 640px ───────────────────────────────────────── */
@media (min-width: 640px) {
  .site-header { padding: 5rem 3rem 3rem; }
  .logo-wrap   { width: 150px; height: 150px; }
  .logo-img    { width: 140px; height: 140px; }

  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 5rem 3rem 6rem;
    gap: 3.5rem;
  }
  .hero-text   { max-width: 42ch; }
  .hero-desc   { margin-left: 0; }
  .hero-badge  {
    width: 190px;
    height: 190px;
    flex-shrink: 0;
  }
  .hero-badge .badge-ring { width: 190px; height: 190px; }
  .notify-row  { flex-wrap: nowrap; }
}

/* ── Desktop ≥ 1024px ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .site-header {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
    gap: 2.5rem;
  }
  .org-name-wrap { text-align: left; }
  .tagline-wrap  { align-items: flex-start; margin-left: auto; }
  .hero-badge    { width: 210px; height: 210px; }
  .hero-badge .badge-ring { width: 210px; height: 210px; }
  .hero          { gap: 5rem; }
}


/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}