/*
 Theme Name:   MMM — HLF
 Theme URI:    https://matchmarketing.ai
 Description:  GeneratePress child theme — The Hoffmann Law Firm build (MMM 2.0). Upgrade of the 1.0 HLF theme: 1.0 preserved verbatim (navy palette, navy chrome, mega-menu, rounded UI) with the 2.0 conventions layered on (expanded tokens, .display class, reusable section scaffolding, opt-in full-bleed helper). Homepage components ship with the homepage build, not here.
 Author:       MatchMarketing™
 Template:     generatepress
 Version:      2.0
*/

/* =========================
   FONTS — self-hosted woff2
   No external requests.
   ========================= */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/source-sans-3-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/source-sans-3-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/source-sans-3-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/source-sans-3-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/roboto-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/roboto-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/roboto-900.woff2') format('woff2');
}

/* =========================
   TOKENS — HLF brand
   ========================= */
:root {
    --mm-brand: #253d63; /* HLF primary navy */
    --mm-brand-2: #325281; /* HLF action blue */
    --mm-brand-3: #5d876f; /* consultation green */
    --mm-brand-3-hover: #4f7460;
    --mm-ink: #1f2937;
    --mm-muted: #667085;
    --mm-chrome: #ffffff;
    --mm-surface: #f6f9fc;
    --mm-line: #dde6f0;
    --mm-line-strong: #cfd9e5;
    --mm-focus: #325281;
    /* GeneratePress token mapping */
    --accent: var(--mm-brand-2);
    --contrast: var(--mm-ink);
    --contrast-2: var(--mm-muted);
    --base: var(--mm-chrome);
    --base-2: #ffffff;
    --base-3: #ffffff;
}

/* =========================
   BASE
   ========================= */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
}

body {
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--mm-ink);
    background: var(--mm-chrome);
    line-height: 1.65;
    accent-color: var(--mm-brand-2);
}

/* =========================
   TYPOGRAPHY
   ========================= */
h1, h2, h3, h4, h5, h6,
.site-title,
.main-title,
.button,
.wp-block-button__link {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mm-brand);
    letter-spacing: -0.01em;
}

p,
li {
    color: var(--mm-ink);
}

small,
.has-small-font-size {
    color: var(--mm-muted);
}

/* =========================
   LINKS
   ========================= */
a {
    color: var(--mm-brand-2);
    text-decoration: none;
    transition: color 160ms ease;
}

    a:hover,
    a:focus {
        color: var(--mm-brand);
    }

:focus-visible {
    outline: 2px solid var(--mm-focus);
    outline-offset: 2px;
}

/* =========================
   HEADER — navy (borderless)
   REPLACES the #masthead/.site-header block
   ========================= */
#masthead,
.site-header,
.inside-header {
    background: var(--mm-brand);
}

/* No border on the header — was creating a stacked-line look */

.site-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================
   NAVIGATION — navy, borderless, mega-menu capable
   REPLACES the entire NAVIGATION section of style.css
   ========================= */
#site-navigation,
.main-navigation,
#mobile-menu-control-wrapper {
    background: var(--mm-brand);
    border: 0;
    box-shadow: none;
}

.inside-navigation {
    background: transparent;
}

.navigation-stick,
.main-navigation.is_stuck {
    background: var(--mm-brand);
}

/* Top-level items */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li > a:visited,
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-item > a,
.main-navigation .menu-bar-item > a:visited {
    color: #ffffff;
    font-weight: 600;
    background: transparent;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item:focus-within > a {
    color: rgba(255, 255, 255, 0.82);
}

/* Submenu container — borderless, elevated, white surface */
.main-navigation ul ul {
    background: #ffffff;
    border: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 14px 0;
    min-width: 240px;
}

/* Submenu items — dark text on white, readable */
.main-navigation .main-nav ul ul li a,
.main-navigation .main-nav ul ul li a:visited {
    color: var(--mm-ink);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    padding: 8px 18px;
    background: transparent;
    border-radius: 6px;
    transition: background-color 140ms ease, color 140ms ease;
}

.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:focus-within > a,
.main-navigation .main-nav ul ul li.current-menu-item > a {
    color: var(--mm-brand);
    background: var(--mm-surface);
}

/* =========================
   MEGA MENU — multi-column dropdowns
   Works with GeneratePress .mega-menu classes
   ========================= */
.main-navigation .main-nav ul li.mega-menu > .sub-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    column-gap: 8px;
    row-gap: 2px;
    padding: 20px 24px;
    min-width: 720px;
    max-width: min(calc(100vw - 40px), 900px);
}

.main-navigation .main-nav ul li.mega-menu-col-2 > .sub-menu {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    min-width: 520px;
}

