/* ============================================================================
   TUITIONEDGE — MAIN STYLESHEET (style.css)
   ----------------------------------------------------------------------------
   
   HOW TO READ THIS FILE:
   - Big banner comments (====) mark a major page section (Navbar, Hero, etc.)
   - Smaller comments above a rule explain WHY it exists, not just what it does.
   - Colors, fonts and spacing values that repeat across the site are defined
     once at the top as CSS Custom Properties (variables) under :root, and
     referenced everywhere else using var(--name). Change the value once at
     the top, and it updates everywhere.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. GLOBAL RESET
   ----------------------------------------------------------------------------
   Removes the browser's default margin/padding on every element, and makes
   width/height calculations include border + padding (box-sizing: border-box)
   so that elements don't unexpectedly grow bigger than the width you set.
   ---------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ----------------------------------------------------------------------------
   2. COLOR & THEME VARIABLES (:root)
   ----------------------------------------------------------------------------
   Every color used across the site is defined ONCE here. Other rules pull
   from these using var(--variable-name). This is the single place to edit
   if you ever want to re-theme the whole site (e.g. switch from navy/gold
   to a different palette).

   NOTE: the "!important" flags were added in the original file to make sure
   these values always win over any conflicting/duplicate declarations
   elsewhere in the CSS. They are kept as-is to avoid changing visual
   behaviour during this file-split.
   ---------------------------------------------------------------------------- */
:root {
  --teal: #1E3A8A !important;        /* Deep Navy Blue — primary brand color (buttons, headings, nav) */
  --teal-dark: #1E293B !important;   /* Slate/Dark Navy — darker hover states, dark backgrounds (footer, hero gradients) */
  --teal-light: #DBEAFE !important;  /* Soft Ice Blue — light borders/accents on a teal background */
  --teal-xlight: #F8FAFC !important; /* Off-white — very light tinted background sections */
  --amber: #D97706 !important;       /* Muted Warm Gold — secondary brand color (CTA accents) */
  --amber-dark: #B45309 !important;  /* Darker Bronze Gold — hover state for amber elements */
  --amber-light: #FEF3C7 !important; /* Cream Accent tint — badge backgrounds */
  --dark: #1E293B !important;        /* Main text/icon color */
  --gray: #6B7280 !important;        /* Secondary/muted text color (subtitles, meta info) */
  --offwhite: #F8FAFC !important;    /* Page background color */
  --lightgray: #E2E8F0 !important;   /* Borders & dividers */
  --green: #16A34A !important;  /* Success states — done steps, checkmarks */
  --red: #DC2626 !important;    /* Error states — invalid fields, required markers */
}

/* Base page styles: default font, text color, background, and prevents
   horizontal scrollbars caused by any element that slightly overflows
   the viewport width (e.g. absolutely positioned decorative shapes). */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--dark);
  background: var(--offwhite);
  overflow-x: hidden;
}


/* ============================================================================
   3. ANNOUNCEMENT BAR
   Thin strip at the very top of the page used for site-wide announcements
   (e.g. "Free registration this month!"). Includes a dismiss (×) button.
   ============================================================================ */
#ann-bar {
  background: var(--teal-dark);
  color: #fff;
  text-align: center;
  padding: 10px 40px;     /* extra horizontal padding so text doesn't collide with the close button */
  font-size: 13.5px;
  font-weight: 500;
  position: relative;     /* needed so #ann-close can be positioned relative to this bar */
  letter-spacing: 0.01em;
}
#ann-bar span {
  color: var(--amber-light); /* highlights key words/phrases within the announcement text */
  font-weight: 600;
}
#ann-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%); /* vertically centers the × button regardless of bar height */
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
}
#ann-close:hover {
  opacity: 1; /* brightens on hover to show it's interactive */
}


/* ============================================================================
   4. MAIN NAVIGATION BAR
   ============================================================================ */
nav {
  position: sticky;   /* stays pinned to the top of the viewport while scrolling */
  top: 0;
  z-index: 200;        /* sits above page content but below dropdown menus (z-index 300) */
  background: #fff;
  border-bottom: 1px solid var(--lightgray);
  padding: 0 5%;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo on the left, links on the right */
  min-height: 64px;
  padding: 8px 0;
}

/* Logo block. Desktop: logo row + phone number sit side by side.
   Mobile (see media query below): phone number drops directly under
   the logo row with zero gap, stretched edge-to-edge. */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Playfair Display', serif; /* serif font gives the brand name an "academic" feel */
  font-size: 22px;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.nav-phone {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--teal-dark); }

@media (max-width: 750px) {
  .logo-wrap {
    flex-direction: column;
    align-items: center; /* centers the phone number under the logo */
    gap: 0; /* no gap between the logo row and the phone number */
  }
  .nav-phone {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
  }
  .hamburger {
    gap: 7px;
  }
  .hamburger span {
    width: 40px;
    height: 3px;
  }
}

@media (max-width: 380px) {
  .nav-phone { font-size: 18px; font-family: 'Playfair Display', serif;}
  .logo-img { height: 36px; }
  .hamburger span { width: 28px; }
}

