/*
 * Site templates on the public site: sections, the logo, menus, search, and the block layout (columns, buttons) they are built of.
 * Every colour is the theme's token with a fallback of its own, so a template looks at home in any theme and still readable in one that
 * defines none. Nothing here reaches outside .tpl-* and the blocks' own .blk-* classes.
 */

.tpl-region {
    --tpl-accent: var(--accent, #1d4ed8);
    --tpl-accent-ink: var(--accent-ink, #ffffff);
    --tpl-accent-quiet: var(--accent-quiet, #eff4ff);
    --tpl-ink: var(--ink, #16202b);
    --tpl-quiet: var(--ink-quiet, #55636f);
    --tpl-paper: var(--paper, #ffffff);
    --tpl-sunken: var(--paper-sunken, #f5f7f9);
    --tpl-line: var(--line, #d9dfe5);
    --tpl-radius: var(--radius-sm, 6px);
    --tpl-gap: var(--gap, clamp(1rem, 0.6rem + 1.4vw, 1.75rem));
    display: block;
}

.tpl-region--header { border-bottom: 1px solid var(--tpl-line); background: var(--tpl-paper); }
.tpl-region--footer { border-top: 1px solid var(--tpl-line); }
.tpl-region--single, .tpl-region--archive { margin-block: calc(var(--tpl-gap) * -1) calc(var(--tpl-gap) * -2); }

/* ---- sections ------------------------------------------------------------------------------ */

.tpl-section { color: var(--tpl-ink); }
.tpl-section--bg-soft { background: var(--tpl-sunken); }
.tpl-section--bg-accent { background: var(--tpl-accent); color: var(--tpl-accent-ink); }
.tpl-section--bg-dark { background: #111827; color: #f3f4f6; }
.tpl-section--bg-accent a, .tpl-section--bg-dark a { color: inherit; }

.tpl-section--pad-none { padding-block: 0; }
.tpl-section--pad-small { padding-block: 0.75rem; }
.tpl-section--pad-medium { padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.tpl-section--pad-large { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.tpl-section--align-center { text-align: center; }

.tpl-section__inner { margin-inline: auto; }
.tpl-section__inner--contained { width: min(100% - 2rem, var(--wrap, 72rem)); }
.tpl-section__inner--narrow { width: min(100% - 2rem, var(--article, 46rem)); }
.tpl-section__inner--full { padding-inline: 1rem; }

.tpl-section .blk + .blk { margin-top: 1rem; }
.tpl-section .blk > :first-child { margin-top: 0; }
.tpl-section .blk > :last-child { margin-bottom: 0; }

/* ---- the blocks' layout (columns, buttons) -------------------------------------------------------- */

.blk-columns__row { display: grid; gap: var(--tpl-gap, 1.5rem); align-items: center; }
.blk-columns__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-columns__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-columns__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blk-columns__row > .blk { margin-top: 0; }
.blk-column > .blk + .blk { margin-top: 1rem; }

@media (max-width: 40rem) {
    .blk-columns__row--2, .blk-columns__row--3, .blk-columns__row--4 { grid-template-columns: minmax(0, 1fr); }
}

.blk-button .btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--tpl-accent);
    border-radius: var(--tpl-radius);
    background: var(--tpl-accent);
    color: var(--tpl-accent-ink);
    font-weight: 600;
    text-decoration: none;
}
.blk-button .btn--secondary { background: transparent; color: var(--tpl-accent); }
.tpl-section--bg-accent .blk-button .btn { border-color: currentColor; background: var(--tpl-accent-ink); color: var(--tpl-accent); }
.blk-image img, .blk-gallery img { max-width: 100%; height: auto; border-radius: var(--tpl-radius); }
.blk-video iframe, .blk-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--tpl-radius); }

/* ---- the site's own pieces ---------------------------------------------------------------------- */

.tpl-logo { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.tpl-logo:hover { color: var(--tpl-accent); }
.tpl-section--bg-accent .tpl-logo:hover, .tpl-section--bg-dark .tpl-logo:hover { opacity: 0.85; color: inherit; }
.tpl-logo__image { display: block; max-height: 2.75rem; width: auto; }

.tpl-menu ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.tpl-menu--vertical ul { flex-direction: column; align-items: flex-start; }
.tpl-menu--align-center ul { justify-content: center; }
.tpl-menu--align-end ul { justify-content: flex-end; }
.tpl-menu li { position: relative; max-width: none; }
.tpl-menu a { display: inline-block; padding: 0.4rem 0.75rem; border-radius: var(--tpl-radius); color: inherit; text-decoration: none; }
.tpl-menu a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.tpl-menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 currentColor; font-weight: 600; }
.tpl-section--bg-none .tpl-menu a[aria-current="page"], .tpl-section--bg-soft .tpl-menu a[aria-current="page"] { color: var(--tpl-accent); }

/* A sub-menu opens under its item, by pointer or by keyboard (focus inside it). */
.tpl-menu--horizontal li > ul {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 5;
    display: none;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.35rem;
    border: 1px solid var(--tpl-line);
    border-radius: var(--tpl-radius);
    background: var(--tpl-paper);
    color: var(--tpl-ink);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    text-align: start;
}
.tpl-menu--horizontal li:hover > ul, .tpl-menu--horizontal li:focus-within > ul { display: flex; }
.tpl-menu--vertical li > ul { margin-inline-start: 1rem; }

.tpl-search { display: flex; gap: 0.5rem; max-width: 26rem; }
.tpl-section--align-center .tpl-search { margin-inline: auto; }
.tpl-search input { flex: 1; min-width: 0; }
.tpl-section--bg-accent .tpl-search button, .tpl-section--bg-dark .tpl-search button { border-color: currentColor; background: transparent; color: inherit; }

.tpl-languages ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.tpl-languages a { color: inherit; }
.tpl-languages a[aria-current="page"] { font-weight: 600; text-decoration: none; }

.tpl-copyright { margin: 0; color: var(--tpl-quiet); font-size: 0.9rem; }
.tpl-section--bg-accent .tpl-copyright, .tpl-section--bg-dark .tpl-copyright { color: inherit; opacity: 0.8; }

.tpl-spacer--small { height: 0.75rem; }
.tpl-spacer--medium { height: 2rem; }
.tpl-spacer--large { height: 4rem; }
.tpl-divider { margin: 0; border: 0; border-top: 1px solid var(--tpl-line); }

/* ---- a post's and a list's parts -------------------------------------------------------------------- */

.tpl-post-title, .tpl-archive-title { margin: 0 0 0.35em; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
.tpl-post-meta { margin: 0; color: var(--tpl-quiet); font-size: 0.9375rem; }
.tpl-section--bg-accent .tpl-post-meta, .tpl-section--bg-dark .tpl-post-meta { color: inherit; opacity: 0.85; }
.tpl-post-terms { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--tpl-line); }

.post-list.tpl-list--1 { grid-template-columns: minmax(0, 1fr); }
.post-list.tpl-list--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }