/* ============================================================================
   Telstra partner skin  —  loaded ONLY on a Telstra host (data-brand="telstra",
   injected by the server into <head>, after site.css). OVERRIDE layer only:
   re-points the brand tokens to Telstra blue, swaps the typeface, and replaces
   the wordmark with the Telstra logo. Nothing here touches the default SimpleCX theme.

   LOGO: /assets/telstra-logo.svg is a PLACEHOLDER blue "Telstra" text wordmark,
   not Telstra's official logo artwork. Drop the official SVG in at that path.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root[data-brand="telstra"]{
  --gold:#0064D2;            /* Telstra blue — the one brand accent */
  --gold-deep:#0A4FA8;       /* deeper blue for hovers/emphasis */
  --gold-wash:#E3F0FC;       /* light blue wash (chips, soft fills) */
  --btn-bg:#0064D2;          /* primary CTA + user chat bubble -> blue */
  --btn-fg:#FFFFFF;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Wordmark -> Telstra logo (wide wordmark). Hide the "simple"/"cx" spans and paint the logo. */
:root[data-brand="telstra"] .logo{
  display:inline-block; font-size:0 !important; line-height:0;
  width:120px; height:32px; vertical-align:middle;
  background:url('/assets/telstra-logo.svg') left center / contain no-repeat;
}
:root[data-brand="telstra"] .logo.sm{ width:104px; height:28px; }
:root[data-brand="telstra"] .logo .word,
:root[data-brand="telstra"] .logo .badge{ display:none !important; }

/* Hide the SimpleCX product-family chips — off-brand under the skin. */
:root[data-brand="telstra"] .family{ display:none !important; }

/* Belt-and-suspenders accents in case any component used the literal gold. */
:root[data-brand="telstra"] .btn-primary{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }
:root[data-brand="telstra"] .btn-primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }