/* Self-hosted webfonts. Replaces the previous Google Fonts CDN load. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Bauhaus93'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/Bauhaus93-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Bauhaus93'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Bauhaus93-Regular.ttf') format('truetype'); }

/* Brand tokens — shared across the new shell + home + components. */
:root {
    --brand-navy:     #022569;
    --brand-blue:     #0448CF;
    --brand-blue-2:   #1066c5;
    --brand-gold:     #ffd966;
    --ink:            #1a2332;
    --muted:          #4a5568;
    --rule:           #e5edf4;
    --bg-soft:        #f5f9fc;
    --bg-soft-2:      #f7fafc;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: #fff;
    font-weight: 400;
}
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; letter-spacing: -0.01em; line-height: 1.2; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header is now the legacy Elementor template (layouts/partials/legacy_header);
   styling comes from the per-page LiteSpeed CSS bundle. No custom rules here. */

/* Generic CTA button — used by our injected components (rate-tile "Call us"
   fallback, lead-form submit) and any "Apply Now" / "tel:" links in
   extracted content that don't ship Elementor button classes. */
.cta {
    padding: 0.6rem 1.1rem;
    border-radius: 999px;     /* legacy uses pill buttons */
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.1s;
    display: inline-block;
}
.cta:hover { text-decoration: none; transform: translateY(-1px); }
.cta--primary { background: var(--brand-blue); color: #fff; }
.cta--primary:hover { background: var(--brand-navy); box-shadow: 0 4px 10px rgba(2,37,105,0.25); }
.cta--secondary { background: #fff; color: var(--brand-blue); border: 1px solid var(--brand-blue); }
.cta--secondary:hover { background: var(--brand-blue); color: #fff; }

/* Width AND vertical padding are owned by the legacy .site-main rules from
   the LiteSpeed bundle. We don't add our own padding on .page-body so the
   first section's hero image butts right up against the header (matches legacy). */

/* Trending News card grid on the home page (Elementor loop-container
   element-78b23eb1). Each card's thumbnail renders as a CSS background-image
   on element-4f654af6 (the image-pane container), with title + excerpt below
   in element-16fb33a9. Tighten heights/typography so cards stay compact —
   without this they'd inherit the bundle's 252px image min-height + generous
   default padding and end up much taller than the design calls for. */
.elementor-42386 .e-loop-item .elementor-element-4f654af6 { --min-height: 140px; }
.elementor-42386 .e-loop-item .elementor-element-16fb33a9 {
    --padding-top: 10px; --padding-bottom: 10px;
    --padding-left: 12px; --padding-right: 12px;
    --gap: 6px 6px; --row-gap: 6px; --column-gap: 6px;
}
.elementor-42386 .e-loop-item .elementor-widget-theme-post-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.elementor-42386 .e-loop-item .elementor-heading-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}
.elementor-42386 .e-loop-item .elementor-widget-theme-post-excerpt p {
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0;
}

/* Reveal nav-menu submenus on hover. The legacy LiteSpeed bundle hides every
   `.elementor-nav-menu--dropdown` with `display:none` and relies on Elementor's
   frontend JS to flip them open via class toggling — without that JS the
   subpages (Conventional Purchase, FHA Purchase, etc. under each top-level
   nav item) stay invisible. CSS-only fallback so menus work in the dev shell. */
.elementor-nav-menu li.menu-item-has-children { position: relative; }
.elementor-nav-menu li.menu-item-has-children:hover > .sub-menu.elementor-nav-menu--dropdown,
.elementor-nav-menu li.menu-item-has-children:focus-within > .sub-menu.elementor-nav-menu--dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9997;
    width: max-content;
    max-width: 360px;
}
.elementor-nav-menu .sub-menu .elementor-sub-item { white-space: normal; }
/* Nested submenus open to the side. */
.elementor-nav-menu .sub-menu li.menu-item-has-children:hover > .sub-menu.elementor-nav-menu--dropdown,
.elementor-nav-menu .sub-menu li.menu-item-has-children:focus-within > .sub-menu.elementor-nav-menu--dropdown {
    top: 0;
    left: 100%;
}

/* Match every page's hero (the first .e-con.e-parent inside the .elementor
   wrapper) to the home page's hero height. Home is naturally tall because its
   hero contains the Instant Mortgage Rate Quote widget; other pages only have
   a heading + a small intro paragraph and would otherwise look much shorter.
   Override via the --min-height CSS variable so Elementor's `.e-con { min-
   height: var(--min-height) }` rule picks it up.
   Scope to .page-content so the legacy header (also `.elementor > .e-con.e-
   parent:first-child`) is unaffected. */
.page-content .elementor > .e-con.e-parent:first-child {
    --min-height: 800px;
}
@media (max-width: 1024px) {
    .page-content .elementor > .e-con.e-parent:first-child { --min-height: 600px; }
}
@media (max-width: 600px) {
    .page-content .elementor > .e-con.e-parent:first-child { --min-height: 480px; }
}

/* Footer is now the legacy Elementor template (view: layouts/partials/legacy_footer);
   styling comes from the per-page LiteSpeed CSS bundle. No custom footer rules here. */

/* Header / footer responsive behavior comes from the legacy Elementor templates +
   their LiteSpeed CSS bundle. No custom mobile rules here. */

/* === M4: home page, rate tile, lead form, calendly === */

/* Hero: image set inline (style attr) on the <section>; CSS handles cover + fallback. */
.hero {
    color: #fff;
    padding: 7rem 0 6rem;
    text-align: center;
    background-color: var(--brand-navy);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero__heading {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.hero__heading span { color: var(--brand-gold); }
.hero__sub { max-width: 700px; margin: 0 auto 2.25rem; font-size: 1.1rem; opacity: 0.92; line-height: 1.55; }
.hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero .cta--primary { background: var(--brand-gold); color: var(--brand-navy); }
.hero .cta--primary:hover { background: #ffe28a; box-shadow: 0 4px 12px rgba(255,217,102,0.4); }
.hero .cta--secondary { background: transparent; color: #fff; border-color: #fff; }
.hero .cta--secondary:hover { background: rgba(255,255,255,0.12); color: #fff; }

.home-rate-section, .home-lead-section { margin: 4rem auto; }

/* Today's Rates tile — visual match for legacy widget2.php. 4 cards in a row,
   alternating white / navy-gradient backgrounds. No outer tile bg; cards float
   on whatever parent (Elementor section bg or page bg). */
.rate-tile { padding: 0.5rem 0; }
.rate-tile__heading {
    margin: 0 0 1.5rem;
    text-align: center;
    color: var(--brand-navy);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.rate-tile__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.rate-card {
    background: #fff;
    border-radius: 13px;
    padding: 1.5rem 1rem 1rem;
    text-align: center;
    color: #245CB9;
    box-shadow: 0 0 8px -2.5px #245cb9;
    transition: transform 0.15s;
}
.rate-card:hover { transform: translateY(-2px); }
.rate-card--stale { opacity: 0.65; }
.rate-card:nth-child(even) {
    background: linear-gradient(to right, #0445C7, #03286F);
    color: #d9f6ff;
}
.rate-card__label { margin: 0 0 0.75rem; font-size: 1.15rem; font-weight: 600; line-height: 1.2; color: inherit; }
.rate-card__rate { font-size: 1.15rem; font-weight: 700; color: inherit; line-height: 1.2; }
.rate-card__rate--unavailable { color: #a0a0a0; }
.rate-card__apr { font-size: 1.15rem; font-weight: 700; color: inherit; line-height: 1.4; margin-bottom: 0.5rem; }
.rate-card__links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.rate-card__link { font-size: 1rem; font-weight: 400; color: inherit; }
.rate-card:nth-child(odd) .rate-card__link { color: #1a51b3; }
.rate-card__link:first-of-type { text-decoration: underline; }
.rate-card__link:hover { color: inherit; opacity: 0.85; text-decoration: underline; }
.rate-card__hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.rate-tile__as-of { text-align: center; margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--muted); }
.rate-tile__stale-flag { color: #be185d; }
.rate-tile__disclaimer { text-align: center; font-size: 0.75rem; color: var(--muted); margin: 0.4rem 0 0; line-height: 1.45; }
.rate-tile__down { text-align: center; padding: 2rem 0; }
.rate-tile__down p { margin: 0 0 1rem; font-size: 1.1rem; }
.rate-tile__down .cta--primary { background: var(--brand-gold); color: var(--brand-navy); }

/* "Instant Mortgage Rate Quote" widget — visual match for legacy widget1.php
   (navy gradient bg, white labels, transparent inputs with light-blue borders,
   white pill button, green disclosure). */
.lead-form-card {
    background: linear-gradient(to bottom right, #0449cd, #2b69e3, #0449cd);
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(2,37,105,0.18);
    /* Sitewide widget size: matches the Trending News hero column width
       (per dmurphy 2026-04-28). Was 782px — too wide for the dense
       compact layout the design asks for. */
    max-width: 420px;
    margin: 0 auto;
}
.lead-form-card__title {
    margin: 0 0 1.25rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
}
.lead-form-card__errors { background: rgba(255,255,255,0.95); color: #c53030; border-radius: 8px; padding: 0.6rem 0.85rem; margin: 0 0 1rem; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem; }
.lead-form__row label {
    display: flex; flex-direction: column;
    font-size: 1rem; font-weight: 400;
    color: #fff;
    letter-spacing: 0;
}
.lead-form__row input, .lead-form__row select {
    margin-top: 0.35rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #9ec7ee;
    border-radius: 11px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    color: #fff;
    background: transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lead-form__row select option { background: #2b69e3; color: #fff; }
.lead-form__row input::placeholder { color: rgba(255,255,255,0.65); }
.lead-form__row input:focus, .lead-form__row select:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.lead-form__hint { font-weight: normal; color: rgba(255,255,255,0.75); font-size: 0.78rem; }
.lead-form__submit {
    width: 100%;
    margin-top: 1rem;
    padding: 0.85rem;
    font-size: 1.15rem;
    font-weight: 600;
    background: #fff;
    color: #1053D5;
    border-radius: 30px;
}
.lead-form__submit:hover { background: #f5f9ff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); color: #022569; }
.lead-form__disclosure { text-align: center; color: #76F780; font-size: 1rem; margin: 0.85rem 0 0.25rem; font-weight: 500; }

.home-tiles { background: #f7fafc; padding: 3rem 0; margin: 3rem 0; }
.home-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.home-tile {
    background: #fff; border-radius: 8px; padding: 1.5rem;
    border: 1px solid #e5edf4; color: #1a2332;
    text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.home-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.06); }
.home-tile h3 { margin: 0 0 0.5rem; color: #0448CF; }
.home-tile p { margin: 0; color: #4a5568; font-size: 0.95rem; }

/* Photo-backed tile variant: legacy uses Austin-TX / Commercial / Fresh-Start
   as "service" panels, each with a navy/blue gradient overlay. */
.home-tile--bg {
    color: #fff;
    border: none;
    background-color: #022569;
    background-size: cover;
    background-position: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.home-tile--bg h3 { color: #ffd966; }
.home-tile--bg p  { color: rgba(255,255,255,0.92); }

/* "Visit our Knowledge Center" band — uses Union.png as a decorative banner. */
.home-knowledge-band {
    margin: 3rem 0 0;
    padding: 4rem 1.5rem;
    background-color: #f5f9fc;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    text-align: center;
}
.home-knowledge-band .container { max-width: 800px; }
.home-knowledge-band h2 { color: #022569; margin: 0 0 1rem; }
.home-knowledge-band h2 a { color: inherit; text-decoration: none; }
.home-knowledge-band h2 span { color: #0448CF; border-bottom: 3px solid #ffd966; padding-bottom: 2px; }
.home-knowledge-band p { color: #4a5568; max-width: 700px; margin: 0 auto; }

.calendly-section { margin: 3rem auto; }
.calendly-section h2 { color: #0751a7; }
.page-lead { margin-top: 3rem; }

/* "Talk to a Licensed Loan Officer" CTA — replaces the legacy
   "Do You Have Questions?" Elementor block on home + trending-news.
   Visual spec mirrors the questions-section banner on /connect-with-us-3. */
.lb-talk-cta {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px 72px;
    box-sizing: border-box;
    width: 100%;
}
.lb-talk-cta__inner {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 24px;
    padding: 52px 60px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    box-shadow: 0 12px 40px rgba(37,99,235,0.35);
}
.lb-talk-cta__pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.12);
    padding: 5px 14px;
    border-radius: 99px;
    margin-bottom: 12px;
}
.lb-talk-cta__title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 10px;
}
.lb-talk-cta__body {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin: 0;
}
.lb-talk-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.lb-talk-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 15px 28px;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}
.lb-talk-cta__btn--primary {
    background: #fff;
    color: #0a1628;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.lb-talk-cta__btn--primary:hover {
    background: #eff4ff;
    transform: translateY(-2px);
}
.lb-talk-cta__btn--primary svg { transition: transform 0.2s; }
.lb-talk-cta__btn--primary:hover svg { transform: translateX(3px); }
.lb-talk-cta__btn--secondary {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-weight: 700;
}
.lb-talk-cta__btn--secondary:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .hero__heading { font-size: 1.8rem; }
    .rate-tile__grid { grid-template-columns: 1fr 1fr; }
    .home-tiles__grid { grid-template-columns: 1fr; }
    .lead-form__row { grid-template-columns: 1fr; }
    .lb-talk-cta { padding: 0 20px 48px; }
    .lb-talk-cta__inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 24px;
    }
    .lb-talk-cta__actions { align-items: stretch; }
    .lb-talk-cta__btn { justify-content: center; }
}

/* ── Trending news article — post hero alignment ──
   The migrated single-post Elementor template wraps the featured image +
   title in an `.e-con.e-parent.e-con-boxed` flex container whose horizontal
   padding doesn't match the `.elementor-section-boxed` sections that hold
   the article body below it. The result is the image visually indented to
   the right of the body text. Reset the post-hero container's horizontal
   padding so the image's left edge sits at the same x-coordinate as the
   article body content below. */
article.post .post-body .e-con.e-parent:has(.elementor-widget-theme-post-featured-image),
article.post .post-body .e-con.e-parent:has(.elementor-widget-theme-post-featured-image) > .e-con-inner {
    padding-inline: 0;
}
article.post .post-body .elementor-widget-theme-post-featured-image,
article.post .post-body .elementor-widget-theme-post-featured-image .elementor-widget-container {
    text-align: left;
}

.site-logo {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: 27px;
    line-height: 46px;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.01em;
    display: inline-block;
}