/*
  Brandstart theme for Silktide Consent Manager v2.0.0
  Loads AFTER silktide-consent-manager.css and overrides its default
  dark/yellow look with the Brandstart cherry/black/white system:
  white card, black text, cherry primary button, black secondary button.
  Colour tokens match the site: cherry #C8102E, cherry-text #A50D26
  (4.9:1 on white), ink #0A0A0A.
*/

#stcm-wrapper {
  --fontFamily: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --primaryColor: #C8102E;
  --backgroundColor: #FFFFFF;
  --textColor: #0A0A0A;
  --backdropBackgroundColor: rgba(10, 10, 10, 0.45);
  --iconColor: #0A0A0A;
  --iconBackgroundColor: #FFFFFF;
}

/* Card: white, subtle line so it reads on white pages */
#stcm-wrapper #stcm-banner,
#stcm-wrapper #stcm-modal {
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: 0 18px 50px -18px rgba(10, 10, 10, 0.35), 0 4px 14px rgba(10, 10, 10, 0.08);
}

/* Headings match the site's display face */
#stcm-wrapper #stcm-modal h2,
#stcm-wrapper #stcm-modal legend {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
#stcm-wrapper #stcm-modal h2 { font-weight: 800; }
#stcm-wrapper #stcm-modal legend { font-weight: 700; }

/* Body copy: full-contrast ink, not the vendor's 0.6 opacity */
#stcm-wrapper #stcm-modal p { opacity: 0.78; }

/* Slightly wider card so the button row sits on one line at desktop */
#stcm-wrapper #stcm-banner { width: 640px; }

/* Buttons: pill shape like the site CTAs; never wrap the label */
#stcm-wrapper .stcm-button {
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  padding: 11px 20px;
  white-space: nowrap;
}

/* Primary actions (Accept all / Save and close): cherry */
#stcm-wrapper .stcm-button.stcm-accept-all,
#stcm-wrapper .stcm-button.stcm-modal-save {
  background-color: #C8102E;
  border-color: #C8102E;
  color: #FFFFFF;
}
#stcm-wrapper .stcm-button.stcm-accept-all:hover,
#stcm-wrapper .stcm-button.stcm-modal-save:hover {
  background-color: #A50D26;
  border-color: #A50D26;
  color: #FFFFFF;
}

/* Secondary actions (Reject non-essential): black */
#stcm-wrapper .stcm-button.stcm-reject-all,
#stcm-wrapper .stcm-button.stcm-modal-reject-all {
  background-color: #0A0A0A;
  border-color: #0A0A0A;
  color: #FFFFFF;
}
#stcm-wrapper .stcm-button.stcm-reject-all:hover,
#stcm-wrapper .stcm-button.stcm-modal-reject-all:hover {
  background-color: #2A2A2A;
  border-color: #2A2A2A;
  color: #FFFFFF;
}

/* Text links: darker cherry for contrast on white; black on hover */
#stcm-wrapper a,
#stcm-wrapper #stcm-banner a {
  color: #A50D26;
}
#stcm-wrapper a:hover,
#stcm-wrapper #stcm-banner a:hover {
  color: #0A0A0A;
}

/* Preferences text button on the banner */
#stcm-wrapper #stcm-banner .stcm-preferences-button {
  color: #A50D26;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#stcm-wrapper #stcm-banner .stcm-preferences-button span:hover {
  color: #0A0A0A;
}

/* Modal close icon: ink instead of cherry noise */
#stcm-wrapper #stcm-modal .stcm-modal-close svg { fill: #0A0A0A; }
#stcm-wrapper #stcm-modal .stcm-modal-close:hover svg { fill: #C8102E; }

/* Focus ring: cherry, visible on the white card */
#stcm-wrapper a:focus,
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus,
#stcm-wrapper #stcm-icon:focus {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #C8102E;
}
#stcm-wrapper #stcm-modal .stcm-toggle:focus-within {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #C8102E;
}

/* Toggles: black track off, cherry track on, white thumb (vendor
   defaults already map these from the variables above; the labels
   inherit --backgroundColor which is white on both tracks) */

/* Re-open icon: white circle, ink cookie, subtle line */
#stcm-wrapper #stcm-icon {
  border: 1px solid rgba(10, 10, 10, 0.16);
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.14);
}
#stcm-wrapper #stcm-icon svg { fill: #0A0A0A; }

/* Silktide attribution mark: quiet grey, not cherry */
#stcm-wrapper #stcm-banner a.stcm-logo { fill: #B9B2B2; }
#stcm-wrapper #stcm-banner a.stcm-logo:hover { fill: #0A0A0A; }