/*
Theme Name: Delta55 Fit
Theme URI: https://delta55fit.com
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk
Description: Lean custom theme for Delta55 Fit — code-registered ACF blocks, no page builder, no build step. Multilingual (WPML). Rebuilt from the original Elementor/Kadence site.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: delta55
Tags: custom, acf-blocks, multilingual
*/

/* ==========================================================================
   Design tokens — the ONLY place cross-block variables live (skill §8)
   ========================================================================== */
:root {
  /* Brand colours */
  --d55-primary:      #1252A6; /* deep blue — CTA band, headings on light */
  --d55-primary-dark: #0E4183;
  --d55-accent:       #2BB9D9; /* turquoise — buttons, eyebrows, prices, icons */
  --d55-accent-dark:  #1FA3C0; /* button hover */
  --d55-dark:         #212121; /* dark section bg */
  --d55-black:        #000000;
  --d55-ink:          #1A202C; /* strongest text */
  --d55-text:         #2D3748; /* body heading text */
  --d55-text-muted:   #4A5568;
  --d55-text-subtle:  #718096;
  --d55-light:        #F7FAFC; /* light section bg */
  --d55-light-alt:    #EDF2F7;
  --d55-white:        #FFFFFF;
  --d55-card-bg:      #FFFFFF;
  --d55-border:       #E2E8F0;

  /* Typography */
  --d55-font-display: 'Bebas Neue', 'Arial Narrow', 'Impact', sans-serif;
  --d55-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --d55-display-tracking: 0.02em;

  /* Geometry */
  --d55-radius:        3px;   /* near-square, industrial */
  --d55-radius-lg:     6px;
  --d55-content-max:   1200px;
  --d55-content-wide:  1360px;
  --d55-gutter:        clamp(20px, 5vw, 48px);
  --d55-section-y:     clamp(56px, 8vw, 104px);
  --d55-header-height: 88px;
  --d55-header-height-scrolled: 68px;

  /* Effects */
  --d55-shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --d55-shadow-md: 0 12px 30px rgba(17, 24, 39, 0.10);
  --d55-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d55-t: 0.45s;
}

/* ==========================================================================
   Base / reset-lite (the harness supplies a minimal reset; this is theme base)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--d55-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--d55-text-muted);
  background: var(--d55-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .d55-display {
  font-family: var(--d55-font-display);
  font-weight: 400;
  letter-spacing: var(--d55-display-tracking);
  line-height: 1.02;
  color: var(--d55-ink);
  text-transform: uppercase;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

p { margin: 0 0 1.1em; }
a { color: var(--d55-accent); text-decoration: none; transition: color 0.2s var(--d55-ease); }
a:hover { color: var(--d55-accent-dark); }
img { max-width: 100%; height: auto; display: block; }

/* Layout helpers */
.d55-container,
.d55-container--wide { width: 100%; margin-inline: auto; padding-inline: var(--d55-gutter); }
.d55-container { max-width: var(--d55-content-max); }
.d55-container--wide { max-width: var(--d55-content-wide); }
.d55-section { padding-block: var(--d55-section-y); }
.d55-section--dark  { background: var(--d55-dark);  color: #CBD5E0; }
.d55-section--black { background: var(--d55-black); color: #CBD5E0; }
.d55-section--light { background: var(--d55-light); }
.d55-section--dark h1, .d55-section--dark h2, .d55-section--dark h3,
.d55-section--black h1, .d55-section--black h2, .d55-section--black h3 { color: var(--d55-white); }

.d55-eyebrow {
  font-family: var(--d55-font-display);
  color: var(--d55-accent);
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.6em;
}

/* Shared button (also used by template-parts/button.php) */
.d55-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  font-family: var(--d55-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7em 1.7em 0.6em;
  border-radius: var(--d55-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--d55-ease), background-color 0.2s var(--d55-ease), color 0.2s var(--d55-ease), border-color 0.2s var(--d55-ease);
  will-change: transform;
}
.d55-btn--primary { background: var(--d55-accent); color: var(--d55-white); }
.d55-btn--primary:hover { background: var(--d55-accent-dark); color: var(--d55-white); transform: translateY(-2px); }
.d55-btn--ghost { background: transparent; color: var(--d55-white); border-color: rgba(255,255,255,0.85); }
.d55-btn--ghost:hover { background: var(--d55-white); color: var(--d55-ink); transform: translateY(-2px); }
.d55-btn--blue { background: var(--d55-primary); color: var(--d55-white); }
.d55-btn--blue:hover { background: var(--d55-primary-dark); color: var(--d55-white); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .d55-btn:hover { transform: none; }
}

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

/* Skip link (a11y) */
.d55-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--d55-accent); color: #fff; padding: 12px 20px;
}
.d55-skip-link:focus { left: 8px; top: 8px; }

/* Plain pages (legal / Gutenberg content) */
.d55-page__header { margin-bottom: 1.5em; border-bottom: 2px solid var(--d55-border); padding-bottom: 0.6em; }
.d55-prose { max-width: 800px; color: var(--d55-text-muted); }
.d55-prose h2, .d55-prose h3 { margin-top: 1.4em; color: var(--d55-text); }
.d55-prose a { text-decoration: underline; }
.d55-prose ul, .d55-prose ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.d55-prose li { margin-bottom: 0.5em; }
.d55-prose img { border-radius: var(--d55-radius); margin: 1.2em 0; }
.d55-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.d55-prose th, .d55-prose td { border: 1px solid var(--d55-border); padding: 10px 12px; text-align: left; }