/*
 Theme Name:   Astra Child, Velvuri
 Theme URI:    https://velvuri.com
 Description:  Velvuri child theme for Astra. All Velvuri CSS lives here.
 Author:       Vidyasage Labs
 Author URI:   https://velvuri.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* =============================================================================
   DESIGN TOKENS, sourced from notes.md §12
   All colours, spacing, and typography defined once here as custom properties.
   Never hardcode hex values in component CSS. Always reference a token.
   --vv-hero-bg is injected dynamically from config.php via wp_add_inline_style().
   ============================================================================= */

:root {
  /* Colour palette */
  --vv-navy:        #1a2456;
  --vv-navy2:       #141c42;
  --vv-navy3:       #0d1230;
  --vv-teal:        #2abfbf;
  --vv-teal2:       #3dd6c8;
  --vv-teal-dim:    rgba(42, 191, 191, 0.11);
  --vv-teal-light:  #e8f9f9;
  --vv-white:       #fff;
  --vv-off:         #f5f7fc;
  --vv-muted:       #5a6a99;
  --vv-border:      rgba(26, 36, 86, 0.10);
  --vv-red:         #c0392b;
  --vv-green:       #1a7a5a;

  /* --vv-hero-bg injected by wp_add_inline_style() from VV_HERO_BG in config.php */
  /* Default here as fallback only. Real value comes from PHP */
  --vv-hero-bg:     #0d1220;

  /* Typography */
  --vv-font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --vv-font-mono:    'DM Mono', 'Courier New', monospace;

  /* Spacing scale */
  --vv-space-xs:  0.25rem;   /*  4px */
  --vv-space-s:   0.5rem;    /*  8px */
  --vv-space-m:   1rem;      /* 16px */
  --vv-space-l:   1.5rem;    /* 24px */
  --vv-space-xl:  2rem;      /* 32px */
  --vv-space-2xl: 3rem;      /* 48px */
  --vv-space-3xl: 4.5rem;    /* 72px */

  /* Border radius (D-LANG-09) */
  --vv-radius-s:    6px;     /* inputs, cards */
  --vv-radius-m:    8px;     /* larger cards */
  --vv-radius-pill: 100px;   /* badges, small tags, nav CTA button */

  /* Transitions (D-LANG-11) */
  --vv-transition-fast:   150ms ease;
  --vv-transition-medium: 200ms ease;
  --vv-transition-panel:  250ms ease;

  /* Nav */
  --vv-nav-height: 64px;
}

/* =============================================================================
   GLOBAL RESETS & BASE
   ============================================================================= */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--vv-font-primary);
  color: var(--vv-navy);
  background-color: var(--vv-white);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Load Plus Jakarta Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

/* H1: tight letter-spacing globally (DES-006) */
h1 {
  font-family: var(--vv-font-primary);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1.1;
}

h2 {
  font-family: var(--vv-font-primary);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.2;
}

h3, h4 {
  font-family: var(--vv-font-primary);
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Mono elements: badges, labels, format codes */
.vv-mono,
.vv-badge,
.vv-format-badge {
  font-family: var(--vv-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* =============================================================================
   HERO SECTION (DES-005, DES-IMP-01)
   Background comes from --vv-hero-bg CSS custom property.
   This class is applied to the homepage hero wrapper via the page template.
   ============================================================================= */

.vv-hero {
  background-color: var(--vv-hero-bg);
  color: var(--vv-white);
  position: relative;
}

/* Ensure all text inside hero is white by default */
.vv-hero h1,
.vv-hero h2,
.vv-hero p {
  color: var(--vv-white);
}

/* =============================================================================
   NAVIGATION (DES-001, DES-002, DES-003)
   Three-zone layout: logo | centre links | right zone (CTA + login)
   WP renders the nav via register_nav_menus(). We style what WP outputs.
   ============================================================================= */

/* Nav wrapper: Astra hook outputs <div id="masthead">
   BUG-FIX (this pass, root cause not symptom): nav previously started
   transparent over the hero and only became solid after scrolling past a
   calculated boundary. The actual defect wasn't the boundary math. It was
   the transparency itself. While transparent, any hero content scrolling
   up underneath the fixed nav (including the hero's own large heading
   text) became visible THROUGH the nav, layering directly over the nav's
   own text and making both illegible. This is what the reported screenshot
   shows: hero heading text superimposed on "Why Velvuri," "How It Works,"
   and the rest of the nav row.
   Fixed by removing transparency from the design entirely. Nav is now
   solid navy and white text, unconditionally, on every page, at every
   scroll position. No has-hero branching, no scroll-triggered class, no
   boundary calculation. Nothing left to get wrong. */
.site-header,
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--vv-nav-height);
  background-color: var(--vv-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Inner container */
.vv-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--vv-space-xl);
  height: 100%;
}

/* Logo zone: always white, background is always navy now */
.vv-nav-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--vv-white);
  letter-spacing: -0.02em;
}