.logo span {
  color: var(--amber); /* lets part of the logo text (e.g. "Edge") stand out in gold */
}

/* Top-level nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}
.nav-links > li {
  position: relative; /* anchor point for dropdown menus attached to a nav item */
}
.nav-links a {
  text-decoration: none;
  color: var(--dark);
  font-size: 16.5px;
  font-weight: 700;
  transition: color 0.2s;
  white-space: nowrap; /* prevents link text from wrapping onto two lines */
}
.nav-links a:hover {
  color: var(--teal);
}

/* The single "call to action" styled nav link (e.g. "Register as Tutor") */
.nav-cta {
  background: var(--amber);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}
.nav-cta:hover {
  background: var(--amber-dark) !important;
  color: #fff !important;
}


/* ============================================================================
   5. NAV DROPDOWN MENU
   The "▾" expandable menu under a nav item (e.g. "Study Hub" with sub-links).
   ============================================================================ */
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--dark);
  font-size: 16.5px;
  font-weight: 700;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}
.dropdown-trigger:hover {
  color: var(--teal);
}
.dropdown-trigger .arrow {
  font-size: 10px;
  transition: transform 0.25s;
  display: inline-block;
}
/* Rotates the ▾ arrow 180° (pointing up) when the dropdown is open */
.dropdown-trigger.open .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  display: none;             /* hidden by default — JS toggles the .open class */
  position: absolute;
  top: calc(100% + 10px);    /* sits just below the trigger link with a small gap */
  left: 50%;
  transform: translateX(-50%); /* horizontally centers the menu under the trigger */
  background: #fff;
  border: 1.5px solid var(--lightgray);
  border-radius: 12px;
  min-width: 210px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;          /* keeps the rounded corners clean when child links have hover backgrounds */
  z-index: 300;
}
.dropdown-menu.open {
  display: block;
  animation: dropIn 0.2s ease; /* subtle "drop down + fade in" animation when opened */
}
/* Keyframes for the dropdown opening animation: slides down slightly while fading in */
@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--dark);
  text-decoration: none;
  transition: background 0.15s;
  border-bottom: 1px solid var(--lightgray); /* divider line between each dropdown item */
}
.dropdown-menu a:last-child {
  border-bottom: none; /* removes the divider after the final item */
}
.dropdown-menu a:hover {
  background: var(--teal-xlight);
  color: var(--teal-dark);
}
.dropdown-menu a .icon {
  font-size: 16px;
  width: 20px;        /* fixed width keeps all icons aligned in a neat column regardless of icon glyph width */
  text-align: center;
}
/* The "View All" link at the bottom of a dropdown gets a slightly different,
   highlighted style to distinguish it from regular links above it. */
.dropdown-menu .all-link {
  background: var(--teal-xlight);
  font-weight: 600;
  color: var(--teal-dark) !important;
}


/* ============================================================================
   6. FLOATING WHATSAPP BUTTON & MOBILE HAMBURGER MENU
   ============================================================================ */

/* Floating round WhatsApp button, fixed to the bottom-right corner of the
   screen on every page, regardless of scroll position. */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366; /* WhatsApp's official brand green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 999;          /* very high — should float above virtually everything else */
  text-decoration: none;
  transition: transform 0.2s;
}
.wa-float:hover {
  transform: scale(1.08); /* slight "pop" grow effect on hover to invite clicking */
}
.wa-float svg {
  width: 30px;
  height: 30px;
}
/* Shrinks the floating button slightly on small screens so it takes up
   less precious mobile screen space. */
@media (max-width: 600px) {
  .wa-float { width: 50px; height: 50px; bottom: 18px; right: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* Hamburger icon — hidden on desktop, shown only on mobile widths
   (see the RESPONSIVE section near the bottom of this file). */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: 0.3s;
}

/* Mobile slide-down menu shown when the hamburger is tapped */
.mobile-menu {
  display: none; /* JS toggles visibility */
  background: #fff;
  border-top: 1px solid var(--lightgray);
  padding: 12px 5%;
}
.mobile-menu a {
  display: block;
  padding: 10px 0;
  color: var(--dark);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid var(--lightgray);
}
/* Sub-links (e.g. nested Study Hub categories) shown indented and muted
   compared to top-level mobile menu links. */
.mobile-menu .mob-sub {
  padding: 8px 0 8px 20px;
  font-size: 14px;
  color: var(--gray);
  border-bottom: 1px solid var(--lightgray);
  display: block;
  text-decoration: none;
}
.mobile-menu .mob-sub:hover {
  color: var(--teal);
}


/* ============================================================================
   7. SCROLLING TICKER
   The horizontally auto-scrolling strip of short announcements/stats just
   below the navbar (e.g. "500+ tutors onboarded • Trusted by 1000+ parents").
   ============================================================================ */
.ticker-wrap {
  background: var(--teal);
  overflow: hidden;      /* hides the part of the ticker that's scrolled off-screen */
  padding: 10px 0;
  white-space: nowrap;   /* keeps all ticker items on a single line */
}
.ticker-inner {
  display: inline-block;
  animation: ticker 28s linear infinite; /* continuous right-to-left scroll, repeats forever */
}
.ticker-inner:hover {
  animation-play-state: paused; /* pauses scrolling so users can read/click while hovering */
}
.ticker-item {
  display: inline-block;
  padding: 0 40px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
}
/* Adds a "•" separator dot after each ticker item */
.ticker-item::after {
  content: '•';
  margin-left: 40px;
  opacity: 0.5;
}
/* The ticker content is duplicated in the HTML (same items twice in a row),
   so scrolling exactly -50% creates a perfectly seamless infinite loop. */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================================
   8. SPA-STYLE SECTION SWITCHING
   This site behaves like a single-page-app: only one "page" (.section) is
   shown at a time, and JS toggles the .active class to switch between them.
   ============================================================================ */
.section {
  display: none;
  animation: fadeIn 0.35s ease; /* plays once when a section becomes active */
}
.section.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); } /* starts slightly below + transparent */
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   9. HOMEPAGE — HERO SECTION
   ============================================================================ */
