/* =============================================
   Delta Realty, LLC — Site chrome: trust bar, header, footer
   =============================================
   Published with /chrome.json as a pair (site-architecture-contracts §4.1): other
   sites (the blog) sync this file and render the same chrome from the same data.
   Rules (checked by scripts/site-chrome/build-chrome.mjs --check, fail-closed):
   - every selector, inside @media too, starts with .navbar, .footer or .trust-bar;
   - no :root, html, body, bare-element or universal selectors; no + or ~;
   - no at-rule but @media (so no @font-face, @keyframes or @import);
   - every var() is defined here, on the roots (below), so a consumer's own tokens
     can't restyle the chrome;
   - url()s are absolute or root-relative;
   - headings are styled by class, never by element (the blog renders h2, not h3).

   SPECIFICITY: a rule that used to read `.nav-links a` reads
   `.navbar :where(.nav-links) a`. :where() adds nothing, so every selector keeps
   exactly the specificity it had in styles.css, and moving it here cannot change
   which rule wins against any other stylesheet (styles.css, idx-overrides.css,
   IDX's own CSS, a consumer's). Keep that form for new rules. One deliberate
   exception: `.footer .footer-heading` (0,2,0, was `.footer-col h3` at 0,1,1), so
   a consumer's own heading rules (`.prose h2`) can't restyle the column headings.
   :where() needs Safari 14+ (2020).

   SELF-CONTAINED, EXCEPT THE BASE RESET: the chrome's own copies of `.container`
   and the gold button (the CTA) are here, so a site that loads this file without
   styles.css draws the same chrome. What a consumer must still provide is the
   usual base reset this site's styles.css has and these rules assume:
   `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }`,
   `a { color: inherit; text-decoration: none }`, `ul { list-style: none }`,
   `img { display: block; max-width: 100% }`, `address { font-style: normal }`,
   the Inter and Playfair Display faces, and body `line-height: 1.7`. (An element
   reset can't be scoped here at its own specificity, so it isn't.)

   The homepage inlines the .navbar and .trust-bar rules as critical CSS, generated
   from this file (index.html, between the CHROME:css markers). Change this file,
   then run node scripts/site-chrome/build-chrome.mjs.
   ============================================= */

.navbar,
.footer,
.trust-bar {
    --black: #1A1A1A;
    --gold: #FFD700;
    --gold-dark: #b0912f;
    --white: #FFFFFF;
    --gray-light: #E5E5E5;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', 'Helvetica Neue', sans-serif;
    --transition: 0.35s ease;
    --radius: 6px;
}

/* ---------- Component copies (styles.css .container, .btn, .btn-gold) ----------
   Same declarations and the same specificity as the site-wide rules, so on this
   site they change nothing; they make the chrome draw the same without styles.css.
   They must stay ABOVE the .nav-container and .nav-cta rules below, which override
   them at equal specificity. (.btn's transition is the later styles.css value.) */
.navbar :where(.container),
.footer :where(.container) {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.navbar :where(.btn) {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 14px 32px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.navbar :where(.btn-gold) {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
}

.navbar :where(.btn-gold):hover {
    background: #E6C200;
    border-color: #E6C200;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transition: all 0.2s ease;
}

.navbar :where(.btn-gold):active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

/* ---------- Trust bar + header ---------- */
.trust-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #1A1A1A;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
}

.trust-bar :where(.trust-bar-lead) {
    color: var(--gold);
}

.trust-bar :where(.trust-bar-detail) {
    color: var(--white);
}

.navbar {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--black);
    transition: box-shadow var(--transition);
}

.navbar.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.navbar :where(.nav-container) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

