/* ------------------------------------------------------------------
   MusicMasters Entertainment - shared site styles
   Loaded on every page AFTER each page's inline <style> block, so the
   rules here are the single source of truth for anything that has to
   look identical site-wide (buttons, body text, header logo).
   ------------------------------------------------------------------ */

/* ---------- Body text (homepage values, applied site-wide) ---------- */
/* The homepage used a brighter text/muted pair than the inner pages;
   normalising the tokens here keeps copy the same colour everywhere. */
:root{--text:#FFFFFF;--muted:#EDEDED}
body{
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  color:var(--text);
  text-align:left;
}

/* ---------- Buttons ---------- */
/* One size for every button on every page: same padding, font-size,
   line-height and min box. Any per-section override that changed those
   has been removed from the page styles. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-weight:600;
  font-size:13.5px;
  line-height:1.2;
  letter-spacing:.3px;
  padding:10px 20px;
  min-height:40px;
  min-width:132px;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
/* icons inside buttons carry their own width/height attributes, so pin
   them here too or the buttons end up different heights */
.btn svg{flex:0 0 auto;width:14px;height:14px}
/* forms and the login card used to stretch their button full width */
.form .btn,.portal-card .btn{width:auto}
/* the forgot-password link used to sit under a full-width button */
.portal-card .forgot{display:block}
/* the mobile menu's link styling used to win over .btn on its CTA */
.mobile-menu a.btn{padding:10px 20px;font-size:13.5px;min-height:40px;border-bottom:0}

/* ---------- Button colour ---------- */
/* The client asked for every button in a deep dark yellow, so the fill, the
   glow under it and the ghost button's hover edge are set here in #B8860B.
   Only the buttons move: --accent/--accent2 still carry the orange that
   colours links, icons, price numbers and headings, which the client kept.
   The page styles paint .btn-primary from those tokens, so these plain rules
   win on source order - site.css loads after every page's inline <style>.
   Text stays #180a02: the dark reads better on the yellow than white does.
   Size, padding, radius and the :hover lift are untouched. */
.btn-primary{background:linear-gradient(135deg,#B8860B,#9A7209);color:#180a02;box-shadow:0 10px 34px -10px rgba(184,134,11,.7)}
.btn-primary:hover{box-shadow:0 16px 44px -8px rgba(184,134,11,.85)}
.btn-ghost:hover{border-color:#B8860B;color:#fff}

/* ---------- Text links ---------- */
.textlink{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(232,95,6,.45);
  text-underline-offset:4px;
}
.textlink:hover{text-decoration-color:var(--accent)}

/* ---------- Contact forms ---------- */
/* the submit button sits centred under the fields on every form */
.form button[type="submit"]{
  display:flex;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
/* Title above the fields on every lead form. Same treatment as the page
   styles' .form h3, which it has to outrank (hence the two-class selector).
   Set in Anton to match the .requests h3 on /login/ and the .cal-head
   calendar heading below, so every section heading of this size reads as one
   family; the line-height the global h1,h2,h3 rule sets (Anton/1.02) is still
   reset here, as .form h3 never does - same as .article h3 and .legal h2. */
.form .form-title{
  font-family:'Anton',system-ui,sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:1.3;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent);
  /* tight under the heading so the sub-line below reads with it */
  margin:0 0 8px;
  /* centred over the fields on every page that carries the form */
  text-align:center;
}
/* one-line intro under the form heading, matching .cal-intro's job on the
   calendar - white body text so the orange heading stays the accent. */
.form .form-sub{color:#fff;text-align:center;font-size:16px;line-height:1.4;margin:0 0 18px;}
/* Heading over the checklist on /login/. Same Anton treatment as .form-title
   above so the two read as one family, minus its text-align:center - this one
   sits over the left-aligned checkmark list. The line-height is spelled out
   for the same reason it is there: the pages' global h1,h2,h3 rule sets
   Anton/1.02 and .form h3 never resets it. */
.portal .portal-intro{
  font-family:'Anton',system-ui,sans-serif;
  font-weight:400;
  font-size:22px;
  line-height:1.3;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}

/* ---------- "Let's Get This Party Started!" card ---------- */
/* Sits above the contact form on every page that carries one: same panel
   treatment as the .form below it, with the heading on the .cal-head/Anton
   footing so the two stack as a pair. No margin - .book-col is a flex column
   with gap:22px, so the gap already does the spacing. */
.party-card{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:32px;text-align:center;margin-top:0}
.party-card .party-title{font-family:'Anton',system-ui,sans-serif;font-weight:400;font-size:34px;line-height:1.3;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
/* phone and email stacked under the heading, both still tappable links. */
.party-card .party-lines{display:flex;flex-direction:column;gap:10px}
.party-card .party-lines a{color:#fff;font-size:17px;font-weight:600;text-decoration:none;word-break:break-word}
.party-card .party-lines a:hover{color:var(--accent)}
/* the homepage stacks its form and calendar in a .book-col; the inner pages
   dropped the form straight into the two-column .book-grid/.cta-two, where a
   card added after it would land in the next grid cell instead of under the
   form. They now carry the same wrapper, so the rule lives here. */
.book-col{display:flex;flex-direction:column;gap:22px}
.book-col .form{margin-top:0}

/* ---------- Header (top bar) ---------- */
/* Larger logo in the top section, with the bar grown to match. */
.nav{height:96px}
header .brand-mark{width:66px;height:66px}
header .brand-word{height:34px;width:auto}
.mobile-menu{top:96px}
.hero{padding-top:96px}
/* the Schools link makes eight items in the top bar, so the links sit a little
   tighter together to keep the row clear of the CTA */
.nav-links{gap:14px}
@media(max-width:1240px){
  .nav-links{display:none}
  .burger{display:flex}
}
@media(max-width:640px){
  .nav{height:80px}
  .mobile-menu{top:80px}
  .hero{padding-top:80px}
  header .brand-mark{width:54px;height:54px}
  header .brand-word{height:28px}
}

/* ---------- Page hero (top section of every page) ---------- */
/* Near-solid black behind the headline on the left, falling off through the
   middle to fully clear on the right so the photo shows. Every hero on the
   site is the same shell as the homepage's - a full-bleed .bg photo with the
   copy ranged left - so they all take the same scrim.
   This has to live here, not in a page's inline <style>: site.css loads after
   that block and re-declares .page-hero::before at equal specificity, so an
   override written upstream loses on source order and never renders. */
.page-hero::before{
  background:linear-gradient(90deg,rgba(10,9,12,.985) 0%,rgba(10,9,12,.96) 24%,rgba(10,9,12,.84) 42%,rgba(10,9,12,.52) 56%,rgba(10,9,12,.20) 70%,rgba(10,9,12,.04) 82%,rgba(10,9,12,0) 92%),
             linear-gradient(180deg,rgba(10,9,12,.42),rgba(10,9,12,0) 24%,rgba(10,9,12,0) 76%,var(--bg)),
             radial-gradient(900px 500px at 82% 14%,rgba(232,95,6,.16),transparent 62%);
}
/* the photo only reads on the uncovered right side, so lift it there */
.page-hero .bg img{filter:saturate(1.04) brightness(1.2) contrast(1.03)}
@media(max-width:900px){
  /* text spans the full width on small screens, so keep it dark all the way across */
  .page-hero::before{
    background:linear-gradient(90deg,rgba(10,9,12,.92) 0%,rgba(10,9,12,.85) 55%,rgba(10,9,12,.70) 100%),
               linear-gradient(180deg,rgba(10,9,12,.45),rgba(10,9,12,0) 26%,rgba(10,9,12,0) 66%,var(--bg)),
               radial-gradient(900px 500px at 82% 14%,rgba(232,95,6,.16),transparent 62%);
  }
  .page-hero .bg img{filter:saturate(.98) brightness(1)}
}
/* The eyebrow line above each hero headline sits flush with the headline's
   left edge. It used to be a rounded pill, whose 16px of inner padding pushed
   the text in from the h1 below it; dropping the pill (the homepage's .plain
   treatment) is what actually lines the two up. */
.page-hero .eyebrow{
  display:block;
  border:0;
  background:none;
  padding:0;
  border-radius:0;
  margin:0 0 22px;
  text-align:left;
}

/* ---------- Testimonials ---------- */
/* The review box used to run full-bleed while every other section sat inside
   the 1200px container. These put it back on the same container width,
   gutters and card treatment as its neighbours so the edges line up. */
.testimonials > .wrap{max-width:var(--maxw);padding:0 24px}
.testimonials .sec-head{padding:0}
.testimonials .tst-stage{max-width:none;width:100%;margin:0}
.testimonials .tst{border:1px solid var(--line);border-radius:var(--r);padding:38px 34px}
.testimonials .tst-dots{padding:0}
@media(max-width:640px){
  .testimonials .tst{padding:30px 24px}
}

/* ---------- Footer (brand block) ---------- */
/* Bigger footer logo and wordmark, pinned here so every page's footer matches:
   the inner pages were running a 40px/21px mark and the homepage a 54px/28px
   one. Scoped to .foot-brand so the header mark above is untouched. */
.foot-brand .brand{font-size:34px;gap:16px}
.foot-brand .brand-mark{width:82px;height:82px}
.foot-brand .brand-word{height:42px;width:auto}
@media(max-width:640px){
  /* one step down on phones so the mark and wordmark stay on a single line */
  .foot-brand .brand{font-size:29px;gap:13px}
  .foot-brand .brand-mark{width:68px;height:68px}
  .foot-brand .brand-word{height:35px}
}

/* ---------- Resource Center articles ---------- */
/* The song lists and F.A.Q. carried over from the client's Resource Center use
   two shapes the placeholder posts never did: a sub-heading per question, and
   a ranked table. Both are styled here so every article page picks them up. */
/* The scroll-in animation observes at threshold .14, which an element taller
   than ~7 viewports can never satisfy - the Top 200 list is 9000px and stayed
   stuck at opacity 0. Article bodies opt out of the fade so the copy is always
   on screen no matter how long the list runs. */
.article.reveal{opacity:1;transform:none}
.article h3{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:20px;
  color:#fff;margin:30px 0 10px;letter-spacing:.2px}
.article h3:first-child{margin-top:0}
.article table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16.5px}
.article td{color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.article tr:hover td{background:rgba(255,255,255,.03)}
.article td:first-child{color:var(--accent);font-weight:700;width:56px;text-align:right}
/* the song lists are one long <br>-separated block; two columns keeps them
   from running for several screens on a desktop */
.article .songlist{columns:2;column-gap:44px;font-size:16.5px;line-height:1.75}
@media(max-width:760px){
  .article .songlist{columns:1}
  .article table{font-size:15px}
  .article td{padding:8px 8px}
}

/* ---------- Appointment calendar ---------- */
/* Heading that introduces the booking widget. Sits directly above the embed
   on every page that carries a calendar, in the brand orange. */
.cal-head{font-family:'Anton',system-ui,sans-serif;font-weight:400;letter-spacing:.5px;
  text-transform:uppercase;font-size:22px;color:var(--accent);margin:4px 4px 8px;text-align:center}
/* the one-line intro under the heading is centred to match, on every
   calendar variant (.book-embed, .sched-embed, .cal-frame) and breakpoint */
.cal-intro{text-align:center}

/* ---------- Schedule page ---------- */
.sched{padding-top:150px}
.sched-logo{max-width:340px;width:100%;margin:0 auto 30px}
.sched-head{text-align:center;max-width:680px;margin:0 auto 34px}
.sched-head h1{font-size:clamp(32px,5vw,58px)}
.sched-head p{color:var(--muted);margin-top:16px}
.sched-embed{background:#000;border:1px solid var(--line);border-radius:var(--r);padding:18px;max-width:820px;margin:0 auto;min-height:120px}
.sched-embed .cal-intro{color:#fff;font-weight:600;font-size:16.5px;margin:4px 4px 12px}
.sched-alt{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
@media(max-width:640px){
  .sched{padding-top:120px}
  .sched-logo{max-width:240px}
}

/* ---------- Phone / tablet centring ---------- */
/* On narrow screens the hero buttons and the Team section's CTA wrap onto
   their own line, where left-aligned they read as stranded. Centring them
   here only - desktop layout is untouched. */
@media(max-width:760px){
  .home-hero .hero-actions{justify-content:center}
  /* the button is the only thing centred; the copy above it stays ranged left */
  .sec.team .team-wrap > div > a.btn{
    display:flex;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }
}