/*
  Global stylesheet — single source of truth for the site.

  Structure:
    1) Reset and base
    2) Design tokens (:root) — palette and typography are owned by the
       `brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
       tokens are owned here.
    3) Layout primitives
    4) Components (site-wide reusable primitives only — page-specific
       styles live with their page builds, not here)
    5) Utilities
*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Passion+One:wght@700&display=swap");

/* ===== 1) Reset and base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@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;
  }
}

/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
   `build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
   transitions are owned here. */
:root {
  /* Palette (brand-guidelines) */
  --color-bg: #f7f5f0;
  --color-surface: #ffffff;
  --color-surface-soft: #f0ece4;
  --color-text: #1c1a17;
  --color-text-soft: #5b564e;
  --color-primary: #d62828;
  --color-primary-dark: #a91f1f;
  --color-primary-light: #f6d5d5;
  --color-accent: #1b3a6b;
  --color-focus: #d62828;

  /* Typography (brand-guidelines) */
  --font-heading: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Layout */
  --container-max: 72rem;

  /* Aesthetic dials — bold / flat / Americana. Truckers Dating reads confident and
     direct, so the shape language is squared-off, high-contrast, minimal shadow —
     not soft/rounded. Logo presence is "Big & commanding" per the design-system stage:
     the wordmark + flag mark is a chunky, full-colour lockup and the brand voice is
     bold/confident, so it gets a generous, prominent header treatment. The logo
     requires a light background (see brand.md), so the header band stays neutral
     rather than brand-coloured. */
  --logo-height: 3.75rem;    /* mobile — big & commanding, one step up from prominent */
  --logo-max-width: 26rem;
  --header-bg: var(--color-surface);   /* logo needs a light bg — keep the header neutral */
  --header-fg: var(--color-text);
  --btn-radius: var(--radius-sm);      /* sharp-cornered buttons, not pills — bold/flat */
  --card-radius: var(--radius-sm);
  --card-shadow: none;                 /* flat, no drop-shadow softness */
  --card-border: 2px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  --chip-radius: var(--radius-sm);
  --easing-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 480ms var(--easing-smooth);
}

/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
  :root { --logo-height: 5.5rem; }
}

/* Bold/flat heading treatment — Oswald reads best a touch condensed and assertive. */
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ===== 3) Layout primitives ===== */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.section {
  padding: var(--space-10) 0;
}

.grid {
  display: grid;
  gap: var(--space-4);
}

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

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 4) Components ===== */

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The header logo is an <img src="{{logo.src}}"> whose REAL file is injected by the CMS
   at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
   (a generous --logo-height), so every logo renders at a consistent, prominent height
   regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
   only clamps a very wide logo on small screens (it then scales down proportionally, never
   distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
  height: auto;
  width: auto;
  max-height: var(--logo-height);
  max-width: min(var(--logo-max-width, 22rem), 55vw);
  object-fit: contain;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to
   <ul class="canvas-navigation-menu"> / <ul class="canvas-footer-menu"> with
   <li><a> children. Style the generated classes directly. */

.canvas-navigation-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-navigation-menu > li {
  margin: 0;
}

.canvas-navigation-menu a {
  color: var(--header-fg);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.canvas-navigation-menu a:hover,
.canvas-navigation-menu a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* Footers can carry many links. With 8+ items, flow them into responsive columns
   (auto-fill grid) instead of one long, sprawling wrapping row — multi-column on wide
   screens, collapsing toward a single column on mobile. Short footer menus keep the
   inline row above. Where :has() is unsupported it harmlessly stays the flex row. */
.canvas-footer-menu:has(> li:nth-child(8)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  align-items: start;
  gap: var(--space-2) var(--space-5);
}

.canvas-footer-menu > li {
  margin: 0;
}

.canvas-footer-menu a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.canvas-footer-menu a:hover,
.canvas-footer-menu a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Native primary nav — checkbox-only mobile drawer, no JavaScript.
   Truckers Dating uses native (hand-coded) menus rather than the CMS {{menu.*}}
   placeholders (see notes/decisions.md). To keep every page importable on a bulk
   ZIP upload (custom <script> in the body gets a page rejected), the mobile
   drawer toggle is done with a checkbox + label instead of a JS click handler. */
.nav-toggle-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nav-toggle-label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  cursor: pointer;
}
.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--header-fg);
  display: block;
}
.site-nav .nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav .nav-list a { color: var(--header-fg); font-weight: 600; }
.site-nav .nav-list a:hover { color: var(--color-primary); }

@media (max-width: 767px) {
  .nav-toggle-label { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 20rem);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    padding: var(--space-8) var(--space-6);
    z-index: 30;
  }
  .site-nav .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .nav-toggle-checkbox:checked ~ .site-nav {
    transform: translateX(0);
  }
}
@media (min-width: 768px) {
  .nav-toggle-label { display: none; }
}

/* Motion — Subtle level: entrance fade+rise on scroll, no JS required beyond a
   one-line IntersectionObserver would normally add scroll-triggering, but this
   brand keeps pages JS-free (native-menu import safety), so entrances play once
   on load via CSS animation instead of on-scroll reveal. */
@keyframes revealRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: revealRise var(--transition-slow) both;
}
.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-soft);
  opacity: 0.6;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  min-height: 2.75rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

/* Flat/bold shape language: hover feedback moves with colour, not lift. */
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.96); }
.btn:focus-visible { outline-offset: 3px; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 75%, #fff);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 65%, transparent);
}

/* Header CTAs follow the header foreground so they stay legible on a coloured band
   (no-op on the neutral default where --header-fg == --color-text). */
