/*
Theme Name: DM Local
Description: Parent theme for Digified Media's local-guide sites. Header, footer, base templates and partials. Every colour, font and spacing value is a custom property; a child theme sets its own in :root. Site name, navigation and disclaimer come from options and menus.
Author: Digified Media
Version: 1.0.0
Requires PHP: 8.0
Text Domain: dm-local
*/

/* ==========================================================================
   Tokens. A child theme overrides any of these in its own :root block.
   ========================================================================== */
:root {
    /* Colour */
    --dm-c-bg: #ffffff;
    --dm-c-surface: #f5f7f9;
    --dm-c-surface-alt: #e9eef2;
    --dm-c-ink: #17212b;
    --dm-c-muted: #51606b;
    --dm-c-line: #d9e0e6;
    --dm-c-brand: #1d3557;
    --dm-c-brand-strong: #14263f;
    --dm-c-brand-ink: #ffffff;
    --dm-c-brand-muted: #c9d6e2;
    --dm-c-link: #1a5fa8;
    --dm-c-link-hover: #124478;
    --dm-c-accent: #b3401c;
    --dm-c-accent-hover: #933416;
    --dm-c-accent-ink: #ffffff;
    --dm-c-info-bg: #eaf3fb;
    --dm-c-info-line: #1a5fa8;
    --dm-c-warn-bg: #fdf3e1;
    --dm-c-warn-line: #a15c00;
    --dm-c-focus: #f2a900;

    /* Type */
    --dm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dm-font-head: var(--dm-font-body);
    --dm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dm-fs-xs: 0.8125rem;
    --dm-fs-sm: 0.9375rem;
    --dm-fs-base: 1.0625rem;
    --dm-fs-lg: 1.25rem;
    --dm-fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
    --dm-fs-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.125rem);
    --dm-fs-3xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    --dm-lh-body: 1.65;
    --dm-lh-head: 1.2;
    --dm-fw-regular: 400;
    --dm-fw-medium: 600;
    --dm-fw-bold: 700;
    --dm-fw-black: 800;
    --dm-ls-head: -0.015em;
    --dm-ls-caps: 0.06em;

    /* Space */
    --dm-sp-1: 0.25rem;
    --dm-sp-2: 0.5rem;
    --dm-sp-3: 0.75rem;
    --dm-sp-4: 1rem;
    --dm-sp-5: 1.5rem;
    --dm-sp-6: 2rem;
    --dm-sp-7: 3rem;
    --dm-sp-8: 4.5rem;

    /* Shape and layout */
    --dm-bw: 1px;
    --dm-bw-thick: 4px;
    --dm-radius: 6px;
    --dm-radius-lg: 12px;
    --dm-shadow: 0 1px 2px rgba(23, 33, 43, 0.06), 0 4px 14px rgba(23, 33, 43, 0.06);
    --dm-w-page: 72rem;
    --dm-w-prose: 44rem;
    --dm-w-card: 17rem;
    --dm-w-field: 28rem;
    --dm-h-textarea: 11rem;
    --dm-header-h: 4rem;
    --dm-tap: 2.75rem;
    --dm-icon-box: 2.5rem;

    /* Reserved ad heights: a mobile banner, a desktop leaderboard, a rectangle. */
    --dm-ad-h-banner: 100px;
    --dm-ad-h-leaderboard: 90px;
    --dm-ad-h-rect: 250px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--dm-c-bg);
    color: var(--dm-c-ink);
    font-family: var(--dm-font-body);
    font-size: var(--dm-fs-base);
    font-weight: var(--dm-fw-regular);
    line-height: var(--dm-lh-body);
}

h1, h2, h3, h4 {
    margin: 0 0 var(--dm-sp-3);
    font-family: var(--dm-font-head);
    font-weight: var(--dm-fw-black);
    line-height: var(--dm-lh-head);
    letter-spacing: var(--dm-ls-head);
    text-wrap: balance;
}
h1 { font-size: var(--dm-fs-3xl); }
h2 { font-size: var(--dm-fs-2xl); }
h3 { font-size: var(--dm-fs-xl); font-weight: var(--dm-fw-bold); }
h4 { font-size: var(--dm-fs-lg); font-weight: var(--dm-fw-bold); }

