/*
Theme Name: BiminiIslands
Description: Child theme for BiminiIslands.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: biminiislands
*/

/* ==========================================================================
   Tokens: shallow water over white sand.

   Bimini is two thin islands on the edge of the Gulf Stream, where white
   sand shelves out under water you can stand in and then drops away within a
   mile of the beach. The palette is that edge, read from the top down: the
   page stays white, like the sand; panels take the pale green of the bank;
   the hero is the lagoon; and a band of bright shallow water sits between
   the two. The one warm note is a hibiscus, which is Bahamian rather than
   generically tropical, and it carries the sun in the wordmark as well as
   every button.

   Turquoise is the colour a visitor expects of Bimini, and the first draft
   of this theme gave it up too easily: Tsawwassen holds the water at hue 202
   and 188, so that draft bolted to an indigo at 236 and came out reading as
   an instrument rather than an island. The 25-degree rule does not actually
   forbid turquoise. Brand sits at hue 170 against Tsawwassen's 202 and
   LadnerBC's 141, links at 220 against 188 and 150, the accent at 335
   against 16 and 42; the nearest of those six is 29 degrees. Buttons carry
   white ink on hibiscus where LadnerBC's carry dark ink on ochre and
   Tsawwassen's white on coral.

   Every ratio was computed, not estimated. scripts/contrast-check.py reads
   this block and recomputes them, so a polish pass that moves a token is
   checked before it ships; plans/design-notes.md carries its table. The page
   background stays the parent's white, because a white-backed AdSense unit
   arrives in Phase 20 and would draw a visible rectangle on a tinted page.
   ========================================================================== */
:root {
    /* Colour */
    --dm-c-surface: #e6f7f3;        /* the pale bank; muted on it 6.90:1 */
    --dm-c-surface-alt: #cfeee7;    /* deeper panel; muted on it 6.20:1 */
    --dm-c-ink: #0f201d;            /* near-black with the water's green in it; 16.87:1 on bg */
    --dm-c-muted: #415854;          /* 7.64:1 on bg */
    --dm-c-line: #c5e3dc;           /* hairline, tinted toward the surface */
    --dm-c-brand: #0c6253;          /* lagoon; white on it 7.27:1 */
    --dm-c-brand-strong: #074840;   /* 10.45:1 under white; the wordmark's hover */
    --dm-c-brand-muted: #bce6dd;    /* hero lede and footer body; 5.37:1 on brand */
    --dm-c-link: #1f4fb0;           /* 7.49:1 on bg, 6.76:1 on surface */
    --dm-c-link-hover: #163a85;     /* 10.62:1 on bg */
    --dm-c-accent: #c21e63;         /* hibiscus; fill 5.74:1 on bg */
    --dm-c-accent-hover: #9d1850;   /* darkens, because the ink on it is white */
    --dm-c-accent-ink: #ffffff;     /* 5.74:1 on the accent, 7.84:1 on the hover */
    --dm-c-info-bg: #e8f0fb;
    --dm-c-info-line: #1f4fb0;      /* 6.52:1 on info-bg */
    --dm-c-warn-bg: #fdf1e2;
    --dm-c-warn-line: #9a4512;      /* rust, hue 23: a storm notice must not read as the
                                       accent (hue 335) or as the focus ring (hue 44).
                                       5.83:1 on warn-bg */
    --dm-c-focus: #a07600;          /* sand gold on light ground: 4.13:1 on the page,
                                       3.73:1 on a panel, 3.35:1 on the deeper panel.
                                       Redefined below for the brand field. */

    /* Type. Heads are a flared humanist — Optima on macOS and iOS, Candara on
       Windows, Gill Sans where either ships it — against Tsawwassen's Georgia
       and LadnerBC's condensed gothic. The cut differs by platform and
       Android falls back to its own grotesque; the shared trait is the
       modulated stroke and the open aperture, not one typeface. Nothing is
       downloaded. */
    --dm-font-head: Optima, Candara, "Gill Sans", "Gill Sans Nova", "Gill Sans MT", "Trebuchet MS", sans-serif;
    --dm-fw-black: 700;             /* down from 800: no cut in this stack ships one */
    --dm-ls-head: 0.015em;          /* open, resort-signage spacing; the parent is -0.015em,
                                       Tsawwassen -0.01em and LadnerBC 0.005em */
    --dm-ls-caps: 0.1em;            /* eyebrows and footer headings read as chart labels */
    --dm-lh-head: 1.16;             /* a wide humanist at display size needs less leading
                                       than the parent's system grotesque */

    /* Shape. The parent's shadow is a blue-grey mixed for its own navy; under
       this palette it is recast onto this site's ink. */
    --dm-shadow: 0 1px 2px rgba(15, 32, 29, 0.06), 0 4px 14px rgba(15, 32, 29, 0.07);

    /* This site's own */
    --bim-c-shallow: #4fd1c0;       /* the bright band between the lagoon and the sand.
                                       Decorative only: 1.87:1 on the page, so nothing
                                       that has to be read is drawn in it and nothing
                                       focusable is placed on it. */
    --bim-shelf-h: 4rem;            /* the hero reserves exactly this in its own padding */
}

