/* ============================================================
   ASE SCHOLARSHIP — style.css
   Brand: TSD Green #007F3F | TSD Orange #F08B29
   Fonts: Playfair Display (display) + Source Serif 4 (body)
   ============================================================ */

/* ── CSS CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
  /* Brand */
  --green:       #007F3F;
  --green-dark:  #005C2E;
  --green-light: #D4EDDA;
  --orange:      #F08B29;
  --orange-dark: #C96E10;
  --orange-light:#FDE8CC;

  /* Light theme */
  --bg:          #FAF8F3;
  --bg-surface:  #FFFFFF;
  --bg-card:     #FFFFFF;
  --text-primary:#1A1A1A;
  --text-muted:  #5C5C5C;
  --text-faint:  #9A9A9A;
  --border:      #E2DDD3;
  --shadow:      0 4px 24px rgba(0,0,0,.08);
  --shadow-card: 0 8px 40px rgba(0,0,0,.10);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  /* Layout */
  --max-w:        1120px;
  --radius:       16px;
  --radius-sm:    8px;

  /* Transitions — no nav-h needed any more */
  --transition:   0.25s cubic-bezier(.4,0,.2,1);
}

/* ── DARK THEME ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0F1510;
  --bg-surface:  #192218;
  --bg-card:     #1E2A1F;
  --text-primary:#F0EDE6;
  --text-muted:  #A8B5A2;
  --text-faint:  #6B7A65;
  --border:      #2C3D2C;
  --shadow:      0 4px 24px rgba(0,0,0,.4);
  --shadow-card: 0 8px 40px rgba(0,0,0,.5);
  --green-light: #12291A;
  --orange-light:#2A1A06;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.7;
  transition: background var(--transition), color var(--transition);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

ol, ul { list-style: none; }

/* ── PAGE CONTROLS (floating, top-right of hero) ────────────── */
.page-controls {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Language Switcher */
.lang-switcher { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .4rem .75rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
[data-theme="dark"] .lang-btn {
  background: rgba(30,42,31,.8);
}
.lang-btn:hover,
.lang-btn[aria-expanded="true"] {
  border-color: var(--green);
  color: var(--green);
}

.chevron {
  transition: transform var(--transition);
  opacity: .7;
}
.lang-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 130px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: .35rem 0;
  display: none;
  z-index: 200;
}
.lang-dropdown.open { display: block; animation: dropIn .18s ease; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-option {
  padding: .55rem 1rem;
  font-size: .88rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lang-option:hover { background: var(--green-light); color: var(--green-dark); }
.lang-option.active {
  color: var(--green);
  font-weight: 600;
  background: var(--green-light);
}

/* Theme Toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform .15s;
}
[data-theme="dark"] .theme-toggle {
  background: rgba(30,42,31,.8);
}
.theme-toggle:hover {
  background: var(--orange-light);
  border-color: var(--orange);
  color: var(--orange-dark);
  transform: rotate(20deg);
}

/* Show/hide sun and moon based on theme */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="dark"]  .icon-sun  { display: block; }


/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 4.5rem;
  background: linear-gradient(160deg, var(--green-light) 0%, var(--bg) 55%);
  text-align: center;
}

/* Decorative rings */
.hero-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.decor-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  opacity: .08;
}
.ring-1 {
  width: 520px; height: 520px;
  top: -200px; right: -150px;
  animation: slowSpin 40s linear infinite;
}
.ring-2 {
  width: 320px; height: 320px;
  bottom: -120px; left: -80px;
  animation: slowSpin 55s linear infinite reverse;
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

/* Decorative leaf shapes */
.decor-leaf {
  position: absolute;
  width: 120px; height: 80px;
  border-radius: 0 60% 0 60%;
  opacity: .06;
  background: var(--green);
}
.leaf-1 { top:  40px; left:  5%; transform: rotate(-30deg); }
.leaf-2 { top:  80px; right: 8%; transform: rotate(50deg);  width: 90px; }
.leaf-3 { bottom: 60px; left: 15%; transform: rotate(20deg); width: 70px; height: 50px; }

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}

