/*
 * template.css - the site's global look: colour, typography, layout.
 *
 * This is one of only two global asset files (the other is js/template.js).
 * Anything belonging to a single component goes in css/components/<name>.css
 * and is loaded by that page with @push('styles').
 *
 * Loaded after Bootstrap, so the tokens below can retune Bootstrap's own
 * custom properties instead of overriding its rules.
 */

:root {
    /* Typography - Libre Baskerville for headings, Source Sans 3 for body.
       The matching Google Fonts link lives in site/layouts/app.blade.php. */
    --site-font-head: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --site-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Colour - Heany Law brand: navy and brass. Contrast ratios measured
       against --site-bg unless noted. */
    --site-primary: #10243f;        /* navy                                     */
    --site-primary-dark: #0b1a2e;
    --site-primary-rgb: 16, 36, 63;
    --site-accent: #c9a227;         /* brass, on dark only - 6.45:1 on navy     */
    --site-accent-ink: #8a6a14;     /* brass, on light - white on it is 5.06:1  */
    --site-bg: #fbfaf7;
    --site-surface: #ffffff;
    --site-text: #1c2430;           /* 14.97:1 on --site-bg                     */
    --site-muted: #5a6068;          /*  6.08:1 on --site-bg                     */
    --site-link: #1b3a5f;           /*  9.86:1 on --site-bg                     */
    --site-border: #e2ded6;

    /* Shape and rhythm */
    --site-radius: 0.25rem;
    --site-section-y: 3rem;

    /* Spacing */
    --site-space-xs: 0.375rem;
    --site-space-sm: 0.625rem;
    --site-space-md: 1rem;

    /* The fixed phone call bar's height (components/call-bar.css): its 56px
       links, the 1px top border and the phone's own reserved strip. The body
       pads by it and the consent banner sticks above it, from one value. */
    --site-call-bar-h: calc(3.5rem + 1px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    :root {
        --site-section-y: 5rem;
    }
}

/* Hand the tokens to Bootstrap. Both forms are set where Bootstrap uses an
   -rgb variant for its utilities. */
:root {
    --bs-body-font-family: var(--site-font-body);
    --bs-body-font-size: 1.0625rem;
    --bs-body-color: var(--site-text);
    --bs-body-color-rgb: 28, 36, 48;
    --bs-body-bg: var(--site-bg);
    --bs-body-bg-rgb: 251, 250, 247;
    --bs-secondary-color: var(--site-muted);
    --bs-tertiary-bg: var(--site-surface);
    --bs-tertiary-bg-rgb: 255, 255, 255;
    --bs-border-color: var(--site-border);
    --bs-border-radius: var(--site-radius);
    --bs-emphasis-color: var(--site-primary);
    --bs-link-color: var(--site-link);
    --bs-link-color-rgb: 27, 58, 95;
    --bs-link-hover-color: var(--site-primary);
    --bs-link-hover-color-rgb: 16, 36, 63;
    --bs-heading-color: var(--site-primary);
}

/* In-page anchors have to clear the sticky header. */
html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 5rem;
}

/* No image may widen the page. Bootstrap Reboot does not set this - only
   .img-fluid does - and HTML written on the Legal tab carries no Bootstrap
   classes, so an administrator who drops a photograph into the privacy
   policy would otherwise give a public page sideways scroll on a phone. The
   Markdown renderer used to strip images entirely; the rich text editor
   allows them, so the guard has to live here instead (Ray Castillo, review
   of the starter port). height: auto keeps the aspect ratio of every image
   that carries width and height attributes, which is all of ours. */
img {
    max-width: 100%;
    height: auto;
}

/* Typography scale. clamp() does the work between breakpoints so headings
   never need a per-breakpoint override. */
h1,
h2,
h3,
h4,
.font-head {
    font-family: var(--site-font-head);
    color: var(--site-primary);
}