/* The focus ring is two values, and these are the only colours declared
   outside :root besides the wordmark's two rules. One value cannot do the
   job: for a single ring to clear 3:1 against both the page and the hero
   field, white on the hero field would have to clear 9:1, which means a
   lagoon so dark it stops reading as tropical. The pale ring is scoped to
   the two brand fields, as LadnerBC does. The hero's wrapper is named rather
   than the hero itself, because the bright shelf is a child of the hero and
   a pale ring would disappear on it. plans/design-notes.md has the
   arithmetic. */
.dm-hero .dm-wrap,
.dm-footer__main {
    --dm-c-focus: #e8c477;          /* 4.36:1 on the brand field */
}

/* ==========================================================================
   Wordmark: a sun on the horizon.
   ========================================================================== */
.bim-wordmark__mark { color: var(--dm-c-link); }
.bim-wordmark__tld { color: var(--dm-c-accent); }

/* `BiminiIslands.com` is longer than either sister wordmark, so under 360px it
   gives up the two things it can spare: the button's label, which stays for
   screen readers, and a step of its own size. Measured at 320px with a
   one-item primary menu assigned, which is when the header is widest. */
@media (max-width: 22.4375em) {
    .dm-header__bar { gap: var(--dm-sp-2); }
    .dm-wordmark { font-size: var(--dm-fs-base); }
    .bim-wordmark__mark { width: 24px; height: 24px; }
    .dm-nav-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ==========================================================================
   Homepage hero: the lagoon, then the bright shallows, then the sand. Two
   paths on one contour — a single asymmetric step, low on the left and high
   on the right, the way the bank shelves up away from the Gulf Stream.
   Tsawwassen's hero ends in a symmetric wave and LadnerBC's in a level dyke
   crest; this one ends in a band of water you could stand in.
   ========================================================================== */
.bim-hero { position: relative; padding-bottom: calc(var(--dm-sp-7) + var(--bim-shelf-h)); }
.bim-hero .dm-eyebrow { display: flex; align-items: center; gap: var(--dm-sp-1); }
.bim-hero__shelf {
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--bim-shelf-h);
}

@media (min-width: 48em) {
    .bim-hero { padding-bottom: calc(var(--dm-sp-8) + var(--bim-shelf-h)); }
}

/* ==========================================================================
   Figures. From Phase 7 this site is columns of readings — wind, wave height,
   tide times and heights — and a proportional cut sets them ragged. The
   sister sites carry prose tables, so this is set here and not in the parent.
   ========================================================================== */
