/* ==========================================================
   YOUTH WING PORTAL — Fresh Kerala Glassmorphic Theme
   Overrides for light, airy, energetic youth design.
   ========================================================== */

:root {
  /* Fresh Kerala Palette */
  --bg: #EFF6FF;
  --bg-rgb: 239, 246, 255;
  --surface: #E0ECF7;
  --surface-2: #FFFFFF;
  --surface-3: #D4E4F4;
  --border: rgba(20, 60, 100, .10);
  --border-light: rgba(20, 60, 100, .15);
  
  --text: #1A2B3D;
  --text-dim: rgba(26, 43, 61, .70);
  --text-muted: rgba(26, 43, 61, .45);

  --accent: #FF6B2C;
  --accent-soft: rgba(255, 107, 44, .12);
  --accent-glow: rgba(255, 107, 44, .18);
  
  --teal: #0FA88F;
  --teal-glow: rgba(15, 168, 143, .14);

  /* Glassmorphism System */
  --glass-bg: rgba(255, 255, 255, .45);
  --glass-border: rgba(255, 255, 255, .60);
  --glass-blur: blur(18px) saturate(1.4);
  --card-shadow: 0 4px 24px -8px rgba(20, 60, 100, .10);
  --card-shadow-hover: 0 16px 40px -12px rgba(20, 60, 100, .18);
}

/* ================== GLOBAL & CURSOR GLOW ================== */
body {
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden; /* Prevent horizontal scroll from glow */
}

/* The page-wide cursor glow */
.cursor-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    600px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(255, 107, 44, 0.06),    /* warm orange center */
    rgba(15, 168, 143, 0.03) 40%, /* teal mid-ring */
    transparent 70%
  );
  transition: opacity 0.3s;
}

/* Hide cursor glow on touch devices */
@media (hover: none) and (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* ================== OVERRIDES & COMPONENTS ================== */

/* Glass Cards (Highlight / Events) */
.highlight-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  z-index: 1;
  display: block; /* Ensure it behaves as a block element */
}

/* Grids */
.explore-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
/* index.html hardcodes 3 columns and events.html hardcodes 2 via an
   inline style, neither of which had a responsive fallback - both
   need !important to win over that inline style at narrow widths. */
@media (max-width: 860px) {
  .explore-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .explore-grid { grid-template-columns: 1fr !important; }
}

/* Bug fix: .row/.col-* were used throughout index.html (the About
   section's 4-icon row) and contact.html (the form + contact-details
   two-column layout) but had no CSS anywhere - only `.hero .row` was
   defined. Every "column" was rendering as a full-width stacked
   block instead of sitting side by side. This is a lightweight
   12-column flex grid matching the column classes already in the
   markup (col-3/5/7/8 + col-offset-2). */
/* Grid, not flex: a flex item with flex-shrink:0 (needed so col-N
   widths stay exact) ignores `gap` when sizing itself, so a row that
   also sets its own inline gap (e.g. the About section's icon row)
   overflows and wraps early. CSS Grid's track sizing subtracts gap
   before dividing space, so it can't overflow regardless of gap. */
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.col-3 { grid-column: span 3; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-8.col-offset-2 { grid-column: 3 / span 8; }
@media (max-width: 768px) {
  .row { grid-template-columns: 1fr; }
  .col-3, .col-5, .col-6, .col-7, .col-8, .col-8.col-offset-2 { grid-column: auto; }
}

.highlight-card::before, .event-card::before, .contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--accent-soft),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

.highlight-card:hover, .event-card:hover, .contact-card:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent-glow);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

.highlight-card:hover::before, .event-card:hover::before, .contact-card:hover::before {
  opacity: 1;
}

/* Keep content above the glow */
.highlight-card *, .event-card *, .contact-card * {
  position: relative;
  z-index: 1;
}

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px var(--accent-glow);
  border: none;
}
.btn-primary:hover {
  background: #ff5511;
  box-shadow: 0 6px 16px rgba(255, 107, 44, 0.3);
  transform: translateY(-2px);
  color: #fff;
}

/* Doodles */
.doodle {
  color: var(--teal);
  opacity: 0.8;
}
.doodle-defs {
  display: none;
}