/* Centre links: WP nav menu output. Always white, always visible. */
.vv-nav-centre {
  display: flex;
  align-items: center;
  gap: var(--vv-space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vv-nav-centre li a {
  font-size: 0.9375rem;   /* 15px */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--vv-transition-fast);
}
.vv-nav-centre li a:hover {
  color: var(--vv-white);
}

/* ══════════════════════════════════════════════════════════════════════════════
   VV-SECNAV: Reusable secondary in-page navigation component
   Single source of truth. Do not duplicate this block inline on any page.
   Homepage, How It Works, and Placement Support all reference this same
   class set. If a page needs it, add the markup only; this CSS already
   covers it sitewide.
   Anchors only, never a link that leaves the page (nav principle #3).
   Desktop/tablet: persistent sticky bar. Mobile: collapsed dropdown trigger.

   BUG-FIX (this pass): .vv-secnav-dropdown had no default display:none,
   it was only hidden inside the mobile media query, so on any screen wider
   than 640px it rendered as a visible block directly beneath the desktop
   bar, showing all six links twice. Fixed by setting display:none as the
   unconditional default, with the mobile media query only ever adding
   display:flex when the --open state is active.

   BUG-FIX (this pass): both primary and secondary nav now use brand navy
   backgrounds once scrolled, not white. Primary uses --vv-navy, secondary
   uses --vv-navy2 (one shade darker) so the two bars stay visually distinct
   from each other while both staying on-brand.
   ══════════════════════════════════════════════════════════════════════════════ */
.vv-secnav{
  position:sticky;top:64px;z-index:40;
  background:var(--vv-navy2);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  opacity:0;transform:translateY(-8px);
  max-height:0;overflow:hidden;
  transition:opacity .25s ease,transform .25s ease,max-height .25s ease;
  pointer-events:none;
}
/* BUG-FIX: previously opacity:0 alone, which hides an element visually but
   still reserves its full height in normal document flow (position:sticky
   does not remove an element from flow the way position:fixed does). That
   left a 48px band of invisible-but-present space at the very top of the
   page, directly beneath the fixed primary nav, before the hero's own
   content began. Adding max-height:0 + overflow:hidden to the hidden state
   makes the component take zero layout space until --visible is applied. */
.vv-secnav.vv-secnav--visible{
  opacity:1;transform:translateY(0);max-height:64px;pointer-events:auto;
}
.vv-secnav-inner{
  max-width:960px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:4px;height:48px;overflow-x:auto;
}
.vv-secnav-link{
  font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none;
  padding:8px 14px;border-radius:100px;white-space:nowrap;
  transition:background .15s,color .15s;
}
.vv-secnav-link:hover{background:rgba(255,255,255,.1);color:#fff;}
.vv-secnav-link.vv-secnav-link--active{background:var(--vv-teal);color:#fff;}

/* Mobile: collapse the bar into a single dropdown trigger.
   display:none is the unconditional default. The dropdown only ever
   becomes visible via the --open class, added by JS on click. This is
   the fix for the "shown twice" bug: previously this rule only existed
   inside the media query below, so desktop had no default at all. */
.vv-secnav-dropdown{display:none;}
.vv-secnav-trigger{display:none;}
@media(max-width:640px){
  .vv-secnav-inner{display:none;}
  .vv-secnav{padding:0;}
  .vv-secnav-trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:0 20px;height:48px;background:none;border:none;
    font-size:.8125rem;font-weight:600;color:#fff;font-family:inherit;
    cursor:pointer;
  }
  .vv-secnav-trigger-arrow{transition:transform .2s;}
  .vv-secnav-trigger.vv-secnav-trigger--open .vv-secnav-trigger-arrow{transform:rotate(180deg);}
  .vv-secnav-dropdown.vv-secnav-dropdown--open{
    display:flex;flex-direction:column;background:var(--vv-navy2);
    border-top:1px solid rgba(255,255,255,.08);padding:8px 12px 12px;
  }
  .vv-secnav-dropdown .vv-secnav-link{text-align:left;border-radius:8px;padding:10px 12px;}
}

/* Accessibility: visible focus ring on all nav links (D-LANG-13) */
.vv-nav-centre li a:focus-visible {
  outline: 2px solid var(--vv-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Right zone */
.vv-nav-right {
  display: flex;
  align-items: center;
  gap: var(--vv-space-m);
}

/* "For Colleges" pill button removed (page review pass). It's now a
   regular nav-centre menu item, so a separate styled button duplicated
   the same link. .vv-nav-cta is dead CSS as of this pass. */

/* "Log in" plain text link (DES-001, no button class, no border, no background) */
.vv-nav-login {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}

.vv-nav-login:hover {
  color: var(--vv-teal);
}
.vv-nav-login:focus-visible {
  outline: 2px solid var(--vv-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* User Menu dropdown (logged-in users, header.php)
   Deliberately visible on both desktop and mobile, unlike .vv-nav-login
   above (which hides on mobile since the overlay injects its own guest
   "Log in" instead). This component replaces that entirely for logged-in
   users, on every screen size, per the tap-to-open requirement. */
.vv-user-menu {
  position: relative;
}
.vv-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color var(--vv-transition-fast);
}
.vv-user-menu-trigger:hover,
.vv-user-menu-trigger.vv-user-menu-trigger--open {
  color: var(--vv-white);
}
.vv-user-menu-trigger:focus-visible {
  outline: 2px solid var(--vv-teal);
  outline-offset: 3px;
  border-radius: 3px;
}
.vv-user-menu-arrow {
  font-size: 0.625rem;
  transition: transform var(--vv-transition-fast);
}
.vv-user-menu-trigger--open .vv-user-menu-arrow {
  transform: rotate(180deg);
}
.vv-user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 160px;
  background: var(--vv-navy2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 60;
}
.vv-user-menu-dropdown.vv-user-menu-dropdown--open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vv-user-menu-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background var(--vv-transition-fast), color var(--vv-transition-fast);
}
.vv-user-menu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--vv-white);
}
.vv-user-menu-link:focus-visible {
  outline: 2px solid var(--vv-teal);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Get in Touch text link: shown only on /for-colleges/ (DES-004).
   The pill-button hide rule that used to sit here is removed along with
   .vv-nav-cta. Nothing left to hide since the button itself is gone. */
.page-for-colleges .vv-nav-page-cta {
  display: inline; /* revealed only on /for-colleges/ */
}
.vv-nav-page-cta {
  display: none; /* hidden everywhere except /for-colleges/ */
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vv-navy);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
}
.vv-nav-page-cta:hover {
  color: var(--vv-teal);
}

/* =============================================================================
   MOBILE NAV (DES-002)
   Astra's native hamburger is used. We style its output.
   Sticky bar: logo + hamburger (no separate CTA button, the "For Colleges"
     button previously shown here is removed, per the page review pass;
     it's a regular nav-centre link now, which Astra's menu already covers)
   Full-screen overlay: 5 links (Astra native) + injected "Log in" text link
   ============================================================================= */

/* Hide desktop nav elements on mobile */
@media (max-width: 920px) {
  .vv-nav-centre {
    display: none; /* Astra handles mobile menu rendering */
  }

  /* Hide text login link in sticky bar. Injected into the overlay instead */
  .vv-nav-login {
    display: none;
  }
}

/* Mobile overlay: Astra renders as .ast-mobile-popup or similar */
/* Override Astra's overlay styles to match DES-002 */
.ast-mobile-popup-drawer .ast-mobile-popup-header-wrap,
.ast-fullscreen-menu-enable .main-navigation {
  background-color: var(--vv-white);
}

/* "Log in" plain text link at bottom of overlay (DES-002).
   The filled "For Colleges" button that used to sit above this is removed,
   see nav.js, injectMobileOverlayElements() no longer creates it. */
.vv-mobile-overlay-login {
  display: block;
  text-align: center;
  margin-top: var(--vv-space-m);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--vv-navy);
  text-decoration: none;
}

.vv-mobile-overlay-login:hover {
  color: var(--vv-teal);
}

/* Touch targets ≥44px (D-LANG-13) */
.vv-mobile-overlay-login {
  min-height: 44px;
}

/* =============================================================================
   FOOTER
   3-column layout: Platform | Institutions | Legal
   All link values from F-03 frozen copy.
   ============================================================================= */

.site-footer,
#colophon {
  background-color: var(--vv-navy);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--vv-space-3xl) 0 var(--vv-space-xl);
}