p, ul, ol, dl, table, blockquote, figure { margin: 0 0 var(--dm-sp-4); }
ul, ol { padding-left: var(--dm-sp-5); }
li + li { margin-top: var(--dm-sp-1); }

a { color: var(--dm-c-link); text-underline-offset: 0.15em; }
a:hover { color: var(--dm-c-link-hover); }

:focus-visible {
    outline: var(--dm-bw-thick) solid var(--dm-c-focus);
    outline-offset: var(--dm-sp-1);
}

img, svg, video { max-width: 100%; height: auto; }
svg { flex-shrink: 0; vertical-align: middle; }

hr { border: 0; border-top: var(--dm-bw) solid var(--dm-c-line); margin: var(--dm-sp-6) 0; }

table { width: 100%; border-collapse: collapse; font-size: var(--dm-fs-sm); }
th, td { padding: var(--dm-sp-2) var(--dm-sp-3); border-bottom: var(--dm-bw) solid var(--dm-c-line); text-align: left; vertical-align: top; }
th { font-weight: var(--dm-fw-bold); }

blockquote {
    padding: var(--dm-sp-3) var(--dm-sp-5);
    border-left: var(--dm-bw-thick) solid var(--dm-c-line);
    color: var(--dm-c-muted);
}

code, pre { font-family: var(--dm-font-mono); font-size: var(--dm-fs-sm); }

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.dm-skip:focus {
    position: fixed;
    top: var(--dm-sp-2);
    left: var(--dm-sp-2);
    z-index: 10;
    width: auto;
    height: auto;
    padding: var(--dm-sp-2) var(--dm-sp-4);
    clip-path: none;
    background: var(--dm-c-bg);
    color: var(--dm-c-ink);
    border-radius: var(--dm-radius);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.dm-wrap {
    width: 100%;
    max-width: var(--dm-w-page);
    margin-inline: auto;
    padding-inline: var(--dm-sp-4);
}
.dm-main { padding-block: var(--dm-sp-5) var(--dm-sp-7); }
.dm-prose { max-width: var(--dm-w-prose); }
.dm-prose > h2 { margin-top: var(--dm-sp-6); }
.dm-prose > h3 { margin-top: var(--dm-sp-5); }
/* A heading reached through a link to its id keeps a little air above it. */
.dm-prose [id] { scroll-margin-top: var(--dm-sp-4); }
.dm-section { margin-block: var(--dm-sp-7); }
.dm-section:first-child { margin-top: 0; }
.dm-lede { font-size: var(--dm-fs-lg); color: var(--dm-c-muted); max-width: var(--dm-w-prose); }
.dm-eyebrow {
    margin-bottom: 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;
}
.dm-page-header { margin-bottom: var(--dm-sp-5); }
.dm-meta { color: var(--dm-c-muted); font-size: var(--dm-fs-sm); }

/* ==========================================================================
   Header and navigation
   ========================================================================== */
.dm-header {
    background: var(--dm-c-bg);
    border-bottom: var(--dm-bw) solid var(--dm-c-line);
}
.dm-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-sp-4);
    min-height: var(--dm-header-h);
}
.dm-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-sp-2);
    min-height: var(--dm-tap);
    color: var(--dm-c-brand);
    font-family: var(--dm-font-head);
    font-size: var(--dm-fs-lg);
    font-weight: var(--dm-fw-black);
    letter-spacing: var(--dm-ls-head);
    text-decoration: none;
}
.dm-wordmark:hover { color: var(--dm-c-brand-strong); }

.dm-nav-toggle {
    display: none;
    align-items: center;
    gap: var(--dm-sp-2);
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) var(--dm-sp-3);
    background: transparent;
    border: var(--dm-bw) solid var(--dm-c-line);
    border-radius: var(--dm-radius);
    color: var(--dm-c-ink);
    font: inherit;
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    cursor: pointer;
}
.dm-nav-toggle .dm-icon--close,
.dm-nav-toggle[aria-expanded="true"] .dm-icon--menu { display: none; }
.dm-nav-toggle[aria-expanded="true"] .dm-icon--close { display: inline; }