.main-navigation .main-nav ul li.mega-menu-col-4 > .sub-menu {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    min-width: 860px;
}

/* Mega-menu sub-items need tighter styling (many per row) */
.main-navigation .main-nav ul li.mega-menu > .sub-menu li {
    width: auto;
    margin: 0;
}

    .main-navigation .main-nav ul li.mega-menu > .sub-menu li a {
        padding: 6px 12px;
        font-size: 13.5px;
        line-height: 1.35;
        display: block;
    }

/* Mobile — stack everything, no grid */
@media (max-width: 768px) {
    .main-navigation .main-nav,
    .main-navigation .main-nav > ul {
        background: var(--mm-brand);
    }

    .main-navigation ul ul {
        background: rgba(0, 0, 0, 0.18);
        box-shadow: none;
        border-radius: 0;
        padding: 4px 0;
        min-width: 0;
    }

    .main-navigation .main-nav ul li.mega-menu > .sub-menu,
    .main-navigation .main-nav ul li.mega-menu-col-2 > .sub-menu,
    .main-navigation .main-nav ul li.mega-menu-col-4 > .sub-menu {
        display: block;
        grid-template-columns: none;
        padding: 4px 0;
        min-width: 0;
        max-width: none;
    }

        .main-navigation .main-nav ul ul li a,
        .main-navigation .main-nav ul ul li a:visited,
        .main-navigation .main-nav ul li.mega-menu > .sub-menu li a {
            color: #ffffff;
            padding: 10px 24px;
            font-size: 14px;
        }

    .main-navigation .main-nav ul ul li:hover > a,
    .main-navigation .main-nav ul ul li:focus-within > a {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Hamburger toggle */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
    color: #ffffff;
    background: transparent;
    border: 0;
}

/* Dropdown arrow indicator — hide default underline-style hover */
.main-navigation .dropdown-menu-toggle {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================
   BUTTONS
   ========================= */
.button,
.wp-block-button__link,
button,
input[type="submit"] {
    background: var(--mm-brand-2);
    border: 1px solid var(--mm-brand-2);
    color: #fff;
    border-radius: 10px;
    padding: 0.75em 1.2em;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

    .button:hover,
    .wp-block-button__link:hover,
    button:hover,
    input[type="submit"]:hover {
        background: var(--mm-brand);
        border-color: var(--mm-brand);
        color: #fff;
    }

    .is-style-outline .wp-block-button__link,
    .button.button-outline {
        background: transparent;
        border-color: var(--mm-line-strong);
        color: var(--mm-brand);
    }

        .is-style-outline .wp-block-button__link:hover,
        .button.button-outline:hover {
            background: var(--mm-surface);
            border-color: var(--mm-brand-2);
            color: var(--mm-brand);
        }

/* =========================
   FORMS
   ========================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: #fff;
    border: 1px solid var(--mm-line-strong);
    border-radius: 10px;
    color: var(--mm-ink);
    font-family: inherit;
    box-shadow: none;
}

    input::placeholder,
    textarea::placeholder {
        color: var(--mm-muted);
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--mm-brand-2);
        outline: none;
    }

/* =========================
   CONTENT SPACING
   ========================= */

.home.one-container .site-content {
    padding: 0 28px 28px;
}

.one-container .site-content {
    padding: 28px;
}

.no-sidebar .entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

@media (min-width: 768px) {
    .one-container .site-content {
        padding: 28px;
    }
}


/* =========================
   SIMPLE SURFACES / UTILITIES
   ========================= */
.mm-muted {
    color: var(--mm-muted);
}

.mm-surface {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
}

/* =========================
   FOOTER — navy
   ========================= */
.site-footer,
.footer-widgets,
.site-info {
    background: var(--mm-brand);
    color: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

    .site-info a,
    .footer-widgets a,
    .site-footer a, .site-footer p {
        color: #ffffff;
    }

        .site-info a:hover,
        .footer-widgets a:hover,
        .site-footer a:hover {
            color: rgba(255, 255, 255, 0.82);
        }

    .footer-widgets, .footer-widgets .gb-headline {
        color: var(--mm-chrome);
    }

/* Mobile CTA row */
.mm-mobile-cta {
    display: none;
}

@media (max-width: 767px) {
    .mm-mobile-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 8px 12px 10px;
        background: var(--mm-chrome);
        border-bottom: 1px solid var(--mm-line);
    }

        .mm-mobile-cta .mm-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0.8rem 0.85rem;
            border-radius: 12px;
            font-family: Roboto, Arial, sans-serif;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
            color: #fff;
            transition: background-color 150ms ease, color 150ms ease;
        }

    /* CALL BUTTON */
    .mm-cta--call {
        background: var(--mm-brand-2);
    }

        .mm-cta--call:hover,
        .mm-cta--call:focus,
        .mm-cta--call:active {
            background: var(--mm-brand);
            color: #fff;
        }

    /* CONSULT BUTTON */
    .mm-cta--consult {
        background: var(--mm-brand-3);
    }

        .mm-cta--consult:hover,
        .mm-cta--consult:focus,
        .mm-cta--consult:active {
            background: var(--mm-brand-3-hover);
            color: #fff;
        }
}

/* ============================================================
   ============================================================
   MMM 2.0 ADDITIONS
   Everything below is additive and opt-in. None of it alters 1.0's
   output: the classes here are unused until the homepage build attaches
   to them. Activating 2.0 is a no-visible-change foundation upgrade.
   ============================================================
   ============================================================ */

/* =========================
   2.0 — EXPANDED TOKENS (1.0 :root above is unchanged)
   ========================= */
:root {
    --mm-brand-hover: #1d3050; /* darker navy — for hover/active on brand fills */
    --mm-brand-2-hover: #284268; /* darker action blue */
    --mm-surface-2: #eef3f9; /* deeper cool surface for alternating bands */
    --mm-gold: #c8973a; /* amber/gold accent — primary CTA, eyebrows, phone bar */
    --mm-gold-hover: #ab7d27; /* darker gold for hover/active */
    --mm-navy-deep: #15273f; /* deep navy for dark hero / CTA bands */
}

/* =========================
   2.0 — DISPLAY TYPE
   Reusable heavy display style for the homepage build (hero headline,
   big stats). Heavy Roboto, normal case — calm and authoritative.
   ========================= */
.display,
h1.display,
h2.display {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.04;
}

/* =========================
   2.0 — EXTRA SURFACES
   ========================= */
.mm-surface-2 {
    background: var(--mm-surface-2);
}

.mm-surface-dark {
    background: var(--mm-ink);
    color: #fff;
    border-radius: 16px;
}

    .mm-surface-dark h1,
    .mm-surface-dark h2,
    .mm-surface-dark h3,
    .mm-surface-dark h4,
    .mm-surface-dark h5,
    .mm-surface-dark h6 {
        color: #fff;
    }

    .mm-surface-dark a {
        color: #ffffff;
    }

/* =========================
   2.0 — SECTION SCAFFOLDING
   The reusable band + heading system. Homepage components attach to
   these in step 2; no bespoke sections are baked in here.
   ========================= */
.mm-section {
    padding: 90px 0;
}

.mm-section--sm {
    padding: 60px 0;
}

.mm-section-inner {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
}

.mm-eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-gold);
    margin: 0 0 16px;
}

    .mm-eyebrow::before {
        content: "";
        width: 32px;
        height: 2px;
        background: var(--mm-gold);
        flex-shrink: 0;
        margin-top: 0.55em;
    }