.hero {
  background: linear-gradient(135deg, var(--teal-xlight) 0%, #fff 60%);
  padding: 20px 5% 36px;
  position: relative;  /* anchor point for the absolutely-positioned circular hero photo */
  overflow: hidden;    /* clips the photo/decorative shapes so they don't spill outside the hero */
}

/* The large circular rotating photo on the right side of the hero, made of
   two stacked image layers that crossfade between each other (see #14 below
   and script.js for the JS that rotates the images every few seconds). */
.hero-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(20px, -50%); /* centers vertically, nudges slightly right of center */
  width: 480px;
  height: 480px;
  border-radius: 50%;   /* makes the photo a perfect circle */
  z-index: 0;
  border: 6px solid var(--amber);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--teal-xlight);
  overflow: hidden;      /* keeps both image layers clipped to the circle */
}
/* Each .hp-layer is a full-size background image. Only the .active one is
   visible (opacity:1); the JS swaps which layer is "active" to crossfade. */
.hero-photo .hp-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out; /* the actual "crossfade" effect */
}
.hero-photo .hp-layer.active {
  opacity: 1;
}

.hero-inner {
  position: relative;
  z-index: 1;       /* keeps hero text above the photo, in case they ever overlap */
  max-width: 700px;
}

.hero-badge {
  display: inline-block;
  background: var(--amber-light);
  color: var(--amber-dark);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;  /* fully rounded "pill" shape */
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 52px); /* scales smoothly with viewport width, between 32px and 52px */
  line-height: 1.15;
  color: var(--teal-dark);
  margin-bottom: 18px;
}
.hero h1 em {
  color: var(--amber); /* used to highlight a key word/phrase within the headline */
  font-style: normal;   /* turns off the default italic styling of <em> */
}
.hero p {
  font-size: 17px;
  color: #2b2b2b;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 540px;     /* keeps paragraph line-length readable, not stretching full width */
}
.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;       /* buttons wrap onto a new line on narrow screens instead of overflowing */
}

/* Generic primary/secondary button styles, reused across the whole site
   (hero CTAs, form buttons, etc.) */
.btn-primary {
  background: var(--teal);
  color: #fff;
  padding: 13px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--teal-dark);
}
.btn-secondary {
  background: var(--amber);
  color: #fff;
  padding: 13px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover {
  background: var(--amber-dark);
}

/* Tertiary CTA — bordered/transparent, for lower-emphasis actions like
   "Study Hub" sitting alongside the two main hero buttons. */
.btn-outline {
  background: transparent;
  color: var(--teal);
  padding: 13px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid var(--teal);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-outline:hover {
  background: var(--teal);
  color: #fff;
}

/* The row of quick stats under the hero buttons (e.g. "500+ Tutors") */
.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.stat {
  text-align: left;
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--teal-dark);
  font-weight: 700;
}
.stat-label {
  font-size: 13px;
  color: var(--gray);
  margin-top: 2px;
}


/* ============================================================================
   10. HOMEPAGE — "TWO CARDS" SECTION (Parents / Tutors CTA cards)
   This section uses a background photo with a darkening filter + a
   semi-transparent overlay, layered behind the actual card content.
   The ::before / ::after / "> *" trio is a recurring pattern used in several
   sections below (Why Us, Testimonials) to achieve this photo-background
   + readable-overlay effect — see the inline notes here once; the same
   logic applies wherever you see it repeated further down.
   ============================================================================ */
.two-cards {
  padding: 36px 5%;
  position: relative;     /* anchor for the ::before/::after pseudo-element layers */
  background-color: #fff; /* fallback color while the background image loads */
  isolation: isolate;     /* keeps ::before from clipping/blending over child content's own stacking context */
}
/* Layer 0: the actual background photo, darkened so text stays readable */
.two-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1628621317388-6ebde0c18574?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* creates a subtle parallax effect as the user scrolls */
  filter: brightness(0.8) saturate(0.9); /* darkens + slightly desaturates the photo (lower value = darker) */
}
/* Layer 1: a soft off-white tint over the photo, for extra contrast with text */
.two-cards::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.5); /* slightly lower opacity since the image underneath is already darkened */
}
/* Layer 2: the actual visible content (heading + cards), raised above both
   background layers so it's always readable on top of the photo. */
