/*
Theme Name: Fuel Society
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Lean custom theme for Fuel Society — code-registered ACF blocks, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: fuelsociety
*/

/* ==========================================================================
   Design tokens — the ONLY place cross-block values live.
   Anything used by more than one block belongs here. Anything used by exactly
   one block belongs in that block's own style.css.
   ========================================================================== */

:root {
  /* Brand — extracted from the static build's HSL tokens
     (legacy-static/client/src/index.css :root). */
  --fuelsociety-brand:        #A66B30;  /* bronze/caramel — was --primary   30 55% 42% */
  --fuelsociety-brand-dark:   #322115;  /* dark espresso  — was --secondary 25 40% 14% */
  --fuelsociety-accent:       #CB994D;  /* warm gold      — was --accent    36 55% 55% */

  /* Surfaces.
     NEVER set a section background to #fff — leave sections transparent so
     they inherit --fuelsociety-bg, and fill --fuelsociety-card-bg on inner cards. */
  --fuelsociety-bg:           #F5F3EF;  /* warm off-white — was --background 35 25% 95% */
  --fuelsociety-card-bg:      #F9F8F6;
  --fuelsociety-border:       #D8D1CA;
  --fuelsociety-muted-bg:     #E6E1DB;  /* the menu "Extras" panel */

  /* Text */
  --fuelsociety-text:         #291D14;  /* near-black espresso */
  --fuelsociety-text-muted:   #817065;
  --fuelsociety-text-invert:  #ECE7DF;

  /* Type */
  --fuelsociety-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuelsociety-font-heading: 'Oswald', var(--fuelsociety-font);

  /* Layout */
  --fuelsociety-content-max:  1200px;
  --fuelsociety-content-narrow: 896px;   /* the menu page runs max-w-4xl */
  --fuelsociety-gutter:       24px;
  --fuelsociety-section-y:    clamp(48px, 7vw, 96px);
  --fuelsociety-radius:       6px;
  --fuelsociety-radius-lg:    12px;
  --fuelsociety-header-height: 80px;     /* the live nav is h-20 */

  /* Motion */
  --fuelsociety-ease:         cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Fonts — self-hosted variable woff2 (latin). Both families ship one file
   covering every weight, so this is 70KB total and no third-party connection.
   The static build loaded them from Google Fonts TWICE (a <link> in the HTML
   and a render-blocking @import at the top of the CSS).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('assets/fonts/oswald-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fuelsociety-bg);
  color: var(--fuelsociety-text);
  font-family: var(--fuelsociety-font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuelsociety-font-heading);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem);  letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: .01em; }

/* Oswald beyond the headings.
   The static build used a `font-display` Tailwind class 27 times but never
   registered `display` in tailwind.config.ts, so it compiled to nothing and
   every button, price and wordmark silently rendered in Inter. This is the
   intended treatment, recorded in legacy-static/client/requirements.md. */
.fuelsociety-display,
.fuelsociety-btn,
.fuelsociety-header__wordmark,
.fuelsociety-footer__name,
.fuelsociety-footer__coltitle {
  font-family: var(--fuelsociety-font-heading);
  font-weight: 700;
}

/* Uppercase is a SEPARATE decision from the typeface, and the original applied
   it selectively — `font-display uppercase tracking-widest` on the Follow Us
   button and the form submit, but plain `font-display` on menu item names and
   prices, and neither on the hero buttons. Matching that rather than shouting
   everything. */
.fuelsociety-header__cta,
.fuelsociety-footer__coltitle,
.fuelsociety-display--caps {
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* The original hardcoded these two as "FUEL SOCIETY" in the markup rather than
   uppercasing in CSS. Same result, but done here so the text stays sentence
   case for screen readers and the site title option. */
.fuelsociety-header__wordmark,
.fuelsociety-footer__name {
  text-transform: uppercase;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Shared layout primitives — used by chrome AND blocks.
   -------------------------------------------------------------------------- */

.fuelsociety-wrap {
  width: 100%;
  max-width: var(--fuelsociety-content-max);
  margin-inline: auto;
  padding-inline: var(--fuelsociety-gutter);
}

.fuelsociety-section { padding-block: var(--fuelsociety-section-y); }

.fuelsociety-section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.fuelsociety-section__head--center { margin-inline: auto; text-align: center; }

.fuelsociety-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fuelsociety-accent);
  margin-bottom: .75em;
}

.fuelsociety-lede { font-size: 1.1rem; color: var(--fuelsociety-text-muted); }

