/* ============================================================
   BENTLEY — DIGITAL DESIGN SYSTEM
   Tokens + base + components. Layered on top of Bootstrap 5.
   Colour, type & rules follow the official Bentley Retailer
   Website Guidelines (Brand Book, "Website Elements").
   ------------------------------------------------------------
   Files:  bentley-theme.css  ← this file (brand system)
           torcal.css         ← page-specific layout
   ============================================================ */

/* ---------- FONTS ------------------------------------------------
   Guideline: "Bentley Light" for headlines/body, Arial as the
   web-safe fallback, headline tracking -15.
   The Bentley typeface is licensed — drop the real files into
   /assets/fonts and these @font-face rules pick them up
   automatically. Until then we fall back to Jost (a light,
   elegant humanist-geometric stand-in) → Arial.
   ---------------------------------------------------------------- */
@font-face{
  font-family:"Bentley Light";
  src:url("../assets/fonts/Bentley-Light.woff2") format("woff2"),
      url("../assets/fonts/Bentley-Light.woff")  format("woff");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bentley";
  src:url("../assets/fonts/Bentley-Regular.woff2") format("woff2"),
      url("../assets/fonts/Bentley-Regular.woff")  format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bentley";
  src:url("../assets/fonts/Bentley-Medium.woff2") format("woff2"),
      url("../assets/fonts/Bentley-Medium.woff")  format("woff");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* ---- Primary palette (Brand Book) ---- */
  --bentley-green:#183319;
  --heritage-white:#DCD8C0;
  --white:#FFFFFF;
  --black:#040404;

  /* ---- Digital variants (tints — hover/detail only) ---- */
  --teal:#5E715E;
  --satin-linen:#E8E5D5;
  --light-grey:#CDCDCD;
  --dark-grey:#585858;

  /* ---- System (validation states only) ---- */
  --success:#2E8643;
  --error:#C1472D;

  /* ---- Buttons (matched to bentleymotors.com) ---- */
  --btn-green:#394D45;
  --btn-green-hover:#2C3D37;

  /* ---- Derived cinematic neutrals ---- */
  --ink:#0A0B0A;          /* near-black section bg  */
  --ink-2:#111312;        /* raised dark surface    */
  --ink-line:rgba(220,216,192,.16);   /* hairline on dark (heritage tint) */
  --paper-line:rgba(4,4,4,.12);       /* hairline on light */
  --muted-on-dark:rgba(255,255,255,.62);
  --muted-on-light:#585858;

  /* ---- Type ---- */
  --font-display:"Bentley Light","Bentley","Jost",Arial,sans-serif;
  --font-body:"Bentley","Jost",Arial,Helvetica,sans-serif;
  --tracking-display:-.015em;   /* Brand Book: headline tracking -15 */
  --tracking-eyebrow:.28em;     /* wide-spaced uppercase labels */

  /* ---- Rhythm ---- */
  --section-y:clamp(5rem,10vw,9.5rem);
  --container-max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Bootstrap overrides ---- */
  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--black);
  --bs-body-bg:var(--white);
  --bs-emphasis-color:var(--black);
  --bs-link-color:var(--bentley-green);
  --bs-link-hover-color:var(--teal);
  --bs-border-color:var(--paper-line);
}

/* ---------- BASE ----------
   Scoped to .torcal-page so WordPress site header/footer are unaffected. */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
.torcal-page{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--black);
  background:var(--white);
  line-height:1.65;
  letter-spacing:.005em;
}

/* ---------- TYPE SCALE ---------- */
.torcal-page h1,.torcal-page h2,.torcal-page h3,.torcal-page h4,
.torcal-page .display-hero,.torcal-page .display-1b{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:var(--tracking-display);
  line-height:1.04;
  margin:0;
}
.torcal-page .display-hero{ font-size:clamp(3.4rem,12vw,9.5rem); line-height:.94; }
.torcal-page h1,.torcal-page .h1b{ font-size:clamp(2.6rem,6vw,4.6rem); }
.torcal-page h2,.torcal-page .h2b{ font-size:clamp(2rem,4.4vw,3.4rem); }
.torcal-page h3,.torcal-page .h3b{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.torcal-page h4,.torcal-page .h4b{ font-size:clamp(1.15rem,1.8vw,1.4rem); }

.torcal-page .lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; font-weight:300; }
.torcal-page p{ margin:0 0 1.15em; }
.torcal-page p:last-child{ margin-bottom:0; }

/* Eyebrow / kicker label — styled after bentleymotors.com (NOT all-caps) */
.eyebrow{
  display:inline-block;
  font-size:.82rem;
  font-weight:300;
  letter-spacing:.015em;
  text-transform:none;
  color:var(--teal);
  margin:0 0 1.15rem;
}
.eyebrow--ondark{ color:var(--heritage-white); opacity:.92; }
/* leading dash removed per request — class kept as a no-op for markup compatibility */
.eyebrow-line{ position:relative; padding-left:0; }
.eyebrow-line::before{ display:none; }