.two-cards > * {
  position: relative;
  z-index: 2;
}
.two-cards h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  text-align: center;
  color: var(--teal-dark);
  margin-bottom: 20px;
}

/* The 2-column grid holding the "I'm a Parent" / "I'm a Tutor" cards */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.cta-card {
  border-radius: 16px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.cta-card .card-icon {
  font-size: 36px;
  margin-bottom: 16px;
}
.cta-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
/* The "Tutors" card heading uses a warmer bronze tone instead of navy,
   to visually differentiate it from the "Parents" card. */
.cta-card.tutors h3 {
  color: #92400E;
}
.cta-card p {
  font-size: 14.5px;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 24px;
}
/* Small green "badge" shown on a card (e.g. "Free for parents") */
.cta-card .badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
  background: #D1FAE5;
  color: #065F46;
}

/* Generic small "card" button — colored teal or amber depending on context */
.card-btn {
  display: inline-block;
  padding: 11px 24px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
}
.card-btn.teal {
  background: var(--teal);
  color: #fff;
}
.card-btn.teal:hover {
  background: var(--teal-dark);
}
.card-btn.amber {
  background: var(--amber);
  color: #fff;
}
.card-btn.amber:hover {
  background: var(--amber-dark);
}

/* Unifies the Parents & Tutors cards under one consistent professional
   style: light gray fill, subtle border, and a colored top accent line
   to tie them back to the brand's primary blue. */
.cta-card.parents,
.cta-card.tutors {
  background: #eeeeee;
  border: 1px solid var(--lightgray);
  border-top: 4px solid var(--teal); /* the accent "stripe" along the top edge of the card */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Gentle "lift" hover effect — card rises slightly with a deeper shadow */
.cta-card.parents:hover,
.cta-card.tutors:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}


/* ============================================================================
   11. HOMEPAGE — "HOW IT WORKS" SECTION
   Tabbed interface (e.g. "For Parents" / "For Tutors") where clicking a tab
   swaps which step-by-step list is shown. JS toggles the .active classes.
   ============================================================================ */
.how {
  padding: 36px 5%;
  background: var(--offwhite);
}
.how h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  text-align: center;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
.how .subtitle {
  text-align: center;
  color: #2b2b2b;
  font-size: 15px;
  margin-bottom: 28px;
}

/* The pill-shaped tab buttons that switch between step lists */
.how-tabs {
  display: flex;
  justify-content: center;
  gap: 0; /* tabs sit flush against each other, forming one connected pill shape */
  margin-bottom: 36px;
}
.how-tab {
  padding: 10px 28px;
  border: 1.5px solid var(--teal);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  transition: 0.2s;
}
.how-tab:first-child {
  border-radius: 8px 0 0 8px; /* rounds only the left side of the first tab */
}
.how-tab:last-child {
  border-radius: 0 8px 8px 0; /* rounds only the right side of the last tab */
}
.how-tab.active {
  background: var(--teal);
  color: #fff;
}

/* Step list — hidden unless it has .active (only one list shown at a time) */
.how-steps {
  display: none;
  max-width: 800px;
  margin: 0 auto;
}
.how-steps.active {
  display: flex;
  gap: 0;
  align-items: flex-start;
  flex-wrap: wrap;
}
.how-step {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 20px 16px;
  position: relative; /* anchor for the "→" arrow connector below */
}
/* Draws a "→" arrow between each step, except after the last one */
.how-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 28px;
  font-size: 20px;
  color: var(--teal-light);
}
.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.how-step h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.how-step p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
}


/* ============================================================================
   12. HOMEPAGE — "BRAINGYM" SECTION
   ============================================================================ */
.brain {
  padding: 36px 5%;
  position: relative;
  background-color: #fff;
  isolation: isolate;
}
.brain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1617791160536-598cf32026fb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(0.8) saturate(0.9);
}
.brain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.5);
}
.brain > * {
  position: relative;
  z-index: 2;
}
.brain h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  text-align: center;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
.brain .subtitle {
  text-align: center;
  color: #2b2b2b;
  font-size: 15px;
  margin-bottom: 28px;
}
.brain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* auto-wraps cards responsively */
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.brain-card {
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}
.brain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Two alternating color themes for cards in this grid — teal-tinted or
   amber-tinted — to add visual variety without using completely separate
   styles for each card. */
.brain-card.teal {
  background: rgba(30, 58, 138, 0.05);
  border: 1px solid rgba(30, 58, 138, 0.12);
}
.brain-card.amber {
  background: rgba(217, 119, 6, 0.05);
  border: 1px solid rgba(217, 119, 6, 0.12);
}
.brain-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
}
.brain-card p {
  font-size: 13px;
  color: var(--dark);
  line-height: 1.55;
}


