/* ============================================================
   HOPEWOOD VOICE STUDIO — MOBILE OVERRIDES
   Breakpoint: max-width 480px (covers all modern phones)
   Strategy: override only what needs to change; leave desktop
   classes from app_generated_index CSS completely intact.
   ============================================================ */

@media (max-width: 480px) {

  /* ----------------------------------------------------------
     ROOT / BODY — remove fixed max-width constraint so content
     fills the phone screen edge-to-edge with small padding
  ---------------------------------------------------------- */
  :root {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ----------------------------------------------------------
     NAV BAR — the nav section has a fixed 1000px width class
     (c1m0odsb). Force full width so it doesn't overflow.
     Also reduce nav link font size so all 4 links can wrap
     cleanly into two rows if needed.
  ---------------------------------------------------------- */
  .c1m0odsb {
    width: 100% !important;
  }

  /* Nav links: smaller font + tighter padding on mobile */
  .cw2bq7g {
    font-size: 18px !important;
  }
  .ch4hkvo {
    padding-right: 8px !important;
  }
  .cbhpvn8 {
    padding-left: 8px !important;
  }
  /* Nav link row gap: bring links closer together */
  .cv937ts {
    column-gap: 10px !important;
  }
  .cfj9gwy {
    row-gap: 10px !important;
  }

  /* ----------------------------------------------------------
     TWO-COLUMN → ONE-COLUMN
     Any flex container set to row direction flips to column.
     c79iyo1  = flex-direction:row  (hero logo+list row)
     c1ftyohf = flex-direction:row  (What I Offer, Experience)
  ---------------------------------------------------------- */
  .c79iyo1 {
    flex-direction: column !important;
  }
  .c1ftyohf {
    flex-direction: column !important;
  }

  /* ----------------------------------------------------------
     COLUMN WIDTHS → FULL WIDTH
     On desktop these are percentage widths for side-by-side
     columns. On mobile everything becomes full width.
  ---------------------------------------------------------- */
  .cvv92g7  { width: 100% !important; max-width: 100% !important; }
  .cm1pmap  { width: 100% !important; max-width: 100% !important; }
  .c1rh15sl { width: 100% !important; max-width: 100% !important; }
  .ceqcamc  { width: 100% !important; max-width: 100% !important; }
  .ccfx9ye  { width: 100% !important; max-width: 100% !important; }
  .c1awyobv { max-width: 100% !important; }
  .c14v12f0 { max-width: 100% !important; }
  .c1c2t9jd { width: 100% !important; }
  .c1usr6x2 { max-width: 100% !important; }

  /* ----------------------------------------------------------
     FLOATED IMAGES → CLEAR FLOATS
     On desktop Tess's photo and the performance photo use
     float:left / float:right to wrap text around them.
     On mobile they should stack above the text.
  ---------------------------------------------------------- */
  .cnio7h2  { float: none !important; margin-right: 0 !important; }
  .cjpoj5j  { float: none !important; margin-left: 0 !important; }
  .c1dfhhyi { float: none !important; }

  /* ----------------------------------------------------------
     MIN-WIDTH OVERRIDES
     c1fqc1m6 sets min-width:500px on the Tess music-stand
     image container — this forces horizontal scrolling on
     a 380px phone. Remove it.
  ---------------------------------------------------------- */
  .c1fqc1m6 {
    min-width: unset !important;
    width: 100% !important;
  }

  /* Also handle min-width:800px if present (c15wt9j6) */
  .c15wt9j6 {
    min-width: unset !important;
    width: 100% !important;
  }

  /* ----------------------------------------------------------
     HERO LOGO SECTION
     On desktop the logo sits left of the services list.
     On mobile: center the logo above the list.
     c1m0odsb nav section and the logo container need centering.
  ---------------------------------------------------------- */
  .c1rh15sl img,
  .c1c2t9jd img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Logo in the hero: limit its size on mobile */
  .c2cr388 {
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  /* ----------------------------------------------------------
     AUDIO PLAYER
     The audio player embed has a fixed width (c5552v6 = 225px).
     Let it fill available width on mobile.
  ---------------------------------------------------------- */
  .c5552v6 {
    width: 100% !important;
  }

  /* ----------------------------------------------------------
     NEGATIVE MARGINS
     A few desktop elements use negative margins to create
     visual overlap effects. On mobile these cause clipping.
  ---------------------------------------------------------- */
  .c9xdp4c  { margin-top: 0 !important; }
  .c1grags0 { margin-bottom: 0 !important; }
  .cqmc9x7  { margin-top: 0 !important; }
  .c1bgmt75 { margin-bottom: 0 !important; }

  /* ----------------------------------------------------------
     BODY TEXT FONT SIZE
     The base body font is 32px (c1frtloh). On a phone that's
     quite large. Scale it down slightly.
  ---------------------------------------------------------- */
  .c1frtloh {
    font-size: 22px !important;
  }

  /* Section heading H1s: 48px desktop → readable on mobile */
  .cawd87k {
    font-size: clamp(26px, 7vw, 40px) !important;
  }

  /* Body text paragraphs (clamp 20-30px) → constrain on mobile */
  .cu398hi {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }

  /* ----------------------------------------------------------
     IMAGES — ensure no image overflows its container
  ---------------------------------------------------------- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ----------------------------------------------------------
     CONTACT PAGE — form iframe
     Google Forms iframe has fixed 400px width in inline style.
     Override so it fills mobile screen.
  ---------------------------------------------------------- */
  .form-container,
  .form-container iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Google Maps embed */
  .map-container,
  .map-container iframe {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ----------------------------------------------------------
     SPACING CLEANUP
     Some desktop padding values are large; tighten on mobile.
  ---------------------------------------------------------- */
  .c14j5rx1 { padding-left: 8px !important; }
  .cnkzhhu  { padding-right: 8px !important; }
  .c1fe657l { padding-right: 10px !important; }

}
/* end @media (max-width: 480px) */