/* ===========================================================================
   El Tarasco — brand skin of the Base theme (theme.json "extends": "base").
   Loaded AFTER base's theme.css (preview.php, config/theme-chain.php). Colours come
   from the tokens in theme.json / the palette in theme-settings.json; only the
   brand's type and a few touches live here. Titles are EFCO Brookshire, the face of the old site's menu headings
   (Paul 2026-10-22; Ephemera Fonts & Co., self-hosted from the old site — El Tarasco's web licence to be confirmed,
   OPEN_ISSUES). Small headings (special names, ribbons, card titles, the phone menu) are Cabin 700, crisp at phone
   sizes. The El Tarasco wordmark (header and footer) is Brookshire too. Body text stays the system face.
   =========================================================================== */
/* One weight only: declared for every weight, so a bold title uses it as drawn instead of a smeared fake bold. */
@font-face {
  font-family: 'EFCO Brookshire';
  src: url('fonts/EFCOBrookshireRegular.woff2') format('woff2'), url('fonts/EFCOBrookshireRegular.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --header-font-family: 'EFCO Brookshire', 'Cabin', Georgia, serif;
  --small-heading-font-family: 'Cabin', system-ui, sans-serif;
  --brand-font-family: 'EFCO Brookshire', 'Cabin', Georgia, serif;
}
/* Small or busy headings stay in Cabin: inside a special's card (its name, its ribbon, a no-photo card's big price),
   a Visit us card and the footer, the heading font itself is Cabin (the phone menu's big words are Brookshire) — so a section's own styles,
   printed after this file, follow it too. */
.hw-sp__card, .hw-visit__card, .base-footer { --header-font-family: var(--small-heading-font-family); }
/* The footer's name is the wordmark, in Brookshire like the header's (Paul: "also for the site title"). */
.base-footer__logo { --header-font-family: var(--brand-font-family); font-family: var(--brand-font-family); }

/* The phone menu like the footer (Paul 2026-10-22): the brand red with white words; the pictures keep their white tiles,
   the old site's look. Tokens only. */
.bp-mobilenav { background: var(--accent); }
.bp-mobilenav__close,
.bp-mobilenav__links a,
.bp-mobilenav__links a:hover { color: var(--accent-contrast); }
.bp-mobilenav__links a:hover .nav-label { text-decoration: underline; text-underline-offset: 4px; }
.bp-mobilenav__links a.has-ico { border-bottom-color: color-mix(in srgb, var(--accent-contrast) 30%, transparent); }

/* Brand wordmark + nav in the display face (white bar, red hover). */
.section-header .brand-title,
.section-header .store-logo {
  font-family: var(--brand-font-family);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0;
  color: var(--header-text);
}
.section-header .header-nav a {
  font-family: var(--header-font-family);
  text-transform: uppercase;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--header-text);
}
.section-header .header-nav a:hover { color: var(--accent); }
.section-header .header-nav a::after { background: var(--accent); }

/* The menu with its pictures (the old site's tiles, 2026-10-22): on a wide screen the menu stands alone, centred, with no
   name beside it (Paul: "remove the title from the header"; the banner below carries the name). A phone keeps the name
   beside the menu button, on one line. */
.section-header .store-logo { white-space: nowrap; }
@media (min-width: 861px) {
  .section-header .header-zone-left .logo { display: none; }
}

/* How far down the page you are (Paul 10-22: "show the scroll on long pages… so they know"): a red line along the bottom of
   the header fills as the page scrolls. CSS only (a scroll timeline); a browser without one simply shows no line. */
@supports (animation-timeline: scroll()) {
  .section-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation: et-scroll-progress linear both; animation-timeline: scroll(root block); }
  @keyframes et-scroll-progress { to { transform: scaleX(1); } }
}

/* A brochure site with no store: never show the cart / account chrome. */
.section-header .cart-btn,
.section-header .bp-account { display: none !important; }

/* Section titles in the display face (headings inside content are unaffected). */
.section-text-contract__header h2 { font-family: var(--header-font-family); }

/* Photos inside text sections: a rounded card with a soft shadow, like the old site. */
.section-text-contract__content img {
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  height: auto;
}