/* ============================================================================
   Cookie Consent — banner skin
   Loaded AFTER silktide-consent-manager.css. Scoped to #stcm-wrapper so it wins
   the cascade. Compact bottom-left card; three pill buttons in one row
   (Preferences | Reject | Accept All); no cookie icon; no Silktide logo.
   Button/link color comes from --primaryColor, which the plugin sets PER SITE
   (each site uses its own brand palette).
   ============================================================================ */

/* Consent sits above all site widgets (e.g. the RTP live-chat bubble). */
#stcm-wrapper,
#stcm-wrapper #stcm-banner,
#stcm-wrapper #stcm-modal,
#stcm-wrapper #stcm-backdrop,
#stcm-wrapper #stcm-icon {
  z-index: 2147483647;
}

/* Brand tokens (—primaryColor overridden per-site by the plugin) */
#stcm-wrapper {
  --primaryColor: #398ffc;        /* fallback only; real value injected inline */
  --backgroundColor: #FFFFFF;
  --textColor: #2A2E33;
  --fontFamily: inherit;
  --boxShadow: 0 8px 30px rgba(20, 24, 28, 0.18);
}

/* Never show the Silktide credit logo. */
#stcm-wrapper .stcm-logo,
#stcm-wrapper .stcm-credit-link {
  display: none !important;
}

/* Floating cookie icon: hidden on every page EXCEPT the Cookie Settings page
   (body.cc-cookie-settings-page, added in PHP via is_page('cookie-settings')).
   There it is the reopen/reset control; Silktide shows it after a consent choice
   and hides it while the modal is open, so we only relax the global hide — we do
   NOT force it visible. The icon circle uses --iconColor (set to the per-site
   brand color) with a white cookie glyph (--iconBackgroundColor). */
body:not(.cc-cookie-settings-page) #stcm-wrapper #stcm-icon {
  display: none !important;
}

/* On the Cookie Settings page, keep the reset icon ALWAYS available — even after
   the visitor has already accepted — so anyone who accepted by mistake can reopen
   preferences and change/withdraw their choice. (Silktide only auto-shows the icon
   after a choice; this forces it on regardless of state.) It is suppressed only
   while the banner or the preferences modal is on screen, to avoid a bottom-left
   overlap: #stcm-banner is removed from the DOM after a choice, and #stcm-modal
   stays in the DOM with its display toggled, so we match its open (flex) state. */
body.cc-cookie-settings-page #stcm-wrapper #stcm-icon {
  display: flex !important;
}
body.cc-cookie-settings-page #stcm-wrapper:has(#stcm-banner) #stcm-icon,
body.cc-cookie-settings-page #stcm-wrapper:has(#stcm-modal[style*="display: flex"]) #stcm-icon {
  display: none !important;
}

/* ---- Banner: compact card, bottom-left ---- */
#stcm-wrapper #stcm-banner {
  font-family: var(--fontFamily);
  color: var(--textColor);
  background: var(--backgroundColor);
  box-sizing: border-box;
  width: min(600px, calc(100vw - 40px));
  max-width: none;
  left: 20px;
  right: auto;
  transform: none;
  bottom: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: var(--boxShadow);
  font-size: 14px;
  line-height: 1.5;
}
#stcm-wrapper #stcm-banner.stcm-loaded { transform: none; }

#stcm-wrapper #stcm-banner p,
#stcm-wrapper #stcm-banner .stcm-consent-description {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
#stcm-wrapper #stcm-banner a {
  color: var(--primaryColor);
  text-decoration: underline;
  font-weight: 600;
}

/* ---- Actions: three equal pills in one row ---- */
#stcm-wrapper #stcm-banner .stcm-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
/* library wraps Preferences (+logo) in .stcm-actions-row; reorder to
   Preferences | Reject | Accept All */
#stcm-wrapper #stcm-banner .stcm-actions-row {
  display: flex;
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  order: 1;
}
#stcm-wrapper #stcm-banner .stcm-reject-all { order: 2; }
#stcm-wrapper #stcm-banner .stcm-accept-all { order: 3; }

