/*
 * Land Home Properties — base layer
 * Fonts, design tokens, Bootstrap variable mapping, typography, focus and
 * small utilities. Loaded after bootstrap.min.css.
 *
 * Palette: derived from the Land Home Properties logo (cyan #1992AD with
 * near-black lettering), extended with warm ivory, soft sage and a muted clay
 * accent. White text never sits on the logo cyan itself (3.6:1); buttons use
 * the deeper teal (7.2:1). Clay #B97858 is decorative only (3.6:1); clay text
 * uses --clay-ink.
 *
 * Type: Saira (geometric, squared and slightly broad, close in spirit to the
 * logo lettering) for headings and labels; DM Sans for reading text.
 */

@font-face {
    font-family: 'Saira';
    src: url('../fonts/saira-latin-wdth-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-latin-wght-italic.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Brand */
    --brand: #1992ad;            /* logo cyan: accents, rules, active states, icons */
    --brand-ink: #0f7489;        /* cyan text and links on light surfaces (5.4:1) */
    --brand-deep: #0c6073;       /* buttons with white text (7.2:1) */
    --brand-deeper: #094e5e;     /* hover and pressed */
    --brand-tint: #eaf5f7;
    --brand-tint-strong: #d4ecf1;
    --brand-on-dark: #7fd0e0;    /* accent text on charcoal (9:1) */

    /* Supporting colours */
    --ivory: #fbf8f3;            /* warm primary background */
    --sage: #e7eee6;             /* guidance and editorial surfaces */
    --sage-strong: #d3e0d1;
    --clay: #b97858;             /* small decorative highlights only */
    --clay-ink: #9a5d40;         /* clay text on light surfaces (5.2:1) */
    --clay-on-dark: #d9a88e;     /* clay text on graphite (7.2:1) */
    --portfolio-surface: #f7eee5;
    --portfolio-rule: #c77d57;
    --location-surface: #eaf3f7;
    --location-accent: #176c85;
    --olive: #3b5546;
    --sand-surface: #f4efe4;

    /* Neutrals */
    --ink: #18282f;              /* graphite: headings, body text, dark surfaces */
    --ink-soft: #33434a;
    --muted: #55656b;            /* secondary text (6.1:1 on white, 5.1:1 on sage) */
    --muted-on-dark: #c3d0d4;
    --placeholder: #66777d;
    --white: #fff;
    --surface: #fff;
    --surface-soft: var(--ivory);
    --line: #dfe6e7;
    --line-strong: #c3d0d3;
    --field-border: #7f9196;     /* form controls (3.3:1) */

    /* Status */
    --danger: #b3261e;
    --danger-soft: #fdecea;
    --success: #0b6b4f;
    --success-soft: #e5f4ee;
    --warning: #9a5b00;
    --warning-soft: #fff4e0;

    /* Shape and depth */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgb(24 37 43 / 5%), 0 4px 12px -6px rgb(24 37 43 / 10%);
    --shadow: 0 16px 36px -22px rgb(24 37 43 / 30%);
    --shadow-lg: 0 28px 64px -34px rgb(24 37 43 / 42%);

    /* Layout and rhythm */
    --container: 1360px;
    --gutter: clamp(1rem, 2vw + .45rem, 3rem);
    --header-height: 64px;
    --section-space: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --space-xs: .5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --measure: 40rem;
    --control-height: 3rem;

    /* Motion */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --duration-fast: 150ms;
    --duration: 200ms;
    --duration-enter: 500ms;

    /* Typography */
    --font-display: 'Saira', 'Segoe UI', 'Arial Nova', system-ui, sans-serif;
    --font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Bootstrap mapping */
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.65;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--surface);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-heading-color: var(--ink);
    --bs-link-color: var(--brand-ink);
    --bs-link-color-rgb: 15, 116, 137;
    --bs-link-hover-color: var(--brand-deeper);
    --bs-link-hover-color-rgb: 9, 78, 94;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-focus-ring-color: rgb(25 146 173 / 30%);
    --bs-primary: var(--brand-deep);
    --bs-primary-rgb: 12, 96, 115;
}