/* Buttons */
.fuelsociety-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--fuelsociety-radius);
  background: var(--fuelsociety-brand);
  color: var(--fuelsociety-text-invert);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--fuelsociety-ease), transform .25s var(--fuelsociety-ease);
}
.fuelsociety-btn:hover { background: var(--fuelsociety-brand-dark); transform: translateY(-1px); }

.fuelsociety-btn--ghost {
  background: transparent;
  color: var(--fuelsociety-text);
  border-color: var(--fuelsociety-border);
}
.fuelsociety-btn--ghost:hover { background: var(--fuelsociety-card-bg); }

/* Outlined accent — the hero "Find Us" and "View Menu" buttons. */
.fuelsociety-btn--outline {
  background: transparent;
  color: var(--fuelsociety-accent);
  border-color: color-mix(in srgb, var(--fuelsociety-accent) 60%, transparent);
}
.fuelsociety-btn--outline:hover {
  background: color-mix(in srgb, var(--fuelsociety-accent) 12%, transparent);
  color: var(--fuelsociety-accent);
}

/* Solid dark — the header "Follow Us" pill. */
.fuelsociety-btn--dark {
  background: var(--fuelsociety-text);
  color: var(--fuelsociety-bg);
  letter-spacing: .1em;
  font-size: .8rem;
}
.fuelsociety-btn--dark:hover { background: var(--fuelsociety-brand-dark); }

/* Cards — the ONLY place --fuelsociety-card-bg should appear. */
.fuelsociety-card {
  background: var(--fuelsociety-card-bg);
  border: 1px solid var(--fuelsociety-border);
  border-radius: var(--fuelsociety-radius);
  padding: clamp(20px, 2.5vw, 32px);
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* WP core alignment classes */
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--fuelsociety-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }


/* --------------------------------------------------------------------------
   Bands — sections that break out of the page background.
   -------------------------------------------------------------------------- */

.fuelsociety-band--espresso {
  background: var(--fuelsociety-brand-dark);
  color: var(--fuelsociety-text-invert);
}
.fuelsociety-band--ink {
  background: var(--fuelsociety-text);
  color: var(--fuelsociety-bg);
}
.fuelsociety-band--espresso .fuelsociety-lede,
.fuelsociety-band--ink .fuelsociety-lede {
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.fuelsociety-wrap--narrow { max-width: var(--fuelsociety-content-narrow); }

/* --------------------------------------------------------------------------
   Find Us — the map/address/hours column beside the form card.

   Blocks render flat (page.php adds no wrapper), so the two columns are made
   by turning <main> into a grid on this page only. The page-hero spans both.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .page-location .fuelsociety-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: start;
    width: min(var(--fuelsociety-content-max), 100%);
    margin-inline: auto;
    padding-inline: var(--fuelsociety-gutter);
    padding-bottom: var(--fuelsociety-section-y);
  }

  /* The title band breaks out of the grid and out of the gutter. */
  .page-location .fuelsociety-main > .fuelsociety-page-hero {
    grid-column: 1 / -1;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* No margin-bottom — the grid's 64px row-gap already provides it, and the
       two would stack to 128px against the original's 64. */
  }

  /* Strip the page gutter from the two columns — the main grid already
     provides it. Scoped to the find-us wrap only: the contact block's wrap IS
     the white card, so zeroing its padding-inline collapsed the card's own
     side padding and the fields ran edge to edge. */
  .page-location .fuelsociety-main > .fuelsociety-findus > .fuelsociety-wrap {
    padding-inline: 0;
    max-width: none;
  }
  .page-location .fuelsociety-main > .fuelsociety-contact > .fuelsociety-wrap {
    max-width: none;
  }
}

/* Below the breakpoint the blocks simply stack, so the form needs its own
   breathing room back. */
.page-location .fuelsociety-findus { padding-block: var(--fuelsociety-section-y) 0; }
.page-location .fuelsociety-contact { padding-block: 48px var(--fuelsociety-section-y); }

@media (min-width: 1024px) {
  .page-location .fuelsociety-findus,
  .page-location .fuelsociety-contact { padding-block: 0; }
}

/* --------------------------------------------------------------------------
   Focus visibility.
   The burger had no focus style at all — a keyboard user could not see where
   they were on the primary mobile control. :focus-visible so a mouse click
   does not draw a ring, but Tab always does.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fuelsociety-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* On the espresso and ink bands the brand bronze is too close to the
   background to read as a ring — use the warm off-white instead. */
.fuelsociety-band--espresso :focus-visible,
.fuelsociety-hero :focus-visible,
.fuelsociety-page-hero :focus-visible,
.fuelsociety-cta.is-espresso :focus-visible,
.fuelsociety-cta.is-ink :focus-visible,
.fuelsociety-footer :focus-visible {
  outline-color: var(--fuelsociety-text-invert);
}