.dm-prose table,
.dm-data table { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Homepage intro block, the copy published from content/pages/home.md. It
   stays on the page's white rather than taking a
   tinted panel, as the sister sites' about blocks do: the reserved ad
   container sits directly below it, and a white-backed unit beside a tinted
   block is the visible rectangle Phase 20 has to avoid.
   ========================================================================== */
.bim-about__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-sp-2) var(--dm-sp-5);
    margin: var(--dm-sp-4) 0 0;
    padding: 0;
    list-style: none;
}
.bim-about__links li { margin: 0; }
.bim-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);
}

/* ==========================================================================
   Guide pages (page-templates/guide.php): the section eyebrow that links back
   to the hub, the in-page navigation read from the page's H2s, and the
   onward cards a page prints with [getting_there_cards]. The navigation is
   Tsawwassen's guide pattern on this site's tokens.
   ========================================================================== */
.bim-guide__eyebrow { display: flex; align-items: center; gap: var(--dm-sp-1); }
.bim-guide__eyebrow a { color: inherit; text-decoration: none; }
.bim-guide__eyebrow a:hover { color: var(--dm-c-link); text-decoration: underline; }
.bim-guide__intro .dm-notice { margin-top: 0; }

.bim-toc { max-width: var(--dm-w-prose); margin-block: var(--dm-sp-5); }
.bim-toc__title {
    margin: 0 0 var(--dm-sp-2);
    color: var(--dm-c-muted);
    font-size: var(--dm-fs-xs);
    font-weight: var(--dm-fw-bold);
    letter-spacing: var(--dm-ls-caps);
    text-transform: uppercase;
}
.bim-toc__list { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2); margin: 0; padding: 0; list-style: none; }
.bim-toc__list li { margin: 0; }
.bim-toc__list a {
    display: inline-flex;
    align-items: center;
    min-height: var(--dm-tap);
    padding: var(--dm-sp-1) var(--dm-sp-4);
    background: var(--dm-c-bg);
    border: var(--dm-bw) solid var(--dm-c-line);
    border-radius: var(--dm-radius);
    color: var(--dm-c-ink);
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    text-decoration: none;
}
.bim-toc__list a:hover { border-color: var(--dm-c-link); color: var(--dm-c-link); }

/* Onward cards sit inside the prose column, so they go two up at its width. */
.dm-prose .bim-onward { margin-block: var(--dm-sp-5); }

/* ==========================================================================
   The weather page (page-weather.php, Phase 7). Each section's text stays in
   the prose column and its data block takes the page's full width, because
   the forecast table has eight columns. The block's official-source link sits
   right under it, and stays when the block hides itself.
   ========================================================================== */
.bim-wx-block { margin-block: var(--dm-sp-5) var(--dm-sp-6); }
.bim-wx-block .dm-data { margin-block: 0 var(--dm-sp-3); }
.bim-wx-official { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2) var(--dm-sp-3); margin: 0; }
/* A block past its limits leaves only its source link, which would otherwise
   touch the official links below it. */
.bim-wx-block > .dm-source + .bim-wx-official { margin-top: var(--dm-sp-3); }

/* Three station tiles, side by side where they fit. A tile that has aged out
   leaves only its station link in its cell. */
.bim-wx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--dm-sp-4);
    align-items: start;
    margin-bottom: var(--dm-sp-3);
}
.bim-wx-tile { display: flex; flex-direction: column; gap: var(--dm-sp-3); }
.bim-wx-tiles .dm-data { margin: 0; }
.bim-wx-tiles .dm-data__title { font-size: var(--dm-fs-base); }

/* The forecast table scrolls in its own region on a phone, with the time
   column and each day's name held at the region's left edge; the note above
   it stays put. The region has no padding of its own, so nothing scrolls
   past in a gutter beside the held cells. */
