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

/* ==========================================================================
   Tokens: deep water, sand, and a coral accent.
   ========================================================================== */
:root {
    --dm-c-surface: #f7f3ea;
    --dm-c-surface-alt: #ece5d6;
    --dm-c-ink: #13232c;
    --dm-c-muted: #4d5d66;
    --dm-c-line: #dcd9cf;
    --dm-c-brand: #0b3a53;
    --dm-c-brand-strong: #072838;
    --dm-c-brand-muted: #c5dbe4;
    --dm-c-link: #0b6a78;
    --dm-c-link-hover: #084c57;
    --dm-c-accent: #c2491d;
    --dm-c-accent-hover: #9f3a15;
    --dm-c-info-bg: #e6f2f3;
    --dm-c-info-line: #0b6a78;

    --dm-font-head: Georgia, "Times New Roman", serif;
    --dm-fw-black: 700;
    --dm-ls-head: -0.01em;

    --tsaw-c-wave: #ffffff;
    --tsaw-wave-h: 2.5rem;
}

/* ==========================================================================
   Wordmark
   ========================================================================== */
.tsaw-wordmark__mark { color: var(--dm-c-link); }
.tsaw-wordmark__tld { color: var(--dm-c-accent); }

/* On a phone narrower than 360px the wordmark and a labelled menu button do
   not fit side by side. 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 hero with a shoreline along its lower edge.
   ========================================================================== */
.tsaw-hero { position: relative; padding-bottom: calc(var(--dm-sp-7) + var(--tsaw-wave-h)); }
.tsaw-hero .dm-eyebrow { display: flex; align-items: center; gap: var(--dm-sp-1); }
.tsaw-hero__wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    max-width: none;
    height: var(--tsaw-wave-h);
    color: var(--tsaw-c-wave);
}

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

.tsaw-about { background: var(--dm-c-surface); border-radius: var(--dm-radius-lg); padding: var(--dm-sp-5); }
.tsaw-about > :last-child { margin-bottom: 0; }

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

/* ==========================================================================
   Guide pages (the ferry terminal guide): official links, directions and
   in-page navigation above the text.
   ========================================================================== */
.tsaw-guide__eyebrow { display: flex; align-items: center; gap: var(--dm-sp-1); }
.tsaw-guide__intro .dm-notice { margin-top: 0; }

.tsaw-official {
    max-width: var(--dm-w-prose);
    margin-block: var(--dm-sp-5);
    padding: var(--dm-sp-4);
    background: var(--dm-c-surface);
    border-radius: var(--dm-radius-lg);
}
.tsaw-official__title { margin-bottom: var(--dm-sp-1); font-size: var(--dm-fs-lg); }
.tsaw-official > .dm-meta { margin-bottom: var(--dm-sp-3); }
.tsaw-official__links {
    display: grid;
    gap: var(--dm-sp-2);
    margin: 0 0 var(--dm-sp-4);
    padding: 0;
    list-style: none;
}
.tsaw-official__links li { margin: 0; }
.tsaw-official__links .dm-source { display: flex; width: 100%; }
/* The host name and the arrow sit at the right edge of each link. */
.tsaw-official__links .dm-source__host { margin-left: auto; }
/* Two directions links, side by side from 480px up. */
.tsaw-official__directions {
    display: grid;
    gap: var(--dm-sp-2);
    margin: 0 0 var(--dm-sp-3);
    padding: 0;
    list-style: none;
}
.tsaw-official__directions li { margin: 0; }
.tsaw-official__directions .dm-button { display: flex; width: 100%; }
.tsaw-official .tsaw-official__address { margin-bottom: 0; }
.tsaw-official__credit { display: block; font-size: var(--dm-fs-xs); }

.tsaw-toc { max-width: var(--dm-w-prose); margin-block: var(--dm-sp-5); }
.tsaw-toc__title,
.tsaw-official__label {
    margin-bottom: var(--dm-sp-2);
    color: var(--dm-c-muted);
    font-family: var(--dm-font-body);
    font-size: var(--dm-fs-xs);
    font-weight: var(--dm-fw-bold);
    letter-spacing: var(--dm-ls-caps);
    text-transform: uppercase;
}
.tsaw-toc__list { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2); margin: 0; padding: 0; list-style: none; }
.tsaw-toc__list li { margin: 0; }
.tsaw-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-tap);
    color: var(--dm-c-ink);
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    text-decoration: none;
}
.tsaw-toc__list a:hover { border-color: var(--dm-c-link); color: var(--dm-c-link); }

/* A section reached from the navigation keeps a little air above its heading. */
.tsaw-guide__body [id] { scroll-margin-top: var(--dm-sp-4); }

@media (min-width: 30em) {
    .tsaw-official__links,
    .tsaw-official__directions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 48em) {
    .tsaw-official { padding: var(--dm-sp-5); }
}

/* Homepage: links to the pages about the site itself. */
.tsaw-about__links { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2) var(--dm-sp-5); margin: 0; padding: 0; list-style: none; }
.tsaw-about__links li { margin: 0; }
.tsaw-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); }