/*
Theme Name: AdventMyFriend
Theme URI: https://adventmyfriend.com/
Author: Webhaus LLC
Description: Bespoke theme for adventmyfriend.com, the free online advent-calendar maker. Palette "Lights on": deep evergreen chrome with a string of lights under the header, the demo calendar as the home hero over a photo of lights, gold for links and buttons, red opened doors; the article body on warm paper for long reads. Berkshire Swash (self-hosted) on the wordmark and the home headline, a serif everywhere else. Phone first. Adapted from the homebased.biz theme; styles the markup written by niche-sites/tools/publish.py and the Niche Advent plugin's start block.
Version: 0.2.6
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: adventmyfriend
*/

/* =========================================================================
 * Tokens, palette "Paper, teal" (2026-10-25, from the brief's Design section: a warm paper white, charcoal text, one
 * deep teal accent). The only place colors live. There is one palette; dark mode swaps the same tokens and nothing
 * else. Every text/background pair is at or above 4.5:1 (theme/README.md has the table; recompute with
 * theme/preview/contrast.py after any change). Spacing as the employment theme's 0.2.1 pass.
 * ====================================================================== */
:root {
  --bg: #fbf8f2;        /* the page: warm paper (the article body) */
  --paper: #f6efe2;     /* cards and boxes */
  --box: #efe4d2;       /* callouts */
  --soft: #e4efe6;      /* the evergreen tint */
  --ink: #1c2a24;
  --text: #1f2328;
  --mute: #5c665f;
  --line: #e2dccf;
  --accent: #0f3d2e;    /* evergreen: links, icons, the create button on paper */
  --accent2: #c0392b;   /* warm red: the opened doors, the second button */
  --on-accent: #fff;
  /* the dark chrome ("Lights on"): header, footer, the home hero, the phone tab bar, the menu */
  --dark: #0b2419; --dark-2: #11322a; --dark-line: #244d41; --dark-text: #f1ebdd; --dark-mute: #b9c8bf; --gold: #ffd37a; --red: #e2473f;
  --door: rgba(8,36,25,.58); --door-open: rgba(226,71,63,.82);
  --hfont: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --dfont: "Berkshire Swash", "Iowan Old Style", Palatino, Georgia, serif;   /* the display face: the wordmark, the home headline, a calendar's title */
  --bfont: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 10px;
  --col: 68ch;
  --ico: 44px; --ico-s: 32px; --ico-xs: 28px; --ico-h2: 26px; --ico-tile: 48px; --ico-hero: 112px;
}
@font-face { font-family: "Berkshire Swash"; src: url(assets/fonts/berkshire-swash.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b2419; --paper: #11322a; --box: #163b31; --soft: #1d4a3d; --ink: #fbf4e6; --text: #f1ebdd; --mute: #b9c8bf; --line: #244d41; --accent: #ffd37a; --accent2: #e2473f; --on-accent: #0b2419; }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.55 var(--bfont); padding-bottom: calc(72px + env(safe-area-inset-bottom)); overflow-wrap: break-word; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, svg, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--hfont); color: var(--ink); line-height: 1.25; margin: 1.8em 0 .6em; font-weight: 700; }
h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } h4 { font-size: 1rem; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; } li { margin: 0 0 .4em; }
[hidden] { display: none !important; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px; z-index: 99; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.sec-label { font-family: var(--bfont); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 40px 0 14px; }
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: .92rem; text-decoration: none; }

/* icons: inline SVG from inc/icons.php, one color (currentColor), sized here; teal wherever they carry meaning */
.ico { width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-home-biz { stroke-width: 1.75; }   /* the mark: a house with an open door, drawn at the lighter Lucide weight */
.ico-s { width: var(--ico-s); height: var(--ico-s); }
.ico-xs { width: var(--ico-xs); height: var(--ico-xs); }
.ico-h2 { width: var(--ico-h2); height: var(--ico-h2); color: var(--accent); }

/* header: the paper white, a 1 px line under it; the logo mark (teal) and the wordmark with its tagline at the left; at
   the right the menu button (icon + "Menu") */
.site-head { background: var(--bg); color: var(--ink); padding: 10px 0; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); transition: padding .2s; }
/* compacted on scroll (app.js adds is-compact past 80 px, removes it under 24 px) */
.brand-logo svg, .brand .wm, .head-corner { transition: width .2s, height .2s, font-size .2s, transform .2s; }
.site-head.is-compact { padding: 5px 0; }
.site-head.is-compact .brand-logo svg { width: 26px; height: 26px; }
.site-head.is-compact .brand .wm { font-size: 1rem; }
.site-head.is-compact .brand .tl { display: none; }
.site-head.is-compact .brand .wm-pre { display: none; }
.site-head.is-compact .head-corner { transform: scale(.82); }
.head-row { max-width: 96vw; margin: 0 auto; padding: 0 2vw; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; flex: 1; }
.brand-logo { display: inline-flex; flex: none; color: var(--accent); }
.brand-logo svg { width: 34px; height: 34px; }
.brand .wm-pre { display: block; font-size: .62rem; font-weight: 300; line-height: 1; letter-spacing: .06em; color: var(--mute); margin-bottom: 3px; text-align: left; }   /* a thin word above the wordmark; empty on this site (inc/home-data.php wordmark_pre) */
.brand .wm { display: block; font-family: var(--hfont); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.brand .tl { display: none; font-size: .75rem; color: var(--mute); margin-top: 2px; }   /* shown from 600 px */
@media (min-width: 600px) { .brand .tl { display: block; } }
.head-corner { display: grid; grid-template-columns: auto; justify-items: stretch; gap: 7px; flex: none; transform-origin: right center; }   /* the Menu button (the employment theme stacked its EN | ES switch here) */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px 0 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.menu-btn .ico { width: 22px; height: 22px; color: var(--accent); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the search form: the label line and the box (the white input, the teal submit button at its right). It sits in
   the pull-down panel under the header, or in the light gray band under the home hero. */
.ask-band { background: var(--box); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0 26px; }
.ask { margin: 0; }
.ask-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; padding-left: 15px; }   /* 0.2.6: the label starts where the placeholder text starts (the input's 1 px border + 14 px padding) */
.ask-box { display: flex; align-items: stretch; }
.ask input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: #fff; color: #1f2328; -webkit-appearance: none; appearance: none; }
.ask-go { flex: none; width: 50px; display: grid; place-items: center; border: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--accent); color: #fff; cursor: pointer; padding: 0; }
.ask-go .ico { width: 24px; height: 24px; color: #fff; }
.ask-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the pull-down (every page but the home page): a small white tab hanging from the header's bottom edge, centred over
   the hero; the panel slides down from under the header and stays with it while scrolled. Collapsed only when
   JavaScript runs (html.js). */
.search-tab { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgb(0 0 0 / .08); }
.search-tab .ico { width: 20px; height: 20px; color: var(--accent); }
.search-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.search-tab[aria-expanded="true"] { background: var(--box); }
.search-panel { background: var(--box); border-top: 1px solid var(--line); }
.search-panel-in { position: relative; padding-top: 12px; padding-bottom: 14px; padding-right: 48px; }
.search-close { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--mute); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.search-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
html.js .search-panel { max-height: 0; overflow: hidden; visibility: hidden; border-top-width: 0; transition: max-height .25s ease, visibility 0s .25s, border-top-width 0s .25s; }
html.js .search-panel.is-open { max-height: 220px; visibility: visible; border-top-width: 1px; transition: max-height .25s ease, visibility 0s, border-top-width 0s; }
.ask input::placeholder { color: #5c6670; }
.ask input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the menu panel (a <dialog>; app.js opens it with showModal): the sections with their teal icons, the legal links,
   the Accessibility button */
.menu-panel { border: 0; padding: 0; background: transparent; margin: 0; inset: 0 0 auto auto; max-width: 100vw; color: var(--text); }
.menu-panel::backdrop { background: rgb(0 0 0 / .35); }
.menu-panel[open] { display: grid; gap: 10px; width: min(92vw, 360px); padding: 18px 18px 16px; margin: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .18); position: fixed; top: 0; right: 0; left: auto; }
.menu-sections { display: grid; gap: 2px; }
.menu-sections a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.06rem; font-family: var(--hfont); }
.menu-sections a:hover, .menu-sections a:focus-visible, .menu-sections a.is-current { background: var(--soft); }
.menu-sections .ico { color: var(--accent); width: 32px; height: 32px; }
.menu-tools { margin: 0; padding: 0 10px; }
.a11y-open { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; }
.a11y-open .ico { width: 20px; height: 20px; }
.foot-tools { margin: 0 0 12px; }
.menu-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.menu-links a { color: var(--text); }
.menu-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--mute); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* the accessibility panel (a <dialog> like the menu, centred) and its switches (teal knobs when on) */
.a11y-panel { border: 0; padding: 0; background: transparent; margin: 0; color: var(--text); max-width: 100vw; }
.a11y-panel::backdrop { background: rgb(0 0 0 / .35); }
.a11y-panel[open] { display: block; width: min(92vw, 400px); padding: 18px 18px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .18); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.a11y-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 30px 4px 0; font-size: 1.2rem; }
.a11y-panel h2 .ico { color: var(--accent); width: 28px; height: 28px; }
.a11y-intro { margin: 0 0 10px; font-size: .85rem; color: var(--mute); }
.a11y-list { display: grid; gap: 2px; }
.a11y-list [role="switch"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 6px 4px 6px 8px; font: inherit; font-weight: 600; color: var(--ink); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.a11y-list [role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .2s; }
[role="switch"][aria-checked="true"] .sw { background: var(--accent); }
[role="switch"][aria-checked="true"] .sw::after { transform: translateX(16px); }
.a11y-acts { display: flex; gap: 10px; justify-content: flex-end; margin: 14px 0 0; }
.a11y-reset, .a11y-close { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.a11y-reset { color: var(--accent); background: none; border: 1px solid var(--line); }
.a11y-close { color: var(--on-accent); background: var(--accent); border: 0; }

/* the folded sections: a paper card with the heading (icon + words) as the summary and a teal +/- at the right */
details.fold { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 16px; }
details.fold > summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 18px; font-family: var(--hfont); font-weight: 700; font-size: 1.05rem; position: relative; min-height: 48px; color: var(--ink); line-height: 1.35; }
summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; position: absolute; right: 14px; top: 8px; font-family: var(--bfont); font-size: 1.5rem; font-weight: 400; color: var(--accent); }
details[open].fold > summary::after { content: "\2212"; }
summary h2, summary h3 { display: inline; font: inherit; color: inherit; margin: 0; }
details.fold > summary h2 { display: flex; align-items: center; gap: 10px; }
.fold-body { padding: 0 18px 14px; }
details.fold-sources { margin-top: 24px; }
.fold-body > :first-child { margin-top: 0; }
/* every H2 in an article carries an icon (functions.php fl_h2_icon, by keyword): the icon and the words on one line */
.entry-content h2 { display: flex; align-items: center; gap: 10px; }
.entry-content > h2#faq, .entry-content > h2#related, .entry-content > h2#sources { margin-top: 2.4em; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.2em; }