@media (min-width: 992px) {
    :root {
        --bs-body-font-size: 1.0625rem;
        --header-height: 76px;
    }
}

@media (min-width: 1800px) {
    :root {
        --container: 1480px;
        --gutter: 4rem;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    scrollbar-color: #b3c2c6 var(--surface-soft);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 320px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    flex: 1 0 auto;
}

::selection {
    background: var(--brand-tint-strong);
    color: var(--ink);
}

/* Typography: geometric Saira for headings, DM Sans for everything else. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--ink);
    font-family: var(--font-display);
    font-stretch: 108%;
    font-weight: 600;
    text-wrap: balance;
}

h1, .h1 {
    font-size: clamp(2.125rem, 1.65rem + 2vw, 3.25rem);
    letter-spacing: -.015em;
    line-height: 1.08;
}

h2, .h2 {
    font-size: clamp(1.625rem, 1.35rem + 1.15vw, 2.375rem);
    letter-spacing: -.01em;
    line-height: 1.15;
}

h3, .h3 {
    font-size: clamp(1.15rem, 1.08rem + .3vw, 1.3rem);
    font-stretch: 104%;
    letter-spacing: 0;
    line-height: 1.3;
}

h4, .h4 {
    font-size: 1.1rem;
    font-stretch: 104%;
    line-height: 1.35;
}

p {
    text-wrap: pretty;
}

.lead {
    color: var(--muted);
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    font-weight: 400;
    line-height: 1.6;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--duration) var(--ease-out);
}

strong, b {
    font-weight: 600;
}

img, svg, video {
    max-width: 100%;
}

img {
    height: auto;
}

/* Short orientation label above a heading, with a small clay rule. */
.eyebrow {
    align-items: center;
    color: var(--brand-ink);
    display: flex;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-stretch: 110%;
    font-weight: 600;
    gap: .6rem;
    letter-spacing: .12em;
    line-height: 1.4;
    margin: 0 0 .85rem;
    text-transform: uppercase;
}

.eyebrow::before {
    background: var(--clay);
    content: '';
    flex: none;
    height: 2px;
    width: 1.5rem;
}

.text-center .eyebrow,
.section-head--center .eyebrow {
    justify-content: center;
}

.on-dark :where(.eyebrow) {
    color: var(--brand-on-dark);
}

.text-muted-strong {
    color: var(--muted) !important;
}

.icon {
    display: inline-block;
    flex: none;
    height: 1.25em;
    vertical-align: -.25em;
    width: 1.25em;
}

/* Focus: always visible for keyboard users. */
:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
}

/* Bootstrap swaps outlines for faint shadows on some components; keep one clear ring. */
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-toggler:focus-visible,
.site-menu-toggle:focus-visible,
.page-link:focus-visible,
.form-check-input:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
}

.on-dark :where(:focus-visible),
.site-footer :focus-visible {
    outline-color: var(--brand-on-dark);
}

.skip-link {
    background: var(--ink);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--white);
    font-weight: 600;
    left: 1rem;
    padding: .75rem 1.25rem;
    position: fixed;
    text-decoration: none;
    top: -6rem;
    z-index: 2000;
}

.skip-link:focus {
    color: var(--white);
    top: 0;
}

/* Honeypot field: kept off-screen even if a stylesheet fails to load. */
.form-trap {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
}

/* Low-specificity defaults for the few dark surfaces (footer, lightbox). */
.on-dark {
    color: var(--muted-on-dark);
}

.on-dark :where(h1, h2, h3, h4) {
    color: var(--white);
}

.on-dark :where(a:not(.btn)) {
    color: var(--white);
}

.on-dark :where(a:not(.btn)):hover {
    color: var(--brand-on-dark);
}