/* ==========================================================================
   M&M Mortgage Finance - site styles
   Brand plum #794969 sampled from logo_Medium.png
   ========================================================================== */

:root {
    /* Two brand colours, both taken from the theme's balloon artwork:
       plum carries structure (nav, footer, headings), green carries action. */
    --brand: #794969;
    --brand-dark: #5c3750;
    --brand-light: #9c6a8b;
    --brand-tint: #f7f2f5;
    --brand-pale: #d0a7be;
    /* Third brand colour, from the live theme where #9DAB57 is the link and
       button colour. White on it measures only 2.5:1, so text-bearing uses take
       the deeper --olive-deep and the light tone stays decorative. */
    --olive: #9dab57;
    --olive-mid: #849240;
    --olive-deep: #707c38; /* brightest olive that still clears 4.5:1 with white text */
    --olive-deep-hover: #5c6626;
    --olive-hover: #b3c06f;
    --olive-tint: #f4f7ec;
    --green: #008752;
    --green-dark: #00663e;
    --green-tint: #e5f3ed;
    --ink: #2b2b2b;
    --muted: #6c6c6c;
    --rule: #e6dfe3;
    scroll-padding-top: 96px;
}

/* Sticky footer: min-height, not height - a fixed 100% height clips pages
   taller than the viewport and breaks the flex sizing of <main>. */
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
    background-color: #fff;
    line-height: 1.65;
}

/* ---------- Typography ---------- */
/* Baloo 2 - rounded, soft-terminal display sans. It echoes the balloon
   speech-bubble shapes already used across the site (the callout panels, the
   process diagram), so the headline voice ties back to the brand's own visual
   language rather than being an arbitrary type swap. Tight tracking fights
   rounded letterforms the same way it fought the earlier serif attempt, so
   letter-spacing goes back to normal. */
h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--brand);
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); margin-bottom: 0.875rem; }
h3 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.625rem; }
h4 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }
.lead { font-size: 1.125rem; color: #444; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }

.brand { font-weight: 700; color: var(--green); }
.text-muted-sm { font-size: 0.8125rem; color: var(--muted); }

/* ---------- Buttons ---------- */
/* Deliberately below AA contrast (white on #9dab57 is ~2.5:1) - full brightness
   of the live site's actual brand olive was requested over passing that check. */
.btn.brand, button.brand {
    background-color: var(--olive) !important;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
    border: none;
    border-radius: 6px;
    padding: 0.625rem 1.5rem;
    box-shadow: none;
}
.btn.brand:hover, button.brand:hover { background-color: var(--olive-hover) !important; color: #fff !important; text-decoration: none; }
.btn.brand:focus, button.brand:focus { outline: 3px solid var(--olive); outline-offset: 2px; box-shadow: none; }

.btn-outline-brand {
    border: 2px solid var(--olive-deep); color: var(--olive-deep); background: transparent;
    font-weight: 600; border-radius: 6px; padding: 0.5rem 1.25rem;
}
.btn-outline-brand:hover { background: var(--olive-deep); color: #fff; }

/* ---------- Navigation ---------- */
#mainNav {
    background-color: var(--brand) !important;
    padding-top: 0.5rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    /* no transition here: returning to full height snaps back instantly, so the
       bar is never caught mid-animation while the page scrolls up under it */
    transition: none;
}
/* Shrunk: slightly translucent so the watermarked banner reads as moving
   underneath it. 0.92 keeps white nav text well above 4.5:1. */
#mainNav.navbar-shrink {
    transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    padding-top: 0.25rem; padding-bottom: 0.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    background-color: rgba(121,73,105,0.92) !important;
    backdrop-filter: blur(6px);
}
#mainNav .navbar-brand img { transition: height 0.3s ease; height: 52px; }
#mainNav.navbar-shrink .navbar-brand img { height: 40px; }
#mainNav .nav-link { color: rgba(255,255,255,0.88); font-weight: 600; padding: 0.5rem 1rem; position: relative; }
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: #fff; text-decoration: none; }
/* Flat pale-plum bar that grows in from the centre on page load, rather than
   sitting there statically - a small, deliberate touch on the "you are here"
   marker instead of a flat rule with no motion at all. */
@keyframes navUnderlineGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
#mainNav .nav-link.active::after {
    content: "";
    position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.1rem;
    height: 3px; border-radius: 3px;
    background: var(--brand-pale);
    transform-origin: center;
    animation: navUnderlineGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (max-width: 991.98px) {
    #mainNav .navbar-brand img { height: 44px; }
}

/* ---------- Hero / rotating banner ---------- */
.rotating-banner {
    margin-top: 0;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    min-height: 528px; /* 460 + the 68px sitting behind the fixed nav */
    padding-top: 68px;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
    z-index: 1;
}
/* The photos are bright, so white headline text needs something behind it. A flat
   plum wash buried the photo; this is a neutral gradient that stays clear at the
   top and only deepens behind the text, so the family photos read properly. */
.rotating-banner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.50) 45%,
        rgba(0,0,0,0.66) 100%);
    z-index: 1;
}
.rotating-banner .container { position: relative; z-index: 2; }
.rotating-banner h1, .rotating-banner p { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.rotating-banner h1 { font-size: clamp(1.75rem, 4.2vw, 3rem); }
/* 20px bold clears the 18.66px large-text threshold, so 3:1 applies to it too */
.rotating-banner .lead { font-size: 1.25rem; }

/* Slim banner for interior pages. The watermark lives here rather than on the
   nav: this is the taller block, so the tile actually reads, and the nav stays
   clean as it shrinks over the top of it. */
.page-banner {
    margin-top: 0;
    background-color: var(--brand);
    background-image:
        /* solid plum at the very top, fading out - hides the seam where the
           textured banner meets the flat nav sitting above it */
        linear-gradient(to bottom, var(--brand) 0%, rgba(121,73,105,0) 55%),
        linear-gradient(rgba(121,73,105,0.45), rgba(121,73,105,0.45)),
        url("../assets/images/backgrounds/HouseWatermark.png");
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top left, center, top left;
    color: #fff;
    padding: calc(68px + 3rem) 0 2.5rem;
}
.page-banner h1 { color: #fff; margin-bottom: 0.25rem; }
.page-banner p { color: rgba(255,255,255,0.9); margin-bottom: 0; }

/* ---------- Sections ---------- */
section { padding: 3.5rem 0; }
section.tint { background: var(--brand-tint); }
section + section { border-top: 1px solid var(--rule); }
section.tint + section, section + section.tint { border-top: none; }

.mt-huge { margin-top: 6rem; }
@media (min-width: 768px) { .mt-huge { margin-top: 7rem; } }

/* ---------- Lists ---------- */
ol.styled { padding-left: 1.25rem; }
ol.styled li { margin-bottom: 0.625rem; }
ul.styled { list-style: none; padding-left: 0; }
ul.styled li { position: relative; padding-left: 1.6rem; margin-bottom: 0.625rem; }
ul.styled li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--olive-mid);
}

