/* ==========================================================================
   spICE child theme — BLUE (#154092)

   The De Korne palette with accent-3 overridden to the brand blue. Load after
   the parent stylesheet and mark the widget with data-spice-brand="blue":

     <link rel="stylesheet" href="/static/spice-tool.css" />
     <link rel="stylesheet" href="/static/themes/spice-theme-blue.css" />
     <div data-spice-tool data-brand="blue"></div>

   Accent tokens and brand identity (typeface, heading colour) live here.
   Anything structural belongs in the parent — if you find yourself writing a
   layout rule in this file, it is a parent rule wearing a brand costume.
   ========================================================================== */

.spice-root[data-spice-brand="blue"] {
  --spice-accent: #154092;
  --spice-accent-strong: #0b265a;
  --spice-accent-soft: #eaf0fb;
  --spice-accent-visited: #6783b8;
  --spice-hero-from: #154092;
}

/* --- dark ---------------------------------------------------------------
   Lightened to #3d7cf5 so it still clears 4.5:1 against the near-black
   surface; the parent already flips --spice-on-accent to dark text.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .spice-root[data-spice-brand="blue"]:not([data-spice-theme="light"]) {
    --spice-accent: #3d7cf5;
    --spice-accent-strong: #719ff8;
    --spice-accent-soft: #10192b;
    --spice-accent-visited: #2e57a5;
  }
}

.spice-root[data-spice-brand="blue"][data-spice-theme="dark"] {
  --spice-accent: #3d7cf5;
  --spice-accent-strong: #719ff8;
  --spice-accent-soft: #10192b;
  --spice-accent-visited: #2e57a5;
}

/* --- logo ---------------------------------------------------------------
   Path is relative to this stylesheet, so it resolves wherever the themes
   folder is mounted: /static/themes/, the WordPress plugin's assets/themes/,
   or a TYPO3 site package.
   ---------------------------------------------------------------------- */
.spice-root[data-spice-brand="blue"] .spice-logo {
  display: block;
  background-image: url("../Images/spice-logo-blue.jpg");
}

/* --- typeface -----------------------------------------------------------
   The real Eurostile, self-hosted next to this stylesheet so the relative
   paths resolve wherever the themes folder is mounted: /static/themes/, the
   WordPress plugin assets/themes/, or a TYPO3 site package.

   Converted from the supplied TTFs. Both Extended faces shipped with a
   corrupt cmap (the format 4 subtable declared 672 bytes where only 410
   exist); the length field was repaired, recovering the full 247-character
   mapping. See the conversion notes in the README.

   LICENSING: Eurostile is a commercial typeface. A desktop licence does not
   normally cover serving the font as a webfont - check the EULA before this
   goes on a public site.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Eurostile Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Fonts/eurostile-400.woff2") format("woff2");
}
@font-face {
  font-family: "Eurostile Extended Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../Fonts/eurostile-extended-700.woff2") format("woff2");
}

/* --- headings -----------------------------------------------------------
   Two faces, on purpose. Eurostile Extended Bold is the brand face - wide,
   squarish, the same shapes as the sp.ICE wordmark - but it is 55% wider
   than the normal cut, and the wizard asks long questions. Measured against
   the 796px of usable card width:

     "Is the application predominantly defined by cooling or by heating?"
        Eurostile Extended Bold   914px  -> two lines
        Eurostile (normal)        589px  -> one line

   So the short display strings get the brand face, and the running question
   heads get the normal cut. To put everything in Extended Bold instead, set
   the family on the shared rule below and drop the .spice-question override.
   ------------------------------------------------------------------------ */
.spice-root[data-spice-brand="blue"] h1,
.spice-root[data-spice-brand="blue"] h2,
.spice-root[data-spice-brand="blue"] h3,
.spice-root[data-spice-brand="blue"] h4,
.spice-root[data-spice-brand="blue"] h5,
.spice-root[data-spice-brand="blue"] h6 {
  font-family: "Eurostile Extended Web", "Eurostile Extended", "Eurostile",
    var(--spice-font);
  font-weight: 700;
  letter-spacing: 0;
  /* #154092 as specified. Written as the accent token rather than the literal
     so dark mode still resolves to the lightened #3d7cf5 - the brand blue on
     a near-black surface is 1.96:1, which is unreadable. */
  color: var(--spice-accent);
}

/* The step question is a sentence, not a label: the normal cut keeps it on
   one line and stops the wizard shouting every question at the visitor. */
.spice-root[data-spice-brand="blue"] .spice-question {
  font-family: "Eurostile Web", "Eurostile", var(--spice-font);
  font-weight: 400;
}

/* The banner heading keeps the typeface and the weight, but not the colour -
   it sits on the blue-to-black gradient, where blue-on-blue would disappear.
   Extended Bold also sets wider than the system stack the size was tuned for,
   which tipped the longest headline onto a second line. */
.spice-root[data-spice-brand="blue"] .spice-result-hero h3 {
  font-size: clamp(20px, 3.4vw, 27px);
  color: #ffffff;
}