/*
Theme Name: DocuDrive
Theme URI: https://docudriveapp.com/
Author: DocuDrive Solutions
Description: Multi-solution, multi-industry fleet technology theme for DocuDrive. Implements the 2026 redesign: Solutions / Industries / Pricing IA, the DocuDrive Basic and Azuga-powered Pro lines, a custom-quote conversion flow, and the SEO foundation from the redesign strategy. The storefront is retired; the theme stays WooCommerce-compatible so it can return.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: docudrive
Tags: business, ecommerce, custom-menu, custom-logo, translation-ready
*/

/* ---------------------------------------------------------------------------
   Tokens. Brand system from the approved wireframe.
   --------------------------------------------------------------------------- */

:root {
  --navy: #0b2447;
  --navy-deep: #081a35;
  --red: #c1121f;
  --red-dark: #9d0e19;
  --grey: #5a5a5a;
  --light: #eef2f7;
  --green: #1b7a43;
  --line: #cbd5e1;
  --ink: #1c2530;
  --white: #fff;

  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 1.75rem);
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11, 36, 71, 0.06);
  --shadow-md: 0 6px 20px rgba(11, 36, 71, 0.08);
  --shadow-lg: 0 10px 30px rgba(11, 36, 71, 0.12);

  --step-hero: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  --step-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.125rem);
  --step-h3: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --step-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 700; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--white); }

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--light { background: var(--light); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--white); }

.center { text-align: center; }
.measure { max-width: 68ch; }
.measure-center { max-width: 68ch; margin-inline: auto; }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.5rem;
}
.section--navy .eyebrow { color: #ff8a92; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--grey);
  margin-bottom: 1.5rem;
}
.section--navy .lede { color: #cfd8e6; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.section--navy .btn--ghost { color: var(--white); border-color: var(--white); }
.section--navy .btn--ghost:hover { background: var(--white); color: var(--navy); }

.btn--sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   Header & navigation
   --------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header__utility {
  background: var(--navy);
  color: #cfd8e6;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.4rem var(--gutter);
}
.header__utility strong { color: var(--white); font-weight: 700; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.875rem var(--gutter);
}

.header__logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.header__logo b { color: var(--red); font-weight: 800; }
/* The brand SVG sets its own height inline; this only caps a Customizer-uploaded logo. */
.header__logo img { max-height: 46px; width: auto; display: block; }
.header__logo { display: inline-flex; align-items: center; }

.footer__logo { display: inline-block; margin-bottom: 1.75rem; }
.footer__logo img { display: block; }

/* Centre the nav in the space between the logo and the actions.
   Two auto left-margins (here and on .header__actions) split the free space evenly, so the
   nav sits mid-header instead of hard against the logo, and the actions still finish flush
   right. Deliberately not a `1fr auto 1fr` grid: the logo and the actions are different
   widths, so true viewport-centring would visibly bias the nav toward the logo.
   Below 1024px .header__nav is position:absolute, so this is ignored there. */
.header__nav { margin-left: auto; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8125rem;
}
.header__cart-icon {
  width: 20px; height: 20px;
  border: 2px solid currentColor;
  border-radius: 3px;
  position: relative;
}
.header__cart-icon::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__menu .menu-item { position: relative; }

.nav__link {
  display: inline-block;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #33404f;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover,
.menu-item.is-open > .nav__link { color: var(--red); }
.nav__link--new { color: var(--red); }

/* Resources / Company: a <button> that must read as a nav link. Reset the UA button
   styling and pull the caret inline, since these have no separate .nav__toggle. */
.nav__label {
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav__label:hover { color: var(--red); }

.nav__toggle {
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  color: #33404f;
  line-height: 0;
}
.nav__caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}
.menu-item.is-open .nav__caret { transform: rotate(180deg); }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  display: none;
}
.menu-item.is-open > .sub-menu { display: block; }

/* Desktop: open the dropdown on hover, and on keyboard focus via :focus-within.
   Gated three ways on purpose:
     min-width 1025px — below that the burger menu renders submenus statically
     hover: hover     — a hover-to-open menu on touch needs two taps to follow the link
     pointer: fine    — coarse pointers get the tap-to-open toggle instead
   aria-expanded is deliberately not touched here: it describes the toggle button, and a
   screen reader user reaches the menu by focus, not hover (see assets/js/main.js). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .nav__menu > .menu-item-has-children:hover > .sub-menu,
  .nav__menu > .menu-item-has-children:focus-within > .sub-menu { display: block; }

  .nav__menu > .menu-item-has-children:hover > .nav__link,
  .nav__menu > .menu-item-has-children:focus-within > .nav__link { color: var(--red); }

  .nav__menu > .menu-item-has-children:hover .nav__caret,
  .nav__menu > .menu-item-has-children:focus-within .nav__caret { transform: rotate(180deg); }

  /* The panel sits 0.25rem below its trigger. That gap is dead space: without a bridge
     the pointer un-hovers mid-travel and the menu snaps shut before it can be reached.
     The bridge is a child of the submenu, so hovering it keeps the parent :hover true. */
  .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
  }
}

