/*
Theme Name: LadnerBC
Description: Child theme for LadnerBC.com. Colour and type tokens, the wordmark and the site's own templates. Layout and components come from the parent theme, DM Local.
Author: Digified Media
Template: dm-local
Version: 1.0.0
Text Domain: ladnerbc
*/

/* ==========================================================================
   Tokens: reed green, slough grey-green and dried-silt ochre.

   Ladner is a village behind a dyke on the south arm of the Fraser, with
   farmland around it. The palette is a plant hue rather than a water hue,
   which is what keeps it off the sister site's navy and teal: brand sits at
   hue 141 against Tsawwassen's 201, links at 150 against 188, the accent at
   42 against 16. Buttons carry dark ink on ochre where Tsawwassen's carry
   white on coral, which is the difference a visitor notices first.

   Every ratio below was computed, not estimated. The page background stays
   the parent's white: from Phase 18 an AdSense unit is white-backed, and a
   cream page would draw a visible rectangle around every ad.
   ========================================================================== */
:root {
    /* Colour */
    --dm-c-surface: #eef2ec;        /* pale dyke-grass panel; muted on it 6.21:1 */
    --dm-c-surface-alt: #dde5db;    /* deeper panel; muted on it 5.46:1 */
    --dm-c-ink: #1b2420;            /* near-black with a green cast; 15.91:1 on bg */
    --dm-c-muted: #4f5c53;          /* 7.03:1 on bg */
    --dm-c-line: #ccd6ca;           /* hairline, tinted toward the surface */
    --dm-c-brand: #2b4a36;          /* reed green; white on it 9.83:1 */
    --dm-c-brand-strong: #1f3728;
    --dm-c-brand-muted: #c7d8c9;    /* hero lede and footer body; 6.60:1 on brand */
    --dm-c-link: #1d6340;           /* slough green; 7.21:1 on bg, 6.37:1 on surface */
    --dm-c-link-hover: #144a2e;
    --dm-c-accent: #ad7c0e;         /* dried silt; fill 3.71:1 on bg */
    --dm-c-accent-hover: #bd881c;   /* lightens, because the ink on it is dark; 3.13:1 on bg */
    --dm-c-accent-ink: #140e04;     /* 5.18:1 on the accent, 6.77:1 on the hover */
    --dm-c-info-bg: #e9f1ea;
    --dm-c-info-line: #1d6340;      /* 6.26:1 on info-bg */
    --dm-c-warn-bg: #fbf1de;
    --dm-c-warn-line: #8a3f12;      /* rust, hue 23: a closure notice must not read as the accent (hue 42). 6.69:1 on warn-bg */
    --dm-c-focus: #8a6a17;          /* 5.05:1 on bg, 4.46:1 on surface, 3.92:1 on surface-alt */

    /* Type. Heads are a gothic with no serifs, against the sister site's
       Georgia. The cut differs by platform: macOS and iOS take Avenir Next
       Condensed, Android takes a condensed Roboto, and Windows has only
       Franklin Gothic Medium, which is normal width. The shared trait is the
       grotesque letterform, not the width. Nothing is downloaded. */
    --dm-font-head: "Avenir Next Condensed", "Franklin Gothic Medium", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
    --dm-fw-black: 700;             /* down from 800: no cut in this stack ships one */
    --dm-ls-head: 0.005em;          /* positive, sign-painter spacing; the parent is -0.015em and Tsawwassen -0.01em */
    --dm-ls-caps: 0.08em;           /* eyebrows and footer headings read as surveyed labels */
    --dm-lh-head: 1.15;

    /* Shape. The parent's shadow is a blue-grey; on grey-green surfaces under
       a green palette it reads cold, so it is recast onto this site's ink. */
    --dm-shadow: 0 1px 2px rgba(27, 36, 32, 0.06), 0 4px 14px rgba(27, 36, 32, 0.07);

    /* This site's own */
    --ldn-bank-h: 1.5rem;
    --ldn-reed-h: 0.875rem;
    --ldn-dyke-h: calc(var(--ldn-bank-h) + var(--ldn-reed-h));  /* the hero reserves exactly this in its own padding */
    --ldn-reed-w: 2px;              /* one reed's width */
    --ldn-reed-pitch-a: 20px;       /* the taller rhythm */
    --ldn-reed-pitch-b: 13px;       /* the shorter one, offset against it */
    --ldn-c-reed: #7f9a86;          /* slough grey-green. 3.22:1 on brand, 3.06:1 on bg, and 2.70:1 on
                                       surface — so anything drawn in it stays on bg or the brand field,
                                       never on a surface panel. */
    --ldn-c-silt: #c9a227;          /* silt line on the dyke crest. Decorative only: see design-notes.md */
    --ldn-c-tld: #8c6409;           /* the ".com" in the wordmark; 5.33:1 on bg at any size */
}

