/* ============================================================
   PAGE: documents.css — vertical-specific accents for the Documents Courier pages
   Canonical path: css/pages/documents.css (repo root)

   Load order: fonts → slp-critical → slp-deferred → pickles.css → THIS file
   pickles.css provides all shared layout components (hero layout, packing-layers,
   FAQ accordion, carrier cards, trust strip, country tiles, etc.).
   This file adds ONLY the documents-vertical hero tint and any UI tweaks
   specific to the documents vertical. Do NOT redefine header/nav — those
   live in slp-critical.css.
   ============================================================ */

/* ----- Hero tint for documents vertical ----- */
.hero--documents {
  background-image: linear-gradient(135deg, #00395d 0%, #005a8e 42%, #0077b6 100%);
  background-color: #00395d;
}

/* City × documents vertical pages (if ever used with city template) */
.hero--city-documents {
  background-image:
    linear-gradient(rgba(0, 57, 93, 0.80), rgba(0, 90, 142, 0.74)),
    var(--hero-img, url('../../photos/hero-main.webp'));
  background-size: cover;
  background-position: center;
}

/* ----- Documents chip accent colour override ----- */
/* The shared .pickle-chip class is reused for document type chips.
   Override the primary colour reference to the documents blue palette
   so chips feel native to this vertical without touching pickles.css. */
.hero--documents ~ * .pickle-chip,
body[data-slp-vertical="documents"] .pickle-chip {
  border-color: rgba(0, 119, 182, 0.3);
  color: #00395d;
}

body[data-slp-vertical="documents"] .pickle-chip:hover {
  border-color: #0077b6;
  box-shadow: 0 4px 14px rgba(0, 119, 182, 0.12);
}

/* ----- Packing layer top border — documents accent blue ----- */
body[data-slp-vertical="documents"] .packing-layer {
  border-top-color: #0077b6;
}

/* ----- Carrier band top border — documents accent blue ----- */
body[data-slp-vertical="documents"] .carrier-band {
  border-top-color: #00395d;
}

/* ----- Segment card left border — documents accent ----- */
body[data-slp-vertical="documents"] .segment-card {
  border-left-color: #0077b6;
}

/* ----- "Do Not Bend" callout label (optional use in packing section) ----- */
.doc-bend-label {
  display: inline-block;
  background: #fff8e1;
  border: 1px solid #ffd54f;
  color: #7a5a00;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ----- Document type badge (used on document-chip-row items if needed) ----- */
.doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 119, 182, 0.08);
  color: #00395d;
  border: 1px solid rgba(0, 119, 182, 0.2);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
}

/* ----- Mobile fallback — no extra breakpoints needed (inherited from pickles.css) ----- */