/* Eyebrow */
.hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-light);
  padding: .3rem .9rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
  animation: fadeUp .6s ease both;
}

/* Hero title */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin-bottom: 1rem;
  animation: fadeUp .7s .1s ease both;
}
.hero-title em {
  font-style: italic;
  color: var(--green);
}

.hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 480px;
  margin: 0 auto 2.5rem;
  animation: fadeUp .7s .2s ease both;
}

/* Countdown */
.countdown-wrapper {
  margin-bottom: 2.5rem;
  animation: fadeUp .7s .3s ease both;
}

.countdown-label {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .75rem;
}

.countdown-blocks {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1.5rem;
  box-shadow: var(--shadow);
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.countdown-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  /* Tabular nums keeps layout stable */
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

.countdown-unit {
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: .2rem;
  font-weight: 600;
}

.countdown-sep {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: .8rem;
  line-height: 1;
}

.countdown-date {
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: .6rem;
  letter-spacing: .05em;
}

/* Expired state */
.countdown-expired {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
}

/* CTA Buttons */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  animation: fadeUp .7s .4s ease both;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,127,63,.35);
}
.btn-primary:hover {
  background: var(--green-dark);
  box-shadow: 0 6px 28px rgba(0,127,63,.5);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--orange-dark);
  border: 2px solid var(--orange);
  box-shadow: 0 4px 20px rgba(240,139,41,.15);
}
.btn-secondary:hover {
  background: var(--orange-light);
  box-shadow: 0 6px 28px rgba(240,139,41,.3);
}


/* ── CARDS SECTION ──────────────────────────────────────────── */
.cards-section {
  padding: 4rem 1.5rem 5rem;
}

.cards-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 2rem;
}

/* Info Card */
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 2.25rem 2.5rem;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;

  /* Scroll-triggered animation via JS */
  opacity: 0;
  transform: translateY(32px);
}
.info-card.visible {
  animation: cardReveal .65s ease forwards;
}
.info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,0,0,.14);
}

@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Card visual accent */
.card-eligibility {
  border-top: 4px solid var(--green);
}
.card-rights {
  border-top: 4px solid var(--orange);
}

/* Card header */
.card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.card-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.card-eligibility .card-number { color: var(--green); }
.card-rights     .card-number { color: var(--orange); }

.card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  padding-top: .2rem;
}

/* Criteria list */
.criteria-list {
  counter-reset: criteria;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.criteria-list li {
  counter-increment: criteria;
  display: flex;
  gap: .85rem;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.criteria-list li::before {
  content: counter(criteria, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  background: var(--green);
  border-radius: 4px;
  min-width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .25rem;
  letter-spacing: .01em;
}

.card-rights .criteria-list li::before { background: var(--orange); }


/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 2.25rem 1.5rem;
  margin-top: auto;
  transition: background var(--transition);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .4rem .9rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-link:hover {
  background: var(--green-light);
  color: var(--green-dark);
  border-color: var(--green);
}

.footer-credits { text-align: right; }
.footer-copy {
  font-size: .82rem;
  color: var(--text-muted);
}
.footer-dev {
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: .2rem;
}
.footer-dev strong {
  color: var(--orange);
  font-weight: 600;
}


/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 3.5rem 1.25rem 3rem; }

  .hero-title { letter-spacing: -.01em; }

  .countdown-blocks { padding: .65rem 1rem; }
  .countdown-num { font-size: 1.55rem; }
  .countdown-block { min-width: 42px; }

  .cta-buttons { flex-direction: column; align-items: center; }
  .btn { width: 100%; max-width: 320px; justify-content: center; }

  .cards-inner { gap: 1.5rem; }
  .info-card { padding: 1.5rem 1.25rem 1.75rem; }
  .card-title { font-size: 1.1rem; }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-credits { text-align: center; }
}

@media (max-width: 400px) {
  .countdown-sep { display: none; }
  .countdown-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem;
    border-radius: var(--radius-sm);
  }
}