/* ---------- Cards ---------- */
.card-plain {
    background: #fff; border: 1px solid var(--rule); border-radius: 10px;
    padding: 1.5rem; height: 100%;
}
.card-brand {
    background: var(--brand); color: #fff; border-radius: 10px; padding: 1.75rem;
}
.card-brand h2, .card-brand h3 { color: #fff; }
.card-brand a { color: #fff; text-decoration: underline; }
.card-brand ol.styled li { margin-bottom: 0.75rem; }

/* ---------- Balloon panel ----------
   The brand's speech-bubble callout: a peaked cap (650x50) sits on top of the
   plum body, and a tailed base (650x260) closes it off. Both scale to the
   panel width; aspect-ratio gives the base its height without a spacer image. */
/* No drop-shadow: filter forces the whole panel onto a rasterised layer, which
   visibly softens the diagonal edges of the cap and tail artwork. */
.balloon { }
.balloon-cap {
    background-image: url("../assets/images/backgrounds/BGBalloonCapMain.png");
    background-position: bottom left; background-repeat: no-repeat; background-size: 100% auto;
    aspect-ratio: 13 / 1; width: 100%;
}
.balloon-body {
    background-color: var(--brand); color: #fff;
    /* Generous inset: the cap tapers into this block, so text starting tight
       against it reads as crammed. Spacing lives here, not in <br> tags. */
    padding: 1.75rem 2.25rem 0.75rem;
}
.balloon-body > :first-child { margin-top: 0; }
.balloon-body > :last-child { margin-bottom: 0; }
/* centred like the title above it */
.balloon-body > .btn { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.balloon-body h2, .balloon-body h3, .balloon-body h4 { color: #fff; }
/* Normalise the heading size so both balloons match whichever tag they use */
.balloon-body h2, .balloon-body h3 { font-size: clamp(1.6rem, 3vw, 1.9rem); margin-bottom: 1.9rem; text-align: center; }
.balloon-body a { color: #fff; text-decoration: underline; }
.balloon-body ul.styled li::before { background: rgba(255,255,255,0.75); }
.balloon-body ul.styled li,
.balloon-body ol.styled li { margin-bottom: 1rem; line-height: 1.6; }
.balloon-body ul.styled li:last-child,
.balloon-body ol.styled li:last-child { margin-bottom: 0; }
.balloon-base {
    background-image: url("../assets/images/backgrounds/BGBalloonBaseMain.png");
    /* 100% auto keeps the artwork's own 650x260 ratio - never stretched - and a
       shorter box crops the solid plum off its top, which is invisible. That
       trims the dead space under the text without distorting the tail. */
    background-position: bottom left; background-repeat: no-repeat; background-size: 100% auto;
    aspect-ratio: 3.4 / 1; width: 100%; margin-top: -1px; overflow: hidden;
}
/* The tail eats a lot of vertical space on narrow screens - trim it back */
@media (max-width: 575.98px) {
    .balloon-base { aspect-ratio: 4 / 1; }
}

/* Green variant - the theme ships a second balloon pair (.Balloon / .BalloonBase
   at #008752). The live Finance page uses it for the top-10 panel. */
.balloon-green .balloon-cap { background-image: url("../assets/images/backgrounds/BGBalloonCap.png"); }
.balloon-green .balloon-body { background-color: var(--green); }
.balloon-green .balloon-base { background-image: url("../assets/images/backgrounds/BGBalloonBase.png"); }
.balloon-green { }

/* ---------- Quote balloon over a photo ----------
   Mirrors the live page's two overlapping AdRotators: photo, green quote on top. */
.quote-stack { position: relative; }
.quote-stack .quote-photo { width: 100%; display: block; border-radius: 8px; transition: opacity 0.4s ease; }
.quote-stack .quote-balloon {
    display: block; width: 80%; max-width: 340px;
    margin: -14% auto 0; position: relative;
    filter: drop-shadow(0 6px 16px rgba(0,102,62,0.2));
    transition: opacity 0.4s ease;
}

/* ---------- Broker cards ---------- */
.broker-card {
    display: flex; gap: 1.25rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--rule); border-radius: 10px;
    padding: 1.25rem; height: 100%;
}
.broker-photo {
    width: 110px; height: 110px; flex: 0 0 110px;
    object-fit: cover; border-radius: 50%; border: 3px solid var(--olive-tint);
}
.broker-name { font-family: 'Baloo 2', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--brand); margin-bottom: 0.125rem; }
.broker-role { margin-bottom: 0.125rem; }
.broker-contact { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: 0.75rem; row-gap: 0.25rem; font-size: 0.9375rem; }
.broker-contact dt { font-weight: 700; color: var(--muted); }
.broker-contact dd { margin: 0; }
@media (max-width: 400px) {
    .broker-card { flex-direction: column; align-items: center; text-align: center; }
    .broker-contact { justify-content: center; }
}

/* ---------- Lender logos ---------- */
.lender-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: center; }
.lender-grid img {
    max-height: 46px; max-width: 130px; object-fit: contain;
    opacity: 0.9; transition: opacity 0.25s ease, transform 0.25s ease;
}
.lender-grid img:hover { opacity: 1; transform: scale(1.06); }

/* ---------- Footer ---------- */
/* The house watermark is a seamless 335x300 tile (the logo mark, isometric).
   On the live site it repeats across <body>; here it textures the footer.
   The flat overlay keeps white text well clear of the contrast floor.
   Extra bottom padding keeps the fixed cookie / back-to-top buttons clear of the copyright line. */
footer.site-footer {
    background-color: var(--brand-dark);
    background-image:
        linear-gradient(rgba(92,55,80,0.35), rgba(92,55,80,0.35)),
        url("../assets/images/backgrounds/HouseWatermark.png");
    background-repeat: no-repeat, repeat;
    background-size: auto, auto;
    background-position: center, top left;
    color: #fff;
    padding: 2.5rem 0 1.75rem;
}
/* var(--muted) is a mid grey - unreadable on plum. Solid white is the only value that
   clears 4.5:1 over the watermark's lightest areas (0.9 alpha measures 4.41:1),
   so the smaller size carries the hierarchy instead of reduced opacity. */
footer.site-footer .text-muted-sm { color: #fff; }
footer.site-footer a { color: #fff; }
footer.site-footer a:hover { color: rgba(255,255,255,0.8); }
footer.site-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 0.75rem; }
/* MFAA / BNI / AFG logos are white artwork - they sit directly on the dark footer, no tile */
.accred-logos img { height: 40px; margin: 0 0 0.5rem 1.75rem; opacity: 0.92; transition: opacity 0.2s ease; }
.accred-logos a:hover img { opacity: 1; }
/* At full scroll the viewport bottom is the footer bottom, so the fixed cookie
   pill (left) and back-to-top (right) land on this row. Inset it past them
   rather than padding the whole footer, which pushed the copyright too high. */
.footer-bottom { margin-top: 2.75rem; font-size: 0.875rem; padding-left: 5.5rem; padding-right: 3.5rem; }
@media (max-width: 767.98px) {
    /* stacked and centred here, so drop the insets and clear the buttons vertically */
    .footer-bottom { padding-left: 0; padding-right: 0; margin-bottom: 2.75rem; }
}

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 0.9375rem; }
.form-control:focus, .form-select:focus { border-color: var(--green); box-shadow: 0 0 0 0.2rem rgba(0,135,82,0.2); }

/* Bootstrap toggles .invalid-feedback from display:none to block, which grows the
   form and shunts every field down the page. Instead, lay the message over the
   right-hand end of the control itself, next to the warning icon: it is taken out
   of flow, so showing it moves nothing and costs no idle spacing when clean.
   The message stays after the control in the markup, so Bootstrap's own
   ".was-validated :invalid ~ .invalid-feedback" rule still drives it. */
.needs-validation .control { position: relative; }

/* Bootstrap paints its own icon as a background on the control, pinned hard right.
   Suppress it so the icon can travel with the text as one right-aligned group. */
.needs-validation.was-validated .form-control:invalid,
.needs-validation.was-validated .form-select:invalid,
.needs-validation .form-control.is-invalid,
.needs-validation .form-select.is-invalid { background-image: none; padding-right: 8.5rem; }
/* The select keeps its caret, so re-assert it and leave the caret room.
   Bootstrap's own rule here is ".form-select:invalid:not([multiple]):not([size])",
   so the :not() pair is needed to outrank it rather than lose silently. */
.needs-validation.was-validated .form-select:invalid:not([multiple]):not([size]),
.needs-validation .form-select.is-invalid:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 12rem;
}

.needs-validation .invalid-feedback {
    position: absolute;
    top: 0;
    right: 0.75rem;
    /* one control-height tall: centres beside an input, sits top-right on a textarea */
    height: calc(1.5em + 0.75rem + 2px);
    width: auto;
    margin: 0;
    display: none;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    pointer-events: none;
}
.needs-validation .control > .form-select ~ .invalid-feedback { right: 2.5rem; }
/* Bootstrap flips display to block; make it a flex row so the icon sits inline */
.needs-validation.was-validated :invalid ~ .invalid-feedback,
.needs-validation .is-invalid ~ .invalid-feedback { display: flex; }
.needs-validation .invalid-feedback::before {
    content: "";
    flex: 0 0 0.875rem;
    width: 0.875rem; height: 0.875rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
}
/* Hidden appointment fields must not occupy space while collapsed */
.needs-validation [hidden] { display: none !important; }

/* ---------- Back to top ---------- */
#scroll {
    position: fixed; right: 20px; bottom: 14px; cursor: pointer;
    width: 40px; height: 40px; background-color: var(--brand-light); text-indent: -9999px;
    display: none; border-radius: 50%; opacity: 0; z-index: 1000;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
#scroll.visible { display: block; opacity: 0.75; }
#scroll span {
    position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -10px;
    height: 0; width: 0; border: 6px solid transparent; border-bottom-color: #fff;
    /* at 0.75 opacity the arrow alone measures ~2.8:1 on the white body, so a
       shadow carries its edge rather than pushing the button back to opaque */
    filter: drop-shadow(0 1px 1.5px rgba(60,30,50,0.6));
}
#scroll:hover { opacity: 0.95; background-color: var(--brand-pale); }