/* ============================================================================
   13. HOMEPAGE — "WHY TUITIONEDGE?" SECTION
   ============================================================================ */
.why {
  padding: 30px 5%;
  background: var(--teal-xlight);
}
.why h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  text-align: center;
  color: var(--teal-dark);
  margin-bottom: 28px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.why-card {
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.why-card.teal {
  background: rgba(30, 58, 138, 0.05);
  border: 1px solid rgba(30, 58, 138, 0.12);
}
.why-card.amber {
  background: rgba(217, 119, 6, 0.05);
  border: 1px solid rgba(217, 119, 6, 0.12);
}
.why-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
}
.why-card p {
  font-size: 13px;
  color: var(--dark);
  line-height: 1.55;
}

/* Row of clickable "pill" tags for subjects (e.g. "Physics", "Math") */
.subject-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
.pill {
  background: #fff;
  border: 1.5px solid var(--teal-light);
  color: var(--teal-dark);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
}
.pill:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}


/* ============================================================================
   14. HOMEPAGE — TESTIMONIALS SECTION
   ============================================================================ */
.testi {
  padding: 36px 5%;
  position: relative;
  background-color: #fff;
  isolation: isolate;
}
.testi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: brightness(0.6) saturate(0.9); /* darker than other sections for more dramatic contrast behind quotes */
}
.testi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.6);
}
.testi > * {
  position: relative;
  z-index: 2;
}
.testi h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  text-align: center;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
.testi .subtitle {
  text-align: center;
  color: #2b2b2b;
  font-size: 15px;
  margin-bottom: 24px;
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.testi-card {
  background: var(--offwhite);
  border-radius: 14px;
  padding: 24px;
  border: 1.5px solid var(--lightgray);
}
.testi-card .stars {
  color: var(--amber);
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: 2px; /* spaces out the star characters (★★★★★) for legibility */
}
.testi-card p {
  font-size: 14px;
  color: var(--dark);
  line-height: 1.65;
  margin-bottom: 16px;
  font-style: italic; /* gives quoted testimonial text a distinct "quote" feel */
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Circular "avatar" showing the reviewer's initials, since no real photo
   is stored for testimonials. */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.author-info .name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dark);
}
.author-info .role {
  font-size: 12px;
  color: var(--gray);
}


/* ============================================================================
   15. FIND TUTORS PAGE
   ============================================================================ */
.find-hero {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  padding: 44px 5% 0;
  color: #fff;
  text-align: center;
}
.find-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 4vw, 38px);
  margin-bottom: 8px;
}
.find-hero p {
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 28px;
}

/* The search bar "card" that overlaps the bottom of the hero gradient */
.search-bar {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;   /* aligns the search button with the bottom of input fields */
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.search-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}
.search-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.search-field select,
.search-field input {
  border: 1.5px solid var(--lightgray);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.search-field select:focus,
.search-field input:focus {
  border-color: var(--teal); /* highlights the active field instead of using the default browser outline */
}
.search-btn {
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.2s;
  align-self: flex-end;
}
.search-btn:hover {
  background: var(--amber-dark);
}

.results-area {
  padding: 32px 5% 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.results-count {
  font-size: 14px;
  color: var(--gray);
}
.results-count span {
  color: var(--teal-dark);
  font-weight: 600;
}
.sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sort-row label {
  font-size: 13px;
  color: var(--gray);
}
.sort-row select {
  border: 1.5px solid var(--lightgray);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dark);
  outline: none;
}

/* Two-column layout: filter sidebar on the left, tutor result cards on the right */
.find-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.filter-sidebar {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--lightgray);
  padding: 20px;
  position: sticky;  /* sidebar stays visible while the results list scrolls */
  top: 80px;
}
.filter-sidebar h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clear-btn {
  font-size: 12px;
  color: var(--amber-dark);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 600;
}
.filter-group {
  margin-bottom: 20px;
}
.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}
.filter-group select {
  width: 100%;
  border: 1.5px solid var(--lightgray);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dark);
  outline: none;
}
.filter-group select:focus {
  border-color: var(--teal);
}
.fee-range {
  display: flex;
  gap: 8px;
}
.fee-range input {
  width: 100%;
  border: 1.5px solid var(--lightgray);
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dark);
  outline: none;
}
.fee-range input:focus {
  border-color: var(--teal);
}
.apply-btn {
  width: 100%;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  transition: background 0.2s;
}
.apply-btn:hover {
  background: var(--teal-dark);
}

