/*
    Theme Name: Crossen Law Firm
    Author: GWP Inc
    Author URI: https://gwpinc.com
    Description: Crossen Law Firm child theme for Bootstrap Component Blox. Prefix: clf. See project-manifest.md.
    Version: 1.0.0
    Template: bootstrap-component-blox
    Text Domain: bcb-child
*/

/* ==========================================================================
   1. CSS Variables — Crossen brand tokens (see project-manifest.md section 2)
   ========================================================================== */

:root {
    --clf-primary: #00358e;        /* Crossen brand blue */
    --clf-primary-deep: #002567;   /* Darker blue — hovers, gradients-free depth */
    --clf-dark: #0a1f44;           /* Deep navy — dark sections, footer */
    --clf-accent: #da291c;         /* Crossen red — CTAs and accents only */
    --clf-accent-deep: #b71e13;    /* Red hover */
    --clf-accent-bright: #ff8177;  /* Readable red accent on navy (eyebrows on dark) */
    --clf-light: #f4f6fa;          /* Neutral light section background */
    --clf-line: #dfe5ef;           /* Borders / dividers on light */
    --clf-line-dark: rgba(255,255,255,.14); /* Borders / dividers on dark */
    --clf-body: #38415a;           /* Body text on light */
    --clf-muted: #67718c;          /* Muted text on light */
    --clf-muted-dark: #b9c5e0;     /* Muted text on navy */
    --clf-font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --clf-font-header: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* UI labels: nav, buttons, eyebrows, phone numbers */
    --clf-font-display: "Playfair Display", Georgia, serif;    /* Headings — law-firm serif */
    --clf-radius: 12px;            /* Card radius */
    --clf-radius-sm: 6px;          /* Button/input radius */
    --clf-shadow: 0 1px 2px rgba(10, 31, 68, .06), 0 8px 24px rgba(10, 31, 68, .08);
    --clf-shadow-lift: 0 2px 4px rgba(10, 31, 68, .08), 0 16px 32px rgba(10, 31, 68, .14);
}

/* ==========================================================================
   2. Typography — Heading font inheritance + font utility classes
   ========================================================================== */

body {
    font-family: var(--clf-font);
    color: var(--clf-body);
}

h1, h2, h3, h4, h5 {
    font-family: var(--clf-font-display);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--clf-dark);
}

.clf-font-header {
    font-family: var(--clf-font-header);
    font-weight: 700;
    color: var(--clf-dark);
}

/* Bootstrap .display-* sets font-weight 300, which static Playfair loads
   used to nearest-match to 500. Pin the intended weight explicitly so
   adding/removing font weights can't silently reflow headings.
   (The homepage hero h1 overrides to 400 in home.css per client request.) */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 500;
    text-wrap: balance;
}

.clf-font-body {
    font-family: var(--clf-font) !important;
}

/* Section label ("eyebrow") above headings */
.clf-eyebrow {
    display: block;
    font-family: var(--clf-font-header);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clf-accent);
    margin-bottom: .75rem;
}

/* ==========================================================================
   3. Text & Background Color Classes
   ========================================================================== */

.clf-text-primary { color: var(--clf-primary); }
.clf-text-accent { color: var(--clf-accent); }
.clf-text-dark { color: var(--clf-dark); }
.clf-text-muted { color: var(--clf-muted); }

.clf-bg-primary { background-color: var(--clf-primary); }
.clf-bg-dark { background-color: var(--clf-dark); }
.clf-bg-light { background-color: var(--clf-light); }

/* Dark sections: readable defaults without extra classes on every element */
.clf-bg-dark, .clf-bg-primary { color: var(--clf-muted-dark); }
.clf-bg-dark h1, .clf-bg-dark h2, .clf-bg-dark h3, .clf-bg-dark h4, .clf-bg-dark h5,
.clf-bg-primary h1, .clf-bg-primary h2, .clf-bg-primary h3, .clf-bg-primary h4, .clf-bg-primary h5 {
    color: #fff;
}