/* ---------- LAYOUT HELPERS ---------- */
.container-b{ max-width:var(--container-max); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.section{ padding-block:var(--section-y); }
.section--ink{ background:var(--ink); color:var(--white); }
.section--black{ background:var(--black); color:var(--white); }
.section--green{ background:var(--bentley-green); color:var(--heritage-white); }
.section--linen{ background:var(--satin-linen); color:var(--black); }
.section--paper{ background:var(--white); color:var(--black); }
.on-dark{ color:var(--white); }
.on-dark .lede,.on-dark p{ color:var(--muted-on-dark); }
.hairline{ height:1px; background:var(--paper-line); border:0; margin:0; }
.hairline--dark{ background:var(--ink-line); }

/* ---------- BUTTONS (Bentley outline system) ---------- */
.btn-b{
  /* SECONDARY by default — green outline, as on bentleymotors.com */
  --_fg:var(--btn-green); --_bd:var(--btn-green); --_bg:transparent; --_hbg:var(--btn-green); --_hfg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--font-body);
  font-size:.8rem; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  color:var(--_fg); background:var(--_bg);
  border:1px solid var(--_bd);
  padding:1rem 1.9rem; border-radius:0;
  cursor:pointer; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  white-space:nowrap;
}
.btn-b:hover,.btn-b:focus-visible{ background:var(--_hbg); color:var(--_hfg); border-color:var(--_hbg); }
/* MAIN — filled Bentley green */
.btn-b--green{ --_fg:#fff; --_bd:var(--btn-green); --_bg:var(--btn-green); --_hbg:var(--btn-green-hover); --_hfg:#fff; }
/* SECONDARY on dark imagery — white outline (Bentley over photography) */
.btn-b--ondark{ --_fg:#fff; --_bd:rgba(255,255,255,.6); --_bg:transparent; --_hbg:#fff; --_hfg:var(--black); }
.btn-b--linen{ --_fg:var(--btn-green); --_bd:var(--btn-green); --_bg:transparent; --_hbg:var(--btn-green); --_hfg:#fff; }
.btn-b--solid-light{ --_fg:var(--black); --_bd:var(--white); --_bg:var(--white); --_hbg:transparent; --_hfg:var(--white); }
.btn-b--block{ width:100%; }
.btn-b--sm{ padding:.75rem 1.4rem; font-size:.72rem; }

/* Text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:inherit; text-decoration:none; padding-bottom:.35rem;
  border-bottom:1px solid currentColor; transition:gap .35s var(--ease),opacity .35s var(--ease);
}
.link-arrow:hover{ gap:1em; opacity:.7; color:inherit; }
.link-arrow svg{ width:1em; height:1em; }

/* ---------- FORM CONTROLS (Brand Book form spec) ---------- */
.field{ margin-bottom:1.6rem; }
.field label{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-on-light); margin-bottom:.6rem;
}
.field .req{ color:var(--teal); }
.control{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--black);
  background:transparent; border:0; border-bottom:1px solid rgba(4,4,4,.28);
  padding:.65rem .1rem; border-radius:0; transition:border-color .3s var(--ease);
}
.control::placeholder{ color:rgba(4,4,4,.34); }
.control:focus{ outline:0; border-bottom-color:var(--bentley-green); box-shadow:0 1px 0 0 var(--bentley-green); }
select.control{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23585858' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .2rem center; padding-right:1.5rem; cursor:pointer; }

/* On dark surfaces */
.field--ondark label{ color:var(--muted-on-dark); }
.field--ondark .control{ color:var(--white); border-bottom-color:rgba(220,216,192,.35); }
.field--ondark .control::placeholder{ color:rgba(255,255,255,.34); }
.field--ondark .control:focus{ border-bottom-color:var(--heritage-white); box-shadow:0 1px 0 0 var(--heritage-white); }
.field--ondark select.control{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DCD8C0' stroke-width='1.2'/%3E%3C/svg%3E"); }
.field--ondark select.control option{ color:var(--black); }

/* Validation states — Brand Book System colours */
.field.is-invalid .control{ border-bottom-color:var(--error); box-shadow:0 1px 0 0 var(--error); }
.field.is-valid   .control{ border-bottom-color:var(--success); }
.field .err-msg{ display:none; margin-top:.5rem; font-size:.78rem; color:var(--error); letter-spacing:.02em; }
.field.is-invalid .err-msg{ display:block; }

/* Consent / checkbox */
.check{ display:flex; gap:.85rem; align-items:flex-start; font-size:.82rem; line-height:1.5; }
.check input{ appearance:none; flex:0 0 auto; width:1.05rem; height:1.05rem; margin-top:.2rem; border:1px solid rgba(220,216,192,.5); background:transparent; cursor:pointer; border-radius:0; transition:.25s var(--ease); }
.check input:checked{ background:var(--heritage-white); border-color:var(--heritage-white); }
.check input:checked::after{ content:"✓"; display:block; color:var(--black); font-size:.72rem; text-align:center; line-height:1rem; }
.check label{ color:var(--muted-on-dark); cursor:pointer; margin:0; letter-spacing:normal; text-transform:none; }

/* ---------- MOTION UTILITIES ----------
   Reveals are gated behind html.js (added by main.js) so that
   with JavaScript disabled ALL content stays fully visible. */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease),transform 1s var(--ease); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

::selection{ background:var(--bentley-green); color:var(--heritage-white); }