.dm-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 var(--dm-sp-3);
    list-style: none;
}
.dm-nav__list li { margin: 0; }
.dm-nav__list a {
    display: flex;
    align-items: center;
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) 0;
    border-top: var(--dm-bw) solid var(--dm-c-line);
    color: var(--dm-c-ink);
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    text-decoration: none;
}
.dm-nav__list a:hover,
.dm-nav__list .current-menu-item > a,
.dm-nav__list .current-page-ancestor > a { color: var(--dm-c-link); }

/* With script, the phone menu starts closed. The class is set in <head>, before first paint. */
.dm-js .dm-nav-toggle { display: inline-flex; }
.dm-js .dm-nav { display: none; }
.dm-js .dm-nav.is-open { display: block; }

@media (min-width: 48em) {
    .dm-js .dm-nav-toggle { display: none; }
    .dm-nav, .dm-js .dm-nav { display: block; }
    .dm-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--dm-sp-1) var(--dm-sp-5);
        padding: 0;
    }
    .dm-nav__list a { border-top: 0; }
    .dm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-sp-5); }
    .dm-header__bar { flex-shrink: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.dm-hero {
    background: var(--dm-c-brand);
    color: var(--dm-c-brand-ink);
    padding-block: var(--dm-sp-7);
}
.dm-hero h1 { margin-bottom: var(--dm-sp-3); }
.dm-hero .dm-lede { color: var(--dm-c-brand-muted); margin-bottom: 0; }
.dm-hero .dm-eyebrow { color: var(--dm-c-brand-muted); }

@media (min-width: 48em) {
    .dm-hero { padding-block: var(--dm-sp-8); }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.dm-breadcrumb { margin-bottom: var(--dm-sp-4); font-size: var(--dm-fs-sm); color: var(--dm-c-muted); }
.dm-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dm-sp-1); margin: 0; padding: 0; list-style: none; }
.dm-breadcrumb li { display: inline-flex; align-items: center; gap: var(--dm-sp-1); margin: 0; }
.dm-breadcrumb a { color: var(--dm-c-muted); }
.dm-breadcrumb a:hover { color: var(--dm-c-link-hover); }

/* ==========================================================================
   Cards
   ========================================================================== */
.dm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--dm-w-card)), 1fr));
    gap: var(--dm-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.dm-cards > li { margin: 0; }
.dm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--dm-sp-2);
    height: 100%;
    padding: var(--dm-sp-5);
    background: var(--dm-c-bg);
    border: var(--dm-bw) solid var(--dm-c-line);
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow);
}
.dm-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dm-icon-box);
    height: var(--dm-icon-box);
    background: var(--dm-c-surface);
    border-radius: var(--dm-radius);
    color: var(--dm-c-brand);
}
.dm-card__title { margin: 0; font-size: var(--dm-fs-lg); font-weight: var(--dm-fw-bold); }
.dm-card__title a { color: var(--dm-c-ink); text-decoration: none; }
/* The whole card is the link target. */
.dm-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--dm-radius-lg); }
.dm-card:hover { border-color: var(--dm-c-link); }
.dm-card:hover .dm-card__title a { color: var(--dm-c-link); }
.dm-card__text { margin: 0; color: var(--dm-c-muted); font-size: var(--dm-fs-sm); }
.dm-card__meta { margin: auto 0 0; padding-top: var(--dm-sp-2); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }

/* ==========================================================================
   Notice
   ========================================================================== */
