/* Site rules that are not from live (each one is a change David approved). Loaded after every page's lifted CSS.
   Colors come from src/styles/boom-colors.css (inlined by Layout.astro); scripts/check-colors.mjs scans this file. */

/* Body-photo border switch (skill stage 3, David 2026-10-20): ONE token for every body photo, default none. To turn
   borders on, set the token (e.g. 3px solid var(--black)), never a per-widget border. Body = the page content outside
   [data-region="hero"]; the builder pages have no <main>, so their content wrappers count as the body too. Header and
   footer logos sit outside these wrappers and are never touched. A new body photo component joins the :is() list. */
:root { --body-img-border: none; }
:is(main, [data-boom-type="wp-page"], [data-boom-type="wp-post"], [data-boom-type="single-post"]) :is(.boom-widget-image img, .boom-hh-pair img, .boom-post__thumbnail img, article.post img):not([data-region="hero"] *) { border: var(--body-img-border) !important; }

/* David 2026-10-21: hero intro = one defining line + a short fact list (was one run-on paragraph). */
.boom-hero-facts { list-style: none; margin: 0.75em 0 0; padding: 0; }
/* David 2026-10-23: wrap the facts at 0.8x the text column (desktop/tablet; phones keep full width). */
@media (min-width: 768px) { .boom-hero-facts { max-width: 80%; } }
/* David 2026-10-23: hero intro breaks after "strategist," on wide screens; phones wrap naturally. */
@media (max-width: 767px) { .boom-br-wide { display: none; } }
.boom-hero-facts li { padding-left: 1em; text-indent: -1em; margin-bottom: 0.35em; }
.boom-hero-facts li::before { content: "\2022"; display: inline-block; width: 1em; text-indent: 0; }

/* David 2026-10-21: Harmony & Healing section passes WCAG AA, and the taupe is gone ("not wild about the background
   color"). Cream #F5EFE6 in H&H's light brand family, same ghost "Harmony" word (harmony-1.png recolored), no gray tint.
   #222 text on it is 15:1 (white on the old taupe was 3.26:1). The solid color sits under the image. */
html .boom-9 .boom-element.boom-element-813937f:not(.boom-motion-effects-element-type-background) { background-color: var(--cream); background-image: url("/images/home/harmony-bg-cream.png"); }
html .boom-9 .boom-element.boom-element-813937f > .boom-background-overlay { opacity: 0; }
.boom-9 .boom-element-813937f :is(p, strong, .cretive-button-text, .cretive-button-text *) { color: var(--ink); }

/* David 2026-10-21: the H&H collage is replaced by our best adult-audience and child-audience photos, side by side. */
.boom-hh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.boom-hh-pair img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 8px 22px var(--photo-shadow); }
@media (max-width: 767px) { .boom-hh-pair { gap: 10px; margin-top: 4px; } }
/* David 2026-10-21: bigger pair on desktop. Use the whole photo column (drop its inset) and square crops, still side by side. */
@media (min-width: 1025px) {
  html body .boom-9 .boom-element.boom-element-fd0e9a7 > .boom-widget-wrap.boom-element-populated { padding-left: 0; padding-right: 0; }
  html .boom-9 .boom-element-fd0e9a7 .boom-hh-pair img { aspect-ratio: 1 / 1; }
}

/* David 2026-10-21: once the page scrolls, the see-through desktop header gets the phone header's solid black, so its
   white logo and menu stay readable over the cream H&H section (they vanished there). Over the hero it stays clear. */
html .boom-element.boom-element-21b9822.boom-sticky { transition: background-color 0.3s; }
html.boom-scrolled .boom-element.boom-element-21b9822.boom-sticky { background-color: var(--black); }
/* Menu stays on one line (at 1280px "Contact" wrapped, making the header 142px), and section content clears it. */
html .boom-element-21b9822 .boom-nav-menu { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 768px) {
  html .boom-9 .boom-element.scroll_section:not([data-region="hero"]) { padding-top: 110px; }
}

/* David 2026-10-21: no green arrows. Each "Learn More" / "Send an email" arrow matches its link text:
   white on the dark sections, #222 on the cream H&H section. */
html .boom-9 .boom-element.boom-widget-eael-creative-button .eael-creative-button i.fa-arrow-right { color: var(--white); }
html .boom-9 .boom-element-813937f .boom-element.boom-widget-eael-creative-button .eael-creative-button i.fa-arrow-right { color: var(--ink); }

/* David 2026-10-21: every home screen is one full viewport on every device, with a gentle snap between them.
   Desktop already has both (the builder's full height at 768px+, live's Scrollify script in home/end.html). On phones the
   sections fill the screen under the 55px header bar and native CSS snap settles on the nearest one. ponytail:
   "proximity" snap, never "mandatory", so a section taller than the screen still scrolls normally. */