.vv-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--vv-space-xl);
}

/* 4-column grid */
.vv-footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vv-space-2xl);
  margin-bottom: var(--vv-space-3xl);
}

@media (max-width: 768px) {
  .vv-footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--vv-space-xl);
  }
}

@media (max-width: 480px) {
  .vv-footer-columns {
    grid-template-columns: 1fr;
  }
}

/* Column heading */
.vv-footer-col h4 {
  font-size: 0.6875rem;   /* 11px */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 var(--vv-space-m) 0;
}

/* Footer links */
.vv-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-s);
}

.vv-footer-col ul li a {
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--vv-transition-fast);
  line-height: 1.5;
}

.vv-footer-col ul li a:hover {
  color: var(--vv-white);
}

.vv-footer-col ul li a:focus-visible {
  outline: 2px solid var(--vv-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Footer bottom bar: company line + registration numbers */
.vv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--vv-space-l);
  display: flex;
  flex-direction: column;
  gap: var(--vv-space-xs);
}

.vv-footer-company {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Registration numbers (output by functions_snippet.php astra_footer_bottom hook) */
.vv-registration-numbers {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
  font-family: var(--vv-font-mono);
  letter-spacing: 0.02em;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Visually hidden but accessible (screen readers) */
.vv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container */
.vv-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--vv-space-xl);
}

@media (max-width: 768px) {
  .vv-container {
    padding: 0 var(--vv-space-m);
  }
}

/* prefers-reduced-motion: kill all animations (D-LANG-11) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Body padding to compensate for fixed nav */
body {
  padding-top: var(--vv-nav-height);
}

/* Hero page: remove top padding so hero goes to very top */
body.has-hero {
  padding-top: 0;
}