/* ======================================================================
   EduLinked — Brand Polish (one-file visual layer)
   Goals: clean cards, thin rainbow accents, rounded media frames,
          consistent buttons, compact accessibility bar
   Safe: additive overrides; does not remove base styles
   ====================================================================== */

/* ---------- Tokens & fallbacks --------------------------------------- */
:root{
  /* Buttons */
  --btn-height: 48px;
  --btn-radius: var(--radius-lg, 18px);
  --btn-pad-x: var(--space-24, 1.5rem);

  /* Surfaces */
  --surface: var(--white, #ffffff);
  --surface-2: #f6f8fb;
}

/* ---------- Page rhythm & typography tweaks -------------------------- */
.container{ padding-block: var(--space-00); }

main{
  padding-block: var(--space-00);
  display: block;
}

h1{ font-size: clamp(2.2rem, 4.8vw, 3.25rem); line-height: 1.1; }
h2{ font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.2; margin-bottom: var(--space-08); }
p { margin-block: var(--space-08) var(--space-16); }

/* ---------- Header polish -------------------------------------------- */
.site-header{
  background: var(--navy-900, #152446);
  border-bottom: 1px solid var(--navy-800, #203254);
  box-shadow: 0 2px 12px rgba(21, 36, 70, .35);
}
.site-header::after{
  content: "";
  display: block;
  height: 4px;                     /* slim, not blocky */
  background: var(--rainbow-gradient);
}

/* Logo "pill" look (works with current .site-logo) */
.site-logo{
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-08);
  padding-inline: clamp(var(--space-16), 3vw, var(--space-24));
  border-radius: var(--radius-lg, 18px);
  background: var(--white, #fff);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08));
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(var(--space-16), 3vw, var(--space-40));
}

.site-nav{
  display: flex;
  align-items: center;
  gap: clamp(var(--space-16), 4vw, var(--space-48));
  margin-left: auto;
}

.nav-links{
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-08), 3vw, var(--space-32));
  margin: 0;
  padding: 0;
}

.site-header .nav-links a{
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-08);
  padding-inline: clamp(var(--space-16), 3vw, var(--space-24));
  border-radius: var(--radius-lg, 18px);
  font-weight: 600;
  color: var(--navy-50, #eef3fb);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.site-header .nav-links a:hover,
.site-header .nav-links a:focus{
  color: var(--white, #fff);
  background-color: color-mix(in srgb, var(--navy-100, #d1daed) 25%, transparent);
  text-decoration: none;
}

.nav-cta{
  display: inline-flex;
  align-items: center;
  margin-left: clamp(var(--space-16), 4vw, var(--space-48));
}

.nav-cta .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-08);
  min-height: var(--btn-height, 48px);
  padding-inline: clamp(var(--space-24), 3vw, var(--space-32));
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08));
}

@media (max-width: 900px){
  .site-header .container{
    flex-wrap: wrap;
  }

  .site-nav{
    flex: 1 1 100%;
    justify-content: space-between;
    gap: clamp(var(--space-08), 4vw, var(--space-24));
  }
}

@media (max-width: 640px){
  .site-header .container{
    align-items: flex-start;
  }

  .site-nav{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    gap: var(--space-08);
  }

  .nav-links{
    flex-wrap: wrap;
    width: 100%;
    gap: var(--space-08) clamp(var(--space-08), 4vw, var(--space-16));
  }

  .nav-cta{
    width: 100%;
    margin: var(--space-16) 0 0 0;
    justify-content: center;
  }

  .nav-cta .button{
    width: 100%;
  }
}

/* ---------- Accessibility bar — small, top-right, no rainbow --------- */
.a11y-wrapper{
  background: var(--navy-50, #eef3fb);
  border-bottom: 1px solid var(--navy-100, #d1daed);
  display: flex;
  justify-content: flex-end;
  padding: .35rem .75rem;
}
#a11y-toggle{ display:flex; gap:.35rem; flex-wrap:wrap; }
.a11y-btn{
  font: inherit;
  font-size: .85rem;
  line-height: 1.2;
  min-height: var(--btn-height, 44px);
  padding: .4rem .75rem;
  border-radius: var(--btn-radius, 18px);
  border: 1.5px solid var(--navy-300, #a6bbde);
  background: var(--navy-600, #3f629f);
  padding-block: var(--space-08);
  padding-inline: clamp(var(--space-16), 3vw, var(--space-24));
}
#a11y-toggle{ display:flex; gap:var(--space-08); flex-wrap:nowrap; }
.a11y-btn{
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  min-height: var(--btn-height, 44px);
  padding-block: var(--space-08);
  padding-inline: clamp(var(--space-16), 3vw, var(--space-24));
  border-radius: var(--btn-radius, 18px);
  border: 1.5px solid var(--navy-300, #7f9ec8);
  background: var(--navy-600, #365583);
  color: var(--white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .45rem);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.a11y-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:1.35rem;
  block-size:1.35rem;
  color: var(--navy-50, #f3f6fb);
}
.a11y-btn__icon svg{ display:block; inline-size:100%; block-size:100%; }
.a11y-btn:hover,
.a11y-btn:focus,
.a11y-btn:focus-visible{ background:var(--navy-700, #2f4d82); border-color:var(--navy-500, #5c7db7); }
.a11y-btn:focus{ outline:none; }
.a11y-btn:focus-visible{ outline:var(--focus-ring, 3px solid var(--el-blue, #004aad)); outline-offset:2px; }
.a11y-btn:active{ transform:scale(.97); }
.a11y-btn[aria-pressed="true"]{ background:var(--navy-900, #152446); border-color:var(--navy-900, #152446); color:#fff; }
  gap: var(--space-08);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.a11y-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:1.35rem;
  block-size:1.35rem;
  color: var(--navy-50, #eef3fb);
}
.a11y-btn__icon svg{ display:block; inline-size:100%; block-size:100%; }
.a11y-btn:hover,
.a11y-btn:focus,
.a11y-btn:focus-visible{ background:var(--navy-700, #2a426b); border-color:var(--navy-500, #456a9b); }
.a11y-btn:focus{ outline:none; }
.a11y-btn:focus-visible{ outline:var(--focus-ring, 3px solid var(--el-blue, #004aad)); outline-offset:2px; }
.a11y-btn:active{ transform:scale(.97); }
.a11y-btn[aria-pressed="true"]{ background:var(--navy-900, #0F2440); border-color:var(--navy-900, #0F2440); color:#fff; }
@media (max-width:640px){ .a11y-wrapper{ justify-content:center; } }

/* ---------- Hero layout (works with <section class="hero">) ---------- */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(140deg, #f6f8fb 0%, #eef3ff 55%, #fff8f0 100%);
  padding-block: clamp(var(--space-48, 3rem), 8vw, var(--space-96, 6rem));
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset-inline-start: -12%;
  top: -20%;
  width: 45vw;
  max-width: 420px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(118,197,255,.35), transparent 70%);
  z-index: -1;
}
.hero::after{
  inset-inline-start: auto;
  inset-inline-end: -18%;
  top: auto;
  bottom: -25%;
  background: radial-gradient(circle at 60% 40%, rgba(255,169,77,.4), transparent 75%);
}
.hero .container{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--space-24), 4vw, var(--space-64));
  align-items: center;
  padding-block: var(--space-00);
}

.hero-content{
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-16), 3vw, var(--space-24));
  max-width: 34rem;
}
.hero-content .tagline{
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--navy-600, #365583);
  margin: 0;
}

.cta-group{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-08), 2.5vw, var(--space-16));
  row-gap: clamp(var(--space-08), 3vw, var(--space-16));
}

.hero-visual{
  justify-self: center;
  max-width: min(420px, 90vw);
}
.hero-visual .media-frame{
  background: rgba(255,255,255,0.85);
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; text-align: left; }
  .hero-visual{ order: -1; max-width: min(320px, 80vw); margin-inline: auto; }
  .hero-content{ align-items: flex-start; }
}
@media (max-width: 560px){
  .cta-group{ width: 100%; }
  .cta-group .button{ flex: 1 1 100%; text-align: center; }
}

/* Small “kicker” above the H1 (use a <span class="kicker">EduLinked</span>) */
.kicker{
  display:inline-block;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:.25rem;
  color: var(--navy-700, #2f4d82);
  margin-bottom: var(--space-08);
  color: var(--navy-500, #5c7db7);
}

/* ---------- Media frame (rounded image with rainbow stroke) ---------- */
.media-frame{
  position: relative;
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  background: var(--white, #fff);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08));
}
.media-frame img{ display:block; width:100%; height:auto; }
.media-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius-xl, 24px);
  padding: calc(var(--space-08) * 0.25);                       /* stroke width */
  background: var(--rainbow-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- Section cards with thin rainbow accent ------------------- */
.section-card{
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-08), 2vw, var(--space-24));
  background: var(--surface, var(--white, #fff));
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08));
  padding: clamp(var(--space-32), 3vw + var(--space-08), var(--space-80));
  margin-block: clamp(var(--space-32), 4vw, var(--space-48));
}
.section-card > .card-content{
  display: grid;
  gap: clamp(var(--space-16), 3vw, var(--space-24));
}
.section-card .accent{
  height: 4px;
  background: var(--rainbow-gradient);
  border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
  margin: calc(var(--space-08) * -0.5) calc(var(--space-08) * -0.5) var(--space-16) calc(var(--space-08) * -0.5);
  filter: saturate(1.05) brightness(1.05);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.section-card h2{
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
}
.section-card p{ color: var(--navy-700, #2a426b); }
.section-card .button{ margin-top: auto; align-self: flex-start; }

.feature-grid{
  display: grid;
  gap: clamp(var(--space-24), 4vw, var(--space-48));
  margin-top: clamp(var(--space-16), 3vw, var(--space-32));
}
.feature-grid .section-card{ height: 100%; }

@media (min-width: 720px){
  .feature-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .feature-grid .section-card:nth-child(2){
    margin-top: clamp(var(--space-16), 3vw, var(--space-40));
  }
  .feature-grid .section-card:nth-child(3){
    grid-column: 1 / -1;
    max-width: clamp(22rem, 60%, 36rem);
    justify-self: center;
  }
}

/* ---------- AAC communication cards ---------------------------------- */
.aac-card{
  --aac-card-border: var(--aac-card-border, rgba(15,36,64,.12));
  --aac-symbol-bg: var(--aac-symbol-bg, rgba(0,74,173,.12));
  --aac-symbol-ring: var(--aac-symbol-ring, rgba(0,74,173,.35));
  background: linear-gradient(160deg, var(--aac-card-bg, var(--surface, #fff)) 0%, var(--aac-card-surface, #ffffff) 100%);
  border: 1px solid var(--aac-card-border);
  box-shadow: 0 16px 40px rgba(15,36,64,.12);
  transition: box-shadow .25s ease, transform .2s ease;
}

.aac-card:hover,
.aac-card:focus-visible{
  box-shadow: 0 18px 48px rgba(15,36,64,.18);
  transform: translateY(-2px);
}

.aac-card__symbol{
  background: var(--aac-symbol-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 24px rgba(15,36,64,.18);
}

.aac-card__symbol::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid var(--aac-symbol-ring);
  pointer-events: none;
}

.aac-card__heading{
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}

.aac-card__helper{
  color: var(--navy-600, #365583);
  font-size: clamp(1rem, 1.8vw, 1.05rem);
}

.aac-card__cta{
  gap: clamp(calc(var(--space-16, 1rem) * 0.5), 2vw, var(--space-16, 1rem));
}

.aac-card__cta .button,
.aac-card__cta .btn{
  min-width: clamp(9rem, 28vw, 12rem);
}

.aac-card__status,
.aac-card__meta .chip{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,36,64,.16);
  color: var(--navy-800, #203254);
  box-shadow: 0 4px 14px rgba(15,36,64,.12);
}

.aac-card .kicker{
  color: var(--navy-500, #5c7db7);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .08em;
}

.aac-card .accent{
  display: block;
  background: var(--rainbow-gradient);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 24px rgba(15,36,64,.12);
}

@supports (color: color-mix(in srgb, #000 50%, transparent)){
  .aac-card{
    --aac-card-border: color-mix(in srgb, var(--navy-900, #0F2440) 14%, transparent);
  }

  .aac-card__symbol{
    --aac-symbol-bg: color-mix(in srgb, var(--el-blue, #004AAD) 22%, var(--white, #fff));
    --aac-symbol-ring: color-mix(in srgb, var(--el-blue, #004AAD) 38%, transparent);
  }
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)){
  .aac-card{
    background: var(--aac-card-bg, var(--surface, #fff));
  }

  .aac-card__symbol{
    background: var(--aac-symbol-bg, rgba(0,74,173,.12));
  }
}

@media (prefers-reduced-motion: reduce){
  .aac-card{
    transition: none;
  }
  .aac-card:hover,
  .aac-card:focus-visible{
    transform: none;
  }
}

@media (max-width: 720px){
  .aac-card{
    padding: clamp(var(--space-24, 1.5rem), 5vw, var(--space-32, 2rem));
  }

  .aac-card__symbol{
    margin-block: var(--space-08) var(--space-16);
  }

  .aac-card__cta{
    gap: var(--space-08);
  }
}

/* ---------- Buttons (pill CTAs + gradient outline) ------------------- */
.button, .btn, button, [role="button"]{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height, 48px);
  padding-block: var(--space-16);
  padding-inline: var(--btn-pad-x, var(--space-24));
  border-radius: var(--btn-radius, var(--radius-lg, 18px));
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: var(--btn-font-size, 1rem);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft, 0 4px 20px rgba(0,0,0,.05));
  transition: transform .15s ease, box-shadow .25s ease;
}
.button:hover{ transform: translateY(-1px); box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08)); }
.button:active{ transform: translateY(0); }
.button:focus-visible{ outline: var(--focus-ring, 3px solid var(--navy-500, #456a9b)); outline-offset: 2px; }

/* Solid orange pill (hero primary) */
.button.pill-orange{
  background: #ffa94d;
  color: #1b1b1b;
}

/* Soft purple pill (secondary) */
.button.pill-purple{
  background: #a788ff;
  color: #1b1b1b;
}

/* Gradient outline on white */
.button.gradient-border{
  position: relative;
  background: var(--white, #fff);
  color: var(--neutral-dark, #222);
  border: 2px solid transparent;
}
.button.gradient-border::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: var(--rainbow-gradient);
  z-index: -1;
}

/* ---------- Links in text ------------------------------------------- */
a{ text-underline-offset: .15em; }
a:hover{ text-decoration-thickness: .14em; }

/* ---------- Utilities ------------------------------------------------- */
.rainbow-line{ height:4px; background: var(--rainbow-gradient); border-radius:999px; }
.rounded-24{ border-radius: var(--radius-xl, 24px); }
.shadow-soft{ box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,.08)); }