@media (max-width: 767px) {
  html:has(.scroll_section) { scroll-snap-type: y proximity; scroll-padding-top: 55px; }
  .scroll_section.boom-section-height-full { min-height: calc(100svh - 55px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }
  html .boom-9 .boom-element.scroll_section { padding-top: 24px; padding-bottom: 24px; } /* html prefix: beats post-9.css, which can load after this file */
  /* Shrink the pictures so Harmony and Pro Tribute Bands fit one 609px iPhone screen. Width only, height follows:
     setting both squashed them (2026-10-21, live's width rule won over ours). */
  /* H&H logo size (min(170px, 21svh)) is set in src/html/home/head.html, where live's own !important rule lives;
     tighter gaps pay for the bigger logo. */
  html .boom-9 .boom-element-813937f .boom-widget:not(:last-child) { margin-bottom: 12px; }
  /* David 2026-10-21 "weirdly tiny": 130px -> up to 220px; the PTB section may now run a little past one screen. */
  html .boom-9 .boom-element.boom-element-3afa5f4 img { width: min(220px, 33svh); height: auto; }
  /* David 2026-10-21: phone iMac was 148px; match the PTB photo. */
  html .boom-9 .boom-element.boom-element-d5a4244 img { width: min(220px, 33svh); height: auto; }
}
/* David 2026-10-21: PTB photo filled 384 of its 600px column on desktop (live's 30vw). Fill the column, capped by
   screen height so the section still fits one screen. */
@media (min-width: 768px) {
  html .boom-9 .boom-element.boom-element-3afa5f4 img { width: min(100%, 68svh); height: auto; }
}

/* /band/ (new page, 2026-10-21): dark like the home hero so the white header reads; content to come. */
.boom-band { background: var(--band-bg); color: var(--white); min-height: 100svh; }
.boom-band-intro { max-width: 960px; margin: 0 auto; padding: 160px 16px 80px; }
.boom-band h1 { color: var(--white); margin: 0; }
.boom-band-video { position: relative; aspect-ratio: 16 / 9; margin-top: 32px; }
.boom-band-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Home hero (David 2026-10-22): live's flat 62% black overlay becomes a left-to-right fade, dark under the text,
   light over David's photo on the right. Phone: the text spans the full width, so the fade stays darker throughout. */
html body .boom-9 .boom-element.boom-element-f29b46d > .boom-background-overlay {
  opacity: 1;
  background: linear-gradient(90deg, var(--hero-fade-text) 0%, var(--hero-fade-text) 44%, var(--hero-fade-mid) 74%, var(--hero-fade-photo) 100%);
}
@media (max-width: 767px) {
  html body .boom-9 .boom-element.boom-element-f29b46d > .boom-background-overlay {
    background: linear-gradient(90deg, var(--hero-fade-text) 0%, var(--hero-fade-text) 60%, var(--hero-fade-phone-end) 100%);
  }
}
/* Top menu links pure white (David 2026-10-22: the kit's gray text color read "weird gray"); hover/active keep the accent. */
html body .boom-nav-menu--main .boom-item:not(:hover):not(:focus):not(.boom-item-active) { color: var(--white); fill: var(--white); }
/* Hero text scales with screen height on desktop so a 1280x720 laptop fits it under the logo (David 2026-10-22).
   Full size (50px / 30px) is reached at ~1080px tall. */
@media (min-width: 1025px) {
  html body .boom-9 .boom-element-dc2027c .boom-heading-title { font-size: min(50px, 4.6svh); }
  html body .boom-9 .boom-element-dc2027c > .boom-widget-container { padding: min(20px, 1.2svh) 0; }
  html body .boom-9 .boom-element.boom-element-1575600 { font-size: min(30px, 2.8svh); line-height: 1.45; }
}

/* Privacy + cookie pages (stage 4): dark header band behind the white menu, then plain reading column. */
.boom-legal-page { background: var(--white); }
.boom-legal { max-width: 760px; margin: 0 auto; padding: 160px 16px 80px; color: var(--ink); font-size: 18px; line-height: 1.6; }
html body.boom-legal-page .boom-location-header,
body.boom-legal-page .boom-1162 .boom-element.boom-element-21b9822:not(.boom-motion-effects-element-type-background) { background-color: var(--black); }
.boom-legal h1 { color: var(--ink); margin: 0 0 8px; }
.boom-legal h2 { color: var(--ink); margin: 40px 0 8px; font-size: 1.4em; }
.boom-legal a { color: var(--ink); text-decoration: underline; }
.boom-legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.boom-legal th, .boom-legal td { text-align: left; padding: 8px; border-bottom: 1px solid var(--ink); vertical-align: top; }
/* Live's theme footer is display:none on every page, so the legal links get their own small bar (Footer.astro). */
.boom-legal-bar { background: var(--band-bg); color: var(--white); text-align: center; padding: 16px; font-size: 14px; }
.boom-legal-bar a { color: var(--white); text-decoration: underline; display: inline-block; padding: 8px 4px; }

/* Cookie banner (public/consent.js). */
#cc { position: fixed; inset: auto 0 0 0; z-index: 10000; background: var(--band-bg); color: var(--white); font-size: 16px; line-height: 1.5; }
#cc .cc-inner { max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#cc p { margin: 0; flex: 1 1 420px; }
#cc a { color: var(--white); text-decoration: underline; }
#cc .cc-status { flex-basis: 100%; }
#cc .cc-buttons { display: flex; gap: 12px; }
#cc button { min-width: 120px; min-height: 44px; padding: 8px 20px; background: var(--white); color: var(--band-bg); border: 0; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; }
#cc button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }