/*
Theme Name: Kadence Child (Peak Spine)
Theme URI: https://peakspinesports.com
Description: Child theme for Peak Spine & Sports Medicine — brand design system, custom header behavior, and footer. Built on Kadence.
Author: Onspire
Template: kadence
Version: 1.0.0
*/

:root{
  --peak-plum:#11062b;        /* primary dark */
  --peak-plum-90:#1b1038;
  --peak-teal:#2b5672;        /* secondary */
  --peak-gold:#cc8d10;        /* accent */
  --peak-gold-light:#dec170;  /* light accent */
  --peak-red:#e84a43;         /* CTA / alert accent */
  --peak-gray:#8f8f8f;        /* muted text */
  --peak-ink:#181818;         /* body text */
  --peak-cream:#fef6ed;       /* warm tint background */
  --peak-white:#ffffff;
}

/* Typography */
body{ font-family:'Raleway',Montserrat,sans-serif; color:var(--peak-ink); }
h1,h2,h3,h4,h5,h6,.peak-display{ font-family:'Questrial',Montserrat,sans-serif; letter-spacing:.01em; }

/* Brand utility classes used by the page blocks */
.peak-eyebrow{ font-family:'Raleway',sans-serif; text-transform:uppercase; letter-spacing:.22em; font-weight:600; color:var(--peak-gold); }
.has-peak-plum-color{ color:var(--peak-plum)!important; }
.has-peak-plum-background-color{ background-color:var(--peak-plum)!important; }
.has-peak-teal-color{ color:var(--peak-teal)!important; }
.has-peak-teal-background-color{ background-color:var(--peak-teal)!important; }
.has-peak-gold-color{ color:var(--peak-gold)!important; }
.has-peak-gold-background-color{ background-color:var(--peak-gold)!important; }
.has-peak-cream-background-color{ background-color:var(--peak-cream)!important; }

/* Gold divider rule used under section headings */
.peak-rule{ width:64px; height:3px; background:var(--peak-gold); border:0; margin:18px 0; }
.peak-rule.is-centered{ margin-left:auto; margin-right:auto; }

/* Top utility bar (phone + email) — sticky, stacked above the nav */
.peak-topbar{ position:sticky; top:0; z-index:1002; height:38px; display:flex; align-items:center; background:var(--peak-plum); color:#fff; font-size:.88rem; letter-spacing:.02em; }
.peak-topbar__in{ max-width:1180px; width:100%; margin:0 auto; display:flex; justify-content:flex-end; gap:1.8rem; padding:0 1.5rem; }
.peak-topbar a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; }
.peak-topbar a:hover{ color:var(--peak-gold-light); }
.peak-topbar svg{ width:14px; height:14px; fill:var(--peak-gold-light); flex:0 0 auto; }

/* Make the Kadence header sticky below the utility bar.
   NB: Kadence sets #masthead{position:absolute} via an ID selector, so we must
   match that specificity with #masthead + !important to win the cascade. */
#masthead.site-header{ position:sticky!important; top:38px!important; z-index:1001!important; transition:background .3s ease, box-shadow .3s ease; }

@media (max-width:768px){
  .peak-topbar{ position:static; height:auto; }
  .peak-topbar__in{ justify-content:center; gap:1.1rem; font-size:.8rem; padding:.45rem 1rem; flex-wrap:wrap; }
  #masthead.site-header{ top:0!important; }
}

/* Nav links dark on solid headers (inner pages + homepage once scrolled) */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a{ color:var(--peak-plum)!important; }

/* Homepage: transparent header over the hero, solidifies on scroll (desktop only) */
@media (min-width:769px){
  body.home .peak-topbar{ position:fixed; left:0; right:0; top:0; }
  body.home #masthead.site-header{ position:fixed!important; left:0; right:0; top:38px!important; }
  /* Transparent over hero — clear the background on every header wrapper */
  body.home:not(.peak-scrolled) #masthead,
  body.home:not(.peak-scrolled) #masthead .site-header-inner-wrap,
  body.home:not(.peak-scrolled) #masthead .site-header-row-container-inner,
  body.home:not(.peak-scrolled) #masthead .site-main-header-inner-wrap{ background:transparent!important; }
  /* Nav text white while transparent over the hero */
  body.home:not(.peak-scrolled) #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a{ color:#ffffff!important; }
  /* Solid white once scrolled */
  body.home.peak-scrolled #masthead .site-header-row-container-inner,
  body.home.peak-scrolled #masthead .site-main-header-inner-wrap{ background:#ffffff!important; }
  body.home.peak-scrolled #masthead{ box-shadow:0 2px 18px rgba(17,6,43,.12); }
}