/* ---------- Cookie consent ---------- */
#cookie-banner {
    position: fixed; bottom: 20px; left: -520px; width: 380px; max-width: calc(100vw - 40px);
    background: #fff; color: var(--ink); border: 1px solid var(--rule);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18); border-radius: 10px; padding: 20px;
    z-index: 1001; transition: left 0.8s ease;
}
#cookie-banner.show { left: 20px; }
.cookie-content { font-size: 14px; }
.cookie-content h4 { font-size: 18px; margin-top: 0; }
.cookie-logo { float: right; height: 34px; }
.button-group { display: flex; gap: 8px; align-items: center; }
.cookie-buttons { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.cookie-buttons button, .cookie-link-button {
    font-size: 14px; line-height: 1.5; text-align: center; padding: 8px 16px;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    text-decoration: none; height: 38px; box-sizing: border-box; display: inline-block;
}
#cookie-decline, .cookie-link-button { background-color: #ece6ea !important; color: #4a4a4a !important; border: none; }
#cookie-decline:hover, .cookie-link-button:hover { background-color: #ded4db !important; text-decoration: none; }
#floating-cookie-button {
    position: fixed; bottom: 14px; left: 20px; padding: 5px 11px;
    background: var(--brand-dark); color: #fff; font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.04em; opacity: 0.8;
    border: none; border-radius: 20px; z-index: 1000; cursor: pointer;
    transition: opacity 0.2s ease;
}
#floating-cookie-button:hover { opacity: 1; }
@media (max-width: 575.98px) {
    #floating-cookie-button { padding: 5px 10px; font-size: 0.625rem; opacity: 0.7; }
}

/* ---------- Print ---------- */
@media print {
    #mainNav, #scroll, #cookie-banner, #floating-cookie-button, .no-print { display: none !important; }
    .rotating-banner, .page-banner { margin-top: 0; }
    body { color: #000; }
}