#stcm-wrapper .stcm-button,
#stcm-wrapper .stcm-preferences-button {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primaryColor);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
#stcm-wrapper .stcm-preferences-button span { color: #FFFFFF; text-decoration: none; }
#stcm-wrapper .stcm-button:hover,
#stcm-wrapper .stcm-preferences-button:hover { filter: brightness(0.93); }
/* Keep buttons as pills even when focused — Silktide's :focus rule
   (#stcm-wrapper #stcm-banner button:focus, two IDs) forces a 5px radius, which
   made the auto-focused "Accept All" look different. Match that specificity and
   load later so all three stay identical pills. */
#stcm-wrapper #stcm-banner button:focus,
#stcm-wrapper #stcm-modal button:focus { border-radius: 999px; }

/* ---- Preferences modal: collapsible accordion per category ----
   JS (onPreferencesOpen) wraps each category's legend + toggle in .cc-head. */
#stcm-modal fieldset {
  border: 0;
  border-bottom: 1px solid #e3e8ef;
  margin: 0;
  padding: 10px 0;
}
#stcm-modal .cc-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
#stcm-modal .cc-head legend {
  flex: 1;
  float: none;
  width: auto;
  margin: 0;
  padding: 0 0 0 22px;
  position: relative;
  font-weight: 700;
  font-size: 15px;
  color: var(--textColor);
  cursor: pointer;
  user-select: none;
}
#stcm-modal .cc-head legend::before {
  content: '';
  position: absolute;
  left: 3px; top: 6px;
  width: 7px; height: 7px;
  border-right: 2px solid var(--textColor);
  border-bottom: 2px solid var(--textColor);
  transform: rotate(45deg);              /* collapsed: chevron down */
  transition: transform .2s;
}
#stcm-modal fieldset.cc-open .cc-head legend::before { transform: rotate(-135deg); top: 10px; }
#stcm-modal .cc-head .stcm-toggle { flex: none; }
#stcm-modal fieldset .stcm-consent-description { display: none; margin-top: 10px; }
#stcm-modal fieldset.cc-open .stcm-consent-description { display: block; }

/* ---- Cookie tables inside the Preferences modal ---- */
#stcm-wrapper .stcm-consent-description table.cc-ck {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 2px;
  font-size: 12px;
}
#stcm-wrapper .stcm-consent-description table.cc-ck th,
#stcm-wrapper .stcm-consent-description table.cc-ck td {
  text-align: left;
  padding: 5px 8px;
  border: 1px solid #e3e8ef;
  vertical-align: top;
}
#stcm-wrapper .stcm-consent-description table.cc-ck th {
  background: #f4f6f9;
  font-weight: 600;
  color: #3a4757;
  white-space: nowrap;
}
#stcm-wrapper .stcm-consent-description table.cc-ck td code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--primaryColor);
  background: #f4f6f9;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- "Manage cookie preferences" button on the Cookie Settings page ----
   (background colour is injected per-site inline; sits on a normal page, so it
   is NOT scoped to #stcm-wrapper). */
.cc-manage-consent {
  display: inline-block;
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
}
.cc-manage-consent:hover { filter: brightness(0.93); }
.cc-cookie-settings .cc-cookie-cats { margin: 8px 0 16px; padding-left: 20px; }
.cc-cookie-settings .cc-cookie-cats li { margin: 4px 0; }

/* ---- Mobile: full-width sheet, stacked pills, tighter ---- */
@media (max-width: 680px) {
  #stcm-wrapper #stcm-banner {
    width: calc(100vw - 24px);
    left: 12px;
    right: auto;
    transform: none;
    bottom: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13.5px;
  }
  #stcm-wrapper #stcm-banner.stcm-loaded { transform: none; }
  #stcm-wrapper #stcm-banner p,
  #stcm-wrapper #stcm-banner .stcm-consent-description { font-size: 13px; }
  #stcm-wrapper #stcm-banner .stcm-actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
  #stcm-wrapper #stcm-banner * { overflow-wrap: anywhere; }
  #stcm-wrapper .stcm-button,
  #stcm-wrapper .stcm-preferences-button { flex: none; width: 100%; padding: 11px 16px; }
}