/* =========================================================================
   baby-songs.html — page-specific styles
   Load AFTER css/site.css (the overrides below rely on source order).
   ========================================================================= */

body{overflow-x:hidden;}

/* site.css turns every .fa-solid/.fas into a 1em mask icon, which only works for
   the four icons it defines. These icons are drawn by the Font Awesome CDN on this
   page, so reset them back to normal FA glyphs (otherwise they render as solid squares). */
.fa-moon,.fa-play,.fa-pause,.fa-rotate-left,.fa-rotate-right,.fa-volume-high{
  width:auto;
  height:auto;
  background-color:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  vertical-align:baseline;
  flex:initial;
}

/* Keep this page's service-card look: fixed gold hover glow, no pulse ring on the CTA
   (site.css tints the hover by each card's --m1 and adds a pulsing ::before). */
.card-story:hover{
  border-color:rgba(227,161,61,.5);
  box-shadow:0 20px 50px -25px rgba(227,161,61,.35);
}
.card-cta::before{content:none;}

/* HERO */
.wedding-hero{
  position:relative;
  padding:100px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,158,181,.12) 0%,transparent 45%),
    radial-gradient(circle at 85% 75%,rgba(227,161,61,.14) 0%,transparent 50%),
    var(--bg);
}

.wedding-hero-container{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:60px;
  align-items:center;
}

.wedding-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:300 13px/1.4 var(--display);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:22px;
  padding:6px 14px;
  border-radius:99px;
  background:rgba(227,161,61,.08);
  border:1px solid rgba(227,161,61,.2);
}

.wedding-hero h1{
  font-size:clamp(40px,4.8vw,62px);
  line-height:1.08;
  letter-spacing:-1px;
  margin-bottom:22px;
}

.wedding-hero h1 span{
  display:block;
  font-style:italic;
  font-weight:300;
  color:var(--gold-soft);
}

.wedding-hero-lead{
  font-size:17.5px;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:34px;
  max-width:580px;
}

.wedding-hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}

.wedding-hero-card{
  position:relative;
  background:linear-gradient(145deg,rgba(29,23,15,.9),rgba(23,18,12,.95));
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:36px 32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}

.wedding-hero-card::before{
  content:'“';
  position:absolute;
  top:-15px;
  left:24px;
  font-family:var(--display);
  font-size:80px;
  color:var(--gold);
  opacity:.2;
  line-height:1;
  pointer-events:none;
}

.wedding-hero-quote{
  font:italic 300 17px/1.65 var(--display);
  color:var(--cream);
  margin-bottom:24px;
}

.wedding-hero-meta{
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:20px;
}

.wedding-hero-meta-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--rust));
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:600;
  color:#1B1206;
  font-size:18px;
}

.wedding-hero-meta-text strong{
  display:block;
  font-size:14.5px;
  color:var(--cream);
}

.wedding-hero-meta-text span{
  font-size:12.5px;
  color:var(--muted);
}

@media (max-width:980px){
  .wedding-hero-container{
    grid-template-columns:1fr;
    gap:40px;
  }
}

/* FEATURED SONG — VAULT AUDIO PLAYER */
.custom-audio-vault-wrap{
  position:relative;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--m1,227,161,61),.12),
      transparent 70%
    ),
    var(--bg-panel-2);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:40px;
  box-shadow:0 25px 60px -20px rgba(0,0,0,.6);
  overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease;
}

.custom-audio-vault-wrap:hover{
  border-color:rgba(var(--m1,227,161,61),.45);
  box-shadow:0 30px 70px -15px rgba(var(--m1,227,161,61),.25);
}

.vault-player-content{
  position:relative;
  z-index:1;
}

.vault-player-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:24px;
}

.vault-track-title{
  font-family:var(--display);
  font-size:28px;
  color:var(--cream);
  margin-bottom:6px;
}

.vault-track-subtitle{
  font-size:14.5px;
  color:var(--muted);
}

.vault-player-controls{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:600px;
  margin:0 auto;
}

.vault-progress-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.vault-time{
  font:12px ui-monospace,monospace;
  color:var(--muted);
  min-width:40px;
  text-align:center;
}

.vault-seek-bar{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(243,236,222,.15);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}

.vault-seek-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgb(var(--m1,227,161,61));
  box-shadow:0 0 10px rgba(var(--m1,227,161,61),.8);
  transition:transform .2s ease;
}

.vault-seek-bar::-webkit-slider-thumb:hover{
  transform:scale(1.3);
}

.vault-main-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:6px;
}

.vault-btn-play{
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  background:linear-gradient(
    135deg,
    rgb(var(--m1,227,161,61)),
    rgb(var(--m2,192,91,59))
  );
  color:#1B1206;
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 0 20px rgba(var(--m1,227,161,61),.5);
  transition:transform .2s ease,box-shadow .2s ease;
}

.vault-btn-play:hover{
  transform:scale(1.08);
  box-shadow:0 0 30px rgba(var(--m1,227,161,61),.8);
}

.vault-btn-secondary{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--cream);
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:14px;
  transition:all .2s ease;
}

.vault-btn-secondary:hover{
  border-color:rgb(var(--m1,227,161,61));
  color:rgb(var(--m1,227,161,61));
}

.vault-volume-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}

.vault-volume-bar{
  width:100px;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:rgba(243,236,222,.15);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}

.vault-volume-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cream);
}

@media (max-width:768px){
  .wrap{
    padding:0 22px;
  }

  .custom-audio-vault-wrap{
    padding:28px 20px;
  }

  .vault-track-title{
    font-size:24px;
  }

  .wedding-hero{
    padding:75px 0 85px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}

/* TESTIMONIALS (moved from the inline <style> inside <main>) */
#testimonials .grid{
  grid-template-columns:repeat(2,1fr);
  max-width:760px;
  margin:0 auto;
}
@media (max-width:768px){
  #testimonials .grid{
    grid-template-columns:1fr;
  }
}