/* =====================================================
   MUBSELL — cta.css
   Blue subscribe banner + safety note.
   Markup: components/cta-banner.php
   ===================================================== */

.cta-banner{
  margin:0 var(--page-pad) 50px;
  background:var(--marigold);border-radius:16px;
  padding:30px 40px;display:flex;justify-content:space-between;align-items:center;
  color:#fff;position:relative;overflow:hidden;flex-wrap:wrap;gap:20px;
}

.cta-left{display:flex;align-items:center;gap:15px;max-width:420px;}

.cta-icon{
  width:46px;height:46px;background:var(--paper-card,#fff);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}

.cta-banner h3{font-size:17px;margin-bottom:4px;color:#fff;font-family:'Sora',sans-serif;}
.cta-banner p{font-size:13px;opacity:.92;}

.subscribe-form{display:flex;gap:10px;flex-wrap:wrap;}
.subscribe-form input{
  padding:10px 14px;border-radius:8px;border:none;width:220px;outline:none;
  font-size:14px;font-family:'Inter',sans-serif;
}
.subscribe-form button{
  background:var(--surface-dark);color:#fff;border:none;padding:10px 20px;
  border-radius:8px;font-weight:700;cursor:pointer;transition:opacity .15s;
}
.subscribe-form button:hover{opacity:.9;}
.subscribe-thanks{font-size:13px;font-weight:700;display:none;}

/* Safety strip */
.safety{
  background:var(--paper-card);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:22px var(--page-pad);
  display:flex;align-items:center;gap:14px;margin-bottom:50px;
}
.safety .icon{
  width:34px;height:34px;border-radius:50%;background:var(--marigold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto;
}
.safety p{margin:0;font-size:14px;color:var(--charcoal);}
.safety strong{color:var(--ink);}

@media (max-width:640px){
  /* Banner keeps its horizontal feel: icon + text row, form row below */
  .cta-banner{padding:20px;gap:14px;}
  .cta-left{max-width:100%;}
  .cta-icon{width:40px;height:40px;font-size:17px;}
  .cta-banner h3{font-size:17px;}
  .cta-banner p{font-size:12px;}
  .subscribe-form{width:100%;flex-wrap:nowrap;}
  .subscribe-form input{flex:1;width:auto;min-width:0;font-size:13px;}
  .subscribe-form button{flex:0 0 auto;padding:10px 16px;font-size:13px;}

  .safety{padding:16px var(--page-pad);margin-bottom:36px;}
  .safety p{font-size:12px;}
}

/* The CTA band is --marigold, which in dark mode is #4C8DFF. White text
   on it measures 3.2:1; near-black measures 5.44:1. Same reasoning as
   the primary buttons in chrome.css — the band keeps its blue, the text
   flips. */
[data-theme="dark"] .cta-banner,
[data-theme="dark"] .cta-banner h3,
[data-theme="dark"] .cta-banner p,
[data-theme="dark"] .cta-banner .cta-left,
[data-theme="dark"] .cta-banner label,
[data-theme="dark"] .cta-banner small{
  color:#0D1B2A;
}
/* The subscribe button sits ON the blue band, so it inverts to stay
   distinguishable from it rather than following the band's text. */
[data-theme="dark"] .cta-banner .subscribe-form button{
  background:#0D1B2A; color:#F3F5FA;
}

/* The icon tile is a chip sitting ON the blue band, not a page surface,
   so it stays light in both themes — same treatment as the CTA pills on
   the hero slides. Without this it inherited the band's dark text and
   became a dark tile on a blue band. */
[data-theme="dark"] .cta-icon{ background:#F3F5FA; color:#0D1B2A; }