/* Desktop only (>=1180px at the default 16px text size, where the hamburger is
   hidden): group brand + nav + CTA and center them so the bar reads as one
   balanced cluster under the centered trust bar, instead of stretching
   edge-to-edge. Below that the base space-between keeps the hamburger hard-right.
   Labels never wrap: a two-line "Sell Your Place" reads as two links.
   Breakpoints are in em and widths and gaps in rem, so the whole bar scales with
   the visitor's browser text size (73.75em = 1180px and 75rem = 1200px at 16px).
   No horizontal shift: the cluster spans the page's 1200px content column exactly
   (brand on its left edge, CTA on its right) and centres under the trust bar. The
   IDX account pages' MLM bar sits on the same column; a test fails if either side
   gains an offset the other doesn't have. */
@media (min-width: 73.75em) {
    .navbar :where(.nav-container) {
        justify-content: center;
        gap: 2.5rem;
        max-width: 75rem;
        padding: 0 1.5rem;
    }
    .navbar :where(.nav-links) a,
    .navbar :where(.nav-cta),
    .navbar :where(.nav-brand-text) {
        white-space: nowrap;
    }
}

.navbar :where(.logo) {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
}

.navbar :where(.logo) span {
    font-weight: 400;
    color: var(--gold);
}

/* Height only: width: auto preserves the logo's aspect ratio. */
.navbar :where(.nav-logo) {
    height: 30px;
    width: auto;
    display: block;
}

.navbar :where(.nav-brand) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.navbar :where(.nav-brand-text) {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--white);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.navbar :where(.nav-brand-accent) {
    color: var(--gold);
}

.navbar :where(.nav-right) {
    display: flex;
    align-items: center;
    gap: 24px;
}

.navbar :where(.nav-links) {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 1.125rem (18px) semibold: sized for senior readability, desktop and drawer alike. */
.navbar :where(.nav-links) a {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition);
}

.navbar :where(.nav-links) a:hover,
.navbar :where(.nav-links) a.nav-active {
    color: var(--gold);
}

/* Schedule Consultation CTA: text matches the nav links. */
.navbar :where(.nav-cta) {
    padding: 12px 18px;
    font-size: 1.125rem;
}

/* Desktop spacing for six links + CTA inside the 75rem container. Must follow the
   base .nav-right / .nav-links rules: same specificity, so order decides. Below
   1280px (80em) the gaps tighten. */
@media (min-width: 73.75em) {
    .navbar :where(.nav-right) {
        gap: 1.25rem;
    }
    .navbar :where(.nav-links) {
        gap: 1rem;
    }
}

@media (min-width: 73.75em) and (max-width: 79.9938em) {
    .navbar :where(.nav-container) {
        gap: 1.25rem;
    }
    .navbar :where(.nav-right) {
        gap: 1rem;
    }
}

/* Hamburger: a 44x44 hit area around a 24px three-bar glyph. The negative margin
   hands back the growth so the icon sits where the old 32x24 box put it. */
.navbar :where(.mobile-toggle) {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    margin: -10px -6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.navbar :where(.mobile-toggle) span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 1px;
    transition: all var(--transition);
}

.navbar :where(.mobile-toggle).active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar :where(.mobile-toggle).active span:nth-child(2) {
    opacity: 0;
}