/* question-and-answer pairs (the FAQ, Most asked, the search answers): the question row with a teal chevron that
   turns when open; the answer in a light gray panel with a teal bar and an arrow at its start */
details.faq-item { margin: 0 0 22px; }
details.faq-item > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 34px 10px 0; min-height: 44px; font-weight: 600; color: var(--ink); line-height: 1.35; }
details.faq-item > summary .faq-open { position: absolute; right: 2px; top: 50%; width: 26px; height: 26px; margin-top: -13px; color: var(--red); }
details.faq-item > summary .faq-open .ico { width: 26px; height: 26px; }
details.faq-item > summary .faq-opened, details[open].faq-item > summary .faq-closed { display: none; }
details[open].faq-item > summary .faq-opened { display: block; }
.faq-answer { position: relative; background: var(--box); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 14px 10px 34px; margin: 4px 0 0; }
.faq-answer::before { content: "\2192"; position: absolute; left: 11px; top: 9px; color: var(--accent); font-weight: 700; }
.faq-answer > :first-child { margin-top: 0; } .faq-answer > :last-child { margin-bottom: 0; }
.faq-answer p { margin: 0 0 .6em; }
.faq-answer .more { display: block; margin-top: 6px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.answers { padding-top: 12px; padding-bottom: 24px; }
.answers-count, .answers-none, .answers-more { font-size: .85rem; color: var(--mute); margin: 0 0 8px; }
.answers-more { margin-top: 14px; }
.searching #main > :not(#answers) { display: none; }

/* home: the Start-here tiles (large teal icons) and the Most-asked list */
.home-intro { color: var(--mute); margin: 0; max-width: 60ch; }
.home > section { margin-bottom: 40px; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tile { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px; text-decoration: none; color: var(--text); min-height: 80px; }
.tile .ico { width: var(--ico-tile); height: var(--ico-tile); color: var(--accent); stroke-width: 1.75; }
.tile-text { flex: 1; }
.tile b { display: block; font-family: var(--hfont); font-size: 1.08rem; color: var(--ink); line-height: 1.25; }
.tile small { display: block; color: var(--mute); font-size: .875rem; line-height: 1.35; margin-top: 2px; }
.tile i { flex: none; font-style: normal; color: var(--accent); font-size: 1.3rem; }
.asked { margin: 0 0 32px; }
.asked summary .ico { color: var(--accent); }
.asked-text { flex: 1; }
.asked-cat { display: block; color: var(--mute); font-size: .8rem; font-weight: 400; margin-top: 1px; }
.guides { list-style: none; padding: 0; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.guides li { margin: 0; border-top: 1px solid var(--line); } .guides li:first-child { border-top: 0; }
.guides a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.guides small { display: block; padding: 0 14px 12px; margin-top: -6px; color: var(--mute); font-size: .85rem; }
.empty { color: var(--mute); margin-top: 24px; }

/* article */
.entry-title { font-size: 1.45rem; line-height: 1.18; margin: 0 0 8px; }
.entry-meta { color: var(--mute); font-size: .85rem; margin: 0 0 16px; } .entry-meta a { color: inherit; }
.entry-content { font-size: 1rem; }
.key-facts { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 18px 20px 10px; margin: 0 0 20px; }
.key-facts-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 0 0 8px; }
.key-facts-label .ico { color: var(--accent); }
.key-facts p { margin: 0 0 8px; } .key-facts ul { margin: 6px 0 10px; padding-left: 20px; } .key-facts li { margin: 0 0 6px; }
.aff-note { font-size: .8rem; color: var(--mute); margin: 0 0 18px; }
.disclaimer-strip { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--mute); margin: 16px 0 30px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.disclaimer-strip .ico { color: var(--accent); }
sup.cite { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 1px; } sup.cite + sup.cite { margin-left: 3px; }
sup.cite a { text-decoration: none; color: var(--accent); font-weight: 600; padding: 0 1px; } sup.cite a:hover { text-decoration: underline; }
.callout { margin: 26px 0; padding: 16px 18px; border-radius: 8px; background: var(--box); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.callout p { margin: 0; } .callout p + p { margin-top: .6em; }
.callout-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.callout .ico { color: var(--accent); }
.callout-disagree { border-style: dashed; border-left-style: solid; background: var(--bg); }
.callout-heard { border-left-color: var(--mute); }
.table-wrap { overflow-x: auto; margin: 0 -16px 1.6em; padding: 0 16px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.4; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; }
.table-wrap table { min-width: 560px; }
.table-wrap-decision table { min-width: 0; }
/* the decision grid ("If you are… | Do this"): cards at every width, one per row, a small teal icon chosen from
   the row's first cell (functions.php fl_decision_icons) beside the condition, the answer under a rule */
table.decision thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.decision, table.decision tbody { display: block; width: auto; }
table.decision tr { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); margin: 0 0 14px; padding: 6px 0; }
table.decision td { display: block; border: 0; padding: 10px 16px; }
table.decision td:first-child { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink); padding-bottom: 4px; }
table.decision td:first-child .dec-ico { flex: none; width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }
table.decision td:last-child { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; flex: 1; }
/* the Steps list as a vertical timeline: teal numbered circles joined by a gray line, the bold first words as the
   step label */
ol.steps { list-style: none; padding: 0; margin: 0 0 1.2em; counter-reset: step; }
ol.steps li { position: relative; padding: 0 0 26px 44px; margin: 0; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--bfont); font-size: .85rem; font-weight: 700; text-align: center; line-height: 28px; z-index: 1; }
ol.steps li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: var(--line); }
ol.steps li:last-child::after { display: none; }
ol.steps li > strong:first-child, ol.steps li > p:first-child > strong:first-child { display: block; color: var(--ink); line-height: 28px; margin-bottom: 2px; }
ol.steps li > p { margin: 0 0 .5em; }
.fold-body .table-wrap, .help .table-wrap { margin-left: 0; margin-right: 0; padding: 0; }
.fold-body .callout, .faq-answer .callout { background: var(--bg); }
.intro > :last-child { margin-bottom: 24px; }
.help { background: var(--soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 20px 20px 8px; margin: 40px 0; }
.help h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.2rem; }
.help .ico { color: var(--accent); }
.entry-content h2#faq, .entry-content h2#related, .entry-content h2#sources { display: flex; align-items: center; gap: 10px; }
.entry-content h2#faq .ico, .entry-content h2#related .ico, .entry-content h2#sources .ico { color: var(--accent); }
.related-articles ul { list-style: none; padding: 0; margin: 0 0 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.related-articles li { margin: 0; border-top: 1px solid var(--line); } .related-articles li:first-child { border-top: 0; }
.related-articles a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.sources { font-size: .9rem; line-height: 1.45; }
.sources ol { list-style: none; padding: 0; margin: 0 0 8px; counter-reset: src; }
.sources li { counter-increment: src; position: relative; padding: 6px 0 6px 38px; margin: 0; border-bottom: 1px solid var(--line); }
.sources li::before { content: counter(src); position: absolute; left: 0; top: 7px; width: 26px; height: 22px; border: 1px solid var(--accent); color: var(--accent); border-radius: 5px; font-family: var(--bfont); font-size: .78rem; font-weight: 700; text-align: center; line-height: 20px; }
.sources li:target { background: var(--soft); }
.sources a { word-break: break-word; font-weight: 600; }
.fold-sources .fold-body { padding-bottom: 10px; }
.print-row { margin: 0 0 12px; }
.print-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
figure { margin: 0 0 1em; } figcaption { font-size: .8rem; color: var(--mute); } .photo-credit { opacity: .85; }
/* diagrams (assets/diagrams/*.svg, drawn in one style: 1.5 px gray lines, teal highlights, the system sans): any
   img whose src is under assets/diagrams is wrapped by functions.php in <figure class="diagram"> with the alt as the
   caption. The SVG files are drawn for a white ground, so in dark mode the figure keeps a white card under them. */
figure.diagram { margin: 28px 0 34px; }
figure.diagram img, figure.diagram svg { display: block; width: 100%; height: auto; max-width: 680px; }
figure.diagram figcaption { margin-top: 8px; font-size: .85rem; color: var(--mute); max-width: 680px; }
@media (prefers-color-scheme: dark) { figure.diagram img, figure.diagram svg { background: #fff; border-radius: var(--r); padding: 10px; } }

/* =========================================================================
 * The hero band: under the header, full bleed, the paper tone with a 1 px line under it; at the left the section
 * label, the title and the meta line, at the right the section's large teal line icon (the icon variant, the
 * default; FL_HERO 'photo' keeps the sister theme's photo path: the featured image under a radial dark overlay,
 * white text). Heights: 200 px on phones, 280 px from 800 px. The home hero holds the headline, the intro line and
 * the home-hero diagram instead of the icon.
 * ====================================================================== */
.hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); min-height: 220px; display: flex; align-items: flex-end; padding: 48px 0 36px; margin: 0 0 20px; }
.hero-in { position: relative; z-index: 1; width: 100%; padding-right: calc(var(--ico-hero) + 24px); }
.hero-mark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: var(--ico-hero); height: var(--ico-hero); color: var(--accent); pointer-events: none; }
.hero-mark .ico { width: 100%; height: 100%; stroke-width: 1.25; }
.crumbs { margin: 0 0 28px; font-size: .8rem; color: var(--mute); } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.hero-label { margin: 0 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); }
.hero-label a { color: inherit; text-decoration: none; }
.hero .entry-title { color: var(--ink); }
.hero .entry-meta { color: var(--mute); margin: 0 0 6px; } .hero .entry-meta a { color: var(--mute); }
.hero-intro { color: var(--mute); max-width: 75ch; } .hero-intro p { margin: 0; } .hero-intro a { color: var(--accent); }
/* photo variant (FL_HERO 'photo', off by default): the picture at full opacity under a radial dark overlay, white
   text with a soft shadow, the icon hidden. Scoped to the hero element: <body> also carries a hero-* class. */