.mm-eyebrow--center {
    justify-content: center;
}

    .mm-eyebrow--center::after {
        content: "";
        width: 32px;
        height: 2px;
        background: var(--mm-gold);
        flex-shrink: 0;
        margin-top: 0.55em;
    }

.mm-lede {
    font-size: 19px;
    line-height: 1.55;
}

.mm-section-head {
    margin-bottom: 50px;
}

    .mm-section-head h2 {
        font-size: clamp(32px, 4.4vw, 52px);
        color: var(--mm-brand);
        max-width: 800px;
        margin: 0 0 16px;
    }

    .mm-section-head .mm-sub {
        color: var(--mm-muted);
        font-size: 18px;
        line-height: 1.55;
        max-width: 680px;
        margin: 0;
    }

.mm-section-head--center {
    text-align: center;
}

    .mm-section-head--center .mm-eyebrow,
    .mm-section-head--center h2,
    .mm-section-head--center .mm-sub {
        margin-left: auto;
        margin-right: auto;
    }

/* =========================
   2.0 — FULL-BLEED HELPER (opt-in)
   Add the `mm-fullbleed` class to a page's body/wrapper when building an
   edge-to-edge band layout, so .site-content stops adding the GP gap.
   Scoped to .mm-fullbleed so interior pages keep their 28px padding and
   the current homepage is untouched until we rebuild it.
   ========================= */
.mm-fullbleed.one-container .site-content {
    padding: 0;
}

.mm-fullbleed .site-main {
    margin: 0;
}

.mm-fullbleed .entry-content {
    padding: 0;
    margin: 0;
}

.mm-fullbleed .inside-article {
    padding: 0;
}

.mm-fullbleed article .entry-header,
.mm-fullbleed .entry-header,
.mm-fullbleed article .entry-footer {
    display: none !important;
}