.navbar :where(.mobile-toggle).active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- Footer ---------- */
/* Rental link: noticeable but not competing with the main CTAs. */
.footer :where(.footer-rental-link) {
    margin-top: 16px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer :where(.footer-rental-link) a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer :where(.footer-rental-link) a:hover {
    color: #CCCCCC;
}

.footer {
    background: var(--black);
    padding-top: 72px;
}

.footer :where(.footer-grid) {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer :where(.footer-logo) {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    display: inline-block;
    margin-bottom: 16px;
}

.footer :where(.footer-logo) span {
    font-weight: 400;
    color: var(--gold);
}

.footer :where(.footer-about) {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin-bottom: 16px;
}

.footer :where(.footer-address) {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

/* Credential logos, recolored to brand gold via CSS mask (the source PNGs are
   black-on-transparent). Absolute URLs so the masks resolve on other hosts too
   (the IDX subdomain, the blog). */
.footer :where(.footer-creds) {
    display:flex; align-items:center; gap:18px;
    margin-top:80px; /* closes the white gap below the credential logos */
    --footer-cred-size: 130px;      /* <-- ONE KNOB: change this number to resize BOTH logos */
    --footer-cred-eho-y: -60px;       /* KNOB: EHO logo vertical nudge — negative = up */
    --footer-cred-realtor-y: -52.5px; /* KNOB: REALTOR logo vertical nudge — negative = up */
}
.footer :where(.footer-cred) {
    display:inline-block; width:var(--footer-cred-size); height:var(--footer-cred-size);
    background-color: var(--gold);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
}
.footer :where(.footer-cred--eho) {
    -webkit-mask-image:url("https://deltarealtyllc.com/images/equal-housing-opportunity-logo.png");
    mask-image:url("https://deltarealtyllc.com/images/equal-housing-opportunity-logo.png");
    transform: translateY(var(--footer-cred-eho-y));
}
.footer :where(.footer-cred--realtor) {
    -webkit-mask-image:url("https://deltarealtyllc.com/images/realtor-logo.png");
    mask-image:url("https://deltarealtyllc.com/images/realtor-logo.png");
    transform: translateY(var(--footer-cred-realtor-y));
}

/* Facebook link (first column, below the credential logos). Subtle by default,
   gold on hover/focus; >=44px touch target. */
.footer :where(.footer-social) {
    margin-top: 20px;
}
.footer :where(.footer-social-fb) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--gray-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer :where(.footer-social-fb):hover {
    color: var(--gold);
}
.footer :where(.footer-social-fb):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    color: var(--gold);
}
.footer :where(.footer-social-label) {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Column headings, by class: this site renders h3, the blog h2. */
.footer .footer-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer :where(.footer-col) ul li {
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.footer :where(.footer-col) ul li a {
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition);
}

.footer :where(.footer-col) ul li a:hover {
    color: var(--gold);
}

.footer :where(.footer-bottom) {
    padding: 24px 0;
}

.footer :where(.footer-bottom-inner) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer :where(.footer-bottom) p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer :where(.footer-credit) strong {
    color: var(--gold);
    font-weight: 600;
}

.footer :where(.footer-credit) a:hover strong,
.footer :where(.footer-credit) a:focus-visible strong {
    color: var(--gold-dark);
    text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .footer :where(.footer-grid) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hamburger below 1180px (73.75em, so it moves with the visitor's text size): six
   links + CTA at the senior-readability sizes overflow the bar below that. The
   drawer keeps the same link sizes. */
@media (max-width: 73.7438em) {
    .navbar :where(.mobile-toggle) {
        display: flex;
    }

    .navbar :where(.nav-right) {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        width: 100%;
        background: var(--black);
        flex-direction: column;
        padding: 24px;
        gap: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar :where(.nav-right).open {
        display: flex;
    }

    .navbar :where(.nav-links) {
        flex-direction: column;
        gap: 16px;
    }

    .navbar :where(.nav-cta) {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .navbar :where(.nav-logo) {
        height: 30px;
    }

    .footer :where(.footer-grid) {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer :where(.footer-bottom-inner) {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* Brand text on tiny screens: smaller than desktop so it doesn't crowd the hamburger. */
@media (max-width: 480px) {
    .navbar :where(.nav-brand-text) {
        font-size: 1.3rem;
    }
}

/* Listings link pair (IDX wrapper only): two anchors share one slot in the header
   and footer; this picks the one for the viewport. */
.navbar :where(.listings-link-mobile),
.footer :where(.listings-link-mobile) {
    display: none;
}
@media (max-width: 767px) {
    .navbar :where(.listings-link-desktop),
    .footer :where(.listings-link-desktop) {
        display: none;
    }
    .navbar :where(.listings-link-mobile),
    .footer :where(.listings-link-mobile) {
        display: inline-flex;
    }
}