/* ==========================================================================
   HerpExchange — typography scale
   Added 2026-07-23.

   Measured on the live site before this change (desktop @1280px):

       h1 ......................  56px   (theme: h1,.h1 = 3.5rem above 1200px)
       h2 (section headings) ...  48px   (theme: h2,.h2 = 3rem above 1200px)
       body / labels / inputs ..  16px
       nav links & .btn-sm .....  13px   <- BELOW body copy

   The base type was fine (16px on a 16px root, 1.5 line-height). The problem
   was a hollow scale: a ~3x jump straight from 16px body to 48-56px headings
   with nothing in between, while nav and small buttons sat *below* body size.
   A 48px heading on a subsection is larger than most sites' hero headline.

   Heading rules are DESKTOP-ONLY (min-width: 768px) on purpose: the theme
   already scales headings down correctly on phones (h1 -> ~34px, h2 -> ~31px)
   and shrinking those further would hurt mobile.

   These override the theme because they use the same specificity (element
   selectors) and this file is loaded after style.css.
   ========================================================================== */

@media (min-width: 768px) {

    /* Hero headline: 56px -> 44px */
    h1,
    .h1 {
        font-size: 2.75rem;   /* 44px */
        line-height: 1.2;
    }

    /* Section headings: 48px -> 32px. Still clearly dominant over 16px body,
       without out-shouting the page. */
    h2,
    .h2 {
        font-size: 2rem;      /* 32px */
        line-height: 1.25;
    }

    /* Line length. Measured 85 characters per line on the legal/CMS pages;
       the comfortable range is 50-75.

       NOTE: do NOT use `ch` here. 1ch is the width of the "0" glyph, which in
       Montserrat @16px is 10.59px, while the average character in real prose
       measures 7.83px. `max-width: 70ch` therefore computes to 741px - wider
       than the 664px container - and does nothing at all. Use a real length:
       40rem = 640px = ~82 characters. Raised from 36rem 2026-07-24: once the
       content card was widened to the full site container, 36rem text left a
       large empty gap in its column; 40rem fills the narrower col-8 with only a
       hair over the ideal measure. */
    .section-card .card-body p,
    .section-card .card-body li {
        max-width: 40rem;
    }
}

/* --------------------------------------------------------------------------
   Hero scrim.
   The markup intended a dark overlay ("<!-- Background dark overlay -->") but
   the div had no position/height, so it rendered at 0px and never appeared —
   leaving white hero text directly on a bright photo (measured: no overlay,
   no text-shadow). The div is now absolutely positioned; this gradient keeps
   the photo visible at the top and darkens toward the headline so the text is
   legible over the pale areas of the image.
   -------------------------------------------------------------------------- */
.hero-scrim {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.28) 40%,
        rgba(0, 0, 0, 0.62) 100%
    );
    pointer-events: none;   /* never intercept clicks meant for the form */
}

/* --------------------------------------------------------------------------
   Header actions.
   Every item in the header (New Shipment, Track Shipment, Login, Get Started)
   was the same filled pill: background rgba(245,245,246,.1), 700 weight, 36px
   tall. Primary navigation, the account link and the main call to action all
   carried identical weight, which read as a cluttered row of grey boxes on the
   dark header.

   Restyled into three tiers:
     nav-item-link  plain text links      (navigation)
     nav-ghost      outlined              (secondary action - Login)
     nav-primary    solid brand green     (primary CTA - Get Started)
   -------------------------------------------------------------------------- */
header .nav-item-link,
.navbar .nav-item-link {
    background-color: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    transition: color 0.15s ease;
}

header .nav-item-link:hover,
header .nav-item-link:focus-visible,
.navbar .nav-item-link:hover,
.navbar .nav-item-link:focus-visible {
    background-color: transparent;
    color: rgb(105, 172, 67);
}