/* Nav & Footer overrides to use glass */
/* Bug fix: this was targeting `header`, but the actual nav markup is
   <nav id="nav">, not <header> - the rule never matched anything and
   the nav silently fell back to the root site's cream-theme nav
   styling (hardcoded dark-tinted border/shadow) instead of this
   glass look. */
#nav {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border-light) !important;
}

/* Form Panel */
.form-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 2rem;
}
.form-group input, .form-group select, .form-group textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* Page Headers */
.page-header {
  background: transparent; /* Relying on body glow */
  padding: 120px 0 60px;
  text-align: center;
}
.page-header h1 {
  color: var(--text);
  margin-bottom: 0.5rem;
}
.page-header .subtitle {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background-color: var(--bg); /* Override dark parent theme */
  overflow: hidden;
}
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--text-dim);
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(15, 168, 143, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 168, 143, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(15, 168, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 168, 143, 0); }
}

/* Bug fix: root's .hero is designed as the site's one deliberately
   dark section, so .hero-content/.hero h1/.hero .lead all use pale
   --on-dark-text/--on-dark-dim colors meant to read against a near-
   black background. This hero's background was overridden to light
   blue above, but the text colors were never overridden to match -
   the headline and lead paragraph were rendering as pale off-white
   on light blue, close to unreadable. */
.hero-content {
  color: var(--text);
}
.hero .lead {
  color: var(--text-dim);
}
.hero h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  text-shadow: none;
}
.hero .hi {
  color: var(--accent);
}
.malayalam-sub {
  font-family: 'Manjari', 'Meera', 'Space Grotesk', sans-serif;
  color: var(--teal);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* ================== VISUAL REDESIGN (2026-08-28) ================== */

/* Atmospheric blob background - fixed so one instance per page covers
   the whole viewport regardless of scroll. Sits below the mouse-driven
   .cursor-glow (z-index -1) so both layer together. Without this the
   glass cards had nothing to contrast against but flat pale blue. */
.bg-blobs { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.bg-blobs::before, .bg-blobs::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
}
.bg-blobs::before {
  width: 560px; height: 560px; top: -180px; left: -120px;
  background: radial-gradient(circle, rgba(255,107,44,.28), transparent 70%);
}
.bg-blobs::after {
  width: 620px; height: 620px; bottom: -220px; right: -160px;
  background: radial-gradient(circle, rgba(15,168,143,.24), transparent 70%);
}

/* Reusable sunset-to-ocean gradient text - reserved for a few high-impact
   accents (hero headline, CTA) rather than every heading, so it stays a
   moment instead of noise. */
.gradient-text {
  background: linear-gradient(120deg, var(--accent) 0%, #FF3D7F 55%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* root's .hero .hi (two-class descendant selector) outranks the
   single-class .gradient-text rule above, so its amber text-shadow
   (tuned for the dark-theme hero) was still winning - color:transparent
   doesn't cancel a text-shadow, so it bled through as a muddy glow
   behind the gradient. Matching selector shape to actually win. */
.hero .gradient-text, .hero .hi.gradient-text {
  text-shadow: none;
}

/* Hero scroll cue */
.hero-scroll-cue {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
}
.hero-scroll-cue .line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollCuePulse 2s ease-in-out infinite;
}
@keyframes scrollCuePulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Compact variant of .highlight-card for small icon+label tiles (About
   section) - keeps it in main.js's mouse-glow selector list for free. */
.highlight-card.compact { padding: 1.5rem 1rem; text-align: center; }
.highlight-card.compact svg { width: 36px; height: 36px; margin: 0 auto 10px; display: block; }
.highlight-card.compact h4 { font-size: .95rem; margin: 0; }
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Featured (wide) tile in the Focus Areas grid, breaks up the uniform
   3x2 rhythm. grid-column:span 2 degrades harmlessly at the 2-col and
   1-col responsive breakpoints already defined above. */
.explore-grid .highlight-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--accent-soft), var(--glass-bg));
  border-color: var(--accent-glow);
}
.explore-grid .highlight-card.featured h3 { font-size: 1.5rem; }

/* Stat numbers were inheriting root's --marigold (this site's own
   orange, not this portal's --accent) since root's .stat-card .num
   hardcodes color:var(--marigold). */
.stat-card .num { color: var(--accent) !important; }
.stat-card svg.doodle { display: block; margin: 0 auto 12px; }

/* Same --marigold-vs---accent mismatch as the stat numbers above,
   this time on the .roster-card markup reused as-is from root
   styles.css (committee.html's org-chart roster component) for the
   Wing Leadership section. */