.dm-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--dm-sp-3);
    margin-block: var(--dm-sp-5);
    padding: var(--dm-sp-4);
    background: var(--dm-c-info-bg);
    border-left: var(--dm-bw-thick) solid var(--dm-c-info-line);
    border-radius: var(--dm-radius);
    font-size: var(--dm-fs-sm);
}
.dm-notice > svg { margin-top: var(--dm-sp-1); color: var(--dm-c-info-line); }
.dm-notice--warning { background: var(--dm-c-warn-bg); border-left-color: var(--dm-c-warn-line); }
.dm-notice--warning > svg { color: var(--dm-c-warn-line); }
.dm-notice__title { margin: 0 0 var(--dm-sp-1); font-weight: var(--dm-fw-bold); }
.dm-notice__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Official-source link
   ========================================================================== */
.dm-source {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-sp-2);
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) var(--dm-sp-4);
    background: var(--dm-c-bg);
    border: var(--dm-bw) solid var(--dm-c-link);
    border-radius: var(--dm-radius);
    color: var(--dm-c-link);
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-medium);
    text-decoration: none;
}
.dm-source:hover { background: var(--dm-c-info-bg); color: var(--dm-c-link-hover); }
.dm-source__host { color: var(--dm-c-muted); font-weight: var(--dm-fw-regular); }

/* ==========================================================================
   Freshness-stamped data block
   ========================================================================== */
.dm-data {
    margin-block: var(--dm-sp-5);
    border: var(--dm-bw) solid var(--dm-c-line);
    border-radius: var(--dm-radius-lg);
    overflow: hidden;
}
.dm-data__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dm-sp-1) var(--dm-sp-4);
    padding: var(--dm-sp-3) var(--dm-sp-4);
    background: var(--dm-c-surface);
    border-bottom: var(--dm-bw) solid var(--dm-c-line);
}
.dm-data__title { margin: 0; font-size: var(--dm-fs-lg); font-weight: var(--dm-fw-bold); }
.dm-data__stamp { display: inline-flex; align-items: center; gap: var(--dm-sp-1); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }
.dm-data__body { padding: var(--dm-sp-4); overflow-x: auto; }
.dm-data__body > :last-child { margin-bottom: 0; }
.dm-data__foot { padding: var(--dm-sp-3) var(--dm-sp-4); border-top: var(--dm-bw) solid var(--dm-c-line); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }

/* ==========================================================================
   Reserved ad container. Collapsed while empty; once ad code prints into it,
   it holds a fixed minimum height so a late ad moves nothing.
   ========================================================================== */
.dm-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--dm-ad-h-banner);
    margin-block: var(--dm-sp-6);
    overflow: hidden;
}
.dm-ad--rect { min-height: var(--dm-ad-h-rect); }
.dm-ad:empty { display: none; }

@media (min-width: 48em) {
    .dm-ad--leaderboard { min-height: var(--dm-ad-h-leaderboard); }
}

/* ==========================================================================
   Buttons, forms, pagination
   ========================================================================== */
.dm-button,
.dm-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-sp-2);
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) var(--dm-sp-5);
    background: var(--dm-c-accent);
    border: 0;
    border-radius: var(--dm-radius);
    color: var(--dm-c-accent-ink);
    font: inherit;
    font-size: var(--dm-fs-sm);
    font-weight: var(--dm-fw-bold);
    text-decoration: none;
    cursor: pointer;
}
.dm-button:hover,
.dm-search button:hover { background: var(--dm-c-accent-hover); color: var(--dm-c-accent-ink); }

.dm-search { display: flex; gap: var(--dm-sp-2); max-width: var(--dm-w-prose); margin-block: var(--dm-sp-4); }
.dm-search input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) var(--dm-sp-3);
    border: var(--dm-bw) solid var(--dm-c-muted);
    border-radius: var(--dm-radius);
    font: inherit;
}

