/*
Theme Name:  Kadence Child — Friday Musicale
Theme URI:   https://fridaymusicale.com
Description: Friday Musicale brand child theme. Locked identity system at full volume — Persimmon/Honey/Cream/Ink, Fraunces + Inter, self-hosted. Tokens are mapped into Kadence's global palette so every block inherits the brand.
Author:      Friday Musicale
Template:    kadence
Version:     1.5.0
License:     GNU General Public License v2 or later
Text Domain: kadence-child
*/

/* ============================================================
   1. Brand tokens  (Handbook §3 — locked palette)
   ============================================================ */
:root {
  --fm-persimmon: #B8492A;
  --fm-honey:     #E6A23C;
  --fm-cream:     #FBF4E9;
  --fm-ink:       #2B211C;

  /* Derived tints/shades for surfaces, borders, hovers */
  --fm-persimmon-dark: #97381F;
  --fm-honey-dark:     #C9832A;
  --fm-cream-deep:     #F3E7D2;
  --fm-ink-soft:       #4A3B32;
  --fm-line:           #E4D4BC;
}

/* ============================================================
   2. Self-hosted fonts  (Handbook §3 — no CDN, woff2 in /fonts/)
   ============================================================ */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   3. Map brand tokens into Kadence's global palette
   Kadence renders every block through --global-palette1..9.
   Overriding them here flows the brand through the whole theme.
   (The Customizer palette is set to match in the setup script.)
   ============================================================ */
:root {
  --global-palette1: var(--fm-persimmon);   /* primary accent  */
  --global-palette2: var(--fm-honey);       /* secondary accent */
  --global-palette3: var(--fm-ink);         /* headings / darkest */
  --global-palette4: var(--fm-ink-soft);    /* body strong */
  --global-palette5: #6E5B4E;               /* muted text */
  --global-palette6: var(--fm-line);        /* borders / hairlines */
  --global-palette7: var(--fm-cream-deep);  /* subtle fill */
  --global-palette8: var(--fm-cream);       /* page background */
  --global-palette9: #FFFFFF;               /* pure white surfaces */

  /* Kadence font-family variables */
  --global-heading-font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  --global-body-font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ============================================================
   4. Typography
   ============================================================ */
body {
  font-family: var(--global-body-font-family);
  color: var(--fm-ink);
  background-color: var(--fm-cream);
}
h1, h2, h3, h4, h5, h6,
.site-title, .entry-title,
.wp-block-heading {
  font-family: var(--global-heading-font-family);
  color: var(--fm-ink);
  letter-spacing: -0.01em;
}
h1, .entry-title { font-weight: 600; line-height: 1.05; }
h2 { font-weight: 600; line-height: 1.12; }

a { color: var(--fm-persimmon); }
a:hover, a:focus { color: var(--fm-honey); }

/* ============================================================
   5. Brand utility classes for page copy blocks
   (referenced by the drafted page content)
   ============================================================ */
.fm-hero {
  background-color: var(--fm-persimmon);
  color: var(--fm-cream);
  padding: clamp(3rem, 8vw, 7rem) 0;
}
.fm-hero h1, .fm-hero h2 { color: var(--fm-cream); }
.fm-hero .fm-kicker { color: var(--fm-honey); }

.fm-hero-display {
  font-family: var(--global-heading-font-family);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.fm-kicker {
  font-family: var(--global-body-font-family);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fm-persimmon);
}

.fm-lede {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--fm-ink-soft);
}

.fm-section-cream-deep { background-color: var(--fm-cream-deep); }
.fm-section-ink { background-color: var(--fm-ink); color: var(--fm-cream); }
.fm-section-ink h1, .fm-section-ink h2, .fm-section-ink h3 { color: var(--fm-cream); }

.fm-btn,
.wp-block-button.is-style-fm-primary .wp-block-button__link {
  background-color: var(--fm-persimmon);
  color: var(--fm-cream);
  border-radius: 2px;
  font-weight: 600;
}
.fm-btn:hover,
.wp-block-button.is-style-fm-primary .wp-block-button__link:hover {
  background-color: var(--fm-persimmon-dark);
  color: var(--fm-cream);
}

.fm-masthead-line {
  font-family: var(--global-heading-font-family);
  font-style: italic;
  color: var(--fm-honey);
}

/* Draft-status banner helper (visible only while building locally) */
.fm-draft-flag {
  display: inline-block;
  font-family: var(--global-body-font-family);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--fm-honey);
  color: var(--fm-ink);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

/* ============================================================
   v1.2 — Depth, texture & spacing polish
   ============================================================ */