#wing-leadership .roster-avatar { background: var(--accent-soft); color: var(--accent); }
#wing-leadership .roster-card-tag.role { color: var(--accent); }
#wing-leadership .roster-card-phone svg { color: var(--accent); }
#wing-leadership .roster-card-phone:hover { color: var(--accent); }

/* CTA panel: a gradient tint replaces the plain glass background for
   this one closing moment (backdrop-filter blur is untouched, same
   property specificity swap as the featured tile above). */
.cta-panel { background: linear-gradient(135deg, var(--accent-soft), var(--teal-glow)); }

/* ================== FLUID SCROLL & HERO REDESIGN (2026-08-28) ================== */

/* Scroll progress bar - fixed hairline across the very top of the
   viewport, above #nav (z-index 1000 in root). Width is driven by
   scroll-fx.js; kept here as a simple gradient fill rather than a
   third color so it reads as "one accent system", not a new color. */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 1001; pointer-events: none; background: transparent;
}
.scroll-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  transform-origin: left;
}

/* Hero: taller, and its floating doodles now live in a dedicated
   parallax layer (positioning div + inner svg keeps the svg's own
   rotate() transform intact - scroll-fx.js only ever writes
   translateY onto the wrapper, never onto the svg's transform). */
.hero { min-height: 92vh; }
.hero-parallax { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-parallax-item { position: absolute; will-change: transform; }

/* Headline word-in reveal. Each .word is authored with an inline
   animation-delay in the markup (fixed, hand-tuned copy - not worth
   a JS stagger for six words), so the CSS only owns the motion. */
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-title .word {
  display: inline-block; opacity: 0; transform: translateY(115%);
  animation: word-in .8s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes word-in { to { opacity: 1; transform: translateY(0); } }
/* .gradient-text's background-clip:text only paints through glyphs that
   are direct inline content of that element - splitting the line into
   inline-block .word children (needed above for the per-word
   translateY) moves each word's text into its own box, so the parent's
   clipped gradient never reaches it and the line renders invisible.
   Re-declaring the same gradient per word keeps it visible; the trade
   is three short, matching-hued gradients instead of one continuous
   sweep, which reads fine at word length. */
.hero-title .line.gradient-text .word {
  background: linear-gradient(120deg, var(--accent) 0%, #FF3D7F 55%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Generic load-in used by the hero chips row (fades up after the
   headline finishes; delay set inline per-element in markup). */
.reveal-load { animation: reveal-load-in .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes reveal-load-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Floating glass stat chips under the hero CTAs */
.hero-chip-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 2.75rem; }
.hero-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 24px; border-radius: 16px; min-width: 120px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--card-shadow);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.hero-chip:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.hero-chip strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.hero-chip span { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; margin-top: 6px; text-align: center; }

/* Activity marquee band, sits between the hero and About section as
   a fluid, always-moving strip - a second copy of .wing-marquee-track's
   children is duplicated in markup (not JS) so translateX(-50%) loops
   seamlessly with no visible seam or JS-computed width. */
.wing-marquee {
  position: relative; overflow: hidden;
  padding: 20px 0; background: var(--surface-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wing-marquee-track {
  display: flex; width: max-content; gap: 56px;
  animation: marquee-scroll 34s linear infinite;
}
.wing-marquee:hover .wing-marquee-track { animation-play-state: paused; }
.wing-marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
.wing-marquee-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.wing-marquee-item:nth-child(even) svg { color: var(--teal); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Fluid, scroll-linked hero exit - genuinely tied to scroll position
   (not a threshold toggle like the .reveal/IntersectionObserver
   system in main.js). Progressive enhancement only: browsers without
   scroll-driven animations simply keep the hero static, which is a
   perfectly fine baseline, so this stays behind a feature query. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-content, .hero-chip-row {
      animation: hero-exit linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }
}
@keyframes hero-exit { to { opacity: 0; transform: translateY(-36px) scale(.97); } }

/* Respect prefers-reduced-motion: land every element added above in
   its final, readable state with no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .hero-title .word { animation: none; opacity: 1; transform: none; }
  .reveal-load { animation: none; opacity: 1; transform: none; }
  .wing-marquee-track { animation: none; }
  .hero-parallax-item { transform: none !important; }
}