/* Individual tutor result card: avatar | details | actions, in a 3-column grid */
.tutors-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tutor-card {
  background: #fff;
  border: 1.5px solid var(--lightgray);
  border-radius: 14px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 64px 1fr auto; /* avatar | info | action buttons */
  gap: 18px;
  align-items: start;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tutor-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.08);
}
.tutor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
/* Female tutor avatars get a distinct purple tone instead of the default teal */
.tutor-avatar.f {
  background: #7C3AED;
}
.tutor-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tutor-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
}
.verified-badge {
  background: #DCFCE7;
  color: #166534;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.tutor-qual {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 8px;
}
.tutor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tag {
  background: var(--teal-xlight);
  color: var(--teal-dark);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
/* Tag color variants for different tag categories (area vs teaching mode) */
.tag.area {
  background: var(--amber-light);
  color: #92400E;
}
.tag.mode {
  background: #EDE9FE;
  color: #5B21B6;
}
.tutor-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--gray);
  flex-wrap: wrap;
}
.tutor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  min-width: 110px;
}
.fee-badge {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  color: var(--teal-dark);
  font-weight: 700;
  text-align: right;
}
.fee-badge small {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--gray);
  font-weight: 400;
  display: block;
  text-align: right;
}
.wa-btn {
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.2s;
}
.wa-btn:hover {
  background: #128C7E;
}
.call-btn {
  background: var(--teal-xlight);
  color: var(--teal-dark);
  border: 1.5px solid var(--teal-light);
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: 0.2s;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.call-btn:hover {
  background: var(--teal);
  color: #fff;
}

/* Empty-state shown when no tutors match the current filters */
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}
.no-results .emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
.no-results h3 {
  font-size: 18px;
  color: var(--dark);
  margin-bottom: 8px;
}

/* "Filters" button shown only on mobile, where the sidebar is hidden by default */
.mob-filter-btn {
  display: none;
  background: var(--teal-xlight);
  color: var(--teal-dark);
  border: 1.5px solid var(--teal-light);
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 16px;
}


/* ============================================================================
   16. STUDY HUB PAGE (study materials library)
   ============================================================================ */
.study-hero {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  padding: 32px 5% 40px;
  color: #fff;
  text-align: center;
}
.study-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 10px;
}
.study-hero p {
  font-size: 15px;
  opacity: 0.85;
  max-width: 520px;
  margin: 0 auto;
}

/* Horizontal scrollable bar of "group by" filter buttons
   (e.g. group materials by Subject / Class / Type) */
.groupby-bar {
  background: #fff;
  border-bottom: 2px solid var(--lightgray);
  padding: 0 5%;
  display: flex;
  align-items: center;
  overflow-x: auto; /* allows horizontal scrolling if there are many group-by options */
}
.groupby-btn {
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  background: none;
  border: none;
  border-bottom: 3px solid transparent; /* reserves space so the active underline doesn't shift layout */
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
  margin-bottom: -2px; /* pulls the underline so it overlaps the bar's own border-bottom */
  display: flex;
  align-items: center;
  gap: 7px;
}
.groupby-btn:hover {
  color: var(--teal);
}
.groupby-btn.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

