/* ======================================================================
   AEROHEAD TUTORING — styles.css
   Clean, commented, and responsive.
   ====================================================================== */


/* ============  BRAND TOKENS  ========================================= */
:root {
    --cream:   #FAF6EF;   /* warm cream background */
    --blue:    #0a5a92;   /* exact brand blue from your logo */
    --ink:     #333333;   /* main text color */
    --muted:   #5b6b7a;   /* secondary text */
    --ring:    #e0e0e0;   /* (unused) subtle dividers if ever needed */
    --orange:  #EF6C00;   /* accent (CTA, quote bubble border if wanted) */
  
    /* Type scale */
    --fs-body: 1rem;
    --fs-body-lg: 1.2rem;
    --fs-h2: 1.8rem;      /* slightly larger for stronger section titles */
    --fs-pill: 1.15rem;
    --fs-pill-lg: 1.3rem;
  
    /* Spacing scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
  
    /* Layout width */
    --maxw: 1200px;       /* content max width for comfortable reading */
  }
  
  /* ============  GLOBAL + CONTAINER  =================================== */
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
  }
  
  /* Constrain content width; center on page */
  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--sp-4);
  }
  
  img { max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  
  /* ============  HEADER  =============================================== */
  /* Three-column header: [left logo] [center text] [right spacer] */
  .header {
    background: var(--cream);
    padding: var(--sp-2) 0;
    border-bottom: none;
  }
  
  .header-grid {
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | center | spacer */
    align-items: center;
    column-gap: var(--sp-5);
  }
  
  /* Logo area (left) */
  .logo {
    height: clamp(200px, 18vw, 3000px);
    width: auto;
  }
  
  /* Centered name + slogan inside a rounded badge */
  .header-center {
    display: flex;
    justify-content: center;
  }
  
  .header-text {
    display: inline-block;                 /* shrink-wrap around text */
    text-align: center;
    padding: var(--sp-2) var(--sp-6);
    border: 3px solid var(--blue);
    border-radius: 9999px;                 /* big oval */
    background: var(--cream);                      /* subtle contrast on cream */
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }
  
  .header-text h1 {
    margin: 0 0 var(--sp-2) 0;
    font-weight: 700;
    font-size: clamp(2rem, 2.4vw + 1rem, 3.2rem);
    letter-spacing: .02em;
    color: var(--blue);
  }
  
  .slogan {
    margin: 0;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.1rem, 1vw + .6rem, 1.5rem);
    color: var(--blue);
  }
  
  /* Right spacer reserved for future nav/phone/CTA */
  .header-right { min-width: 40px; }
  
  /* Mobile tweak: stack logo over badge when very narrow */
  @media (max-width: 640px) {
    .header-grid {
      grid-template-columns: 1fr; /* single column */
      row-gap: var(--sp-4);
      justify-items: center;
    }
  }
  
  /* ============  TESTIMONIALS  ========================================= */
  .testimonials {
    padding: var(--sp-2) 0;
    border-bottom: none;
  }
  
  .quote-bubble {
    /* Filled orange bubble with readable text that "uses the space" */
    background: var(--orange);
    color: var(--cream);
    border: 2px solid var(--orange);
    border-radius: 18px;
    padding: 14px 18px;              /* slightly tighter so text fills more */
    max-width: 900px;
    margin: var(--sp-3) auto 0;      /* centered in the container */
    line-height: 1.45;               /* tighter than default for denser look */
    font-size: 1.25rem;              /* bigger for readability */
    font-weight: bold;
    font-style: italic;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  
  .quote-bubble footer {
    margin-top: var(--sp-3);
    text-align: right;
    color: var(--cream);
    font-weight: bold;
    font-style: italic;
  }

  .trust-line {
    text-align: center;
    margin-top: 10px;
    font-weight: 700;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    /* margin: 0 0 8px 0; */   /* small, intentional bottom margin */
    color: var(--blue);
  }
  
  /* ============  SECTION TITLES (winged lines)  ======================== */
  section { padding: var(--sp-2) 0; border-bottom: none; }
  
  section h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--blue);
  
    /* Smaller top margin so previous paragraphs don't feel "too spaced" */
    margin: 0.75rem 0 1rem;
  }
  
  section h2::before,
  section h2::after {
    content: "";
    flex: 1;
    border-bottom: 2px solid var(--blue);
    margin: 0 12px;
  }
  
  /* ============  PHILOSOPHY  ====================================== */
  .tutoring-philosophy p {
    font-weight: 700;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    margin: 0 0 8px 0;   /* small, intentional bottom margin */
    color: var(--blue);
  }
  
  /* ============  PILLS  ================================================= */
  .pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: .7rem 1.4rem;
    border-radius: 9999px;
    border: 2px solid var(--blue);
  
    font-weight: 700;
    font-size: var(--fs-pill);
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
  }
  
  @media (min-width: 768px) {
    .pill { padding: .8rem 1.6rem; font-size: var(--fs-pill-lg); }
  }
  
  /* Services (filled) — on cream we’ll keep them outlined-inverse for contrast */
  .pill.filled { background: var(--cream); color: var(--blue); }
  .pill.filled:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transform: translateY(-1px);
    transition: box-shadow .15s ease, transform .15s ease;
  }
  
  /* Subjects (chevron) — outlined, clickable */
  .pill.chevron { background: transparent; color: var(--blue); cursor: pointer; }
  .pill.chevron:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
  
  /* ============  PRICING  ============================================== */
  .pricing .pill-container .pill { font-size: 1.05rem; } /* a hair smaller for long lines */
  .pricing-note {
    margin-top: 10px;
    font-weight: 700;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    margin-bottom: 0px;
    /* margin: 0 0 8px 0; */   /* small, intentional bottom margin */
    color: var(--blue);
  }
  
  /* ============  CTA  =================================================== */
  .cta { text-align: center; padding: var(--sp-4) 0 var(--sp-6); }
  .cta h2 { margin-bottom: var(--sp-4); }
  
  .cta-button{
    display:inline-block;
    padding:16px 32px;            /* bigger button for readability */
    background:var(--orange);
    color:#fff;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:.5px;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(239,108,0,.22);
    transition:transform .12s ease, filter .15s ease, background .2s ease;
    margin-top: 10px;
  }
  .cta-button:hover{ transform:translateY(-1px); filter:brightness(.96); }

  .cta-subtext {
    margin-top: 12px;
    font-weight: 700;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    margin-bottom: 10px;
    /* margin: 0 0 8px 0; */   /* small, intentional bottom margin */
    color: var(--blue);
  }
  
  .cta-button.secondary {
    display:inline-block;
    padding:16px 32px;            /* bigger button for readability */
    background:var(--blue);
    color:#fff;
    font-weight:700;
    font-size:1.2rem;
    letter-spacing:.5px;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(10, 90, 146, .25);
    transition:transform .12s ease, filter .15s ease, background .2s ease;
  }
  .cta-button:hover{ transform:translateY(-1px); filter:brightness(.96); }
  
  /* ============  ACCESSIBILITY FOCUS  ================================== */
  .pill.chevron:focus-visible,
  .cta-button:focus-visible {
    outline: 3px solid rgba(239,108,0,.6);
    outline-offset: 3px;
  }
/* --- Mobile bubble behavior: stack under the pill --- */
@media (max-width: 640px) {
  .pill-item { position: static; }             /* no absolute anchoring */
  .pill-item .info-bubble {
    position: static;
    inset: auto;
    max-width: none;
    margin: 10px 0 0;
    transform: none;
    left: auto;
    top: auto;
  }
  /* give a little space so it doesn't hug the next row */
  .pill-item + .pill-item { margin-top: 8px; }
}