/*
Theme Name: AA The Musical
Theme URI: https://example.com
Author: AA: The Musical LLC
Author URI: https://example.com
Description: Custom classic PHP theme reproducing the "AA: The Musical" promotional site mockup — warm dark/orange/gold palette, Cormorant Garamond display type paired with DM Sans body copy.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aa-the-musical
*/

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#1a0e06;
  font-family:'DM Sans', sans-serif;
  color:#3d2c1e;
  padding-top:68px;
}

a { color:inherit; text-decoration:none; }

img { max-width:100%; display:block; }

/* ==========================================================================
   Header / primary nav
   ========================================================================== */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:68px; display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  background:rgba(250,250,248,0.97);
  border-bottom:1px solid #e8e0d4;
  box-shadow:0 1px 12px rgba(26,17,8,0.05);
}
.nav-logo { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.nav-logo-t { font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:700; color:#BF5C2C; letter-spacing:-0.5px; line-height:1; white-space:nowrap; }
.nav-logo-s { font-family:'DM Sans', sans-serif; font-size:9px; color:rgba(112,88,72,0.5); font-style:italic; }

.primary-nav { display:flex; align-items:center; }
.primary-nav ul { display:flex; align-items:center; gap:28px; list-style:none; }
.primary-nav li { position:relative; }
.primary-nav a {
  font-family:'DM Sans', sans-serif; font-size:14px; font-weight:500; color:#1a1108;
  padding:22px 0 20px; display:inline-block;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color:#BF5C2C; border-bottom-color:#BF5C2C; }

.primary-nav ul ul {
  display:none; position:absolute; top:100%; right:0; flex-direction:column;
  background:#fff; border:1px solid #e8e0d4; border-radius:6px;
  box-shadow:0 8px 32px rgba(26,17,8,.1); padding:8px 0; min-width:160px; z-index:300;
  gap:0;
}
.primary-nav li:hover > ul { display:flex; }
.primary-nav ul ul a { padding:10px 16px; width:100%; }
.primary-nav ul ul a:hover { background:#FFF3EC; }
.primary-nav .menu-item-has-children > a::after { content:"\25BE"; font-size:10px; margin-left:6px; display:inline-block; vertical-align:1px; }

/* ==========================================================================
   Hero (front page)
   ========================================================================== */
.hero {
  position:relative; min-height:560px; height:calc(100vh - 68px); overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#1a0e06 center/cover no-repeat;
}
.hero-ov { position:absolute; inset:0; background:linear-gradient(160deg,rgba(26,14,6,.22) 0%,rgba(26,14,6,.55) 100%); }
.hero-ct { position:relative; z-index:2; padding:0 40px; max-width:860px; margin:0 auto; }
.hero-title { font-family:'Cormorant Garamond', serif; font-size:clamp(36px,7vw,96px); font-weight:900; color:#fff; line-height:1; margin-bottom:12px; letter-spacing:-2px; }
.hero-title em { font-style:italic; font-weight:400; color:rgba(255,220,190,.9); }
.hero-sub { font-family:'DM Sans', sans-serif; font-size:clamp(8px,1vw,11px); font-weight:300; letter-spacing:2.5px; text-transform:uppercase; color:rgba(240,228,196,.55); margin-bottom:22px; line-height:1.9; max-width:480px; margin-left:auto; margin-right:auto; }
.hero-div { display:flex; align-items:center; gap:16px; max-width:260px; margin:0 auto 28px; }
.hero-div-line { flex:1; height:1px; background:rgba(201,168,76,.35); }
.hero-div-dia { color:#c9a84c; font-size:8px; opacity:.8; }
.hero-cta { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.58; }
.hero-scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.5; }
.hero-scroll span { font-family:'DM Sans', sans-serif; font-size:7.5px; letter-spacing:4px; color:#c9a84c; text-transform:uppercase; }
.hero-scroll div { width:1px; height:28px; background:linear-gradient(to bottom,#c9a84c,transparent); animation:aatmScrollLine 2.2s ease-in-out infinite; }
@keyframes aatmScrollLine { 0%,100% { opacity:0; transform:scaleY(0); transform-origin:top; } 40% { opacity:1; transform:scaleY(1); } 80% { opacity:0; transform:scaleY(1); transform-origin:bottom; } }

.btn-p, .btn-s { cursor:pointer; }

/* ==========================================================================
   Buttons (apply via block "Additional CSS class(es)")
   ========================================================================== */
.btn-p, .wp-block-button.btn-p .wp-block-button__link {
  display:inline-flex; align-items:center; gap:9px; background:#BF5C2C; color:#fff !important; border:none;
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  padding:14px 30px; border-radius:0;
}
.btn-p:hover, .wp-block-button.btn-p .wp-block-button__link:hover { background:#A84E25; }

.btn-s, .wp-block-button.btn-s .wp-block-button__link {
  display:inline-flex; align-items:center; gap:9px; background:transparent; color:rgba(240,228,196,.85) !important;
  border:1.5px solid rgba(240,228,196,.3) !important;
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  padding:14px 30px; border-radius:0;
}
.btn-s:hover, .wp-block-button.btn-s .wp-block-button__link:hover { border-color:#c9a84c !important; color:#c9a84c !important; }

.btn-orange, .wp-block-button.btn-orange .wp-block-button__link {
  display:inline-block; background:#BF5C2C; color:#fff !important; border:none;
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  padding:12px 28px; margin-top:12px; border-radius:0;
}
.btn-orange:hover, .wp-block-button.btn-orange .wp-block-button__link:hover { background:#A84E25; }

.btn-tl, .wp-block-button.btn-tl .wp-block-button__link {
  background:none !important; color:#BF5C2C !important; border:none !important; padding:0 !important;
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:600;
}

/* ==========================================================================
   Section wrappers (apply to Group blocks via "Additional CSS class(es)")
   ========================================================================== */
.stripe { background:#BF5C2C; padding:16px 40px; text-align:center; }
.stripe p { font-family:'Cormorant Garamond', serif; font-size:clamp(15px,1.6vw,20px); font-style:italic; color:#fff; margin:0; }

.sec-inner { max-width:1160px; margin:0 auto; }
.eyebrow { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#BF5C2C; margin-bottom:14px; }
.eyebrow-gold { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#c9a84c; margin-bottom:14px; }
.sec-title { font-family:'Cormorant Garamond', serif; font-size:clamp(28px,3.5vw,44px); font-weight:400; font-style:italic; color:#1a1108; line-height:1.15; margin-bottom:20px; }
.sec-title-light { font-family:'Cormorant Garamond', serif; font-size:clamp(28px,3.5vw,44px); font-weight:400; font-style:italic; color:#f0e4c4; line-height:1.15; margin-bottom:20px; }
.rule { width:36px; height:3px; background:#BF5C2C; border-radius:2px; margin:0 0 28px; }
.rule-gold { width:36px; height:3px; background:#c9a84c; border-radius:2px; margin:0 0 28px; }

.bg-light { background:#fafaf8; padding:80px max(40px,6vw); }
.bg-dark1 { background:#231910; padding:80px max(40px,6vw); }
.bg-dark2 { background:#150f08; padding:80px max(40px,6vw); }
.bg-gallery { background:#F2EBE0; padding:72px max(40px,6vw); }
.bg-join { background:#fafaf8; padding:80px max(40px,6vw); }
.bg-audio { background:#1a0e06; padding:80px max(40px,6vw); text-align:center; }
.bg-clips { background:#F2EBE0; padding:80px max(40px,6vw); }
.bg-dark1 p, .bg-dark1 h2, .bg-dark2 p, .bg-dark2 h2, .bg-audio p, .bg-audio h2 { color:#f0e4c4; }

/* Story / act copy */
.act-label { font-family:'DM Sans', sans-serif; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#705848; margin-bottom:10px; }
.story-p, .inner-p { font-family:'DM Sans', sans-serif; font-size:16px; font-weight:300; line-height:1.9; color:#3d2c1e; margin-bottom:24px; }

.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }

/* Stats grid */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,168,76,.18); margin-top:52px; }
.stat-card { background:#231910 !important; padding:44px 28px 40px !important; text-align:center; }
.stat-num { font-family:'Cormorant Garamond', serif; font-size:clamp(44px,5.5vw,72px); font-weight:700; color:#c9a84c; line-height:1; margin-bottom:18px; letter-spacing:-2px; }
.stat-label { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#f0e4c4; margin-bottom:8px; }
.stat-desc { font-family:'DM Sans', sans-serif; font-size:12px; font-weight:300; color:rgba(240,228,196,.55); line-height:1.65; }
.stat-source { font-family:'DM Sans', sans-serif; font-size:9px; color:rgba(240,228,196,.32); margin-top:10px; letter-spacing:.5px; }

.stat-rule { width:28px; height:1.5px; background:#c9a84c; margin:0 auto 16px; opacity:.7; }

/* Story carousel */
.carousel-wrap { position:relative; height:500px; overflow:hidden; background:#2a1a0e; border-radius:4px; }
.carousel-slide { position:absolute; inset:0; transition:opacity .5s ease; opacity:0; }
.carousel-slide.active { opacity:1; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel-slide.carousel-empty { opacity:1; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; }
.carousel-slide.carousel-empty p { font-family:'DM Sans', sans-serif; font-size:13px; color:rgba(240,228,196,.5); line-height:1.6; }
.carousel-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(26,14,6,.6) 0%,transparent 40%); pointer-events:none; }
.carousel-ctrl { position:absolute; bottom:0; left:0; right:0; padding:16px; display:flex; align-items:center; justify-content:space-between; }
.cbtn { width:36px; height:36px; background:rgba(255,255,255,.9); border:none; color:#1a1108; font-size:17px; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cbtn:hover { background:#fff; }
.cctr { font-family:'DM Sans', sans-serif; font-size:12px; color:rgba(255,255,255,.7); }
.carousel-cap { font-family:'DM Sans', sans-serif; font-size:11px; color:rgba(112,88,72,.6); margin-top:10px; text-align:center; font-style:italic; }

/* Gallery preview (homepage) */
.gallery-hdr { max-width:1160px; margin:0 auto 36px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.gallery-hdr h3 { font-family:'Cormorant Garamond', serif; font-size:clamp(20px,2.5vw,28px); font-weight:400; font-style:italic; color:#1a1108; }
.gallery-row { display:flex; gap:10px; max-width:1160px; margin:0 auto; overflow-x:auto; }
.gthumb { flex-shrink:0; width:360px; height:300px; position:relative; overflow:hidden; border-radius:4px; }
.gthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gthumb-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(20,0,30,.6) 0%,transparent 50%); pointer-events:none; }
.gcoming { flex-shrink:0; width:260px; height:300px; border:1.5px dashed rgba(26,14,6,.15); border-radius:4px; background:rgba(26,14,6,.04); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; text-align:center; }
.gcoming span { font-size:22px; color:#BF5C2C; opacity:.4; }
.gcoming-label { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#BF5C2C; opacity:.5; }
.gcoming-sub { font-family:'Cormorant Garamond', serif; font-size:16px; font-style:italic; color:#1a1108; opacity:.25; }
.btn-view { background:none; border:none; font-family:'DM Sans', sans-serif; font-size:13px; font-weight:600; color:#BF5C2C; cursor:pointer; padding:0; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }

/* Testimonials */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.test-card { background:rgba(255,255,255,.04); border:1px solid rgba(201,168,76,.12); border-radius:6px; padding:32px 28px; display:flex; flex-direction:column; gap:16px; }
.test-stars { color:#c9a84c; font-size:13px; letter-spacing:2px; }
.test-q { font-family:'Cormorant Garamond', serif; font-size:15px; font-style:italic; color:rgba(240,228,196,.85); line-height:1.7; flex:1; }
.test-author { display:flex; align-items:center; gap:12px; }
.test-av { width:38px; height:38px; border-radius:50%; background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.25); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond', serif; font-size:14px; color:#c9a84c; flex-shrink:0; text-transform:uppercase; }
.test-name { font-family:'DM Sans', sans-serif; font-size:13px; font-weight:600; color:rgba(240,228,196,.7); }
.test-role { font-family:'DM Sans', sans-serif; font-size:11px; color:rgba(201,168,76,.5); }

/* Join cards */
.join-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1160px; margin:0 auto; }
.join-card { background:#fff; border-radius:6px; padding:40px 36px; box-shadow:0 2px 16px rgba(26,17,8,.06); display:flex; flex-direction:column; gap:2px; }
.join-eyebrow { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#BF5C2C; margin-bottom:8px; }
.join-card-t { font-family:'Cormorant Garamond', serif; font-size:clamp(20px,2.5vw,30px); font-weight:400; font-style:italic; color:#1a1108; line-height:1.25; margin-bottom:10px; }
.join-card-b { font-family:'DM Sans', sans-serif; font-size:15px; color:#705848; line-height:1.75; margin-bottom:14px; }

/* Audio player */
.audio-inner { max-width:560px; margin:0 auto; }
.audio-card { background:rgba(255,255,255,.06); border:1px solid rgba(201,168,76,.18); border-radius:8px; padding:36px 40px; margin:40px auto 0; }
.audio-card p { font-family:'DM Sans', sans-serif; font-size:13px; color:rgba(240,228,196,.6); line-height:1.6; }
.audio-card code { font-size:11px; background:rgba(255,255,255,.08); padding:2px 5px; border-radius:3px; }
.audio-pbtn { width:60px; height:60px; border-radius:50%; background:#BF5C2C; border:none; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; box-shadow:0 4px 18px rgba(191,92,44,.3); margin:0 auto 20px; cursor:pointer; }
.audio-pbtn:hover { background:#A84E25; }
.audio-track { width:100%; display:flex; flex-direction:column; gap:8px; }
.audio-prog { width:100%; height:4px; background:rgba(255,255,255,.1); border-radius:99px; position:relative; cursor:pointer; }
.audio-prog-fill { position:absolute; left:0; top:0; height:100%; width:0%; background:#c9a84c; border-radius:99px; }
.audio-times { display:flex; justify-content:space-between; }
.audio-times span { font-size:11px; color:#c9a84c; font-family:'DM Sans', sans-serif; opacity:.7; }
.audio-note { font-family:'DM Sans', sans-serif; font-size:13px; color:#c9a84c; opacity:.55; margin-top:20px; font-style:italic; }

/* Video clips grid */
.clips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
.clip-ph { aspect-ratio:16/9; background:#e2d8cc; border-radius:6px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.clip-circle { width:44px; height:44px; border:2px solid #BF5C2C; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:.4; font-size:14px; color:#BF5C2C; }

/* Footer */
.site-footer { background:#150f08; padding:56px max(40px,6vw) 32px; border-top:1px solid rgba(201,168,76,.1); }
.footer-inner { max-width:1160px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:56px; margin-bottom:40px; }
.footer-brand-t { font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:700; color:#BF5C2C; margin-bottom:10px; }
.footer-brand-s { font-family:'DM Sans', sans-serif; font-size:12px; color:rgba(240,228,196,.4); line-height:1.7; margin-bottom:20px; max-width:260px; }
.footer-col-t { font-family:'DM Sans', sans-serif; font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(240,228,196,.3); margin-bottom:16px; }
.footer-nav ul { list-style:none; }
.footer-nav a { display:block; font-family:'DM Sans', sans-serif; font-size:13px; font-weight:300; color:rgba(240,228,196,.55); padding:4px 0; transition:color .2s; }
.footer-nav a:hover { color:rgba(240,228,196,.9); }
.footer-rule { height:1px; background:rgba(255,255,255,.07); margin-bottom:18px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-fine { font-family:'DM Sans', sans-serif; font-size:11px; color:rgba(255,255,255,.2); margin:0; }

/* Inner page hero (Story / Gallery / About / Get Involved) */
.inner-hero { padding:80px max(40px,6vw) 64px; background:#fafaf8; border-bottom:1px solid #e8e0d4; }
.inner-hero h1 { font-family:'Cormorant Garamond', serif; font-size:clamp(32px,5vw,56px); font-weight:400; font-style:italic; color:#1a1108; line-height:1.1; margin:0; }
.inner-content { padding:64px max(40px,6vw); background:#fafaf8; max-width:800px; margin:0 auto; }

/* ==========================================================================
   Mobile nav (hamburger)
   ========================================================================== */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer;
  padding:0; z-index:250;
}
.nav-toggle span { display:block; width:22px; height:2px; background:#1a1108; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity:0; }
.nav-toggle.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display:none; position:fixed; inset:0; top:68px; background:rgba(20,10,4,.45);
  z-index:190; opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.nav-overlay.is-active { opacity:1; visibility:visible; }

@media (max-width:880px) {
  .nav-toggle { display:flex; }

  .primary-nav {
    position:fixed; top:68px; right:0; bottom:0; width:min(320px,86vw);
    background:#fff; z-index:220; padding:18px 28px 32px; overflow-y:auto;
    box-shadow:-8px 0 32px rgba(26,17,8,.12);
    transform:translateX(100%); transition:transform .3s ease;
  }
  .primary-nav.is-active { transform:translateX(0); }

  .primary-nav ul { flex-direction:column; align-items:flex-start; gap:0; width:100%; }
  .primary-nav li { width:100%; }
  .primary-nav a { width:100%; padding:14px 0; border-bottom:1px solid #ece4d8; font-size:15px; }
  .primary-nav a:hover, .primary-nav .current-menu-item > a { border-bottom-color:#BF5C2C; }

  /* Submenu ("Get Involved" > Investors/Talent) shown inline, not on hover */
  .primary-nav ul ul {
    display:flex; position:static; flex-direction:column; box-shadow:none;
    border:none; padding:0 0 8px 16px; min-width:0;
  }
  .primary-nav ul ul a { padding:10px 0; font-size:14px; color:#705848; }
  .primary-nav .menu-item-has-children > a::after { display:none; }

  .nav-overlay { display:block; }
}

@media (max-width:768px) {
  .story-grid, .stats-grid, .test-grid, .join-grid, .clips-grid, .footer-grid {
    grid-template-columns:1fr;
  }
}