.bim-wx-grid__note { margin: 0 0 var(--dm-sp-3); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }
.bim-wx-scroll { overflow-x: auto; margin-bottom: var(--dm-sp-3); }
.bim-wx-table { min-width: 42rem; margin: 0; }
.bim-wx-table th,
.bim-wx-table td { white-space: nowrap; }
.bim-wx-table thead th { color: var(--dm-c-muted); font-size: var(--dm-fs-xs); font-weight: var(--dm-fw-bold); }
/* The two tables share one set of column widths, so their columns line up;
   a fixed layout takes them from the heading row, whose labels may wrap. */
.bim-wx-table { table-layout: fixed; }
.bim-wx-table thead th { white-space: normal; }
.bim-wx-table thead th:nth-child(1),
.bim-wx-table thead th:nth-child(7) { width: 11%; }
.bim-wx-table thead th:nth-child(2) { width: 15%; }
.bim-wx-table thead th:nth-child(3) { width: 10%; }
.bim-wx-table thead th:nth-child(4),
.bim-wx-table thead th:nth-child(5),
.bim-wx-table thead th:nth-child(8) { width: 13%; }
.bim-wx-table thead th:nth-child(6) { width: 14%; }
.bim-wx-table thead th:first-child,
.bim-wx-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--dm-c-bg);
}
.bim-wx-table tbody th[scope="row"] { font-weight: var(--dm-fw-medium); }
.bim-wx-table__day th {
    padding-top: var(--dm-sp-4);
    font-family: var(--dm-font-head);
    letter-spacing: var(--dm-ls-head);
}
.bim-wx-table__day span { display: inline-block; position: sticky; left: var(--dm-sp-3); }
.bim-wx-none { color: var(--dm-c-muted); }

.bim-wx-later { margin-top: var(--dm-sp-2); }
/* The summary keeps its own display, list-item, which is what draws its
   open/closed triangle; the padding brings it to a full tap height. */
.bim-wx-later summary {
    padding-block: 0.625rem;
    color: var(--dm-c-link);
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    cursor: pointer;
}
.bim-wx-later[open] summary { margin-bottom: var(--dm-sp-2); }

/* The forecast text, exactly as issued: its own line breaks, wrapped on a
   narrow screen rather than scrolled. */
.bim-wx-product {
    margin: 0 0 var(--dm-sp-3);
    padding: var(--dm-sp-3) var(--dm-sp-4);
    background: var(--dm-c-surface);
    border-radius: var(--dm-radius);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.bim-wx-product--note { margin-bottom: 0; }
.bim-wx-product__label { margin: 0 0 var(--dm-sp-1); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }

/* A station tile: where it is, then one line per reading. */
.bim-wx-station__where { margin: 0 0 var(--dm-sp-3); color: var(--dm-c-muted); font-size: var(--dm-fs-sm); }
.bim-wx-readings { margin: 0; font-size: var(--dm-fs-sm); }
.bim-wx-readings > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--dm-sp-3);
    padding-block: var(--dm-sp-1);
    border-bottom: var(--dm-bw) solid var(--dm-c-line);
}
.bim-wx-readings > div:last-child { border-bottom: 0; }
.bim-wx-readings dt { color: var(--dm-c-muted); }
.bim-wx-readings dd { margin: 0; font-weight: var(--dm-fw-medium); font-variant-numeric: tabular-nums; }

/* The water temperature. */
.bim-wx-sst { margin: 0 0 var(--dm-sp-1); }
.bim-wx-sst__value { font-size: var(--dm-fs-2xl); font-weight: var(--dm-fw-bold); font-variant-numeric: tabular-nums; }
.bim-wx-sst__metric { color: var(--dm-c-muted); }
.bim-wx-sst__about { margin: 0; color: var(--dm-c-muted); font-size: var(--dm-fs-sm); }

/* ==========================================================================
   The tide page (page-tides.php, Phase 8). It shares the weather page's block,
   tile and official-link layout. Its blocks keep to the prose column: a table
   of four short columns and a curve have no use for the page's full width.
   ========================================================================== */