/* A form printed by dm-forms: one field to a line, its label above it. */
.dm-form-wrap { scroll-margin-top: var(--dm-sp-4); }
.dm-form { max-width: var(--dm-w-prose); margin-block: var(--dm-sp-5); }
.dm-form > .dm-notice { margin-top: 0; }
.dm-field { margin: 0 0 var(--dm-sp-4); }
.dm-field label { display: block; margin-bottom: var(--dm-sp-1); font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-bold); }
.dm-field input,
.dm-field textarea {
    display: block;
    width: 100%;
    min-height: var(--dm-tap);
    padding: var(--dm-sp-2) var(--dm-sp-3);
    background: var(--dm-c-bg);
    border: var(--dm-bw) solid var(--dm-c-muted);
    border-radius: var(--dm-radius);
    color: var(--dm-c-ink);
    font: inherit;
}
/* A short answer does not need the full measure; a message does. */
.dm-field input { max-width: var(--dm-w-field); }
.dm-field textarea { min-height: var(--dm-h-textarea); resize: vertical; }
.dm-field--error input,
.dm-field--error textarea { border-color: var(--dm-c-warn-line); box-shadow: inset 0 0 0 var(--dm-bw) var(--dm-c-warn-line); }
.dm-field__error { display: block; margin-top: var(--dm-sp-1); color: var(--dm-c-warn-line); font-size: var(--dm-fs-sm); font-weight: var(--dm-fw-medium); }
.dm-form__actions { margin: var(--dm-sp-5) 0 0; }
.dm-form__again { font-size: var(--dm-fs-sm); }
.dm-form__again a { display: inline-flex; align-items: center; min-height: var(--dm-tap); }

.dm-list { margin: 0; padding: 0; list-style: none; }
.dm-list > li { margin: 0; padding-block: var(--dm-sp-4); border-bottom: var(--dm-bw) solid var(--dm-c-line); }
.dm-list h2 { margin-bottom: var(--dm-sp-1); font-size: var(--dm-fs-xl); font-weight: var(--dm-fw-bold); }
.dm-list p { margin: 0; color: var(--dm-c-muted); font-size: var(--dm-fs-sm); }

.dm-pagination { margin-top: var(--dm-sp-6); }
.dm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--dm-sp-2); }
.dm-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dm-tap);
    min-height: var(--dm-tap);
    padding-inline: var(--dm-sp-3);
    border: var(--dm-bw) solid var(--dm-c-line);
    border-radius: var(--dm-radius);
    text-decoration: none;
}
.dm-pagination .page-numbers.current { background: var(--dm-c-brand); border-color: var(--dm-c-brand); color: var(--dm-c-brand-ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.dm-footer { margin-top: var(--dm-sp-7); }
.dm-footer__main { background: var(--dm-c-brand); color: var(--dm-c-brand-muted); padding-block: var(--dm-sp-6); font-size: var(--dm-fs-sm); }
.dm-footer__grid { display: grid; gap: var(--dm-sp-5); }
.dm-footer__name { margin: 0 0 var(--dm-sp-1); color: var(--dm-c-brand-ink); font-family: var(--dm-font-head); font-size: var(--dm-fs-lg); font-weight: var(--dm-fw-black); }
.dm-footer__tagline { margin: 0; }
.dm-footer__heading { margin: 0 0 var(--dm-sp-2); color: var(--dm-c-brand-ink); font-size: var(--dm-fs-xs); font-weight: var(--dm-fw-bold); letter-spacing: var(--dm-ls-caps); text-transform: uppercase; }
.dm-footer__links { margin: 0; padding: 0; list-style: none; }
.dm-footer__links li { margin: 0; }
.dm-footer__links a { display: inline-flex; align-items: center; gap: var(--dm-sp-1); min-height: var(--dm-tap); color: var(--dm-c-brand-ink); }
.dm-footer__links a:hover { color: var(--dm-c-brand-muted); }

.dm-footer__legal { background: var(--dm-c-surface); padding-block: var(--dm-sp-5); color: var(--dm-c-muted); font-size: var(--dm-fs-xs); }
.dm-footer__legal p { margin: var(--dm-sp-3) 0 0; }
/* The disclaimer helper ships inline styles written for email. On the page the tokens win. */
.dm-footer .dm-non-affiliation-disclaimer {
    max-width: var(--dm-w-prose);
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    color: var(--dm-c-muted) !important;
    font-size: var(--dm-fs-sm) !important;
    font-style: normal !important;
    line-height: var(--dm-lh-body) !important;
}

@media (min-width: 48em) {
    .dm-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}