header .nav-ghost,
.navbar .nav-ghost {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

header .nav-ghost:hover,
header .nav-ghost:focus-visible,
.navbar .nav-ghost:hover,
.navbar .nav-ghost:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

header .nav-primary,
.navbar .nav-primary {
    background-color: rgb(105, 172, 67);
    border: 1px solid rgb(105, 172, 67);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

header .nav-primary:hover,
header .nav-primary:focus-visible,
.navbar .nav-primary:hover,
.navbar .nav-primary:focus-visible {
    background-color: rgb(92, 152, 59);
    border-color: rgb(92, 152, 59);
    color: #fff;
}

/* Keyboard users need to see where they are on a dark background. */
header .nav-item-link:focus-visible,
header .nav-ghost:focus-visible,
header .nav-primary:focus-visible {
    outline: 2px solid rgb(105, 172, 67);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Quote card width.
   The card sat in a `container-fluid` with `max-width: none`, so it grew with
   the viewport: measured 1169px (81%) at 1440px wide, and proportionally wider
   on large monitors, which made the form feel sprawling and loose.
   Cap it so the fields stay grouped and the card reads as one unit.
   -------------------------------------------------------------------------- */
.quote-card {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   Quick links strip (Track a Shipment / Book a Shipment / ...).
   The row had no container, so its negative margins rendered it 1455px wide on
   a 1440px viewport. Capped to match the quote card so the two align.
   -------------------------------------------------------------------------- */
.quick-links {
    max-width: 1080px;          /* same as .quote-card */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --------------------------------------------------------------------------
   Dark footer.
   The page previously ran: header rgb(11,10,18) -> dark hero -> dark
   quick-links strip -> near-white footer rgb(245,245,246). That last step was a
   hard jump from near-black to near-white and made the page read as two
   different sites. The footer now continues the dark theme, one step lighter
   than the strip above it so the two bands stay distinguishable.

   Overrides are scoped to .site-footer-dark and use !important where they have
   to beat Bootstrap utility classes still present in the markup
   (.text-dark, .text-primary-emphasis, .text-dark-hover).
   -------------------------------------------------------------------------- */
.site-footer-dark {
    background-color: rgb(20, 19, 28);
    color: rgba(255, 255, 255, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Column headings were text-primary-emphasis (a dark navy) - invisible on dark. */
.site-footer-dark h5,
.site-footer-dark .text-primary-emphasis {
    color: #ffffff !important;
}

/* Link lists carry .text-dark from the markup. Bootstrap's .text-dark resolves
   to rgba(var(--bs-dark-rgb), var(--bs-text-opacity)), so redefining those
   custom properties inside the footer is what actually flips the colour -
   a plain `color: ... !important` loses to the variable-driven declaration. */
.site-footer-dark,
.site-footer-dark .text-dark,
.site-footer-dark .nav-link {
    --bs-dark-rgb: 255, 255, 255;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-nav-link-color: rgba(255, 255, 255, 0.75);
    --bs-link-color-rgb: 255, 255, 255;
}

.site-footer-dark a,
.site-footer-dark .nav-link,
.site-footer-dark .nav-link.text-dark,
.site-footer-dark .text-dark {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.15s ease;
}

.site-footer-dark a:hover,
.site-footer-dark .nav-link:hover,
.site-footer-dark .nav-link.text-dark:hover {
    color: rgb(105, 172, 67) !important;
}

.site-footer-dark p,
.site-footer-dark span,
.site-footer-dark small {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Newsletter field: a white input would glare against the dark panel. */
.site-footer-dark .form-control,
.site-footer-dark input[type="email"],
.site-footer-dark input[type="text"] {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}

.site-footer-dark .form-control::placeholder,
.site-footer-dark input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.site-footer-dark .form-control:focus,
.site-footer-dark input:focus {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgb(105, 172, 67);
    box-shadow: 0 0 0 0.2rem rgba(105, 172, 67, 0.25);
    color: #fff;
}

/* The rounded wrapper around the newsletter input is .bg-body + .border. */
.site-footer-dark .bg-body {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Any horizontal rule / bottom divider inside the footer. */
.site-footer-dark hr,
.site-footer-dark .border-top {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* --------------------------------------------------------------------------
   Footer width.
   The footer wrapper carried a misspelt `container-fuild` class plus 128px of
   side padding, so it rendered 1399px wide (97% of a 1440px viewport) while the
   quote card and quick-links strip above it are capped at 1080px. Matching them
   keeps one consistent content column down the whole page.
   -------------------------------------------------------------------------- */
.footer-inner {
    max-width: 1080px;          /* same as .quote-card and .quick-links */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.quick-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    /* Fill the grid column so all four items are the same height and stay aligned
       even when one description wraps to an extra line. Bootstrap columns already
       stretch to equal height; this makes the link fill that height. */
    height: 100%;
}

.quick-link h5 {
    transition: color 0.15s ease;
}

/* Only the real links get affordance; the inactive one must not look clickable. */
a.quick-link:hover h5,
a.quick-link:focus-visible h5 {
    color: rgb(105, 172, 67);   /* brand green, sampled from the Get Quote button */
}

a.quick-link:focus-visible {
    outline: 2px solid rgb(105, 172, 67);
    outline-offset: 4px;
    border-radius: 0.25rem;
}

a.quick-link:hover {
    text-decoration: none;
}

.quick-link--inactive {
    cursor: default;
}

/* Navigation and small buttons were 13px, i.e. smaller than body copy, which
   inverted the hierarchy. Nudge to 14px at every breakpoint. */
.navbar .nav-link,
.btn-sm {
    font-size: 0.875rem;      /* 14px */
}

/* --------------------------------------------------------------------------
   Footer typography.
   Measured before: column headings 20.8px (the same size as headings in the
   main content), body copy 16px, links 14px - so the footer competed with the
   page above it. Scaled down one step so it reads as secondary navigation.
   -------------------------------------------------------------------------- */
footer h5 {
    font-size: 1rem;          /* 20.8px -> 16px */
    line-height: 1.4;
}

footer p,
footer small {
    font-size: 0.875rem;      /* 16px -> 14px */
}

footer .nav-item a,
footer .nav-link {
    font-size: 0.8125rem;     /* 14px -> 13px */
}

/* The newsletter field stays at 16px on purpose: iOS zooms the page when a
   focused input is smaller than 16px. */
footer input {
    font-size: 1rem;
}

/* =========================================================================
   FAQ / CMS "content" pages prose normalisation (2026-07-24).
   The FAQ (and other /page/* content) answers are stored as HTML pasted from a
   word processor and rendered raw via {!! $meta['meta_value'] !!}. That paste
   carried inconsistent inline font-size (some answers 14pt, some 16px, questions
   18pt) and hardcoded colours (#090101 / #000000), so questions and answers
   showed at random sizes and the section headings rendered thin grey. This
   enforces one clean three-tier scale on white cards, overriding the inline
   junk (hence !important - inline styles otherwise win). Scoped to the content
   template's .section-card so nothing else is affected.
   ========================================================================= */

/* Tier 1 - section/category heading (card-header h2, e.g. "Safety and Security"). */
.section-card .card-header h2 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #101317;
    margin: 0;
}

/* Base - normalise every pasted element to one family and colour. */
.section-card .card-body,
.section-card .card-body p,
.section-card .card-body li,
.section-card .card-body span {
    font-family: 'Montserrat', system-ui, sans-serif !important;
    color: #1f2328 !important;
}

/* Tier 3 - answer / body text: kill the 14pt/16px/etc size jumps. */
.section-card .card-body p,
.section-card .card-body li,
.section-card .card-body p span {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.65;
}

/* Tier 2 - questions: the large pasted spans (18pt, defensively 16-20pt) get
   ONE consistent sub-heading treatment instead of big-but-thin text. */
.section-card .card-body p span[style*="16pt"],
.section-card .card-body p span[style*="17pt"],
.section-card .card-body p span[style*="18pt"],
.section-card .card-body p span[style*="19pt"],
.section-card .card-body p span[style*="20pt"] {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #101317 !important;
    line-height: 1.4;
}

/* Preserve intentional emphasis. */
.section-card .card-body strong,
.section-card .card-body b {
    font-weight: 700 !important;
}

/* Whole answers were sometimes pasted wrapped in <em> (e.g. "Yes, we offer a
   live arrival guarantee..."), rendering the entire paragraph italic while its
   neighbours were upright. Normalise a paragraph-level <em>/<i> back to upright.
   A genuinely inline <em>word</em> (nested inside a span, not a direct child of
   the <p>) is left italic, so scientific names etc. still work. 2026-07-24. */
.section-card .card-body p > em,
.section-card .card-body p > i,
.section-card .card-body p > em *,
.section-card .card-body p > i * {
    font-style: normal !important;
}

/* Tidy the divider and drop the empty spacer paragraphs the paste left behind. */
.section-card .card-body hr {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.section-card .card-body p:empty {
    display: none;
}

/* Privacy Policy "Last updated" line, under the title in the dark-green hero.
   Muted light so it sits below the title without competing. 2026-07-24. */
.content-effective-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}