.study-content {
  padding: 36px 5%;
}
.group-block {
  margin-bottom: 40px; /* spacing between each subject/class grouping of materials */
}
.group-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--teal-dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--teal-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-title .gtag {
  font-size: 11px;
  background: var(--teal-xlight);
  color: var(--teal-dark);
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.mat-card {
  background: #fff;
  border: 1.5px solid var(--lightgray);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
  display: block;
}
.mat-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.mat-card .mat-type {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}
/* Color-coded badge per material type, so users can scan the grid quickly */
.mat-card .mat-type.notes     { background: #DCFCE7; color: #166534; }
.mat-card .mat-type.test      { background: #FEF3C7; color: #92400E; }
.mat-card .mat-type.video     { background: #EDE9FE; color: #5B21B6; }
.mat-card .mat-type.worksheet { background: #E0F2FE; color: #075985; }
.mat-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mat-card .mat-meta {
  font-size: 12px;
  color: var(--gray);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.mat-card .dl-link {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--teal);
  font-weight: 600;
}


/* ============================================================================
   17. SITE FOOTER
   ============================================================================ */
footer {
  background: var(--teal-dark);
  color: #fff;
  padding: 32px 5% 24px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* wide brand/description column + two link columns */
  gap: 40px;
  margin-bottom: 40px;
}
.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #fff;
  margin-bottom: 10px;
}
.footer-logo span {
  color: var(--amber);
}
.footer-desc {
  font-size: 13.5px;
  color: #99f6e4;
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber-light);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: #99f6e4;
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.2s;
  cursor: pointer;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  font-size: 12.5px;
  color: #99f6e4;
}


/* ============================================================================
   18. RESPONSIVE / MOBILE STYLES (max-width: 750px)
   Overrides that kick in once the viewport gets narrow enough that the
   desktop layout no longer fits comfortably (phones, small tablets).
   ============================================================================ */
@media (max-width: 750px) {

  /* Hide the big circular hero photo entirely on small screens — there's
     no room for it next to the hero text. */
  .hero-photo {
    display: none;
  }

  /* Hero CTA buttons on mobile: "Find a Tutor" + "Join as Tutor" sit
     side-by-side in one row; "Study Hub" drops to its own full-width row
     below them. (Previously targeted a nonexistent .hero-left .btn-group
     selector that never matched any real markup — fixed to target the
     actual .hero-btns buttons.) */
  .hero-btns {
    gap: 8px !important;
  }
  .hero-btns .btn-primary,
  .hero-btns .btn-secondary {
    flex: 1 1 calc(50% - 4px);
    padding: 12px 10px !important;
    font-size: 14px !important;
    text-align: center;
  }
  .hero-btns .btn-outline {
    flex: 1 1 100%;
    padding: 12px 10px !important;
    font-size: 14px !important;
    text-align: center;
  }

  /* Collapse multi-column grids down to a single column / 2 columns
     so cards remain readable at narrow widths. */
  .cards-grid { grid-template-columns: 1fr; }
  .brain-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .why-grid   { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Stack footer columns vertically on mobile instead of the 3-column grid */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  /* Within the stacked footer, put the two link columns (Quick Links,
     Resources etc.) side-by-side in a 2-column mini-grid to save vertical
     space, rather than stacking every single link in one long column. */
  .footer-top .footer-col:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
    gap: 16px;
  }
  .footer-col a {
    margin-bottom: 4px; /* tighter vertical spacing between links on mobile */
  }

  /* Swap desktop nav links for the hamburger + mobile menu */
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* "How It Works" steps stack vertically with down-arrows instead of
     side-by-side with right-arrows. */
  .how-steps.active { flex-direction: column; align-items: center; }
  .how-step:not(:last-child)::after {
    content: '↓';
    right: auto;
    bottom: -14px;
    top: auto;
    left: 50%;
  }

  .hero-stats { gap: 24px; }

  /* Find Tutors page: sidebar collapses into a toggleable mobile panel */
  .find-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; position: static; }
  .filter-sidebar.mob-open { display: block; }
  .mob-filter-btn { display: block; }

  /* Tutor cards drop the 3rd grid column (actions move below instead) */
  .tutor-card { grid-template-columns: 52px 1fr; gap: 12px; }
  .tutor-avatar { width: 52px; height: 52px; font-size: 18px; }
  .tutor-actions {
    flex-direction: row;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
  }

  .search-bar { flex-direction: column; }
  .search-field { min-width: 100%; }
  .groupby-btn { padding: 14px 14px; font-size: 13px; }

  /* Re-positions a decorative ::before shape (likely on .hero) to sit
     centered above the text on small screens instead of off to the side. */
  .hero::before {
    width: 320px;
    height: 320px;
    left: auto;
    right: 50%;
    top: 20px;
    transform: translateX(50%);
    opacity: 0.3;
  }
}


/* ============================================================================
   19. TUTOR REGISTRATION PAGE — PAGE HERO
   ============================================================================ */
.reg-hero {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  padding: 40px 5% 60px;
  color: #fff;
  text-align: center;
}
.reg-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 4vw, 36px);
  margin-bottom: 8px;
}
.reg-hero p {
  font-size: 15px;
  opacity: 0.85;
  max-width: 480px;
  margin: 0 auto;
}
.free-pill {
  display: inline-block;
  background: var(--amber);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}


/* ============================================================================
   20. TUTOR REGISTRATION — MULTI-STEP PROGRESS BAR
   The "Step 1 → 2 → 3" indicator card that overlaps the bottom of the
   reg-hero gradient and tracks progress through the registration form.
   ============================================================================ */
.progress-wrap {
  max-width: 580px;
  margin: -28px auto 0; /* negative margin pulls the card up to overlap the hero above it */
  position: relative;
  z-index: 10;
  padding: 0 20px;
}
.progress-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}
.steps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
/* The numbered circle for each step. JS toggles .active (current step)
   and .done (completed step, shows a ✓ instead of the number) classes. */
.dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
  border: 2px solid var(--lightgray);
  background: #fff;
  color: var(--gray);
}
.dot.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.dot.done {
  background: var(--green); /* NOTE: --green is referenced but not defined in :root above —
                                 consider adding a --green variable for consistency. */
  border-color: var(--green);
  color: #fff;
}
.step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  text-align: center;
  white-space: nowrap;
}
.step-label.active {
  color: var(--teal-dark);
}
/* The connecting line between two step-dots, filled in once that step is done */
.step-line {
  flex: 1;
  height: 2px;
  background: var(--lightgray);
  margin: 0 4px;
  margin-bottom: 20px; /* aligns the line vertically with the center of the dots, not the labels below them */
  transition: background 0.3s;
}
.step-line.done {
  background: var(--green);
}
.progress-bar-outer {
  height: 5px;
  background: var(--lightgray);
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar-inner {
  height: 100%;
  background: var(--teal);
  border-radius: 10px;
  transition: width 0.4s ease; /* animates smoothly as JS updates the width % per step */
}


/* ============================================================================
   21. TUTOR REGISTRATION — FORM CARD & FORM ELEMENTS
   ============================================================================ */
.form-wrap {
  max-width: 580px;
  margin: 24px auto 36px;
  padding: 0 20px;
}
.form-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1.5px solid var(--lightgray);
}
.form-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.form-card .step-subtitle {
  font-size: 13.5px;
  color: #2b2b2b;
  margin-bottom: 28px;
}