.bim-tide-block { max-width: var(--dm-w-prose); }
/* NOAA's host name is long, and at the pinned commit .dm-source does not wrap:
   at 320px the label and the host would push the page sideways. Here the host
   drops to a line of its own. */
.bim-tide-block .dm-source { flex-wrap: wrap; }
.bim-tide-block .dm-source__host { min-width: 0; overflow-wrap: anywhere; }
/* On a phone every label takes its own line, so the host and the icon always
   share the next one, whichever label would have left room for the host alone. */
@media (max-width: 30em) {
    .bim-tide-block .dm-source > span:first-child { flex-basis: 100%; }
    .bim-tide-table__weekday { display: block; }
}
/* A hidden block leaves its credit above the links. */
.bim-tide-credit { margin: 0 0 var(--dm-sp-2); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }

.bim-tide-table { margin: 0; }
.bim-tide-table caption {
    padding-bottom: var(--dm-sp-2);
    color: var(--dm-c-muted);
    font-size: var(--dm-fs-xs);
    text-align: left;
}
.bim-tide-table th,
.bim-tide-table td { padding-inline: var(--dm-sp-2); }
/* The first column sits flush with the caption. In the week's table a day's
   heading holds it, and the rows under the heading start a column further in,
   so only today's table has a plain cell there. */
.bim-tide-table tr > th:first-child,
.bim-tide-table--today td:first-child { padding-left: 0; }
.bim-tide-table tr > :last-child { padding-right: 0; }
.bim-tide-table td { white-space: nowrap; }
.bim-tide-table thead th { color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }
.bim-tide-table tbody th { font-weight: var(--dm-fw-medium); }
.bim-tide-table--today tr:last-child td { border-bottom: 0; }
.bim-tide-covers { margin: var(--dm-sp-3) 0 0; color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }

/* The curve. The markup carries its size and currentColor, which hold if this
   stylesheet never arrives; the tokens take over here. */
.bim-tide-curve { margin: 0 0 var(--dm-sp-5); }
.bim-tide-curve__svg { display: block; max-width: 100%; height: auto; }
.bim-tide-curve figcaption { margin-top: var(--dm-sp-2); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }
.bim-tide-curve__grid { stroke: var(--dm-c-line); stroke-opacity: 1; }
.bim-tide-curve__grid--zero { stroke: var(--dm-c-muted); }
.bim-tide-curve__label { fill: var(--dm-c-muted); font-variant-numeric: tabular-nums; }
.bim-tide-curve__line { stroke: var(--dm-c-link); }
.bim-tide-curve__dot {
    fill: var(--dm-c-link);
    stroke: var(--dm-c-bg);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}
.bim-tide-curve__point:hover .bim-tide-curve__dot { fill: var(--dm-c-link-hover); }
/* The drawing scales down with the screen, so its labels and dots step up in
   its own units to hold about the same size on a phone. Below 480px a weekday
   is all a day's column has room for; the table beside it has the dates. */
@media (max-width: 37.5em) {
    .bim-tide-curve__label { font-size: 18px; }
    .bim-tide-curve__dot { r: 5px; }
}
@media (max-width: 30em) {
    .bim-tide-curve__label { font-size: 24px; }
    .bim-tide-curve__date { display: none; }
    .bim-tide-curve__dot { r: 7px; }
}
@media (max-width: 23.75em) {
    .bim-tide-curve__label { font-size: 28px; }
    .bim-tide-curve__dot { r: 9px; }
}
/* A contrast theme recolours the page's text and leaves an SVG's tokens alone,
   which would keep the axis near 2.8:1 on a black canvas. */
@media (forced-colors: active) {
    .bim-tide-curve__label,
    .bim-tide-curve__dot,
    .bim-tide-curve__point:hover .bim-tide-curve__dot { fill: currentColor; }
    .bim-tide-curve__line,
    .bim-tide-curve__grid--zero { stroke: currentColor; }
}