/* ============================================================================
   Imperial Steaks - global.css
   GLOBAL DESIGN TOKENS, RESET, TYPOGRAPHY, LAYOUT PRIMITIVES
   ----------------------------------------------------------------------------
   Every value in :root below is meant to be re-entered once in
   Elementor > Site Settings (Global Colors / Global Fonts / Layout).
   See docs/ELEMENTOR_MIGRATION.md for the token -> Elementor mapping table.
   ========================================================================== */

:root {
  /* --- Global Colours: three black variants for client review ------------- */
  --is-black-onyx:      #0F0F10;  /* Variant 1 - Onyx          (page base)    */
  --is-black-matte:     #171717;  /* Variant 2 - Matte black   (alt sections) */
  --is-black-charcoal:  #242424;  /* Variant 3 - Deep charcoal (cards)        */

  /* --- Global Colours: red accent (final shade pending approval) ---------- */
  --is-red:             #B71C1C;  /* Proposed primary red                     */
  --is-red-dark:        #8E1515;  /* Hover / pressed                          */
  --is-red-bright:      #D32F2F;  /* Small highlights, focus rings            */

  /* --- Global Colours: neutrals ------------------------------------------- */
  --is-white:           #FFFFFF;
  --is-off-white:       #F2F2F2;
  --is-grey-text:       #C9C9C9;  /* Body copy on dark backgrounds            */
  --is-grey-muted:      #8C8C8C;  /* Matches the original site's mid grey     */
  --is-hairline:        rgba(255, 255, 255, 0.14);

  /* --- Global Fonts ------------------------------------------------------- */
  --is-font-body:      "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --is-font-display:   "Bodoni Moda", "Times New Roman", Georgia, serif;
  --is-font-condensed: "Oswald", "Arial Narrow", Haettenschweiler, sans-serif;
  --is-font-slab:      "Aleo", "Roboto Slab", Georgia, serif;

  /* --- Type scale (desktop) ----------------------------------------------- */
  --is-size-hero-kicker:  50px;   /* Hero line 1  - Oswald 300                */
  --is-size-hero-lead:    90px;   /* Hero line 2  - Aleo 800                  */
  --is-size-values:       40px;   /* value. / integrity. / service.           */
  --is-size-h1:           44px;
  --is-size-h2:           30px;
  --is-size-h3:           20px;
  --is-size-body:         16px;
  --is-size-small:        14px;
  --is-size-eyebrow:      13px;

  /* --- Spacing ------------------------------------------------------------ */
  --is-space-xs:   8px;
  --is-space-sm:  16px;
  --is-space-md:  24px;
  --is-space-lg:  40px;
  --is-space-xl:  56px;
  --is-section-y: 80px;           /* Vertical section padding (desktop)       */
  --is-gap-grid:  30px;

  /* --- Layout ------------------------------------------------------------- */
  --is-container:        1140px;  /* Elementor default content width          */
  --is-container-narrow:  900px;

  /* --- Radii / borders / shadow ------------------------------------------- */
  --is-radius-card:  25px;        /* Category cards on the original site      */
  --is-radius-media: 20px;        /* Product imagery on the original site     */
  --is-radius-pill:  20px;        /* Buttons on the original site             */
  --is-radius-sm:     6px;
  --is-border-width:  1px;
  --is-shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* --- Motion (kept deliberately minimal) --------------------------------- */
  --is-transition: 0.3s ease;
}

/* ============================================================================
   RESET / BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--is-black-onyx);
  color: var(--is-grey-text);
  font-family: var(--is-font-body);
  font-size: var(--is-size-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--is-white);
  text-decoration: none;
  transition: color var(--is-transition);
}

a:hover,
a:focus-visible { color: var(--is-red-bright); }

/* Visible, consistent keyboard focus on every interactive element. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--is-red-bright);
  outline-offset: 3px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Keep anchored sections clear of the sticky header when linked to directly. */
section[id],
[id]:target { scroll-margin-top: 100px; }

p { margin: 0 0 var(--is-space-sm); }
p:last-child { margin-bottom: 0; }

/* ============================================================================
   HEADINGS - mapped to Elementor Global Fonts
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--is-space-sm);
  color: var(--is-white);
  font-family: var(--is-font-body);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: var(--is-size-h1); }
h2 { font-size: var(--is-size-h2); text-transform: uppercase; }
h3 { font-size: var(--is-size-h3); }

/* ============================================================================
   LAYOUT PRIMITIVES
   Flexbox / CSS grid only - no absolute positioning - so each wrapper maps
   1:1 onto an Elementor Container.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--is-container);
  margin-inline: auto;
  padding-inline: var(--is-space-md);
}

.container--narrow { max-width: var(--is-container-narrow); }

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

/* Section background variants: the three black swatches plus the red band. */
.section--onyx     { background-color: var(--is-black-onyx); }
.section--matte    { background-color: var(--is-black-matte); }
.section--charcoal { background-color: var(--is-black-charcoal); }
.section--red      { background-color: var(--is-red); }

.section__head {
  margin-bottom: var(--is-space-lg);
  text-align: center;
}

.section__title {
  margin-bottom: var(--is-space-xs);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section__intro {
  max-width: 760px;
  margin-inline: auto;
}

/* Two-column split (image + copy). Collapses to one column on tablet. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-space-xl);
  align-items: center;
}

.split__col { flex: 1 1 320px; min-width: 0; }

.split--reverse { flex-direction: row-reverse; }

/* Equal-column grids. */
.grid { display: grid; gap: var(--is-gap-grid); }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Utilities - deliberately few and flat. */
.text-center  { text-align: center; }
.text-white   { color: var(--is-white); }
.text-justify { text-align: justify; }
.is-uppercase { text-transform: uppercase; }

/* Spacing utilities - used instead of inline styles so the values stay
   token-driven and map onto Elementor's margin controls. */
.u-mt-sm { margin-top: var(--is-space-sm); }
.u-mt-md { margin-top: var(--is-space-md); }
.u-mt-lg { margin-top: var(--is-space-lg); }
.u-mt-xl { margin-top: var(--is-space-xl); }

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--is-space-xs) var(--is-space-sm);
  background-color: var(--is-red);
  color: var(--is-white);
}

.skip-link:focus {
  left: var(--is-space-sm);
  top: var(--is-space-sm);
  color: var(--is-white);
}

/* ============================================================================
   RESPONSIVE - breakpoints match Elementor defaults (1024px / 767px)
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --is-section-y: 56px;
    --is-size-hero-kicker: 34px;
    --is-size-hero-lead: 60px;
    --is-size-values: 28px;
    --is-size-h1: 34px;
    --is-size-h2: 24px;
  }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .split { gap: var(--is-space-lg); }
}

@media (max-width: 767px) {
  :root {
    --is-section-y: 44px;
    --is-size-hero-kicker: 25px;
    --is-size-hero-lead: 43px;
    --is-size-values: 20px;
    --is-size-h1: 28px;
    --is-size-h2: 20px;
    --is-size-body: 15px;
    --is-gap-grid: 20px;
  }

  body { line-height: 1.65; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .split,
  .split--reverse { flex-direction: column; }

  .text-justify { text-align: left; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html,
  .imperial-products__scroller { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}