h1 {
    font-size: clamp(1.75rem, 5.2vw, 3rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.375rem;
    line-height: 1.3;
}

/* Sentence copy. One rule for the whole page: everything inside <main> that is
   a sentence reads at 1.2rem, which is the size Terry set. The chrome keeps the
   base size - the navigation, the buttons, the brand lockup and the footer are
   not prose - and the two smaller voices, the eyebrow above a heading and the
   disclaimer under one, set their own size below. */
main p,
main li {
    font-size: 1.2rem;
}

.lede {
    font-size: clamp(1.2rem, 2.1vw, 1.375rem);
    color: var(--site-muted);
}

.disclaimer {
    font-size: 0.95rem;
    color: var(--site-muted);
}

/* Section rhythm: every band of the page uses the same vertical padding, and
   a section can shorten itself by resetting --site-section-y on its own. */
.section {
    padding-block: var(--site-section-y);
}

.section-surface {
    background-color: var(--site-surface);
    border-block: 1px solid var(--site-border);
}

/* A darker band, for a section that should read as a break from the page rather
   than another panel on it. Nothing that reads on the page background reads on
   this, so the heading block is reversed out: white is 8.23:1 on it, while the
   navy heading would be 1.9:1. Cards and panels inside keep their own colours,
   which is why this sets the section's own type and not a colour on every
   descendant.

   The heading is brass at 3.4:1. That is under the 4.5:1 a sentence needs and
   deliberately so - h2 is clamped between 24px and 36px and bold, which is
   large text, where 3:1 is the bar. Do not borrow this colour for body copy on
   this ground. */
.section-muted {
    background-color: #514e4e;
    color: #ffffff;
}

.section-muted h2 {
    color: var(--site-accent);
}

.section-muted .eyebrow {
    color: #ffffff;
}

.section-muted .lede {
    color: rgba(255, 255, 255, 0.92);
}

.eyebrow {
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--site-accent-ink);
    margin-bottom: 0.5rem;
}

/* The short brass rule that sits under an eyebrow. */
.rule {
    width: 56px;
    height: 3px;
    background-color: var(--site-accent-ink);
    border: 0;
    opacity: 1;
    margin: 0 0 1.25rem;
}

/* Buttons - 48px tall, so every one of them clears the 44px touch target. */
.btn {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-font-weight: 600;
}

.btn-brand {
    --bs-btn-bg: var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--site-primary-dark);
    --bs-btn-hover-border-color: var(--site-primary-dark);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--site-primary-dark);
    --bs-btn-active-border-color: var(--site-primary-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--site-primary);
    --bs-btn-disabled-border-color: var(--site-primary);
    --bs-btn-disabled-color: #ffffff;
}

.btn-brand-outline {
    --bs-btn-color: var(--site-primary);
    --bs-btn-border-color: var(--site-primary);
    --bs-btn-hover-bg: var(--site-primary);
    --bs-btn-hover-border-color: var(--site-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--site-primary);
    --bs-btn-active-border-color: var(--site-primary);
    --bs-btn-active-color: #ffffff;
}

/* For use on the navy hero and other dark bands. */
.btn-on-dark {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #ffffff;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #ffffff;
    --bs-btn-hover-color: var(--site-primary);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-active-color: var(--site-primary);
}

/* Forms - 48px controls, brand focus ring. Global because every form on the
   site uses them; anything specific to one form stays in its component file. */
.form-control,
.form-select {
    min-height: 48px;
    border-color: var(--site-border);
}

/* The border only: the ring below is the focus indicator, and a text field
   matches :focus-visible on every kind of focus, so a glow here would never
   be seen. */
.form-control:focus,
.form-select:focus {
    border-color: var(--site-primary);
}

.form-label {
    font-weight: 600;
    font-size: 0.9375rem;
}