.sub-menu__link {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.sub-menu__link:hover { background: var(--light); color: var(--red); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 42px; height: 42px;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .nav__burger { display: flex; order: 3; }
  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .header__nav.is-open { display: block; }
  .nav__menu { flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; }
  .nav__menu .menu-item { border-bottom: 1px solid var(--light); }
  .nav__link { padding: 0.875rem 0; font-size: 1rem; }
  .nav__toggle { position: absolute; top: 0.5rem; right: 0; padding: 0.75rem; }
  /* Label parents have no separate caret button, so the label itself becomes the
     full-width row and pushes its caret to the right edge like the toggle does. */
  .nav__label { display: flex; width: 100%; justify-content: space-between; text-align: left; }
  .sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0.5rem 0.75rem;
    min-width: 0;
  }
  .header__actions .btn { display: none; }
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #dbe2ea, #dbe2ea 10px, #d2dae4 10px, #d2dae4 20px);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a8798;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

/* Holding a real photo, not a placeholder: drop the stripes and the padding.
   The industry heroes are full scenes (vehicle on location), each normalised to the same
   762x312 frame, so the box simply hugs the image:
     - min-height is released, or the 260px floor would band the shorter image with the
       placeholder's background;
     - `contain` + height:auto, never `cover` — cover crops to fill and was what clipped
       bumpers and trailer backs before. */
.hero__media--photo {
  background: transparent;
  padding: 0;
  min-height: 0;
  border: 1px solid var(--line);
}
.hero__media--photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  padding-left: 0;
}
.trust-strip li::before { content: "\2713"; color: var(--green); margin-right: 0.375rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1.375rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card--new { border: 2px solid var(--red); }

.card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--light);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
}
.card__icon svg { width: 24px; height: 24px; }

.card__title { font-size: 1.0625rem; margin-bottom: 0.375rem; }
.card__body { font-size: 0.9375rem; color: var(--grey); margin-bottom: 1rem; flex-grow: 1; }
.card__price { font-size: 0.8125rem; font-weight: 800; color: var(--green); }

.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; }

.badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 0.125rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.375rem;
}

/* Pillars: check-mark bullets under "Why DocuDrive" */
.pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
}
.pillars li::before { content: "\2713"; color: var(--green); margin-right: 0.4rem; font-weight: 800; }

/* ---------------------------------------------------------------------------
   Industry chips
   --------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.chip {
  display: inline-block;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chip:hover { background: var(--navy); color: var(--white); }

/* ---------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------- */

.steps { counter-reset: step; }
.step__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
.step h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.step p { font-size: 0.9375rem; color: var(--grey); margin: 0; }

/* ---------------------------------------------------------------------------
   Testimonials & metrics
   --------------------------------------------------------------------------- */