:root{
  --fm-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Breathing room — text never hugs a corner */
.wp-block-group.fm-section-cream-deep,
.wp-block-group.fm-section-ink,
.wp-block-group.fm-hero{
  padding: clamp(2.5rem,5.5vw,4.5rem) clamp(1.6rem,4vw,3.25rem);
  border-radius: 8px;
  margin-block: clamp(1rem,2.5vw,1.75rem);
}
.wp-block-cover .wp-block-cover__inner-container{
  padding: 0 clamp(1.6rem,4vw,3.25rem) clamp(1.25rem,3vw,2.25rem);
}

/* Cream panels: warm gradient + faint grain + hairline frame + soft lift */
.fm-section-cream-deep{
  background-color:#F1E3C9;
  background-image: var(--fm-grain), linear-gradient(158deg,#FAF0DE 0%,#F2E4CB 58%,#EBDCBE 100%);
  background-size:180px 180px, cover;
  border:1px solid rgba(184,73,42,.12);
  box-shadow: 0 1px 2px rgba(43,33,28,.05), inset 0 1px 0 rgba(255,255,255,.55);
}
.fm-section-cream-deep h2,.fm-section-cream-deep h3{ color:#38271d; }
.fm-section-cream-deep p{ color:#4a3b32; }

/* Ink panels: deep warm gradient + grain + warm glow edge */
.fm-section-ink{
  background-color:#2B211C;
  background-image: var(--fm-grain), linear-gradient(158deg,#3b2c1e 0%,#2B211C 55%,#221913 100%);
  background-size:180px 180px, cover;
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 22px rgba(43,33,28,.14), inset 0 1px 0 rgba(230,162,60,.12);
}

/* Persimmon fields: gradient slab, not a flat block */
.fm-hero{
  background-color:#B8492A;
  background-image: var(--fm-grain), linear-gradient(152deg,#C5522F 0%,#B8492A 55%,#9C3A21 100%);
  background-size:180px 180px, cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* FAQ accordions: soft cards instead of bare lines */
.wp-block-details{
  background: rgba(255,255,255,.45);
  border:1px solid var(--fm-line);
  border-radius:6px;
  padding:.55rem 1.1rem;
  margin-bottom:.6rem;
}
.wp-block-details summary{ font-family:var(--global-heading-font-family); font-weight:600; color:var(--fm-ink); cursor:pointer; }

/* Tables: gentle framing */
.wp-block-table table{ border-radius:6px; overflow:hidden; box-shadow:0 1px 2px rgba(43,33,28,.06); }
.wp-block-table figcaption{ color:#6e5b4e; }

/* ===== Home-only music toggle ===== */
.fm-music{position:fixed;right:1.1rem;bottom:1.1rem;z-index:999}
.fm-music-btn{display:inline-flex;align-items:center;gap:.5rem;background:rgba(43,33,28,.92);color:var(--fm-cream);border:1px solid rgba(230,162,60,.55);border-radius:999px;padding:.6rem 1rem;font-family:var(--global-body-font-family);font-size:.8rem;font-weight:600;letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(43,33,28,.28);transition:background .15s}
.fm-music-btn:hover{background:var(--fm-persimmon)}
.fm-music-ico{font-size:1rem;line-height:1}
.fm-music[data-state="playing"] .fm-music-ico{animation:fm-pulse 1.6s ease-in-out infinite}
@keyframes fm-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ============================================================
   v1.4 — Brand-sheet alignment
   Ink is body-text (not a big fill). Warm direction = Persimmon fills,
   Honey accents/actions, committed cream surfaces (no wishy-washy white).
   ============================================================ */

/* Former heavy dark "ink" bands → warm Persimmon (brand's big-fill colour) */
.fm-section-ink{
  background-color:#B8492A;
  background-image: var(--fm-grain), linear-gradient(152deg,#C5522F 0%,#B8492A 55%,#A23E24 100%);
  border:1px solid rgba(120,45,25,.30);
  box-shadow:0 6px 20px rgba(158,59,34,.16), inset 0 1px 0 rgba(255,255,255,.10);
}
.fm-section-ink h1,.fm-section-ink h2,.fm-section-ink h3,.fm-section-ink p{ color:var(--fm-cream); }
.fm-section-ink .fm-kicker{ color:var(--fm-honey); }
.fm-section-ink a:not(.wp-block-button__link){ color:var(--fm-honey); }
/* Buttons on a Persimmon band use the Honey action colour (brand "RESERVE") */
.fm-section-ink .wp-block-button.is-style-fm-primary .wp-block-button__link,
.fm-section-ink .fm-btn{ background:var(--fm-honey); color:var(--fm-ink); }
.fm-section-ink .wp-block-button.is-style-fm-primary .wp-block-button__link:hover,
.fm-section-ink .fm-btn:hover{ background:var(--fm-honey-dark); color:var(--fm-ink); }

/* Cream panels commit harder against the page (less noncommittal) */
.fm-section-cream-deep{
  background-color:#EFE0C4;
  background-image: var(--fm-grain), linear-gradient(158deg,#F7ECD7 0%,#EFE0C4 60%,#E7D5B4 100%);
  border:1px solid rgba(184,73,42,.20);
  box-shadow:0 2px 10px rgba(43,33,28,.06), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Light cards read decisive: defined cream + Honey/Persimmon edge (never faint white) */
.wp-block-details{ background:#FCF6EC; border:1px solid var(--fm-line); border-left:3px solid var(--fm-honey); }
.wp-block-details[open]{ border-left-color:var(--fm-persimmon); }

/* Tables: Persimmon header + framed body (brand-forward, committed) */
.wp-block-table table{ border:1px solid var(--fm-line); }
.wp-block-table thead th{ background:var(--fm-persimmon); color:var(--fm-cream); border-color:var(--fm-persimmon-dark); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:rgba(184,73,42,.05); }

/* Section headings get a short Honey accent rule (brand highlight) */
.fm-section-cream-deep > .wp-block-heading:first-child::after{
  content:""; display:block; width:2.25rem; height:3px; margin-top:.6rem;
  background:var(--fm-honey); border-radius:2px;
}

/* ===== v1.5 — constrain the header logo (lyre mark) ===== */
.custom-logo,
.site-branding img.custom-logo,
.site-header-item .site-branding img,
.header-navigation .site-branding img,
.site-logo img{
  max-height:46px !important;
  width:auto !important;
  height:auto !important;
}
@media(max-width:768px){
  .custom-logo,.site-branding img.custom-logo,.site-logo img{ max-height:40px !important; }
}