/*
 * KTO Optique — Shared base stylesheet
 * Universal styles every page uses. Linked via <link rel="stylesheet">
 * BEFORE the page's inline <style> block, so inline rules win for anything
 * the page customises locally.
 *
 * Goal: cut duplicated inline CSS across 50+ pages, give the browser a
 * single cacheable file (so navigations after the first hit are faster).
 *
 * IMPORTANT: only put rules here that are truly identical on every page.
 * Page-specific layout, hero sections, product grids etc. stay inline.
 */

/* === Box-sizing reset (every page already declares this inline) === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Brand color tokens === */
:root {
  --black: #0a0a0a;
  --white: #fafafa;
  --gray-50:  #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-400: #737373;
  --gray-500: #737373;
  --gray-600: #555;
  --gray-700: #404040;
  --gray-900: #1a1a1a;
  --kto-blue:      #2b8fd4;
  --kto-blue-dark: #1f6fa8;
  --gold:  #c9a961;
  --green: #16a34a;
  --red:   #c0392b;
  --amber: #d97706;
  --font-body:    'DM Sans', sans-serif;
  --font-head:    'Montserrat', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 110px;
}

/* === Body & link defaults === */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* === Accessibility: skip-link === */
.kto-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: #0a0a0a;
  color: #fff;
  padding: 10px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2px;
  z-index: 10000;
  letter-spacing: 1px;
}
.kto-skip-link:focus {
  left: 8px;
  outline: 2px solid #2b8fd4;
  outline-offset: 2px;
}

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

/* === Reduced-motion respect === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Print: avoid printing nav/footer/decorative bits when a customer
   prints an order or guide. Each page that wants more print rules can
   add them inline. === */
@media print {
  header, footer, .kto-skip-link, .pt-header, .pt-footer, .legal-header,
  .legal-footer, .pt-contact, .mut-cta { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: underline; }
}