/* ==========================================================================
   Oasis Water — site stylesheet
   --------------------------------------------------------------------------
   1. Tokens      — the Modernist design system, retuned to the Oasis brand
   2. Base        — element defaults
   3. Components  — buttons, nav, forms, cards, tags, tables
   4. Chrome      — top bar, sticky nav, mobile menu
   5. Interaction — hover/motion states the prototype held in style-hover
   6. Responsive  — stacking rules for tablet and phone
   7. Utilities   — accessibility helpers
   ========================================================================== */

/* 0. Type — Archivo, self-hosted so no render-blocking third-party request.
   Variable font, SIL OFL 1.1; see assets/fonts/OFL.txt. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens ------------------------------------------------------------- */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Brand: #029cce cyan for action, #1e2c69 navy for the dark grounds. */
  --color-accent: #029cce;
  --color-accent-2: #1e2c69;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #3a4784;
  --color-neutral-800: #28356f;
  --color-neutral-900: #1e2c69;

  --color-accent-100: #eaf7fc;
  --color-accent-200: #cbecf7;
  --color-accent-300: #9adcf0;
  --color-accent-400: #4fb9e2;
  --color-accent-500: #1e88bf;
  --color-accent-600: #127aac;
  --color-accent-700: #12588a;
  --color-accent-800: #0d3f63;
  --color-accent-900: #0a2c45;

  --color-accent-2-100: #eceef6;
  --color-accent-2-200: #cfd4e8;
  --color-accent-2-300: #a8b1d3;
  --color-accent-2-400: #7481b4;
  --color-accent-2-500: #4c5a95;
  --color-accent-2-600: #34427f;
  --color-accent-2-700: #28356f;
  --color-accent-2-800: #1e2c69;
  --color-accent-2-900: #151f4a;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* 2. Base --------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px;
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* 3. Components --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * 0.85) var(--space-3);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }

/* 4. Chrome ------------------------------------------------------------- */

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
.nav a.btn-primary:hover, .nav a.btn-primary[aria-current='page'] { color: var(--color-bg); }

.nav-links { display: flex; align-items: center; gap: 22px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.mobile-menu { display: none; overflow: hidden; }
.mobile-menu a[aria-current='page'] { color: var(--color-accent); }

/* 5. Interaction -------------------------------------------------------- */

/* The prototype expressed hover states as a style-hover attribute on each
   element. Each one becomes a class here; the element keeps its inline base
   styles, so only the hover delta lives in CSS. */

/* Photo hover-zoom (the transition is inline on the image). */
.zoom-img:hover, .zoom-img:focus-visible { transform: scale(1.05); }
.zoom-img-sm:hover, .zoom-img-sm:focus-visible { transform: scale(1.04); }
a:hover .zoom-img { transform: scale(1.05); }
a:hover .zoom-img-sm { transform: scale(1.04); }

/* Slider arrows. */
.slider-arrow-hover:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* Outlined button on a dark ground. */
.btn-outline-dark-hover:hover { border-color: var(--color-accent); color: var(--color-accent-400); }

/* Square social/share icon buttons, dark and light grounds alike. */
.social-hover:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }

/* Footer and utility links. */
.link-hover-accent:hover { color: var(--color-accent-400); }

/* Hero slider indicators. */
.slider-dot {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: .05em;
  color: color-mix(in srgb, #ffffff 55%, transparent);
  display: flex; flex-direction: column; gap: 7px;
}
.slider-dot[aria-current='true'] { color: #fff; }
.slider-dot .bar {
  width: 34px; height: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.slider-dot[aria-current='true'] .bar { transform: scaleX(1); }

/* 6. Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.open { display: block; }
}

@media (max-width: 760px) {
  /* Stacked action cards drop their side rules and gain a top rule. */
  .action-cards > div {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid var(--color-divider);
    padding-top: 22px !important;
  }
}

@media (max-width: 640px) {
  .topbar-inner { justify-content: center; text-align: center; row-gap: 6px; }
  .topbar-social { margin-left: 0 !important; width: 100%; justify-content: center; }
  .topbar-follow { display: none !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 600px) {
  .welcome-badge { left: 0 !important; bottom: 20px !important; padding: 14px 16px !important; }
}

/* 7. Utilities ---------------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #fff;
  padding: 12px 20px; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.article-body p {
  font-size: 17px; line-height: 1.75; margin: 0 0 22px;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.article-body h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin: 40px 0 16px; }

/* 8. Optional: WCAG AA contrast pass ------------------------------------
   The design as approved has a handful of text/background pairs below the
   WCAG 2.1 AA threshold. Fixing them means nudging the brand colours, so the
   overrides are parked here rather than applied. Measured ratios are noted;
   AA wants 4.5:1 for body text and 3:1 for text 24px+ or 19px+ bold.
   To adopt them, delete the opening and closing comment markers below.

:root {
  --color-accent: #127aac;      | white on #029cce is 3.16:1, on #127aac 4.77:1
  --color-accent-700: #12588a;  | accent text on the page ground: 6.74:1
  --color-neutral-500: #bab6b6; | small type on the navy bar: 4.49:1 -> 6.46:1
}
a { color: var(--color-accent-700); }
[style*="var(--color-text) 55%"] { color: color-mix(in srgb, var(--color-text) 70%, transparent) !important; }

*/

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}