/* ==========================================================================
   Figures. This site is columns of numbers — counterflow times, market dates,
   school enrolments, listing counts per category — so digits line up.
   ========================================================================== */
table,
.dm-data__body { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Wordmark
   ========================================================================== */
.ldn-wordmark__mark { color: var(--dm-c-brand); }
.ldn-wordmark__tld { color: var(--ldn-c-tld); }

/* On a phone narrower than 360px the wordmark and a labelled menu button do
   not fit side by side. "LadnerBC.com" is a longer string than the sister
   site's at the same size, so this carries more load here. The button keeps
   its icon; its label stays for screen readers. */
@media (max-width: 22.4375em) {
    .dm-header__bar { gap: var(--dm-sp-2); }
    .dm-nav-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ==========================================================================
   Homepage hero: the parent's brand field cut off by a dyke bank and reeds.

   The sister site's hero dissolves into a soft white wave — open water
   meeting a beach. This one is cut off by a level white shelf with an uneven
   reed fringe standing on it: engineered and flat where the other is loose
   and curved, which is the difference between a beach town and a village
   that lives behind a bank. Two gradient tiles and one empty span, so there
   is no image to load and no SVG to stretch, and the height is fixed in rem
   and reserved by the hero's own padding, so nothing moves on load.
   ========================================================================== */
.ldn-hero { position: relative; padding-bottom: calc(var(--dm-sp-7) + var(--ldn-dyke-h)); }
.ldn-hero .dm-eyebrow { display: flex; align-items: center; gap: var(--dm-sp-1); }

/* The bank: a level white shelf along the hero's lower edge, silt line on top. */
.ldn-hero__dyke {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--ldn-bank-h);
    background: var(--dm-c-bg);
    box-shadow: inset 0 2px 0 var(--ldn-c-silt);
    pointer-events: none;
}

/* The reed fringe standing on the bank. Two tick rhythms at different
   pitches and heights, offset from each other, so the grass is uneven rather
   than a picket fence. Each layer is a single tick tiled with
   background-repeat: round, which scales the pitch to a whole number of
   ticks, so no reed is ever sliced off at the right edge.

   The pitch, width and height grow at each breakpoint. A pitch fixed in
   pixels keeps its density but multiplies the count, and across a 1280px
   hero a hundred-odd identical ticks read as a ruler rather than as a river
   bank. Checked at 320, 360, 414, 768, 1280 and 1440. */
.ldn-hero__dyke::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--ldn-reed-h);
    background-image:
        linear-gradient(90deg, var(--ldn-c-reed) 0 var(--ldn-reed-w), transparent var(--ldn-reed-w)),
        linear-gradient(90deg, var(--ldn-c-reed) 0 var(--ldn-reed-w), transparent var(--ldn-reed-w));
    background-size: var(--ldn-reed-pitch-a) 100%, var(--ldn-reed-pitch-b) 48%;
    background-position: 0 100%, calc(var(--ldn-reed-pitch-a) / 2) 100%;
    background-repeat: round no-repeat, round no-repeat;
}

@media (min-width: 48em) {
    :root {
        --ldn-reed-h: 1.125rem;
        --ldn-reed-w: 2.5px;
        --ldn-reed-pitch-a: 29px;
        --ldn-reed-pitch-b: 19px;
    }
    .ldn-hero { padding-bottom: calc(var(--dm-sp-8) + var(--ldn-dyke-h)); }
}

@media (min-width: 75em) {
    :root {
        --ldn-reed-h: 1.375rem;
        --ldn-reed-w: 3px;
        --ldn-reed-pitch-a: 38px;
        --ldn-reed-pitch-b: 25px;
    }
}

/* ==========================================================================
   Focus ring. One --dm-c-focus cannot clear 3:1 against both the pale
   surfaces and the brand field, so the brand-coloured regions redefine the
   token for their content. The wrapper is named rather than the whole hero,
   because the white dyke bank is a child of the hero and the pale ring would
   disappear on it. Keep the parent's outline-offset: against an accent
   button the ring is only visible because of the gap.
   ========================================================================== */
.dm-hero .dm-wrap,
.dm-footer__main { --dm-c-focus: #e3bf57; }

/* ==========================================================================
   Homepage about block and the links to the pages about the site itself.
   ========================================================================== */
.ldn-about { background: var(--dm-c-surface); border-radius: var(--dm-radius-lg); padding: var(--dm-sp-5); }
.ldn-about > :last-child { margin-bottom: 0; }

.ldn-about__links { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2) var(--dm-sp-5); margin: 0; padding: 0; list-style: none; }
.ldn-about__links li { margin: 0; }
.ldn-about__links a { display: inline-flex; align-items: center; gap: var(--dm-sp-1); min-height: var(--dm-tap); font-weight: var(--dm-fw-medium); }

@media (min-width: 48em) {
    .ldn-about { padding: var(--dm-sp-6); }
}