@media (max-width: 768px) {
    .mm-fullbleed .gb-grid-wrapper > .gb-grid-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   ============================================================
   HERO — homepage (form-forward, dark navy)
   Built for the homepage build. Left column = headline + stats +
   attorney photo + recognized-by; right column = Forminator lead card
   anchored top-right. Grid areas keep the form aligned to the top on
   desktop and reorder head -> form -> proof on mobile.
   ============================================================
   ============================================================ */
.mm-hero {
    position: relative;
    overflow: hidden;
    background: var(--mm-navy-deep);
    color: #fff;
    padding: 52px 0 60px;
}

    .mm-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at 88% 16%, rgba(200, 152, 58, 0.20), transparent 50%), radial-gradient(ellipse at 5% 94%, rgba(45, 84, 135, 0.55), transparent 55%);
    }

    .mm-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
        mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    }

.mm-hero__grid {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(18px, 3vw, 52px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
    grid-template-areas: "head form" "proof form";
}

.mm-hero__head {
    grid-area: head;
    max-width: 600px;
    margin-bottom: 26px;
}

.mm-hero__proof {
    grid-area: proof;
    max-width: 600px;
}

.mm-hero__form-col {
    grid-area: form;
}

.mm-hero h1 {
    color: #fff;
    font-family: Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(38px, 4.6vw, 60px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.mm-hero__sub {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(233, 240, 248, 0.85);
}

    .mm-hero__sub strong {
        color: #fff;
        font-weight: 600;
    }

.mm-hero__stats {
    display: flex;
    gap: 0;
    margin-bottom: 26px;
}

.mm-hero__stat {
    padding: 0 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

    .mm-hero__stat:first-child {
        padding-left: 0;
        border-left: 0;
    }

.mm-hero__stat-big {
    font-family: Roboto, sans-serif;
    font-weight: 900;
    font-size: 23px;
    color: #fff;
    line-height: 1.1;
}

.mm-hero__stat-sm {
    font-size: 13px;
    color: rgba(233, 240, 248, 0.72);
    line-height: 1.35;
    margin-top: 4px;
}

.mm-hero__photo {
    border-radius: 14px;
    overflow: hidden;
    background: var(--mm-brand);
    height: 250px;
    margin-bottom: 24px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

    .mm-hero__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 22%;
        display: block;
    }

.mm-hero__creds-label {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
}

.mm-hero__creds {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

    /* Real badge images: drop <img> in with this class. Light tile keeps
       dark/transparent badge art readable on the navy band. */
    .mm-hero__creds img {
        height: 64px;
        width: auto;
        background: #fff;
        border-radius: 9px;
        padding: 8px 12px;
    }

.mm-hero__card {
    background: #fff;
    color: var(--mm-ink);
    border-radius: 16px;
    padding: 26px 26px 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

    .mm-hero__card h2 {
        font-family: Roboto, sans-serif;
        font-weight: 900;
        font-size: 24px;
        color: var(--mm-brand);
        margin-bottom: 5px;
        letter-spacing: -0.015em;
    }

.mm-hero__card-sub {
    font-size: 14.5px;
    color: var(--mm-muted);
    margin-bottom: 16px;
}

.mm-hero__fine {
    font-size: 11.5px;
    color: var(--mm-muted);
    text-align: center;
    margin-top: 8px;
}

    .mm-hero__fine strong {
        color: var(--mm-brand-3);
    }

/* Forminator form sitting inside the hero card — gold submit, tightened
   spacing. Field/label styling is inherited from the Forminator section
   above; these scope the submit + rhythm to the hero only. */
.mm-hero__card .forminator-custom-form {
    margin: 0;
}

.mm-hero__card .forminator-button,
.mm-hero__card .forminator-button-submit,
.mm-hero__card button[type="submit"] {
    background: var(--mm-gold) !important;
    color: var(--mm-navy-deep) !important;
}

    .mm-hero__card .forminator-button:hover,
    .mm-hero__card .forminator-button-submit:hover,
    .mm-hero__card button[type="submit"]:hover {
        background: var(--mm-gold-hover) !important;
        color: var(--mm-navy-deep) !important;
    }

@media (max-width: 960px) {
    .mm-hero__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "form" "proof";
        column-gap: 0;
    }

    .mm-hero__head, .mm-hero__proof {
        max-width: none;
    }

    .mm-hero__head {
        margin-bottom: 22px;
    }

    .mm-hero__form-col {
        margin-bottom: 28px;
    }
}

@media (max-width: 540px) {
    .mm-hero__stats {
        flex-direction: column;
        gap: 14px;
    }

    .mm-hero__stat {
        border-left: 0;
        padding: 0;
    }
}