.quote {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.375rem;
  font-size: 0.9375rem;
  color: #33404f;
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.quote p { margin-bottom: 0.75rem; }
.quote footer { font-weight: 700; color: var(--navy); font-size: 0.8125rem; font-style: normal; }

.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.metric b { display: block; font-size: 1.75rem; color: var(--navy); line-height: 1.1; }
.metric span { font-size: 0.75rem; color: var(--grey); }

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--white);
}
.plan--feature { border: 2px solid var(--navy); box-shadow: var(--shadow-md); }
.plan__flag {
  position: absolute;
  top: -0.75rem; left: 1.5rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 3px;
}
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0 0.25rem; }
.plan__price b { font-size: 2.25rem; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price span { font-size: 0.875rem; color: var(--grey); }
/* "From" must not be set at the price size, or the card wraps. Declared after
   `.plan__price span` at equal specificity, so it wins without !important. */
.plan__prefix { font-size: 0.9375rem; font-weight: 700; color: var(--grey); }
.plan__signup { font-size: 0.8125rem; color: var(--grey); margin-bottom: 0.875rem; }
.plan__body { font-size: 0.9375rem; color: var(--grey); flex-grow: 1; }

/* Calculator */
.calc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.calc__fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.calc label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--navy); margin-bottom: 0.375rem; }
.calc input[type="number"],
.calc input[type="email"],
.calc input[type="text"],
.calc textarea,
.calc select {
  width: 100%;
  padding: 0.6875rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  background: var(--white);
  color: var(--ink);
}
.calc__result {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--light);
  border-radius: var(--radius);
  border-left: 4px solid var(--green);
}
.calc__result[hidden] { display: none; }
.calc__figure { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--green); line-height: 1.1; }
.calc__caveat { font-size: 0.75rem; color: var(--grey); margin-top: 0.75rem; margin-bottom: 0; }
.calc__honeypot { position: absolute; left: -9999px; }

.notice {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
.notice--ok { background: #e7f4ec; border-left: 4px solid var(--green); color: #14522f; }
.notice--error { background: #fdecec; border-left: 4px solid var(--red); color: #7c0d16; }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 2.5rem 1.125rem 0;
  font-weight: 700;
  color: var(--navy);
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0.5rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--red);
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 2.5rem 1.25rem 0; color: var(--grey); margin: 0; }

/* ---------------------------------------------------------------------------
   Cross-sell strip
   --------------------------------------------------------------------------- */

.crosssell {
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  background: var(--light);
  padding: 1.25rem 1.375rem;
  margin: 2rem 0;
}
.crosssell p { margin: 0; font-size: 0.9375rem; }
.crosssell a { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.crumbs {
  font-size: 0.8125rem;
  color: var(--grey);
  padding-block: 1rem 0;
}
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
.crumbs__sep { margin-inline: 0.5rem; color: var(--line); }

/* ---------------------------------------------------------------------------
   Blog
   --------------------------------------------------------------------------- */

.post-card { display: flex; flex-direction: column; }
.post-card__thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 0.875rem; aspect-ratio: 16 / 9; background: var(--light); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.post-card h3 a { text-decoration: none; }
.post-card__meta { font-size: 0.75rem; color: var(--grey); margin-bottom: 0.5rem; }
.post-card p { font-size: 0.9375rem; color: var(--grey); margin: 0; }

.entry-content { max-width: 72ch; }
.entry-content h2 { margin-top: 2rem; }
.entry-content h3 { margin-top: 1.5rem; }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--red);
  color: var(--grey);
  font-style: italic;
}

.pagination { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}
.pagination .page-numbers.current { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------------------------------------------------------------------------
   WooCommerce overrides
   --------------------------------------------------------------------------- */

.woocommerce ul.products { gap: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--white);
  text-align: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9375rem !important;
  font-weight: 700;
  padding: 0.5rem 0 0.25rem !important;
}
.woocommerce ul.products li.product .price { color: var(--green); font-weight: 800; font-size: 0.9375rem; }
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 700;
  padding: 0.6875rem 1.125rem;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--red-dark); color: var(--white); }
.woocommerce button.button.alt,
.woocommerce a.button.alt { background: var(--red); }
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--red-dark); }

.woocommerce div.product .product_title { font-size: var(--step-h2); }
.woocommerce div.product p.price { color: var(--green); font-weight: 800; }