.clf-bg-dark .clf-eyebrow, .clf-bg-primary .clf-eyebrow {
    color: var(--clf-accent-bright);
}

/* ==========================================================================
   4. Button System — base .btn from parent pattern; Crossen variants
   ========================================================================== */

.btn {
    font-weight: 600;
    border-radius: var(--clf-radius-sm);
    padding: 12px 28px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.clf-btn-primary {
    background-color: var(--clf-accent);
    color: #fff;
}
.clf-btn-primary:hover,
.clf-btn-primary:focus {
    background-color: var(--clf-accent-deep);
    color: #fff;
}

.clf-btn-dark {
    background-color: var(--clf-primary);
    color: #fff;
}
.clf-btn-dark:hover,
.clf-btn-dark:focus {
    background-color: var(--clf-primary-deep);
    color: #fff;
}

.clf-btn-light {
    background-color: #fff;
    color: var(--clf-primary);
}
.clf-btn-light:hover,
.clf-btn-light:focus {
    background-color: var(--clf-light);
    color: var(--clf-primary-deep);
}

.clf-btn-light-outline {
    border: 2px solid rgba(255, 255, 255, .7);
    color: #fff;
}
.clf-btn-light-outline:hover,
.clf-btn-light-outline:focus {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* Visible focus for keyboard users, sitewide */
a:focus-visible, .btn:focus-visible, button:focus-visible {
    outline: 3px solid rgba(0, 53, 142, .55);
    outline-offset: 2px;
}
.clf-bg-dark a:focus-visible, .clf-bg-primary a:focus-visible,
.clf-bg-dark .btn:focus-visible, .clf-bg-primary .btn:focus-visible {
    outline-color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   5. Utility Classes — Shared across all pages
   ========================================================================== */

.fw-600 { font-weight: 600; }
.z-front { z-index: 5; }
.z-back { z-index: 1; }

/* Red accent divider under headings */
.clf-line {
    display: inline-block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--clf-accent);
    margin: .25rem 0 1rem;
}

/* Shared card idiom (documented in project-manifest.md §10) */
.clf-card {
    background: #fff;
    border: 1px solid var(--clf-line);
    border-radius: var(--clf-radius);
    box-shadow: var(--clf-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
a.clf-card:hover, .clf-card-hover:hover {
    box-shadow: var(--clf-shadow-lift);
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn, .clf-card, a.clf-card { transition: none; }
    a.clf-card:hover, .clf-card-hover:hover { transform: none; }
}

/* Card footer link ("Learn More →") */
.clf-card-link {
    font-family: var(--clf-font-header);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--clf-accent);
    text-decoration: none;
}
a.clf-card:hover .clf-card-link,
a.clf-card-link:hover, a.clf-card-link:focus {
    color: var(--clf-accent-deep);
    text-decoration: underline;
}

/* Arrow nudges on hover wherever a card link is used */
.clf-card-link .bi {
    display: inline-block;
    transition: transform .2s ease;
}
a.clf-card:hover .clf-card-link .bi,
a.clf-card-link:hover .bi, a.clf-card-link:focus .bi {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .clf-card-link .bi { transition: none; }
    a.clf-card:hover .clf-card-link .bi,
    a.clf-card-link:hover .bi, a.clf-card-link:focus .bi { transform: none; }
}

/* Long-form/editor content: comfortable reading rhythm (shared by pages) */
.clf-prose {
    line-height: 1.75;
}
.clf-prose h2, .clf-prose h3, .clf-prose h4 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
}
/* The designed h2 top spacing (2.5rem, "generous") must live HERE, not in
   interior.css: the parent re-enqueues this stylesheet last, so equal-
   specificity rules elsewhere never win (docs/HANDOFF.md cascade gotcha).
   Restored 2026-08-25 per client OK — shifts heading rhythm on ~150 pages. */
.clf-prose h2 {
    margin-top: 2.5rem;
}
.clf-prose h2 { font-size: 1.65rem; }
.clf-prose h3 { font-size: 1.35rem; }
.clf-prose h4 { font-size: 1.15rem; }
.clf-prose p, .clf-prose ul, .clf-prose ol {
    margin-bottom: 1.1rem;
}
.clf-prose a {
    color: var(--clf-primary);
}
.clf-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--clf-radius);
}

