/*
Theme: Trunks Trailer Service – Site Styles
Version: 1.1.0
*/

/* ================================
   Design tokens
================================ */
:root{
  --brand: #0d3b66;        /* primary blue */
  --accent: #2ec4b6;       /* teal green */
  --ink: #0f172a;          /* near-black */
  --muted: #475569;        /* slate */
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --border: #e2e8f0;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(2,8,23,0.08);
  --container: 1100px;
}

/* ================================
   Base / Reset
================================ */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

.container{
  width:min(100%, var(--container));
  margin-inline:auto;
  padding: clamp(16px, 2vw, 24px);
}

/* Type helpers */
.h1{ font-size:clamp(2rem, 2.8rem, 4vw); line-height:1.2; margin:0 0 .5rem }
.h2{ font-size:clamp(1.5rem, 2rem, 3vw); line-height:1.25; margin:0 0 .75rem }
.h3{ font-size:1.25rem }
.h4{ font-size:1.125rem }
.lead{ font-size:clamp(1rem, 1.125rem + .2vw, 1.25rem) }

.section{ padding: clamp(32px, 5vw, 72px) 0 }
.section.alt{ background: var(--bg-alt) }

.stack{ display:flex; flex-direction:column }
.stack-row{ display:flex; flex-wrap:wrap; align-items:center }
.gap-sm{ gap:.75rem }

.grid-2{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px, 4vw, 40px);
}
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr } }

/* ================================
   Header / Navigation
================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border)
}
.header .nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.5rem;
}
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink) }
.brand img{ width:28px; height:28px; border-radius:6px }
.brand span{ letter-spacing:.2px }

/* Desktop menu */
.menu{ display:flex; align-items:center; gap: clamp(.5rem, 2vw, 1rem) }
.menu a{
  padding:.5rem .75rem; border-radius:8px; color:var(--ink);
}
.menu a.active, .menu a:hover{
  background: var(--bg-alt); text-decoration:none;
}

/* Nav CTA should be white text */
.menu a.cta{
  color:#fff;
  background: var(--brand);
  border:1px solid transparent;
}
.menu a.cta:hover{
  color:#fff; text-decoration:none; filter: brightness(.95);
}

/* Hamburger */
.hamburger-btn{
  display:none; background:none; border:none; padding:.5rem; border-radius:8px; cursor:pointer;
}
.hamburger-btn .hamburger{
  position:relative; display:block; width:26px; height:2px; background:var(--ink); border-radius:2px;
}
.hamburger-btn .hamburger::before,
.hamburger-btn .hamburger::after{
  content:""; position:absolute; left:0; width:26px; height:2px; background:var(--ink); border-radius:2px;
}
.hamburger-btn .hamburger::before{ top:-7px }
.hamburger-btn .hamburger::after{  top: 7px }

/* Mobile nav */
@media (max-width: 840px){
  .hamburger-btn{ display:block }
  .menu{
    position:fixed; inset:64px 0 auto 0;
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none; flex-direction:column; padding:16px; gap:.5rem;
  }
  .menu.open{ display:flex }      /* toggled via script.js */
  body.no-scroll{ overflow:hidden }
  .menu a{ display:block; width:100% }
}

/* ================================
   Buttons
================================ */
.cta,
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:999px;
  border:1px solid var(--border); font-weight:600; background:#fff; color:var(--ink);
}
.btn--primary, .cta{ background:var(--brand); color:#fff; border-color:transparent }
.btn--primary:hover, .cta:hover{ filter:brightness(.95) }
.btn--lg{ padding:.85rem 1.2rem; font-size:1.05rem }

/* ================================
   HERO – image-as-background; content controls height
================================ */
.hero{ background: linear-gradient(180deg, rgba(46,196,182,.08), rgba(46,196,182,0) 50%) }

.hero-edge .hero-bleed{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 48vh, 560px);         /* grows if content needs more */
  overflow: hidden;
}

/* Photo behaves like a background */
.hero-bleed picture,
.hero-bleed img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;                         /* adjust if needed (e.g., center 35%) */
  z-index: 0;
}

/* Overlay container (scrim) */
.hero-overlay{
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
}
.hero-overlay::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,23,42,.60) 0%, rgba(15,23,42,.35) 40%, rgba(15,23,42,.60) 100%);
  z-index: 0;
}

/* Foreground copy */
.hero-copy{
  position: relative; z-index: 1;
  max-width: 64ch;
  padding: clamp(12px, 4vw, 28px);
  color:#fff;
}
.hero-copy h1, .hero-copy p, .hero-copy .lead{ color:#fff }
.hero-copy h1{ text-shadow:0 2px 12px rgba(0,0,0,.45) }

/* Hero badges/buttons on dark */
.hero .badge{
  display:inline-block; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28); color:#fff;
  padding:.4rem .7rem; border-radius:999px; font-weight:700;
}
.hero .badge-inline{
  color:#fff; border:1px solid rgba(255,255,255,.4);
  padding:.5rem .8rem; border-radius:999px; display:inline-flex; gap:.4rem;
}
.hero .cta{ background:var(--brand); color:#fff; border:0; border-radius:999px; padding:.8rem 1.2rem }

@media (max-width: 720px){
  .hero-edge .hero-bleed{ min-height: clamp(280px, 44vh, 520px) }
  .hero-copy h1{ font-size: clamp(1.5rem, 5vw, 2.1rem) }
}

/* ================================
   Cards & Content
================================ */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}
.card-body{ padding: clamp(16px, 2.5vw, 24px) }
.card--border{ border-style:dashed }

/* Card typography spacing */
.card-body > * + *{ margin-top:.75rem }
.card-body > :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4){ margin:0 0 .5rem }
.card-body > :is(p,ul,ol){ margin:0 }
.card-body > :is(ul,ol){ padding-left:1.25rem }
.card-body .meta{ display:grid; gap:.5rem; padding-left:1.25rem }
.card-body .cta{ margin-top:.5rem }

/* 2-column card grid (index highlights) */
.cards{ display:grid; gap:clamp(16px, 2vw, 24px) }
.cards.two{ grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 900px){ .cards.two{ grid-template-columns: 1fr } }

/* Hover / focus / tap lift */
.card:hover,
.card:focus-within,
.card:active{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
}
@media (prefers-reduced-motion: reduce){ .card{ transition:none } }

/* (Optional) Logos grid */
.logo-grid{
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px); align-items:center;
}
.logo-grid li{ filter:grayscale(100%) contrast(.85); opacity:.8 }
.logo-grid img{ max-height:42px; margin-inline:auto }
@media (max-width:900px){ .logo-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) } }

/* ================================
   Forms
================================ */
.form label{ display:grid; gap:.35rem; margin:.5rem 0 }
.form input, .form select, .form textarea{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:.7rem .9rem; font:inherit; color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ================================
   Footer
================================ */
.footer{ border-top:1px solid var(--border); background:#fff }
.footer .cols{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .footer .cols{ grid-template-columns:1fr } }

/* Footer links as a real list */
.footer-links{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
}
.footer-links a{
  color:var(--ink); text-decoration:none; padding:.25rem 0; border-radius:6px;
}
.footer-links a:hover{ text-decoration:underline; background:var(--bg-alt) }

.footer .footer-meta, .footer .footer-note{ padding:10px 24px; color:#64748b }

/* ================================
   Utilities
================================ */
.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
}