/* ==========================================================================
   LIGHT TOP (homepage only): photo hero under the white header, navy Market Pulse,
   white Featured row, beige band behind the free tools panel.
   Everything below the tools panel is untouched.
   The hero photo is in partials/home-1a-hero.php (assets/hero/hero-desktop-2000.webp, hero-desktop-1200.webp and hero-mobile.webp):
   replace those two files to change the picture. Choose photos with a bright, calm top
   (ceiling or sky) so the navy title stays readable.
   To switch it off: delete the 'cp-light-top' line in functions.php (cp_enqueue_home_assets).
   ========================================================================== */

/* ---- Hero: full-width photo, title and search on top ---- */
body .cpn #cph-live{background:#efebe4;color:#1b1a33;min-height:max(470px, calc(100vw * 539 / 2000))}
body .cpn #cph-live .cph-bg{position:absolute;inset:0;z-index:-2;display:block}
body .cpn #cph-live .cph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
body .cpn #cph-live .cph-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.38) 40%,rgba(255,255,255,0) 64%)}
body .cpn #cph-live .cph-panel{padding:40px 24px 44px}

body .cpn #cph-live h1{font-family:"Marcellus",Georgia,serif;color:#1b1a33;letter-spacing:.005em;line-height:1.08;font-size:clamp(34px,3.9vw,58px)}
body .cpn #cph-live h1 span{display:inline}
body .cpn #cph-live h1 span + span{color:#1b1a33;margin-left:.28em}
body .cpn #cph-live .cph-sub2{margin-top:10px;font-size:18px;color:#2a2c40}

/* search: one white card, tabs inside it */
body .cpn #cph-live .cph-finder{max-width:980px;margin-top:24px;background:#fff;border:0;border-radius:20px;padding:10px;box-shadow:0 18px 50px rgba(27,26,51,.16)}
body .cpn #cph-live .cph-mode{background:transparent;border:0;padding:4px 6px 10px;gap:6px}
body .cpn #cph-live .cph-mode span{border-radius:999px;padding:8px 16px;color:#55546a;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
body .cpn #cph-live .cph-mode input:checked + span{background:#f1ebdf;color:#1b1a33}
body .cpn #cph-live .cph-mode input:not(:checked):hover + span{color:#1b1a33}
body .cpn #cph-live .cph-search{box-shadow:none;border-top:1px solid #ece9e1}
body .cpn #cph-live .cph-search label{border-right-color:#ece9e1;padding:14px 20px}
body .cpn #cph-live .cph-search label small{color:#55546a;font-size:11px;letter-spacing:.08em}
body .cpn #cph-live .cph-search label:nth-child(4){border-right:0}
body .cpn #cph-live .cph-go{margin:8px;border-radius:14px;padding:0 30px;background:#1b1a33;color:#fff;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
body .cpn #cph-live .cph-go:hover{background:#2c2a50}

/* line under the search, on a soft white pill so it reads over the photo */
body .cpn #cph-live .cph-list{margin-top:16px;display:flex;justify-content:center;color:#1b1a33}
body .cpn #cph-live .cph-list span{display:inline-block;background:rgba(255,255,255,.88);padding:10px 18px;border-radius:999px}
body .cpn #cph-live .cph-list a{color:#1b1a33;border-bottom-color:#b8963e}
body .cpn #cph-live .cph-list a:hover{color:#8a6d0f}

@media (max-width:900px){
  body .cpn #cph-live .cph-search label:first-child{border-bottom-color:#ece9e1}
  body .cpn #cph-live .cph-search label:nth-child(3){border-right:0}
  body .cpn #cph-live .cph-go{padding:16px}
}
@media (max-width:600px){
  body .cpn #cph-live{min-height:640px}
  body .cpn #cph-live .cph-bg img{object-position:50% 50%}
  body .cpn #cph-live .cph-scrim{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 34%,rgba(255,255,255,0) 58%)}
  body .cpn #cph-live .cph-panel{padding:40px 16px 40px}
  body .cpn #cph-live h1{font-size:clamp(32px,10vw,42px)}
  body .cpn #cph-live h1 span{display:block}
  body .cpn #cph-live h1 span + span{margin-left:0}
  body .cpn #cph-live .cph-sub2{font-size:15.5px}
  body .cpn #cph-live .cph-finder{padding:8px;border-radius:18px}
  body .cpn #cph-live .cph-mode span{text-align:center}
  body .cpn #cph-live .cph-list span{border-radius:14px;font-size:13.5px}
}

/* ---- Market Pulse: navy strip with gold label ---- */
html body #cp-ticker{--t-bg:#1b1a33;--t-gold:#d9bd6a;--t-muted:#c9c8da;--t-line:rgba(255,255,255,.1);background:var(--t-bg);color:#fff;border-color:var(--t-bg)}
html body #cp-ticker .cpt-label,html body #cp-ticker .cpt-more{color:#d9bd6a}
html body #cp-ticker .cpt-item b,html body #cp-ticker .cpt-val{color:#fff}
html body #cp-ticker a.cpt-item:hover{color:#fff;background:rgba(255,255,255,.06)}
html body #cp-ticker .cpt-more:hover{color:#fff}
html body #cp-ticker .cpt-val.is-up{color:#8fdcab}
html body #cp-ticker .cpt-val.is-down{color:#ff9b93}

/* ---- Featured: white; tools panel sits on the beige band below (no longer rises into it) ---- */
body .cpn .cpf{background:#fff;padding-bottom:72px}
body .cpn .cpf-band{padding-top:56px}
body .cpn .cp-tools{transform:none;margin:0 auto !important;padding-top:0;padding-bottom:0}

@media (max-width:900px){
  body .cpn .cpf{padding-bottom:56px}
}
@media (max-width:768px){
  body .cpn .cpf-band{padding-top:40px}
}
@media (max-width:640px){
  body .cpn .cpf{padding-bottom:44px}
}