.hero.hero-photo { background-image: radial-gradient(circle at bottom left, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .25) 100%), var(--hero-img); background-size: cover; background-position: center; color: #fff; border-bottom: 0; }
.hero.hero-photo .entry-title, .hero.hero-photo .hero-label, .hero.hero-photo .entry-meta, .hero.hero-photo .hero-intro { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hero.hero-photo .entry-meta a, .hero.hero-photo .hero-intro a { color: #fff; }
.hero.hero-photo .hero-mark { display: none; }
.hero.hero-photo .hero-in { padding-right: 0; }
.hero-credit { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: .7rem; color: #fff; z-index: 1; }
/* the home hero: the headline and the intro line at the left, the home-hero diagram (assets/diagrams/home-hero.svg)
   under them on phones and at the right from 800 px; the light gray search band follows */
.hero-home { align-items: center; min-height: 0; padding: 40px 0 36px; margin-bottom: 0; }
.hero-home .hero-in { padding-right: 0; display: grid; gap: 28px; }

/* 0.1.1: the home hero over a photo (assets/hero-home-1920.jpg and -960.jpg; functions.php fl_home_photo adds
   .hero-home-photo when both exist). Layers: photo 0, gradient (::before) 1, words and diagram (.hero-in) 2. The
   gradient is heavier at the left where the headline sits (white text, 4.5:1 or better over the photo's brightest
   pixels there); the diagram keeps a paper panel so its teal lines stay readable over the photo. */
.hero.hero-home-photo { position: relative; overflow: hidden; border-bottom: 0; }
.hero-home-photo .hero-img { position: absolute; inset: 0; z-index: 0; }
.hero-home-photo .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.hero-home-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(0 0 0 / .74) 0%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .3) 100%); }
.hero-home-photo .hero-in { position: relative; z-index: 2; }
.hero-home-photo .hero-headline, .hero-home-photo .hero-line { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
.hero-home-photo .hero-diagram { background: rgb(252 251 248 / .94); border-radius: 12px; padding: 10px 12px; margin: 0; }
.hero-home-photo .hero-credit { position: absolute; right: 16px; bottom: 8px; z-index: 2; color: #fff; opacity: .85; margin: 0; }
@media (max-width: 799px) { .hero-home-photo .hero-diagram { display: none; } .hero-home-photo .hero-in { padding-bottom: 28px; } }   /* phones: the photo carries the hero; the house diagram shows from 800 px */
@media print { .hero-home-photo .hero-img, .hero-home-photo::before { display: none !important; } .hero-home-photo .hero-headline, .hero-home-photo .hero-line { color: #000; text-shadow: none; } }
.hero-headline { font-family: var(--hfont); font-size: 1.75rem; font-weight: 700; line-height: 1.12; margin: 0 0 20px; color: var(--ink); max-width: 22ch; }
.hero-line { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--mute); max-width: 56ch; }
.hero-diagram { margin: 0; }
.hero-diagram img, .hero-diagram svg { display: block; width: 100%; height: auto; max-width: 680px; }
@media (prefers-color-scheme: dark) { .hero-diagram img, .hero-diagram svg { background: #fff; border-radius: var(--r); padding: 10px; } }
.listing-start { margin: 18px 0 8px; }

/* listings */
.listing-intro { color: var(--mute); }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pagination .page-numbers { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-decoration: none; color: var(--text); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* footer and the phone tab bar (the paper white, a 1 px line on top, teal icons, the current tab in teal) */
.site-foot { margin-top: 56px; padding: 24px 0 28px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute); }
.foot-brand { display: flex; align-items: center; gap: 8px; font-family: var(--hfont); font-weight: 700; color: var(--ink); margin: 0 0 8px; font-size: 1rem; }
.foot-brand .ico { width: 22px; height: 22px; color: var(--accent); }
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; } .foot-links li { margin: 0; }
.foot-links a { color: var(--text); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; } .foot-row .foot-links { margin: 0; }
.foot-legal { font-size: .8rem; margin: 0 0 6px; } .foot-legal a { color: inherit; }
.install-open { font: inherit; font-size: .8rem; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; min-width: 56px; text-align: center; color: var(--mute); font-size: .72rem; text-decoration: none; padding: 4px 2px; }
.tabbar .ico { display: block; margin: 0 auto 2px; width: 28px; height: 28px; color: var(--accent); stroke-width: 1.75; }
.tabbar .is-current { color: var(--accent); font-weight: 700; }

/* the "keep on your phone" sheet */
.install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--bg); border-top: 3px solid var(--accent); box-shadow: 0 -8px 24px rgb(0 0 0 / .12); padding: 16px 0 calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.install-title { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.install-btn { font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--r); padding: 12px 18px; min-height: 48px; cursor: pointer; }
.install-how { margin: 10px 0 0; font-weight: 600; }
.install-note { margin: 8px auto 0; max-width: 34em; font-size: .88rem; color: var(--mute); }
.install-acts { margin: 12px 0 0; display: flex; gap: 10px; justify-content: center; }
.install-alt { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 16px; min-height: 44px; cursor: pointer; }

/* =========================================================================
 * Wide screens: no tab bar (the menu button is the way to the sections); the content area is 80% of the viewport up
 * to 1400 px; running text inside it is capped at 75ch while tables, the decision grid, boxes and tiles use the full
 * width; the icons grow.
 * ====================================================================== */
@media (min-width: 800px) {
  :root { --ico: 60px; --ico-s: 40px; --ico-xs: 36px; --ico-h2: 30px; --ico-tile: 64px; --ico-hero: 200px; }
  html { scroll-padding-top: 100px; }
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .wrap { max-width: min(80vw, 1400px); }
  .site-head { padding: 12px 0; }
  .brand-logo svg { width: 42px; height: 42px; }
  .brand .wm-pre { font-size: .7rem; }
  .brand .wm { white-space: nowrap; font-size: 1.3rem; }
  .site-head.is-compact .brand-logo svg { width: 30px; height: 30px; }
  .site-head.is-compact .brand .wm { font-size: 1.05rem; }
  .ask-band { padding: 32px 0 36px; }
  .ask { max-width: 640px; }
  .search-panel-in { padding-top: 14px; padding-bottom: 16px; }
  .search-close { right: 2vw; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
  .tile { padding: 26px 26px; }
  .home > section { margin-bottom: 64px; }
  .sec-label { margin: 56px 0 18px; }
  .asked { margin-bottom: 48px; }
  body { line-height: 1.6; }
  h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
  .entry-title { font-size: 2.1rem; max-width: 40ch; }
  .entry-content { font-size: 1.0625rem; }
  .entry-content h2 { font-size: 1.5rem; }
  details.fold > summary { font-size: 1.1rem; padding: 20px 50px 20px 22px; }
  details.fold { margin-bottom: 24px; }
  .fold-body { padding: 0 22px 20px; }
  details.fold-sources { margin-top: 36px; }
  details.faq-item { margin-bottom: 30px; }
  .key-facts { padding: 24px 26px 14px; margin-bottom: 28px; }
  .disclaimer-strip { margin: 20px 0 44px; }
  .callout { margin: 36px 0; padding: 18px 22px; }
  .help { margin: 56px 0; padding: 26px 26px 12px; }
  figure.diagram { margin: 40px 0 48px; }
  .related-articles ul { margin-bottom: 40px; }
  .site-foot { margin-top: 80px; }
  .ask, .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h3, .entry-content > h4, .intro > *, .fold-body > p, .fold-body > ul, .fold-body > ol, .fold-body > h3, .fold-body > h4, .help > p, .help > ul, .help > ol, .faq-answer > *, .key-facts > p, .key-facts > ul, .callout > p, .disclaimer-strip, .entry-meta, .listing-intro, .aff-note, .sources ol, .related-articles ul, details.faq-item, .answers details.qa, .answers p, .guides, .asked, ol.steps { max-width: 75ch; }
  .table-wrap { margin: 0 0 2em; padding: 0; } .table-wrap table { min-width: 0; }
  .hero { min-height: 320px; padding: 72px 0 56px; margin-bottom: 32px; }
  .hero-in { padding-right: calc(var(--ico-hero) + 48px); }
  .hero-mark { right: 10vw; }
  .hero-credit { right: 16px; bottom: 10px; }
  .hero-home { padding: 64px 0 60px; }
  .hero-home .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px; }
  .hero-headline { font-size: 2.6rem; margin-bottom: 28px; }
  .hero-line { font-size: 1.1rem; }
  table.decision tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
  table.decision tr { margin: 0; }
  table.decision td { padding: 14px 18px; }
  ol.steps li { padding-left: 52px; padding-bottom: 34px; }
  ol.steps li::before { width: 32px; height: 32px; line-height: 32px; font-size: .9rem; }
  ol.steps li::after { left: 15px; top: 34px; }
  ol.steps li > strong:first-child, ol.steps li > p:first-child > strong:first-child { line-height: 32px; }
}

/* print: the page without the chrome ("Print this" on the checklists; works on every page) */
@media print {
  .site-head, .ask-band, .search-panel, .search-tab, .menu-panel, .a11y-panel, .tabbar, .skip, .site-foot, .install, #answers, .print-row, .pagination, .related-articles, h2#related, .hero-mark, .hero-credit, .crumbs { display: none !important; }
  .hero { background: none !important; color: #000; min-height: 0; padding: 0; margin-bottom: 12pt; border: 0; } .hero-diagram { display: none !important; } .hero-headline, .hero-line { color: #000; } .hero .entry-title, .hero .entry-meta, .hero .entry-meta a, .hero-label { color: #000; text-shadow: none; }
  .hero-in { padding-right: 0; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .wrap { max-width: none; padding: 0; }
  details.fold, details.faq-item, .key-facts, .callout, .help, .guides, table.decision tr { background: none; border-color: #999; }
  .disclaimer-strip, .entry-meta, .sources { color: #333; }
  a { color: inherit; text-decoration: none; }
  .sources a { text-decoration: underline; }
  ol.steps li::before { background: #000; color: #fff; }
}

/* =========================================================================
 * Accessibility states (the panel in the footer and the menu): classes on <html>, honoured in dark mode too. Last in
 * the file so that they win. High contrast: black on white, links underlined, the accent darkened to #074a4f (10.0:1).
 * ====================================================================== */
html.a11y-text-112 { font-size: 112%; }
html.a11y-text-125 { font-size: 125%; }
html.a11y-contrast, html.a11y-contrast body { --bg: #fff; --paper: #fff; --box: #f2f2f2; --soft: #f2f2f2; --ink: #000; --text: #000; --mute: #222; --line: #555; --accent: #074a4f; --on-accent: #fff; }
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .ask input { background: #fff; color: #000; border-color: #000; }
html.a11y-contrast .hero { background: #fff; }
html.a11y-contrast .tabbar a { opacity: 1; color: #000; }
html.a11y-contrast .menu-btn, html.a11y-contrast .a11y-open, html.a11y-contrast .a11y-reset, html.a11y-contrast .install-alt, html.a11y-contrast .search-tab { border-color: currentColor; }
html.a11y-contrast .sw { background: #777; }
html.a11y-contrast figure.diagram img, html.a11y-contrast figure.diagram svg, html.a11y-contrast .hero-diagram img, html.a11y-contrast .hero-diagram svg { background: #fff; }
html.a11y-spacing body { line-height: 1.8; letter-spacing: .02em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.4em; }
html.a11y-spacing .key-facts p, html.a11y-spacing .faq-answer p, html.a11y-spacing .callout p { margin-bottom: 1em; }
html.a11y-underline a { text-decoration: underline; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }


/* =========================================================================
 * adventmyfriend.com, 0.1.0: the dark chrome ("Lights on"), the lights strip, the display face, the home hero with the
 * demo calendar, the six "Who is it for?" tiles, the plugin's start block inside the theme.
 * ====================================================================== */
.site-head { background: var(--dark); color: var(--dark-text); border-bottom: 0; }
.site-head .brand { color: var(--dark-text); }
.site-head .brand-logo svg { color: var(--gold); stroke-width: 1.6; }
.site-head .brand .wm { font-family: var(--dfont); font-weight: 400; font-size: 1.45rem; color: var(--gold); letter-spacing: .01em; }
.site-head .brand .tl { color: var(--dark-mute); }
.site-head .menu-btn { background: transparent; color: var(--dark-text); border-color: var(--dark-line); }
.site-head .menu-btn:hover, .site-head .menu-btn:focus-visible { background: var(--dark-2); outline-color: var(--gold); }
.site-head .menu-btn .ico { color: var(--gold); }
.site-head .search-tab, .site-head .search-panel { color: var(--ink); }   /* 0.2.6: the tab and the panel are paper, so ink, not the header's white (white on cream before) */
.site-head::after { content: ""; display: block; height: 14px; margin-top: 8px; background:
  radial-gradient(circle at 6px 7px, #e2473f 3.5px, rgba(226,71,63,.35) 5px, transparent 7px),
  radial-gradient(circle at 32px 7px, #ffd37a 3.5px, rgba(255,211,122,.35) 5px, transparent 7px),
  radial-gradient(circle at 58px 7px, #3fb26f 3.5px, rgba(63,178,111,.35) 5px, transparent 7px),
  radial-gradient(circle at 84px 7px, #5b9bff 3.5px, rgba(91,155,255,.35) 5px, transparent 7px);
  background-size: 104px 14px; background-repeat: repeat-x; }
.site-head.is-compact::after { display: none; }
@media (min-width: 860px) { .site-head .brand .wm { font-size: 1.7rem; } }
.menu-panel[open] { background: var(--dark-2); color: var(--dark-text); border-color: var(--dark-line); }
.menu-panel a, .menu-panel .menu-sections a span { color: var(--dark-text); }
.menu-panel .ico { color: var(--gold); }
.menu-panel .menu-sections a:hover, .menu-panel .menu-sections a:focus-visible, .menu-panel .menu-sections a.is-current { background: #1d4a3d; }
.menu-panel .menu-sections a.is-current span { color: var(--gold); }
.menu-panel .menu-links { border-top-color: var(--dark-line); }
.menu-panel .a11y-open, .site-foot .a11y-open { color: var(--gold); border-color: var(--dark-line); }
.menu-panel .menu-close { color: var(--dark-text); }
.site-foot { background: var(--dark); color: var(--dark-mute); border-top: 0; }
.site-foot .foot-brand { color: var(--gold); font-family: var(--dfont); font-weight: 400; font-size: 1.15rem; }
.site-foot .foot-brand .ico { color: var(--gold); }
.site-foot a, .site-foot .foot-links a { color: var(--dark-text); }
.site-foot .foot-legal { color: var(--dark-mute); }
.site-foot .install-open, .site-foot .a11y-open { color: var(--dark-text); border-color: var(--dark-line); }
.tabbar { background: var(--dark); border-top: 1px solid var(--dark-line); }
.tabbar a { color: var(--dark-mute); }
.tabbar .ico { color: var(--gold); }
.tabbar a.is-current { color: var(--gold); }

/* the home hero: the lights photo, the headline in the display face, the two buttons, the demo calendar */
.hero.hero-home { background: linear-gradient(90deg, rgba(11,36,25,.96) 0%, rgba(11,36,25,.82) 55%, rgba(11,36,25,.55) 100%), url(assets/hero-lights.jpg) center / cover; color: var(--dark-text); border-bottom: 0; padding: 36px 0 44px; }
.hero-home .hero-in { max-width: 1040px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .hero-home .hero-in { grid-template-columns: 1fr 1fr; } }
.hero-home .hero-headline { font-family: var(--dfont); font-weight: 400; font-size: 2.1rem; line-height: 1.12; color: var(--dark-text); margin: 0 0 12px; }
.hero-home .hero-headline em { font-style: normal; color: var(--gold); }
.hero-home .hero-line { color: var(--dark-mute); font-size: 1.05rem; margin: 0 0 18px; max-width: 48ch; }
@media (min-width: 860px) { .hero-home .hero-headline { font-size: 3rem; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.btn { border-radius: 999px; padding: 11px 18px; }
.hero-home .btn { background: var(--gold); color: var(--dark); }
.hero-home .btn.alt { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.hero-cal { display: block; text-decoration: none; color: var(--dark-mute); }
.hero-cal-cap { display: block; font-size: .8rem; margin: 8px 2px 0; }
.nadv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 14px; background: #333 center / cover no-repeat; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.nadv-door { position: relative; aspect-ratio: 1 / 1; border: 1px solid rgba(255,211,122,.35); border-radius: 10px; background: var(--door); color: #fff4d6; padding: 0; font: 600 1.6rem var(--hfont); pointer-events: none; }
.nadv-door.is-open { background: var(--door-open); }
.nadv-door span { pointer-events: none; }
@media (min-width: 700px) { .nadv-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; border-radius: 18px; } .nadv-door { font-size: 2rem; border-radius: 12px; } }

/* the "Who is it for?" tiles: six, three across on a desktop */
.tiles.six { grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiles.six { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiles.six { grid-template-columns: 1fr 1fr 1fr; } }
.wrap.home { max-width: 1040px; }

/* the plugin's start block ([niche_advent_start]) inside the theme */
.nadv-start { margin: 0 0 8px; }
.nadv-start .nadv-btn { border-color: var(--accent); color: var(--accent); }
.nadv-start .nadv-primary { background: var(--accent); color: var(--on-accent); }

/* article hero over the featured photo: the gold label */
.hero.hero-photo .hero-label, .hero.hero-photo .hero-label a { color: var(--gold); }


/* 0.2.0 (owner's notes, 2026-10-28): the hero's three checks, the flag switcher, FAQ and callout icons, Related cards
   with photos, the nutshell box */
.hero-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 30px 0 0; font-size: 1rem; }
.hero-checks .chk { display: inline-flex; align-items: center; gap: 6px; color: var(--dark-text); font-weight: 700; }
.hero-checks .chk .ico { width: 26px; height: 26px; stroke-width: 3; }
.hero-checks .chk-red .ico { color: var(--red); }
.hero-checks .chk-green .ico { color: #4fd08a; }
.hero-checks .chk-gold .ico { color: var(--gold); }
.lang-links { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.lang-links a { display: inline-flex; border-radius: 3px; overflow: hidden; line-height: 0; opacity: .72; text-decoration: none; border: 1px solid transparent; }
.lang-links a:hover, .lang-links a:focus-visible, .lang-links a.is-current { opacity: 1; }
.lang-links a.is-current { outline: 2px solid var(--gold); outline-offset: 1px; }
.lang-links .flag { width: 24px; height: 16px; display: block; }
.menu-links .lang-links, .foot-links .lang-links { margin: 0 0 0 4px; }
.faq-item summary { display: flex; align-items: center; gap: 10px; }
.faq-item summary .faq-q-ico { color: var(--accent2); flex: none; }
.faq-item summary h3 { flex: 1; }
.faq-answer { padding-left: 14px; }
.faq-answer::before { content: none; }
.faq-answer .faq-a-ico { float: left; color: var(--accent2); margin: 2px 8px 0 0; width: 22px; height: 22px; }
.rel-list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .rel-list { grid-template-columns: 1fr 1fr; } }
.rel-item { margin: 0; }
.rel-item a { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-family: var(--hfont); line-height: 1.25; }
.rel-item a:hover, .rel-item a:focus-visible { border-color: var(--accent); }
.rel-pic { flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.rel-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-noimg .ico { color: var(--accent); }
.key-facts { border-top-color: var(--accent2); }
.key-facts-label { color: var(--ink); font-size: .85rem; letter-spacing: .06em; }
.key-facts-label .ico { width: 36px; height: 36px; color: var(--accent2); }
.entry-content h2 .ico-h2 { color: var(--accent2); }
.callout .ico { color: var(--accent2); }


/* 0.2.1: the festive extras behind the slide-out Effects tab (owner, 2026-10-28; red tab, player inside, bulbs one by one) */
.amf-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.amf-fx-tab { position: fixed; right: 0; top: 46%; z-index: 42; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 8px; border: 0; border-radius: 0 10px 10px 0; background: var(--red); color: #fff; font: 700 .8rem var(--bfont); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.amf-fx-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.amf-fx-tab.is-playing span::after { content: " \266B"; }
.amf-fx-panel { position: fixed; right: 38px; top: 38%; z-index: 41; width: 250px; max-width: calc(100vw - 52px); background: var(--dark-2); color: var(--dark-text); border: 1px solid var(--dark-line); border-radius: 12px; padding: 12px 12px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: translateX(calc(100% + 60px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.amf-fx-panel.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
/* 0.2.3: the closed panel is parked inside the viewport (faded, a short slide), never beyond the right edge: iOS Safari
   counts a fixed element translated off the edge as page width and lets the page scroll sideways */
.amf-fx-panel { transform: translateX(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.amf-fx-panel.is-open { opacity: 1; transition: transform .25s ease, opacity .25s ease; }
/* 0.2.3: the countdown in the middle of the header bar from tablets up (the hero line keeps it on phones), the maker button */
.head-countdown { display: none; }
.make-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; flex: none; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.make-btn .ico { width: 20px; height: 20px; }
.make-btn:hover, .make-btn:focus-visible { background: #c93a33; color: #fff; outline-color: var(--gold); }
@media (max-width: 599px) { .make-btn { padding: 0 9px; } .make-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (min-width: 768px) {
  .head-row .brand { flex: 0 1 auto; }
  .head-countdown { display: block; flex: 1; min-width: 0; margin: 0; text-align: center; font-family: var(--dfont); font-size: 1.15rem; line-height: 1.2; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .head-countdown[hidden] { display: none; }
  .hero-countdown { display: none; }
  .site-head.is-compact .head-countdown { font-size: 1rem; }
}
.amf-fx-title { margin: 0 0 8px; font-family: var(--dfont); color: var(--gold); font-size: 1.15rem; }
.amf-fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-top: 1px solid var(--dark-line); background: none; color: var(--dark-text); font: inherit; cursor: pointer; text-align: left; }
.amf-fx-knob { flex: none; width: 38px; height: 22px; border-radius: 11px; background: #35594b; position: relative; transition: background .15s; }
.amf-fx-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.amf-fx-row[aria-checked="true"] .amf-fx-knob { background: var(--gold); }
.amf-fx-row[aria-checked="true"] .amf-fx-knob::after { left: 19px; }
.amf-fx-player { margin: 4px 0 6px; border-radius: 8px; overflow: hidden; background: #000; }
.amf-fx-player iframe { display: block; width: 100%; height: 200px; border: 0; }
.amf-fx-note { margin: 6px 0 0; font-size: .72rem; color: var(--dark-mute); }
.hero-countdown { margin: 10px 0 0; font-family: var(--dfont); font-size: 1.25rem; color: var(--gold); }
/* the string of lights: JS builds one bulb per 26 px (.amf-lights i), each with its own colour --c, pace --d and phase --o;
   the gradient strip in .site-head::after is the fallback without JS */
.site-head.has-bulbs::after { display: none; }
.amf-lights { display: flex; gap: 19px; height: 14px; margin-top: 8px; padding-left: 3px; overflow: hidden; }
.amf-lights i { flex: none; width: 7px; height: 7px; margin-top: 3.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px 1.5px var(--c); opacity: .55; animation: amf-bulb var(--d) ease-in-out var(--o) infinite; }
@keyframes amf-bulb { 0%, 100% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } 50% { opacity: 1; box-shadow: 0 0 7px 2.5px var(--c); } }
html.amf-lights-off .amf-lights i, html.a11y-motion .amf-lights i { animation: none; opacity: .9; box-shadow: 0 0 4px 1px var(--c); }
@media (prefers-reduced-motion: reduce) { .amf-lights i { animation: none; opacity: .9; } }
@media print { .amf-fx-tab, .amf-fx-panel, .amf-snow { display: none !important; } }