/* Shared CSS for the VEMA landing pages. Mostly mobile overrides — desktop
   (>1020px) renders almost entirely from the inline styles in the HTML, and
   !important is required to beat them. The exception is the Instruments nav
   dropdown at the bottom of this file, which styles all widths (hover states
   can't live in inline styles). Bump the ?v= query in each page's <link>
   when editing (assets are served with a 7-day max-age). */

/* ── Nav collapse ─────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .nav-inner  { height: 64px !important; padding: 0 16px !important; gap: 12px !important; }
  .nav-logo   { height: 44px !important; }
  .nav-toggle { display: inline-flex !important; align-items: center; }
  .nav-cta    { margin-left: auto; padding: 9px 14px !important; font-size: 13px !important; }
  .nav-links  {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    background: #FAF7F0; padding: 10px 16px 16px;
    box-shadow: inset 0 1px 0 #EDE6D6, 0 16px 24px -16px rgba(31,27,22,0.25);
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { display: block !important; padding: 13px 14px !important; font-size: 15px !important; }
}

/* ── Main layout collapse ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  .display-xl { font-size: clamp(38px, 10.5vw, 56px) !important; }  /* h1s: 62–84px desktop */
  .display-lg { font-size: clamp(29px, 8vw, 40px) !important; }     /* h2s: 44–54px desktop */

  /* Hero (home) */
  .hero-inner { padding: 56px 20px 180px !important; } /* keeps clearance for the JS piano (138px) */
  .hero-stats { flex-wrap: wrap; gap: 24px 36px !important; }
  .hero-stats > div > div:first-child { font-size: 34px !important; }
  .hero-art-clef { display: none; } /* JS treble clef, min-width 380px — hide on phones */

  /* Grids */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }  /* home programs 2-up */
  .grid-3 { grid-template-columns: 1fr !important; }             /* testimonials */
  .grid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .teaser-img { height: 280px !important; }                      /* 440px desktop */

  /* About: outcomes 2×2 */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid > div { border-right: none !important; border-bottom: 1px solid #EDE6D6; }
  .stats-grid > div > div:first-child { font-size: 44px !important; }

  /* About: recital rows — date | title; location + badge tuck under the title */
  .recital-row { grid-template-columns: 56px 1fr !important; gap: 8px 16px !important; align-items: start !important; }
  .recital-row > div:nth-child(3) { grid-column: 2; }
  .recital-row > span:nth-child(4) { grid-column: 2; justify-self: start; }
  .recital-row > div:first-child > div:first-child { font-size: 28px !important; }

  /* Footer + WhatsApp FAB */
  .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .whatsapp-fab { bottom: 16px !important; right: 16px !important; width: 52px !important; height: 52px !important; }

  /* 16px inputs prevent iOS Safari focus-zoom */
  #vema-form input, #vema-form select, #vema-form textarea { font-size: 16px !important; }
}

@media (max-width: 600px) {
  .field-pair { grid-template-columns: 1fr !important; } /* contact form label/field pairs */
}

@media (max-width: 480px) {
  .nav-logo { height: 38px !important; }
  .nav-cta  { padding: 8px 11px !important; font-size: 12.5px !important; }
  #vema-form { padding: 24px 20px 28px !important; }
}

/* ── Instruments nav dropdown (all widths) ────────────────────────────── */
/* Desktop: hidden panel under the Instruments tab, opened on hover or
   keyboard focus. No gap between tab and panel, so the cursor never leaves
   the .nav-item on the way down. Mobile (nav collapsed): the panel renders
   inline as indented sub-links whenever the menu is open. */
.nav-item { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 212px;
  padding: 8px;
  background: #FAF7F0;
  border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(31,27,22,0.25), inset 0 0 0 1px #EDE6D6;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #3A342B;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: #F4EEDF; color: #8E6E1F; }
.nav-dropdown a:first-child {
  color: #8E6E1F; font-weight: 500;
  margin-bottom: 4px;
  box-shadow: inset 0 -1px 0 #EDE6D6;
  border-radius: 8px 8px 0 0;
}
@media (max-width: 1020px) {
  /* Inside the opened mobile menu the sub-links are always visible —
     placed after the .nav-links rules above so these win the !important tie. */
  .nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 4px 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .nav-dropdown a { padding: 10px 14px 10px 28px !important; font-size: 14px !important; }
  .nav-dropdown a:first-child { margin-bottom: 0; box-shadow: none; }
}

/* ── Blog: article typography & mobile reading ────────────────────────── */
/* Roughly 60% of visitors are on a phone, and a 1,500-word article is a very
   different reading task from the short prose blocks on the instrument pages.
   Desktop still renders from the inline styles in the HTML; everything below
   is the mobile scale, so !important is required to beat them. All selectors
   are blog-only — nothing here can touch the existing twelve pages. */

/* Comparison tables scroll inside their own box. The page body must never
   scroll horizontally, so the min-width lives on the table, not the wrapper. */
.post-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-table      { width: 100%; border-collapse: collapse; min-width: 440px; }

/* Whole-card tap target on the blog hub (the anchor wraps the entire card). */
.blog-card { display: block; text-decoration: none; color: inherit; }

@media (max-width: 768px) {
  /* Page band: the desktop 84px/72px eats a whole phone screen before the
     first word of the article appears. */
  .post-band { padding: 44px 20px 36px !important; }

  /* Body copy: 14.5px is comfortable in a short block and hard work over
     1,500 words. 16.5px also clears Google's mobile font-size audit. */
  .post-body    { padding: 40px 20px 32px !important; }
  .post-body p  { font-size: 16.5px !important; line-height: 1.75 !important; }
  .post-body h2 { font-size: 24px !important; margin: 36px 0 12px !important; }
  .post-body h3 { font-size: 19px !important; }
  .post-body li { font-size: 16px !important; line-height: 1.7 !important; }

  .post-callout    { padding: 18px 16px !important; }
  .post-callout li { font-size: 15.5px !important; }
  .post-quote      { font-size: 18px !important; padding-left: 16px !important; }
  .post-faq-q      { font-size: 17.5px !important; }
  .post-faq-a      { font-size: 15.5px !important; }
  .post-card-title { font-size: 18px !important; }
  .post-card p     { font-size: 15px !important; }
  .post-figure img { height: 220px !important; }
  .post-cta-inline { padding: 26px 18px !important; }

  /* margin-left:auto strands the CTA against the right edge at narrow widths. */
  .post-nav              { gap: 14px 20px !important; }
  .post-nav .post-nav-cta { margin-left: 0 !important; }

  .blog-card-img   { height: 200px !important; }
  .blog-card-title { font-size: 26px !important; }
  .blog-card-meta  { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .post-body h2    { font-size: 22px !important; }
  .post-figure img { height: 180px !important; }
  .blog-card-img   { height: 180px !important; }
}