/* ==========================================================================
   6. Component Classes — page-scoped styles live in template-parts/css/

   These three components render on the homepage AND on interior templates
   (practice-area lists, the Reviews page, interior hero trust strips), so
   they live here rather than in home.css. Promoted 2026-08-14 to close the
   home-vs-interior polish gap; see project-manifest.md §10.
   ========================================================================== */

/* Practice area cards — media / title / hairline footer, hover zoom */
.clf-area-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clf-area-card .clf-area-card-media {
    overflow: hidden;
}

.clf-area-card .clf-area-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .35s ease;
}

.clf-area-card:hover .clf-area-card-img {
    transform: scale(1.05);
}

.clf-area-card .clf-area-card-body {
    flex-grow: 1; /* footers align across the row */
}

.clf-area-card .clf-area-card-footer {
    border-top: 1px solid var(--clf-line);
    padding: .8rem 1.5rem;
}

.clf-area-card h3 {
    color: var(--clf-dark);
}

/* Review cards — decorative serif quote, hairline meta footer */
.clf-review-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

.clf-review-card::before {
    content: "\201C";
    position: absolute;
    top: .35rem;
    right: 1.4rem;
    font-family: var(--clf-font-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--clf-primary);
    opacity: .12;
    pointer-events: none;
}

.clf-review-card .clf-review-stars {
    color: #e7a521;
    font-size: .85rem;
    letter-spacing: .15em;
}

.clf-review-card .clf-review-text {
    flex-grow: 1;
}

.clf-review-card .clf-review-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--clf-line);
    margin-top: 1.1rem;
    padding-top: .9rem;
}

.clf-review-card .clf-review-author {
    font-family: var(--clf-font-header);
    font-weight: 700;
    font-size: .9375rem;
    color: var(--clf-dark);
}

.clf-review-card .clf-review-badge {
    font-family: var(--clf-font-header);
    font-size: .78125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--clf-muted);
}

.clf-review-card .clf-review-badge .bi {
    color: var(--clf-primary);
    margin-right: .25rem;
}

/* Trust band — white strip of differentiators that overlaps the hero seam.
   Used under the homepage hero and interior page heroes. */
.clf-trust-band {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    z-index: 5;
    margin-top: -1.5rem;
    box-shadow: var(--clf-shadow-lift);
}

.clf-trust-item {
    display: flex;
    flex-direction: column; /* icon over label in the narrow 2x2 grid */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .45rem;
    padding: .95rem .65rem;
}

/* Hairline separators: 2x2 below lg, single row of four at lg+ */
.clf-trust-item:nth-child(even) {
    border-left: 1px solid var(--clf-line);
}

.clf-trust-item:nth-child(n+3) {
    border-top: 1px solid var(--clf-line);
}

.clf-trust-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--clf-accent);
    flex-shrink: 0;
}

.clf-trust-label {
    color: var(--clf-dark);
    font-family: var(--clf-font-header);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    text-wrap: balance;
}

@media (min-width: 992px) {
    .clf-trust-band {
        grid-template-columns: repeat(4, 1fr);
        margin-top: -2.75rem;
    }

    .clf-trust-item {
        flex-direction: row;
        gap: .7rem;
        padding: 1.05rem 1rem;
    }

    .clf-trust-item:nth-child(n) {
        border-top: 0;
        border-left: 1px solid var(--clf-line);
    }

    .clf-trust-item:first-child {
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clf-area-card .clf-area-card-img { transition: none; }
    .clf-area-card:hover .clf-area-card-img { transform: none; }
}

/* ==========================================================================
   7. Responsive Overrides
   ========================================================================== */