.site-header .btn-ghost {
  color: var(--header-fg);
  border-color: color-mix(in srgb, var(--header-fg) 20%, transparent);
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.55rem 1rem;
  font-size: 0.87rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.04rem;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: var(--space-5);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
}

.card-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* Cards with a photo strip at the top, tinted with a brand-colored gradient. */
.card.card-media-top {
  padding: 0;
  overflow: hidden;
}
.card-media {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(214, 40, 40, 0.55) 0%,
    rgba(28, 26, 23, 0.25) 55%,
    rgba(28, 26, 23, 0) 100%
  );
}
.card-media-top .card-body {
  padding: var(--space-5);
}

/* Explore showcase — articles / cities / comparisons teaser below the fold */
.explore-showcase .card-title { font-size: 1.15rem; }
.explore-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.explore-list li {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-surface-soft, #f0ece4);
}
.explore-list li:last-child { border-bottom: none; padding-bottom: 0; }
.explore-list a { font-weight: 600; }
.explore-list .explore-teaser {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.explore-see-all { font-weight: 700; }

/* Chip — pill-shaped tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--chip-radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Site footer */
.site-footer {
  padding: var(--space-10) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Member profile */
.profile-head {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.profile-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.profile-id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.profile-headline {
  font-size: 1.15rem;
  font-weight: 600;
}
.profile-bio {
  color: var(--color-text-soft);
  max-width: 60ch;
}
.profile-interests {
  margin-top: var(--space-3);
}

/* Homepage-specific patterns (hero-with-photo, lifestyle split, CTA band) */
.hero-section { padding-top: var(--space-12); }
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.hero-subhead {
  color: var(--color-text-soft);
  font-size: 1.1rem;
  max-width: 46ch;
}
.hero-media img,
.lifestyle-media img {
  border-radius: var(--card-radius);
  border: var(--card-border);
  object-fit: cover;
  width: 100%;
  aspect-ratio: 3 / 2;
}

/* Full-bleed hero banner — large photo with overlaid headline, the classic
   dating-site landing treatment. Photo fills the whole hero band; text sits
   in a dark gradient overlay so it stays readable over any part of the image. */
.hero-banner {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Mirrored so the subject reads on the right — the overlay copy sits on
     the left, over the truck's grille rather than over her. */
  transform: scaleX(-1);
}
.hero-banner-overlay {
  position: relative;
  width: 100%;
  padding: var(--space-12) 0 var(--space-10);
  /* No full-width band — the scrim lives on .hero-banner-content only, sized
     to the text block itself, so the rest of the photo stays untouched. */
}
.hero-banner-content {
  max-width: 30rem;
  margin-inline: 0;
  display: inline-block;
  width: fit-content;
  padding: 0.75rem 3.5rem 0.75rem 1.5rem;
  background: linear-gradient(to right, rgba(10, 8, 6, 0.6) 0%, rgba(10, 8, 6, 0.5) 65%, transparent 100%);
}
.hero-banner-content h1 {
  color: #fff;
  font-family: "Passion One", "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(2rem, 4.8vw, 3.3rem);
  max-width: 20ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.hero-banner-content .hero-subhead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 46ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hero-banner-content .chip {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

@media (min-width: 900px) {
  .hero-banner { min-height: 90vh; }
  /* Shift the text/button block right, off the empty background at the far
     left edge and onto the truck's grille, where the mirrored photo has
     enough dark, busy detail behind it for contrast. */
  .hero-banner-content { padding-left: clamp(3rem, 12vw, 10rem); }
}

/* On pages with the full-bleed hero, the header row switches out of the
   centered .container gutter and onto the same true-left-edge frame the
   hero text uses, with matching padding, so the logo lines up with the
   hero copy instead of sitting wherever the centered container happened
   to land at that viewport width. */
body:has(.hero-banner) .site-header-row {
  margin-inline: 0;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 900px) {
  body:has(.hero-banner) .site-header-row { padding-left: clamp(3rem, 12vw, 10rem); }
}

/* Mobile / tablet — cover crop tightens around the subject regardless of
   viewport width, so the text column drops the left-side constraint (there's
   no room to sit beside her) and instead sits full-width at the bottom on a
   fuller, taller gradient for reliable contrast over a busier crop. */
@media (max-width: 640px) {
  .hero-banner { min-height: 78vh; align-items: flex-end; }
  .hero-banner-img { object-position: center 22%; }
  .hero-banner-overlay {
    padding: var(--space-8) 0 var(--space-8);
  }
  .hero-banner-content {
    max-width: 88%;
    padding: var(--space-4, 1.25rem) 2rem var(--space-4, 1.25rem) var(--space-4, 1.25rem);
    background: linear-gradient(to right, rgba(10, 8, 6, 0.65) 0%, rgba(10, 8, 6, 0.5) 70%, transparent 100%);
  }
  .hero-banner-content h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); max-width: 100%; }
  .hero-banner-content .hero-subhead { max-width: 100%; font-size: 1rem; }
}
.lifestyle-section { background: var(--color-surface-soft); }
.lifestyle-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.cta-section {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--card-radius);
}
.cta-section .muted { color: color-mix(in srgb, #fff 80%, transparent); }
.cta-section .btn-primary { background: #fff; color: var(--color-primary); }
.cta-section .btn-primary:hover { filter: none; background: var(--color-bg); }
.disclaimer-text {
  margin-top: var(--space-6);
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; }
  .lifestyle-grid { grid-template-columns: 1fr 1.1fr; }
  .lifestyle-grid .lifestyle-media { order: 2; }
  .lifestyle-grid .lifestyle-copy { order: 1; }
}

/* ===== 5) Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

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