/* ============================================================
   Playmochi — shared nav dropdown (About → Music / Reviews / Media)
   Additive: builds on each page's existing .nav / .nav-links styles.
   ============================================================ */

/* Fluid content ribbon: fixed 1140px up to ~1520px viewport (laptop unchanged),
   then grows with the screen to a 1560px cap. Root cause fix for "PC feels
   oversized": the layout now uses big screens instead of floating in them. */
:root { --maxw: clamp(1140px, 75vw, 1560px); }

/* Brand logo (replaces the text wordmark in nav + footer) — scales with viewport */
.wordmark-img { height: clamp(38px, 3.6vw, 54px); width: auto; display: block; }
.footer-brand .wordmark-img { height: clamp(34px, 3vw, 46px); margin-bottom: 10px; }

/* Instagram icon button in the desktop nav, beside the WhatsApp CTA */
.nav-ig {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background-color .3s var(--ease, ease), color .3s var(--ease, ease), border-color .3s var(--ease, ease);
}
.nav-ig svg { width: 20px; height: 20px; }
.nav-ig:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* Floating Instagram button — mobile only, mirrors the WhatsApp FAB on the left */
.fab-ig {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(83, 74, 183, .5);
  transition: transform .3s var(--ease, ease);
}
.fab-ig:hover { transform: scale(1.07); }
.fab-ig svg { width: 28px; height: 28px; color: #FCF9F3; }

@media (min-width: 1024px) {
  .nav { height: 82px; }          /* room for the larger logo on desktop */
  .nav-ig { display: inline-flex; }
  .fab-ig { display: none; }
  .fab { display: flex; }         /* floating WhatsApp on desktop too (pages hide it by default) */

  /* Squarespace-parity text density (desktop only; mobile stays 17px/1.7).
     Matched to Leon's live Squarespace site: 18px body, ~1.56 leading,
     wide filled measure. Justified with auto hyphenation to avoid rivers. */
  body { font-size: 18px; line-height: 1.6; }
  section p { text-align: justify; hyphens: auto; }
  section .hero-proof, section .attr, section .tq-attr, section .rev-quote, section .rev-foot,
  section .q-note, section .final-note, section figcaption, section .price-note,
  section .hero-cap, section .embed-label, section .fq-attr { text-align: left; hyphens: manual; }
  .final-c p, .final p, .q-hero p, .rails-intro p, .media-hero p { text-align: center; }

  /* Centered sections keep centered attributions (the left-align exclusion
     above must not win inside centered quote heroes). */
  .pullquote .attr, .rev-hero p { text-align: center; }

  /* "01 The Craft" is a centered section like "03 What Clients Say". */
  .whatido p { text-align: center; }
}

/* Review/testimonial sections are fully centered on every page, all sizes
   (these beat the desktop justify pass on specificity). */
.testimonials .t p, .testimonials .t .attr { text-align: center; }
.t-section .kicker { justify-content: center; }
.t-section h2 { text-align: center; margin-left: auto; margin-right: auto; }
.t-section .cq p, .t-section .cq .attr { text-align: center; display: block; }

@media (min-width: 1024px) {

  /* Text/media split sections (sitewide rollout of the hero pilot):
     text track locked at a readable 60ch, media takes ALL remaining ribbon
     width — media grows with the screen while text stays constant.
     Every container has text left / media right (verified), so no mirroring.
     align-items comes from each page's own CSS. Frames untouched: they keep
     width:100% + aspect-ratio and fill whatever column they're given. */
  .hero-grid, .ph-grid, .split, .about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 60ch) 1fr;
    gap: clamp(48px, 3vw, 64px);
    align-items: center;   /* media vertically centered beside its text */
  }

  /* Squarespace geometry: width-capped text blocks sit centered in the page,
     so leftover space splits evenly instead of pooling on the right. */
  .wrap > div[style*="max-width"],
  .wrap > p[style*="max-width"],
  .wrap > h2[style*="max-width"] { margin-left: auto; margin-right: auto; }
}

/* Larger WhatsApp icon on primary buttons (label is just "WhatsApp" now) */
.btn-primary svg { width: 22px; height: 22px; }

/* Mixcloud / SoundCloud embeds */
.embed-stack { display: flex; flex-direction: column; gap: 14px; }
.embed-stack iframe { width: 100%; border: 0; display: block; background: #191512; }
.embed-label {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lavender); margin-bottom: 6px; display: block;
}

/* Desktop dropdown */
.nav-has-sub { position: relative; }
.nav-has-sub > a .nav-caret {
  font-size: 9px;
  display: inline-block;
  margin-left: 3px;
  transition: transform .3s var(--ease, ease);
}
.nav-has-sub:hover > a .nav-caret,
.nav-has-sub:focus-within > a .nav-caret { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 184px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--ivory);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -24px rgba(33, 28, 26, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease, ease), transform .25s var(--ease, ease), visibility .25s;
  z-index: 101;
}
.nav-has-sub:hover .nav-submenu,
.nav-has-sub:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-submenu li { display: block; border: none; }
.nav-submenu a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav-submenu a::after { display: none !important; } /* kill the .nav-links sliding underline */
.nav-submenu a:hover,
.nav-submenu a.active { color: var(--orange); background: var(--tint); }

/* Mobile drawer: nested items indented under About */
.mm-sub a {
  padding-left: 26px !important;
  font-size: 17px !important;
  color: var(--muted) !important;
}
.mm-sub a::before { content: "\2014\00a0"; color: var(--lavender); } /* em dash + nbsp */
.mm-parent a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .nav-submenu { transition: none; }
  .nav-has-sub > a .nav-caret { transition: none; }
}

/* Inline quote cards (.iq) and sound-and-lighting cards (.ss) are centered
   sitewide. Placed at end of file: these must out-cascade the desktop
   justify pass at equal specificity. */
.iq { margin: 28px auto; max-width: 75ch; }
.iq p, .iq .attr { text-align: center; }
.ss { justify-content: center; text-align: center; }
.ss p { margin-left: auto; margin-right: auto; text-align: center; }

/* Straight reading line (Leon, consistency pass): any section header that
   leads .wrap directly is centered, matching the homepage. Headers inside
   text/media split columns (.ph-text, .split-text, etc.) are untouched. */
.wrap > .kicker { justify-content: center; }
.wrap > h2 { text-align: center; margin-left: auto; margin-right: auto; }

/* Music page: intro + CTA join the centered line */
.music-intro { text-align: center; }
.music-intro p { margin-left: auto; margin-right: auto; }
.music-cta { text-align: center; }
.music-cta p { margin-left: auto; margin-right: auto; }
.music-cta .ctas { justify-content: center; }

/* Review rail cards: quote and sign-off centered like every other testimonial */
.rev .rev-quote { text-align: center; }
.rev .rev-foot { flex-direction: column; align-items: center; gap: 4px; text-align: center; }

/* Pricing-page stragglers under now-centered headers: hero h1 + intro
   paragraph and the inline "see packages" link join the centered line.
   (.wrap > h1 is safe sitewide: every left-aligned hero h1 lives inside a
   grid text column, never as a direct .wrap child.) */
.wrap > h1 { text-align: center; margin-left: auto; margin-right: auto; }
.price-hero .wrap > p { margin-left: auto; margin-right: auto; }
.wrap > a.ulink { position: relative; left: 50%; transform: translateX(-50%); }

/* Footer brand: logo and identity lines share one center axis */
.footer-brand { text-align: center; }
.footer-brand .wordmark-img { margin-left: auto; margin-right: auto; }