/* Generic 2-column row layout for pairing related fields side-by-side
   (e.g. Name + Phone). ".single" forces it back to one column when a
   field needs the full row width (e.g. a long textarea). */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.form-row.single {
  grid-template-columns: 1fr;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 4px;
}
.form-group label .req {
  color: var(--red); /* NOTE: --red is referenced but not defined in :root above —
                         consider adding a --red variable for consistency. */
  font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--lightgray);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--dark);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
}
/* Applied via JS when a field fails validation, to visually flag the error */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: var(--red);
}
.form-group textarea {
  resize: vertical; /* allows the user to resize textareas taller, but not wider */
  min-height: 90px;
}
.error-msg {
  font-size: 11.5px;
  color: var(--red);
  display: none; /* hidden by default — JS adds .show when there's a validation error to display */
}
.error-msg.show {
  display: block;
}
.hint {
  font-size: 11.5px;
  color: var(--gray);
}

/* "Same as phone number" checkbox row (e.g. for the WhatsApp number field) */
.same-wa {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
  margin-top: -8px;     /* pulls it up closer to the field it relates to */
  margin-bottom: 18px;
}
.same-wa input {
  accent-color: var(--teal);
  width: 15px;
  height: 15px;
}

/* Multi-select "pill" options (e.g. choosing subjects taught) — clicking
   toggles the .selected class via JS instead of using native checkboxes. */
.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.pill-opt {
  padding: 7px 14px;
  border-radius: 30px;
  border: 1.5px solid var(--lightgray);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
  user-select: none; /* prevents text selection highlight when rapidly clicking pills */
  background: #fff;
  color: var(--dark);
}
.pill-opt:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}
.pill-opt.selected {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
/* An alternate amber-colored "selected" state, used for a different pill
   group (e.g. Classes vs Boards) so the two groups are visually distinct. */
.pill-opt.selected.amber {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

/* Back / Next / Submit buttons at the bottom of each form step */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--lightgray);
}
.btn-back {
  background: none;
  border: 1.5px solid var(--lightgray);
  color: var(--gray);
  padding: 11px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s;
}
.btn-back:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.btn-next {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 11px 32px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.btn-next:hover {
  background: var(--teal-dark);
}
.btn-submit {
  background: var(--amber);
  color: #fff;
  border: none;
  padding: 12px 36px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.btn-submit:hover {
  background: var(--amber-dark);
}


/* ============================================================================
   22. TUTOR REGISTRATION — REVIEW SCREEN (Step 3)
   Shows a read-only summary of everything the tutor entered, before they
   hit final submit. Each field has an "Edit" link to jump back to step 1/2.
   ============================================================================ */
.review-section {
  margin-bottom: 24px;
}
.review-section h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--teal-dark);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--teal-light);
}
.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.review-item {
  background: var(--offwhite);
  border-radius: 9px;
  padding: 10px 14px;
}
/* Lets a single review item (e.g. a long bio) span both grid columns */
.review-item.full {
  grid-column: 1 / -1;
}
.review-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.review-value {
  font-size: 14px;
  color: var(--dark);
  font-weight: 500;
}
/* Used for review fields that hold multiple selected pills (subjects,
   classes, boards) — renders them as small rounded tags. */
.review-value.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.review-value.tags span {
  background: var(--teal-xlight);
  color: var(--teal-dark);
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 20px;
}
.edit-link {
  font-size: 12.5px;
  color: var(--amber-dark);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: none;
  font-family: inherit;
  text-decoration: underline;
}


/* ============================================================================
   23. TUTOR REGISTRATION — SUCCESS SCREEN
   Shown after the form is submitted successfully; includes the WhatsApp
   confirmation button and a "what happens next" checklist.
   ============================================================================ */
.success-screen {
  text-align: center;
  padding: 20px 0;
}
.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 20px;
}
.success-screen h2 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--teal-dark);
  margin-bottom: 10px;
}
.success-screen p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 24px;
}
.next-steps {
  background: var(--teal-xlight);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  text-align: left; /* overrides the centered text of .success-screen for this checklist block */
}
.next-steps h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: var(--dark);
}
.next-step-item:last-child {
  margin-bottom: 0;
}
.next-step-item .ns-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px; /* nudges the icon down slightly to align with the first line of text */
}
.wa-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  text-decoration: none;
  margin-bottom: 12px;
}
.wa-confirm-btn:hover {
  background: #128C7E;
}
.wa-note {
  font-size: 12px;
  color: var(--gray);
}


/* ============================================================================
   24. FORM STEP VISIBILITY (shared across the whole registration flow)
   Only one .form-step (step 1, 2, 3, or success) is visible at a time;
   JS toggles which one has the .active class.
   ============================================================================ */
.form-step {
  display: none;
}
.form-step.active {
  display: block;
}


/* ============================================================================
   25. RESPONSIVE — REGISTRATION FORM (max-width: 560px)
   Smaller breakpoint specifically for the form card, since its content
   needs to stack into single columns earlier than the rest of the site.
   ============================================================================ */
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .review-item.full { grid-column: 1; }
  .form-card { padding: 22px 18px; }
}