/*
 * Keyboard focus must always be visible, on every element, in one style.
 *
 * A two-tone ring (issue #15): a brass stripe hugging the element and a navy
 * stripe outside it. Brass alone is 2.4:1 on white and 2.3:1 on the cream
 * page, under the 3:1 of WCAG 2.2 SC 1.4.11; navy alone vanishes on the navy
 * header, footer and call bar. Together one stripe is always at least 6.45:1
 * against whatever is behind the element (navy is 15.6:1 on white, brass
 * 6.45:1 on navy) and the two are 6.45:1 against each other, so the ring
 * reads on every surface the site has. Over the hero photograph neither
 * colour alone reaches 3:1 in the brightest parts of the picture; there the
 * contrast between the two stripes is what makes the ring, so the second
 * stripe is load-bearing, not decoration. The box-shadow is the inner stripe
 * and the outline the outer one, offset by the shadow's width so they meet.
 * Forced-colours mode drops the shadow and keeps the outline.
 *
 * Bootstrap replaces the outline with a faint box-shadow of its own on its
 * interactive components, and those rules outrank a bare :focus-visible. Each
 * one the site uses is named here so the ring is always this one: a 1.4:1
 * glow is not a focus indicator. The invalid state is named too, or the red
 * glow it gets after a failed submit would replace the brass stripe.
 */
:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-control.is-invalid:focus-visible,
.form-select.is-invalid:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--site-accent);
}

/* The skip link's target is the whole <main>, as wide as the viewport: a ring
   drawn round it runs off both sides and reads as a rule across the page. The
   heading the visitor lands on is the cue; main is not operable, so SC 2.4.7
   asks for no indicator on it. Same for the offline notice's main. */
main[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Skip link: off-screen until it takes focus, then the first thing on the page. */
.skip-link {
    position: absolute;
    /* Inset so the ring (5px outside the link) clears the viewport edge with
       room to spare, rather than touching it on a phone. */
    top: var(--site-space-sm);
    left: var(--site-space-sm);
    z-index: 1080;
    padding: var(--site-space-sm) var(--site-space-md);
    background-color: var(--site-primary);
    color: #ffffff;
    text-decoration: none;
    /* Its own height plus twice the inset: clear of the viewport at any font
       size. A percentage alone left a sliver of navy at the top edge. */
    transform: translateY(calc(-100% - 2 * var(--site-space-sm)));
}

.skip-link:focus {
    color: #ffffff;
    transform: translateY(0);
}

/*
 * The brand lockup (mark + wordmark) and the square icon button. Global
 * rather than per-component: the header, the footer and the call bar all use
 * them, and they are part of the site's identity rather than of one section.
 */
.brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-height: 48px;
}

.brand img {
    width: 48px;
    height: 48px;
    flex: none;
}

.brand-name {
    display: block;
    font-family: var(--site-font-head);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--site-primary);
    letter-spacing: 0.01em;
}

.brand-tag {
    display: block;
    font-family: var(--site-font-body);
    font-weight: 400;
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-muted);
    margin-top: 0.3rem;
}

@media (min-width: 576px) {
    .brand-name {
        font-size: 1.1875rem;
    }

    .brand-tag {
        font-size: 0.625rem;
    }
}

.icon-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    color: var(--site-primary);
    background-color: var(--site-surface);
    text-decoration: none;
}

.icon-btn-on-dark {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.icon-btn-on-dark:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Phone numbers read as one tappable row wherever they appear. */
.phone-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--site-primary);
    text-decoration: none;
    white-space: nowrap;
}

.phone-link:hover {
    color: var(--site-primary);
    text-decoration: underline;
}

/* Touch targets: the collapsed navbar button and every nav row clear 44px. */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}

.navbar-nav .nav-link {
    padding-top: var(--site-space-sm);
    padding-bottom: var(--site-space-sm);
}

/* Respect a reduced-motion preference everywhere, not only in Bootstrap's own
   components. */
@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;
    }
}

/* Site Offline notice (resources/views/site/offline/index.blade.php, and the
   package's fallback copy). A handful of rules, so they live here in the
   global look file rather than in a component pair the page would have to
   @push - the offline page is standalone and pushes nothing. */

/* The navy band across the top, carrying the header's own .brand lockup
   (above) on a dark ground, without loading the header's stylesheet. */
.offline-band {
    background-color: var(--site-primary);
    padding: var(--site-space-md) 0;
}

.offline-band .brand-name {
    color: #ffffff;
}

.offline-band .brand-tag {
    color: var(--site-accent);
}

.offline-message {
    /* The message is one textarea of plain text; the administrator's line
       breaks are kept without any markup having to be built from it. */
    white-space: pre-line;
}