/* ---- Custom footer (replaces Kadence's default footer) ---- */
#colophon{ display:none!important; }
.peak-footer{ background:var(--peak-plum); color:#e7e0d4; font-size:.95rem; }
.peak-footer__top{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 0.8fr 1.2fr 1.2fr; gap:2.4rem; padding:4rem 1.5rem 2.6rem; }
@media (max-width:768px){ .peak-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .peak-footer__top{ grid-template-columns:1fr; } }
.peak-footer h4{ font-family:'Questrial',sans-serif; color:#fff; font-size:1.1rem; margin:0 0 1rem; letter-spacing:.03em; }
.peak-footer a{ color:#e7e0d4; text-decoration:none; }
.peak-footer a:hover{ color:var(--peak-gold-light); }
.peak-footer p{ line-height:1.8; margin:.2rem 0; }
.peak-footer__logo{ width:92px; height:auto; margin-bottom:1rem; }
.peak-footer__menu{ list-style:none; padding:0; margin:0; }
.peak-footer__menu li{ margin:.45rem 0; }
.peak-footer__div{ border:0; border-top:1px solid rgba(222,193,112,.25); margin:1.1rem 0; }
.peak-footer__social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.peak-footer__social a{ width:38px; height:38px; border:1px solid rgba(222,193,112,.4); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:.25s; }
.peak-footer__social a:hover{ background:var(--peak-gold); border-color:var(--peak-gold); }
.peak-footer__social svg{ width:16px; height:16px; fill:var(--peak-gold-light); transition:.25s; }
.peak-footer__social a:hover svg{ fill:var(--peak-plum); }
.peak-footer__bottom{ border-top:1px solid rgba(222,193,112,.2); }
.peak-footer__bottom-in{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding:1.3rem 1.5rem; font-size:.85rem; }

/* ===========================================================================
   HOMEPAGE SECTIONS — moved here so each section can be its own clean
   Gutenberg block (reorderable in the editor). Markup carries no inline CSS.
   =========================================================================== */
/* Stack full-width sections flush on the homepage */
body.home .entry-content{ display:block; gap:0!important; }
body.home .entry-content > *{ margin-top:0!important; margin-bottom:0!important; }

.peak-sec{ padding:5rem 1.5rem; }
.peak-wrap{ max-width:1180px; margin:0 auto; }
.peak-center{ text-align:center; }
.peak-h2{ font-family:'Questrial',sans-serif; color:var(--peak-plum); font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.15; margin:.2rem 0 .4rem; }
.peak-lead{ color:#5d5d61; font-size:1.1rem; max-width:820px; margin:0 auto 1rem; line-height:1.75; }

/* Credentials */
.peak-creds{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2.2rem 3rem; margin-top:2.2rem; }
.peak-creds img{ height:54px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; transition:.3s; }
.peak-creds img:hover{ filter:none; opacity:1; }

/* Services grid */
.peak-grid{ margin:2.6rem 0; }  /* layout handled by native Grid block layout */
.peak-tile{ position:relative; display:block; border-radius:6px; overflow:hidden; aspect-ratio:1/1; color:#fff; text-decoration:none; background:#11062b; }
.peak-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s; opacity:.85; }
.peak-tile:hover img{ transform:scale(1.07); opacity:.6; }
.peak-tile__o{ position:absolute; inset:0; background:linear-gradient(to top,rgba(17,6,43,.9),rgba(17,6,43,.05) 70%); }
.peak-tile__t{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem; font-family:'Questrial',sans-serif; font-size:1.1rem; text-align:left; line-height:1.2; }
.peak-tile.is-ph{ background:linear-gradient(135deg,#11062b,#2b5672); }

/* Providers / Leadership cards */
.peak-prov{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2.6rem; }
.peak-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; }
.peak-card h3{ font-family:'Questrial',sans-serif; color:var(--peak-plum); margin:1rem 0 .15rem; font-size:1.3rem; }
.peak-card span{ color:var(--peak-gold); font-weight:600; letter-spacing:.04em; font-size:.85rem; display:block; line-height:1.4; }

/* Native core-block cards (Columns + Image + Heading + Paragraph) */
.peak-prov-cols{ margin-top:2.6rem; }
.peak-prov-cols .peak-card-img img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; }
.peak-prov-cols h3{ font-family:'Questrial',sans-serif; color:var(--peak-plum); margin:1rem 0 .15rem; font-size:1.3rem; }
.peak-card-role{ color:var(--peak-gold); font-weight:600; letter-spacing:.04em; font-size:.85rem; line-height:1.4; margin:0; }

/* ---- Full native conversion: covers, logo row, blog cards ---- */
.peak-creds figure{ margin:0; }
.peak-grid .wp-block-cover{ border-radius:6px; overflow:hidden; min-height:230px; }
.peak-grid .wp-block-cover__image-background{ transition:transform .5s ease; }
.peak-grid .wp-block-cover:hover img.wp-block-cover__image-background,
.peak-grid .wp-block-cover:hover .wp-block-cover__image-background{ transform:scale(1.07); }
.peak-grid .wp-block-cover h3{ font-family:'Questrial',sans-serif; margin:0; }
.peak-grid .wp-block-cover a{ color:#fff; text-decoration:none; }
.peak-grid .wp-block-cover a:hover{ color:var(--peak-gold-light); }
.peak-tile-ph{ background:linear-gradient(135deg,#11062b,#2b5672); }

.peak-blog-cols{ margin-top:2.6rem; }
.peak-post-card{ background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; box-shadow:0 8px 28px rgba(17,6,43,.07); text-align:left; height:100%; }
.peak-post-card .wp-block-image{ margin:0; }
.peak-post-card .peak-h3{ font-family:'Questrial',sans-serif; color:var(--peak-plum); font-size:1.15rem; line-height:1.3; padding:1.1rem 1.3rem 0; margin:0; }
.peak-post-card > p{ padding:.6rem 1.3rem 1.4rem; margin:0; }
.peak-post-card a{ color:var(--peak-gold); font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; }

.peak-loc-cols{ margin-top:1.2rem; }
.peak-loc{ height:100%; }

/* Gold button (palette color classes get stripped by WP, so style via className) */
.peak-btn .wp-block-button__link{ background-color:var(--peak-gold); color:var(--peak-plum); }
.peak-btn .wp-block-button__link:hover{ background-color:var(--peak-gold-light); color:var(--peak-plum); }

/* Blog cards */
.peak-blog{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; margin-top:2.6rem; text-align:left; }
.peak-post{ background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; box-shadow:0 8px 28px rgba(17,6,43,.07); }
.peak-post img{ width:100%; height:200px; object-fit:cover; display:block; }
.peak-post .pp{ padding:1.2rem 1.3rem 1.6rem; }
.peak-post h3{ font-family:'Questrial',sans-serif; color:var(--peak-plum); font-size:1.15rem; margin:0 0 .6rem; line-height:1.3; }
.peak-post a{ color:var(--peak-gold); font-weight:700; text-decoration:none; letter-spacing:.04em; font-size:.85rem; text-transform:uppercase; }

/* Locations */
.peak-locs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.8rem; margin-top:2.2rem; text-align:left; }
.peak-loc{ background:rgba(255,255,255,.05); border:1px solid rgba(222,193,112,.3); border-radius:8px; padding:1.8rem; }
.peak-loc h3{ font-family:'Questrial',sans-serif; color:var(--peak-gold); margin:0 0 .6rem; font-size:1.3rem; }
.peak-loc p{ color:#e7e0d4; line-height:1.7; margin:.3rem 0; }

/* CTA button + parallax bands */
.peak-cta-btn{ display:inline-block; margin-top:.8rem; padding:.95rem 2.3rem; border-radius:2px; font-weight:700; letter-spacing:.14em; text-decoration:none; }
.peak-parallax{ position:relative; background-size:cover; background-position:center; background-attachment:fixed; }
.peak-parallax::before{ content:""; position:absolute; inset:0; background:rgba(17,6,43,.82); }
.peak-parallax > *{ position:relative; z-index:1; }
@supports (-webkit-touch-callout:none){ .peak-parallax{ background-attachment:scroll; } }

/* Hero marquee strip */
.peak-marquee{ width:100%; margin:0; background:#11062b; overflow:hidden; padding:15px 0; border-bottom:1px solid rgba(222,193,112,.28); }
.peak-marquee__track{ display:flex; width:max-content; animation:peakmarquee 42s linear infinite; }
.peak-marquee:hover .peak-marquee__track{ animation-play-state:paused; }
.peak-marquee__group{ display:flex; align-items:center; white-space:nowrap; font-family:'Raleway',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.92rem; font-weight:600; color:#f3eee6; }
.peak-marquee__group > span{ padding:0 1.4rem; }
.peak-marquee__sep{ color:#dec170; font-size:1.1rem; line-height:1; }
@keyframes peakmarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .peak-marquee__track{ animation:none; justify-content:center; flex-wrap:wrap; } }