/* ===================================================
   Onetel — theme overrides
   ---------------------------------------------------
   Palette lives in tenants.brand_json and is injected as
   CSS custom properties by partials/tenant_theme.html.
   This file handles what a variable swap alone cannot.

   The brand is white + yellow, and yellow is a FILL, never
   a text colour: #FFCE00 on white is 1.49:1. So anything
   sitting on the yellow gets near-black ink, and anything
   brand-coloured on white uses --brand-text (a dark amber).
   =================================================== */

/* ── Type: squarer and tighter than uPhone's Apple-ish stack ─────── */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.005em;
}

h1, h2, h3, .display-4, .display-5, .display-6 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ── Shape: flatter corners read as more utilitarian ─────────────── */
:root {
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

.btn,
.card,
.form-control,
.form-select,
.input-group > .form-control {
  border-radius: var(--radius-md);
}

/* ── Buttons: yellow fill, dark ink. Bootstrap's default is white
      text on the primary colour, which is unreadable here. ───────── */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  --bs-btn-color:              var(--brand-on-primary);
  --bs-btn-bg:                 var(--brand-primary);
  --bs-btn-border-color:       var(--brand-primary);
  --bs-btn-hover-color:        var(--brand-on-primary);
  --bs-btn-hover-bg:           var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-color:       var(--brand-on-primary);
  --bs-btn-active-bg:          var(--brand-primary-hover);
  --bs-btn-active-border-color:var(--brand-primary-hover);
  --bs-btn-disabled-color:     var(--brand-on-primary);
  --bs-btn-disabled-bg:        var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  color: var(--brand-on-primary);
  font-weight: 650;
}

.btn-outline-primary {
  --bs-btn-color:        var(--brand-text);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color:  var(--brand-on-primary);
  --bs-btn-hover-bg:     var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg:    var(--brand-primary);
  font-weight: 600;
}

/* Any element painted with the brand fill needs the dark ink too. */
.badge.bg-primary,
.badge.text-bg-primary,
.bg-primary {
  background-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

/* Focus rings: the yellow is too pale to read as a focus indicator. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.55);
}

/* ── Nav: ink wordmark with a yellow underline ───────────────────── */
.site-brand {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--brand-dark) !important;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ── Footer: warm ink rather than Bootstrap's blue-black ─────────── */
footer.bg-dark {
  background-color: var(--brand-dark) !important;
}

/* ── Brand mark ──────────────────────────────────────────────────── */
.brand-mark {
  flex: 0 0 auto;
  display: block;
}
.brand-mark__bubble { fill: var(--brand-primary); }
.brand-mark__tail   { fill: var(--brand-primary); }
.brand-mark__dot    { fill: var(--brand-dark); }

/* ── Gradient-filled text ────────────────────────────────────────────
   .text-gradient paints type with a clipped background gradient, so it
   picks up the brand FILL colours — which at text size are unreadable
   here (#FFCE00 on white is 1.49:1). Run it between two dark ambers
   instead so the hero headline keeps its treatment and its contrast. */
.text-gradient {
  background: linear-gradient(135deg, var(--brand-text), #A87A00);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Purchase CTA ────────────────────────────────────────────────────
   The buy button ships as Bootstrap's .btn-success green, which is a
   deliberate "go" colour on the parent brand. On a white + yellow
   storefront it reads as a foreign element, so the primary purchase CTA
   takes the brand fill. Scoped to #plan-cta only — .btn-success is also
   used for success alerts and dashboard status pills, which stay green. */
#plan-cta.btn-success {
  --bs-btn-bg:                 var(--brand-primary);
  --bs-btn-border-color:       var(--brand-primary);
  --bs-btn-color:              var(--brand-on-primary);
  --bs-btn-hover-bg:           var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-hover-color:        var(--brand-on-primary);
  --bs-btn-active-bg:          var(--brand-primary-hover);
  --bs-btn-active-border-color:var(--brand-primary-hover);
  --bs-btn-active-color:       var(--brand-on-primary);
  color: var(--brand-on-primary);
  font-weight: 700;
}

/* The mark sits on the dark footer as well as the white header; the bubble
   keeps its yellow, but the dots need to stay legible against it either way. */
footer .brand-mark { width: 24px; height: 24px; }

/* ── Trust strip: black band, yellow figures ─────────────────────────
   Yellow on black is the value/discount pairing. Contrast improves too
   (6.81:1 amber-on-grey -> 11.98:1 yellow-on-black), though the grey
   version already passed AA — the reason is the discount read. */
.trust-strip {
  background: var(--brand-dark);
}
/* !important beats the colour still written in the style attribute; the
   classes are stable hooks, unlike matching on the inline font-size. */
.trust-strip__figure { color: var(--brand-primary) !important; }
.trust-strip__label  { color: rgba(255, 255, 255, .82) !important; }

/* ── Support chat widget ─────────────────────────────────────────────
   The widget hardcodes #1d4ed8 inline on its launcher, header and send
   button. That is not a brand leak (the parent brand uses the same blue)
   but it is off-palette on a yellow storefront, so recolour it here.
   !important is needed to beat the inline style attributes. */
#cs-chat-toggle,
#cs-chat-panel > div:first-child,
#cs-chat-widget button[onclick^="csSaveEmail"],
#cs-chat-widget button[onclick^="csSend"] {
  background: var(--brand-dark) !important;
  color: #fff !important;
}
#cs-chat-toggle svg { color: var(--brand-primary); }