.product-note { font-size: 0.8125rem; color: var(--grey); margin: -0.25rem 0 1rem; }
.product-crosssell { display: flex; flex-direction: column; gap: 0.375rem; margin: 1.25rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.product-crosssell__link { font-size: 0.875rem; font-weight: 700; text-decoration: none; }

.store__helper {
  background: var(--light);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.footer {
  background: var(--navy-deep);
  color: #cfd8e6;
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  font-size: 0.875rem;
}
.footer a { color: #cfd8e6; text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }

.footer__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.footer__cols h2 {
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}
.footer__cols ul { list-style: none; padding: 0; margin: 0; }
.footer__cols li { margin-bottom: 0.5rem; }

.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #9fb0c6;
}

/* Agency credit: present and clickable, but it should never compete with the footer nav. */
.footer__credit a {
  color: #cfd8e6;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: #fff; text-decoration-color: #fff; }

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

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

/* ============================================================
   Basic vs Pro tier comparison (solution pages + homepage)
   ============================================================ */
.tier-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.tier {
  border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem 1.5rem 1.75rem;
  background: #fff; display: flex; flex-direction: column;
}
.tier--basic { border-color: var(--navy); }
.tier--pro { border-color: var(--line); background: var(--light); }
.tier__flag {
  display: inline-block; align-self: flex-start; font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; padding: 0.25rem 0.6rem;
  border-radius: 4px; margin-bottom: 0.75rem;
}
.tier--basic .tier__flag { background: var(--navy); color: #fff; }
.tier--pro .tier__flag { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.tier__name { font-size: 1.125rem; font-weight: 800; color: var(--navy); margin: 0 0 0.15rem; }
.tier__powered { font-size: 0.8125rem; color: var(--grey); margin: 0 0 0.75rem; }
.tier__price { font-size: 0.9375rem; font-weight: 700; color: var(--green); margin: 0 0 0.75rem; }
.tier__summary { font-size: 0.9375rem; color: var(--ink); margin: 0 0 1rem; }
.tier__features { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.tier__features li { position: relative; padding-left: 1.4rem; margin-bottom: 0.45rem; font-size: 0.9375rem; }
.tier__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.tier__signals { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.tier__signals li { font-size: 0.8125rem; font-weight: 600; color: var(--navy); }
.tier__signals li::before { content: "\2713"; color: var(--green); font-weight: 800; margin-right: 0.3rem; }
.tier__cta { margin-top: auto; }
.tier__soon {
  font-size: 0.9375rem; color: var(--grey); font-style: italic; margin: 0 0 1.25rem;
  padding: 0.9rem 1rem; background: #fff; border: 1px dashed var(--line); border-radius: 8px;
}
/* Named products inside a Pro tier (SafetyCam Plus / Pro). */
.tier__products { list-style: none; margin: 0 0 1.25rem; padding: 0.75rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.9rem; }
.tier-product { display: flex; gap: 0.85rem; align-items: center; }
.tier-product__img { width: 60px; height: 60px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.tier-product__name { display: block; font-size: 0.9375rem; color: var(--navy); }
.tier-product__blurb { display: block; font-size: 0.8125rem; color: var(--grey); margin-top: 0.15rem; }

/* ============================================================
   Device sections (PT-10, PT-40, asset trackers)
   ============================================================ */
.devices { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.device {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  /* Anchored deep links (/solutions/…/#pt-10) shouldn't hide under the sticky header. */
  scroll-margin-top: 6rem;
}
.device__media {
  background: var(--light);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device__media img { width: 100%; height: auto; display: block; border-radius: 6px; }
.device__sku {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red); margin: 0 0 0.25rem;
}
.device__name { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin: 0 0 0.5rem; }
.device__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.device__price b { font-size: 1.375rem; color: var(--green); font-variant-numeric: tabular-nums; }
.device__price span { font-size: 0.8125rem; color: var(--grey); }
.device__summary { font-size: 0.9375rem; margin: 0 0 1rem; }
.device__specs { list-style: none; margin: 0 0 1rem; padding: 0; columns: 2; column-gap: 1.5rem; }
.device__specs li {
  position: relative; padding-left: 1.15rem; margin-bottom: 0.4rem;
  font-size: 0.8125rem; color: var(--grey);
  break-inside: avoid;
}
.device__specs li::before {
  content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800;
}
/* Camera configuration strips: which units ship with each config. */
.config__media {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem;
  margin-bottom: 0.75rem;
}
.config__media img { width: 100%; height: auto; display: block; }
.config__hardware {
  font-size: 0.75rem;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

/* Device-return terms. Visible and plain, not fine print — but not alarming either. */
.device__terms {
  font-size: 0.8125rem;
  color: var(--grey);
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--light);
  border-left: 3px solid var(--line);
  border-radius: 0 6px 6px 0;
}

@media (max-width: 860px) {
  .device { grid-template-columns: 1fr; gap: 1.25rem; }
  .device__specs { columns: 1; }
}

/* ============================================================
   Quote / demo form
   ============================================================ */
.quote-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
.quote-intro h1 { margin-top: 0.25rem; }
.quote-points { list-style: none; margin: 1.5rem 0; padding: 0; }
.quote-points li { position: relative; padding-left: 1.6rem; margin-bottom: 0.7rem; font-size: 0.9375rem; }
.quote-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.quote-alt { font-size: 0.9375rem; color: var(--grey); }
.quote-alt a { font-weight: 700; }

.quote-form-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 1.75rem; box-shadow: var(--shadow-md);
}
.quote-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quote-form .field { margin: 0 0 1rem; display: flex; flex-direction: column; }
.quote-form label { font-size: 0.8125rem; font-weight: 700; color: var(--navy); margin-bottom: 0.35rem; }
.quote-form .req { color: var(--red); }
.quote-form input,
.quote-form select,
.quote-form textarea {
  font: inherit; font-size: 0.9375rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
  width: 100%;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
.quote-form textarea { resize: vertical; min-height: 6rem; }
.quote-fineprint { font-size: 0.8125rem; color: var(--grey); margin: 0.75rem 0 0; text-align: center; }
.btn--block { display: block; width: 100%; text-align: center; }

/* Honeypot: kept in the DOM for bots, removed from view and a11y tree for humans. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Sign in — header link + the portal hub
   ============================================================ */
/* Quiet by design: a returning customer needs to find it, but it must never pull the eye
   away from the two CTAs beside it. */
.header__signin {
  font-size: 0.875rem;
  font-weight: 600;
  color: #33404f;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0.25rem;
}
.header__signin:hover { color: var(--red); }

.portals { align-items: stretch; }
.portal {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.portal__name { font-size: 1.0625rem; font-weight: 800; color: var(--navy); margin: 0 0 0.35rem; }
.portal__desc { font-size: 0.9375rem; color: var(--grey); margin: 0 0 1.25rem; }
.portal__cta { margin-top: auto; text-align: center; }
/* The host is shown because these leave the site — seeing the domain before you click is
   the honest thing on a page people reach by searching "docudrive login". */
.portal__host {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--grey);
  margin: 0.6rem 0 0;
  text-align: center;
}

@media (max-width: 1024px) {
  /* The burger hides the nav; Sign In must not go with it. */
  .header__signin { order: 2; margin-left: auto; }
}

/* ============================================================
   Assessment embed
   ============================================================ */
/* border:0 replaces the deprecated frameborder attribute. The height is set inline at 600
   and then updated by main.js from the app's own postMessage, so no height here. */
.assessment-frame {
  display: block;
  width: 100%;
  border: 0;
  transition: height 0.2s ease;
}
@media (prefers-reduced-motion: reduce) { .assessment-frame { transition: none; } }
.assessment-noscript { font-size: 0.9375rem; color: var(--grey); }

/* ============================================================
   Footer socials
   ============================================================ */
.socials { list-style: none; display: flex; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; }
.socials__link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cfd8e6;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.socials__link svg { width: 16px; height: 16px; display: block; }
.socials__link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
/* Icon-only links: the focus ring is the only affordance a keyboard user gets. */
.socials__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 860px) {
  .tier-compare { grid-template-columns: 1fr; }
  .quote-layout { grid-template-columns: 1fr; gap: 2rem; }
  .quote-form .field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Elementor Global Kit compatibility

   Elementor Pro's Global Kit is the previous site's design system, and it is still
   published. It has to stay: the kit is the only thing that defines the --e-global-*
   custom properties, and the contact page's generated Elementor CSS reads thirteen of
   them. Removing the kit strips every colour and font off that form.

   The trouble is the kit does not confine itself to Elementor's own widgets. It styles
   bare HTML — body, a, h1..h6, and button — through selectors like `.elementor-kit-6
   button`, which scores (0,1,1) and so outranks single-class component rules of ours like
   `.nav__label` (0,1,0). Left alone it renders our nav <button>s as red 160px pills and
   repaints every heading and paragraph in the kit's Manrope / Space Grotesk at weight 600.

   So we out-rank it instead of removing it. Matching on `body[class*="elementor-kit-"]`
   rather than the kit's post ID keeps this working if the kit is ever regenerated under a
   new number. Nothing below invents design: every value is one the theme already declares
   above, restated at a weight that survives the kit.

   Deliberately untouched: .elementor-button. That is the contact form's submit control and
   Elementor's own component — the kit should go on styling it.

   If the Elementor, Elementor Pro, and MetForm plugins are ever retired, delete this whole
   block. It is scaffolding around a plugin, not part of the design.
   --------------------------------------------------------------------------- */

/* The kit puts its font and weight 600 on <body>. Weight 400 here is the browser default
   the theme relies on — body copy must never render semibold. */
body[class*="elementor-kit-"] {
  font-family: var(--font);
  font-weight: 400;
}

/* The kit forces every <a> to Space Grotesk 600. Reset to inherit so body-copy links read
   as normal text again. This is broad on purpose — but it also catches links that carry
   their own weight (.nav__link, a.btn), dragging them down to the body's 400. The two rules
   below restore those at higher specificity; without them the nav links and header CTAs go
   light while the <button> items stay 600, which reads as "some items are bold". */
body[class*="elementor-kit-"] a {
  font-family: inherit;
  font-weight: inherit;
}
/* Nav links are semibold by design (matches .nav__link and the non-Elementor rendering);
   the <button> labels next to them are already 600, so this keeps the whole bar even. */
body[class*="elementor-kit-"] .nav__link { font-weight: 600; }
/* CTAs (<a class="btn">) are 700 like every other button. */
body[class*="elementor-kit-"] a.btn { font-weight: 700; }

body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6 {
  font-family: var(--font);
}

/* Mirrors `h1,h2,h3,h4 { font-weight: 800 }` and `h3 { font-weight: 700 }` above. */
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h4 { font-weight: 800; }
body[class*="elementor-kit-"] h3 { font-weight: 700; }

/* The kit pins h1 to a flat 56px, which also costs us the fluid scale. */
body[class*="elementor-kit-"] h1 { font-size: var(--step-hero); }

/* Resources / Company and the submenu carets are <button>s that must read as nav links. */
body[class*="elementor-kit-"] .nav__label,
body[class*="elementor-kit-"] .nav__toggle {
  background: none;
  border-radius: 0;
  color: #33404f;
  font-family: inherit;
}
/* Restated because the block above (0,2,1) would otherwise outrank `.nav__label:hover`. */
body[class*="elementor-kit-"] .nav__label:hover { color: var(--red); }

/* The burger keeps its own border-radius; only the kit's fill and font are unwanted. */
body[class*="elementor-kit-"] .nav__burger {
  background: none;
  border-radius: var(--radius);
  color: inherit;
  font-family: inherit;
}

/* Scoped to button.btn: the kit only reaches <button>, so <a class="btn"> is already fine.
   Our red is #c1121f, the kit's is #B51D20 — close enough to miss by eye, wrong all the
   same, and the 160px pill is not. */
body[class*="elementor-kit-"] button.btn {
  border-radius: var(--radius);
  font-family: inherit;
}
body[class*="elementor-kit-"] button.btn--primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
body[class*="elementor-kit-"] button.btn--primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}

@media print {
  .header, .footer, .btn, .nav__burger { display: none !important; }
  body { color: #000; background: #fff; }
}