/* The sites' one stylesheet. The look follows the WordPress sites it replaces (Astra theme, the Home
   and Topics pages built with Spectra, Site Layout's phone rules, the reading-tools chips of Reader
   Challenges). Widths as the theme's: up to 921px the sidebar goes under the article, up to 544px
   is a phone. Colours are variables, so dark mode only swaps them. */

:root {
  --accent: #0170b9;
  --accent-hover: #015a94;
  --link-hover: #3a3a3a;
  --on-accent: #ffffff;
  --text: #3a3a3a;
  --heading: #3a3a3a;
  --strong: #000000;
  --muted: #5f6b7a;
  --bg: #ffffff;
  --soft: #f5f5f5;
  --band: #eeeeee;
  --border: #e1e6eb;
  --rule: #dddddd;
  --card: #ffffff;
  --note-bg: #f0f7fd;
  --note-border: #b9d8f0;
  --topic-bg: #f1f1f1;
  --topic-border: #ffd936;
  --badge: #c2410c;
  --box-text: #4b4f58;
  /* As the WordPress sites declare it. They never load DM Sans (LiteSpeed drops Google Fonts), so a
     reader sees the device's sans-serif, Arial on Windows: so does this. */
  --font: "DM Sans", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent: #5aa9dc;
  --accent-hover: #86c1e8;
  --link-hover: #e8edf2;
  --on-accent: #0b1a26;
  --text: #c9d2db;
  --heading: #e8edf2;
  --strong: #f2f5f8;
  --muted: #9cb2c6;
  --bg: #15171c;
  --soft: #1b1e24;
  --band: #1d2127;
  --border: #333a44;
  --rule: #333a44;
  --card: #1d2127;
  --note-bg: #16283a;
  --note-border: #2c5578;
  --topic-bg: #1d2127;
  --topic-border: #a88f24;
  --badge: #f0844a;
  --box-text: #c9d2db;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--font);
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration: none; }
/* A link turns dark under the pointer, as the theme's; lists of titles turn blue instead (the theme leaves them as they are). */
a:hover, a:focus-visible { color: var(--link-hover); }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 400; line-height: 1.3; margin: 0 0 0.6em; }
strong, b { color: var(--strong); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.screen-reader-text, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; background: var(--card); }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 860px; }
.center { text-align: center; }

/* Header: the site name on the left, the menu on the right; a link turns blue under the pointer. Over
   the Home's hero and the Topics band it lies on the page's own top, in white, and the page's own
   item is marked: underlined in white on the Home, blue on Topics (as the WordPress sites). */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 90px; }
.site-name { color: var(--strong); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.site-name:hover, .site-name:focus-visible { color: var(--strong); text-decoration: none; }
.site-nav ul { display: flex; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.site-nav a { color: var(--strong); font-size: 16px; padding: 6px 0; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 10; border: 0; background: transparent; }
.site-header--overlay .site-name, .site-header--overlay .site-nav a { color: #f5f5f5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.site-header--overlay .site-nav a:hover, .site-header--overlay .site-nav a:focus-visible,
.site-header--overlay .site-nav a[aria-current="page"] { color: var(--accent); }
.home .site-header--overlay .site-nav a[aria-current="page"] {
  color: #ffffff; text-decoration: underline 2px; text-underline-offset: 6px;
}
/* Up to 921px the menu hides behind a round button and drops down under the header when opened. */
.menu-toggle { display: none; }

/* Footer */
.site-footer { margin-top: 64px; padding: 30px 0; color: var(--box-text); font-size: 15px; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--accent); }
.site-footer__text p { margin: 0; }
.home .site-footer, .topics .site-footer { margin-top: 0; }

/* Buttons and forms */
.button, button[type="submit"] {
  display: inline-block; padding: 10px 26px; border: 0; border-radius: 30px;
  background: var(--accent); color: var(--on-accent); font: 600 16px/1.3 var(--font); cursor: pointer;
}
.button:hover, button[type="submit"]:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
input[type="search"], input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--soft); color: var(--text); font: 16px/1.4 var(--font);
}
.search-form input[type="search"] { background: var(--bg); }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-form label { display: block; margin-bottom: 6px; color: var(--heading); }
.search-form__row { display: flex; gap: 10px; }
.search-form__row button { border-radius: 4px; padding: 11px 16px; font-weight: 400; line-height: 1; }

/* Home: the hero, half the screen on a desktop, with the search box. */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 50vh;
  padding: 96px 20px 48px; background: #333333 var(--hero-image, none) center / cover no-repeat; color: #ffffff; text-align: center;
}
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__inner { position: relative; width: 100%; max-width: 580px; }
.hero__title { margin: 0 0 12px; color: #ffffff; font-size: 64px; letter-spacing: -2px; line-height: 1.1; }
.hero__tagline { margin: 0 0 24px; font-size: 20px; }
.hero__search { display: flex; padding: 5px; border-radius: 32px; background: #ffffff; }
.hero__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #3a3a3a; padding: 10px 18px; }
.hero__search input:focus-visible { outline: none; }
.hero__search:focus-within { box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.5); }
.hero__search button { padding: 10px 26px; background: #0170b9; color: #ffffff; }

.home-section { padding: 40px 0 8px; }
.section-title { margin: 0 0 34px; font-size: 32px; letter-spacing: -1px; text-align: center; }
.section-title::after { content: ""; display: block; width: 96px; margin: 18px auto 0; border-top: 3px solid var(--accent); }
.section-title--light { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

/* The reading tools of the Home: the chips, and Challenge's badge and "i" with its links. (The box above each
   article is Reader Challenges', in challenge.css.) */
.chip {
  display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap;
}
.tools-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 8px; margin: 0; padding: 0; list-style: none; text-align: center; }
.tools-list li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tools-list__text { font-size: 15px; line-height: 1.45; }
.tools-list__name { display: flex; align-items: center; gap: 8px; }
.tools-list__badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--badge); color: #ffffff;
  font: 700 11px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}
.tools-list__info { position: relative; margin: 0; padding: 0; }
.tools-list__info > summary {
  display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 50%; color: var(--muted);
  font: italic 700 13px/1 Georgia, "Times New Roman", serif; list-style: none; cursor: pointer; user-select: none;
}
.tools-list__info > summary::-webkit-details-marker { display: none; }
.tools-list__info > summary:hover, .tools-list__info[open] > summary { border-color: var(--accent); color: var(--accent); }
.tools-list__pop {
  position: absolute; bottom: calc(100% + 8px); right: -8px; z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px; line-height: 1.4; text-align: left; white-space: nowrap;
}
.tools-list__pop a { color: var(--accent); font-weight: 600; text-decoration: none; }
.tools-list__pop a:hover, .tools-list__pop a:focus-visible { text-decoration: underline; }

/* Topic boxes (Home, Topics) */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.topic-box {
  display: block; padding: 22px 20px; border: 2px solid var(--topic-border); background: var(--topic-bg);
  color: var(--text); text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease;
}
.topic-box:hover, .topic-box:focus-visible { color: var(--text); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.topic-box h2, .topic-box h3 { margin: 0 0 6px; font-size: 20px; }
.topic-box p { margin: 0; font-size: 15px; line-height: 1.5; }
.topic-grid--tall { gap: 20px 30px; }
.topic-grid--tall .topic-box { min-height: 194px; padding: 20px 0; }
.topic-grid--tall .topic-box h2 { margin-bottom: 10px; padding: 0 20px; }
.topic-grid--tall .topic-box p { padding: 0 20px; color: var(--box-text); font-size: 16px; line-height: 1.7; }
.home-section .center { margin: 26px 0 0; }
.topics-band { padding: 48px 0 56px; background: var(--topics-bg); }
.topics-band--plain { background: var(--bg); }  /* a Topics page without its band of colour */
.topics-band .section-title { margin-top: 0; font-size: 40px; letter-spacing: -2px; }
.topics-band .section-title::after { border-top-color: #2f6fb5; }
.topics-more { padding: 64px 0; background: var(--soft); }
/* The theme's heading font there, which no device has: browsers fall back to their serif. */
.topics-more h2 { font-family: "Forum", display; font-size: 35px; line-height: 1.25; }
.topics-more p { color: var(--box-text); font-size: 18px; }

/* Latest posts (Home) */
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.post-card { padding: 20px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
.post-card__title { display: block; color: var(--heading); font-size: 18px; font-weight: 700; line-height: 1.4; }
.post-card__title:hover { color: var(--accent); }
.post-card time { display: block; margin: 10px 0; color: var(--muted); font-size: 14px; }
.post-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.home-feedback { margin: 40px 0 0; text-align: center; }
.home-feedback a { font-weight: 700; }

/* Articles: the text and a sidebar, 70% and 30% as the theme's, a line between them. */
.with-sidebar { display: grid; grid-template-columns: minmax(0, 70%) minmax(0, 30%); padding-top: 64px; }
.post { min-width: 0; padding-right: 60px; }
.sidebar { padding-left: 60px; border-left: 1px solid var(--border); font-size: 16px; }
.entry-title { font-size: 30px; line-height: 1.2; margin-bottom: 10px; }
.entry-meta { margin-bottom: 26px; font-size: 14px; line-height: 1.8; }
.entry-meta > span { display: block; }
.entry-dates { color: var(--accent); }
.entry-content { font-size: 16px; line-height: 1.75; }
.entry-content > * { max-width: 100%; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content h2 { margin-top: 1.4em; font-size: 28px; }
.entry-content h3 { margin-top: 1.2em; font-size: 22px; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em 2em; padding: 0; }
.entry-content li { margin-bottom: 0; }
.entry-content li > ul { list-style-type: disc; }
.entry-content li > ul, .entry-content li > ol { margin-top: 0.3em; margin-bottom: 0.3em; }
.entry-content table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; }
.entry-content th, .entry-content td { padding: 8px 10px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.entry-content figure { margin: 0 0 1.5em; }
.entry-content blockquote { margin: 1.5em 0; padding: 0.4em 1.2em; border-left: 4px solid var(--rule); }
.entry-content code, .entry-content pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.9em; }
.entry-content pre { overflow-x: auto; padding: 12px; background: var(--soft); }
.ai-disclaimer-box { margin: 0 0 1.6em; padding: 14px 16px; border: 1px solid var(--note-border); border-radius: 8px; background: var(--note-bg); font-size: 14px; line-height: 1.6; }
.ai-disclaimer-box p { margin: 0; }
.ai-disclaimer-box strong { color: var(--accent); }

/* The article's own Simplify / Summarize / FAQ buttons (its script writes them) look like the chips. */
.entry-content .interactive-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.4em 0 1.2em; }
.entry-content .interactive-controls .interactive-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin: 0; padding: 6px 12px;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font: 500 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.entry-content .interactive-controls .interactive-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }
.entry-content .interactive-controls .interactive-button.active,
.entry-content .interactive-controls .interactive-button.faq-toggle.active { background: transparent; color: var(--accent); }
.entry-content .faq-container-inline, .entry-content .faq-container { color: var(--text); }

/* An ad position. It takes no space until AdSense fills it; the label is drawn above a filled one. */
.sl-ad { display: flex; flex-direction: column-reverse; align-items: center; clear: both; margin: 0; }
.sl-ad ins.adsbygoogle { width: 100%; max-width: 100%; margin: 0; }
.sl-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.sl-ad ins.adsbygoogle[data-ad-status="filled"] { margin: 6px 0 32px; }
.sl-ad ins.adsbygoogle[data-ad-status="filled"] + .sl-ad-label::before {
  content: "Advertisement"; display: block; margin-top: 28px; color: #6b7280;
  font: 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
/* A test copy shows where the ads go, as grey boxes of a filled ad's height. */
.sl-ad--preview { justify-content: center; height: 280px; margin: 28px 0 32px; border: 1px dashed #9aa4ae; background: repeating-linear-gradient(45deg, rgba(127, 127, 127, 0.08) 0 12px, rgba(127, 127, 127, 0.14) 12px 24px); }
.sl-ad--preview span { color: #6b7280; font: 600 13px/1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }

.post-navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.post-navigation__next { margin-left: auto; }

.widget { margin-bottom: 44px; }
.widget h2 { font-size: 20px; margin-bottom: 12px; }
.widget ul, .widget ol { margin: 0; padding: 0; list-style: none; }
.widget li { margin-bottom: 4px; line-height: 2; }
.widget-related ol { padding-left: 1.4em; list-style: decimal; }
.widget-related a { font-weight: 600; }

/* Category and author pages */
.archive-band { padding: 56px 0; background: var(--band); text-align: center; }
.archive-band__title { margin: 0; font-size: 34px; }
.archive-band__text { margin: 8px 0 0; font-size: 15px; }
.archive-list { padding-top: 30px; }
.archive-item { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.no-results { max-width: 600px; padding: 30px 0; }
.archive-item__title { margin-bottom: 4px; font-size: 26px; }
.archive-item__title a { color: var(--heading); }
.archive-item__title a:hover { color: var(--accent); }
.archive-item .entry-meta { margin-bottom: 14px; }
.archive-item .entry-meta > span { display: inline; }
.archive-item .entry-terms::after { content: " / "; color: var(--accent); }
.archive-item__excerpt { font-size: 16px; line-height: 1.7; color: var(--text); }
.archive-item__excerpt p { margin: 0 0 1.5em; }
/* Pages of a list: Previous on the left, the numbers in the middle, Next on the right. */
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 40px 0 0; padding: 0 12px; }
.pagination__next { text-align: right; }
.pagination__numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pagination__numbers > * { min-width: 30px; padding: 0 6px; line-height: 30px; text-align: center; }
.pagination__current { background: var(--accent); color: var(--on-accent); }

/* Pages: their text in black, as the WordPress pages show it. */
.page-main { padding-top: 40px; }
.page-content, .page-content h1, .page-content h2, .page-content h3 { color: var(--strong); }
.page-content table th, .page-content table td { border-color: var(--strong); }
.page-content table th { font-weight: 600; text-align: center; }
.page-title { font-size: 40px; text-align: center; }
.page-content .has-text-align-center { text-align: center; }
.page-content .wp-block-separator { width: 100px; margin: 2em auto; border-top: 2px solid var(--rule); }
.page-content .wp-block-table table { width: 100%; }
.page-content h1 { font-size: 64px; line-height: 1.4; text-align: center; }
.page-content h2 { margin-top: 1.2em; }
.contact-main .entry-content p { margin-bottom: 1em; }
.contact-form { max-width: 500px; margin: 30px auto 0; }
.contact-form label { display: block; margin-bottom: 4px; }
.contact-form button { border-radius: 2px; padding: 14px 40px; }
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__status:empty { display: none; }
.contact-form__status { padding: 10px 14px; border: 1px solid var(--note-border); background: var(--note-bg); }
.not-found { padding: 64px 20px 70px; background: var(--soft); text-align: center; }
.not-found__title { margin: 0 0 22px; color: var(--accent); font-size: 56px; line-height: 1.2; }
.not-found__text { margin: 0 0 26px; color: var(--heading); font-size: 20px; font-weight: 700; }
.not-found__search { display: flex; max-width: 370px; margin: 0 auto; border: 1px solid var(--rule); background: var(--bg); }
.not-found__search input { border: 0; background: transparent; }
.not-found__search button { display: grid; place-items: center; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--heading); }
.not-found__search button:hover { background: transparent; color: var(--accent); }
.not-found__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.search-page { min-height: 50vh; padding-top: 40px; }
.search .archive-band { padding: 10px 0 14px; }
.search .archive-band__title { font-size: 64px; line-height: 1.2; }
.search-ui { --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--text); --pagefind-ui-background: var(--bg); --pagefind-ui-border: var(--rule); --pagefind-ui-tag: var(--soft); --pagefind-ui-font: var(--font); }

/* Dark mode switch: a round button in the corner, like WP Dark Mode's. */
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--heading);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); cursor: pointer;
}
.theme-toggle:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3); }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { fill: currentColor !important; stroke: none !important; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
.test-badge { position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 4px 10px; border-radius: 4px; background: #b42318; color: #ffffff; font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }

/* The consent banner, as Complianz's on the WordPress sites: a card in the bottom right corner (across the
   bottom on a phone), its switches orange when off and blue when on; after a choice its "Manage consent"
   tab peeks out of the bottom edge, left of the dark mode switch, and rises under the pointer. */
.consent {
  position: fixed; right: 10px; bottom: 10px; z-index: 99999; display: grid; gap: 10px;
  width: 526px; max-width: calc(100% - 20px); max-height: calc(100vh - 20px); overflow-y: auto; padding: 15px 20px;
  border-radius: 12px; background: #ffffff; color: #222222; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  font-size: 12px; line-height: 18px;
}
.consent:focus { outline: none; }
.consent[hidden], .consent [hidden], .consent-manage[hidden] { display: none !important; }
.consent__head { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; }
.consent__title { grid-column: 2; margin: 0; font-size: 15px; font-weight: 500; text-align: center; }
.consent__close { grid-column: 3; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.consent__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.consent__message { margin: 0; }
.consent__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.consent__buttons button {
  height: 45px; padding: 0 10px; border: 1px solid #f2f2f2; border-radius: 6px; background: #f9f9f9; color: #222222;
  font: 500 15px/1.2 var(--font); cursor: pointer;
}
.consent__buttons button:hover { border-color: #dddddd; }
.consent__buttons .consent__accept { border-color: #1e73be; background: #1e73be; color: #ffffff; }
.consent__buttons .consent__accept:hover { border-color: #1a65a6; background: #1a65a6; }
.consent__links { margin: 0; text-align: center; }
.consent__links a { margin: 0 5px; color: #1e73be; text-decoration: underline; }
.consent__categories { display: grid; gap: 10px; }
.consent__category { border-radius: 6px; background: #f5f5f5; }
.consent__category summary {
  display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 12px; padding: 12px 10px;
  font-size: 14px; list-style: none; cursor: pointer;
}
.consent__category summary::-webkit-details-marker { display: none; }
.consent__always { color: #008000; font-size: 12px; }
.consent__switch { appearance: none; position: relative; width: 28px; height: 15px; margin: 0; border-radius: 10px; background: #f56e28; cursor: pointer; }
.consent__switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ffffff; transition: transform 0.15s ease; }
.consent__switch:checked { background: #21759b; }
.consent__switch:checked::before { transform: translateX(13px); }
.consent__chevron { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.consent__category[open] .consent__chevron { transform: rotate(180deg); }
.consent__description { margin: 0; padding: 0 10px 12px; font-size: 12px; line-height: 18px; }
.consent-manage {
  position: fixed; right: 76px; bottom: 0; z-index: 49; padding: 10px 18px 14px; border: 0; border-radius: 6px 6px 0 0;
  background: #ffffff; color: #222222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); font: 500 14px/1.2 var(--font); cursor: pointer;
  transform: translateY(calc(100% - 12px)); transition: transform 0.2s ease;
}
.consent-manage:hover, .consent-manage:focus-visible { transform: none; }
/* The Cookie Policy page: its place for the choices, and its list of cookies (Complianz's markup, from the
   export) as grey bars that open, the cookies of each in a table. */
.page-content .consent__categories { margin: 0 0 1.4em; color: var(--text); text-align: left; }
.cmplz-hidden, .cmplz_consent_per_service_label { display: none !important; }
.cmplz-subtitle { font-size: 14px; font-weight: 700; }
.cmplz-dropdown { margin: 0 0 10px; background: rgba(239, 239, 239, 0.25); }
.cmplz-dropdown summary { display: block; padding: 5px 10px 5px 15px; background: rgba(239, 239, 239, 0.5); list-style: none; cursor: pointer; }
.cmplz-dropdown summary::-webkit-details-marker { display: none; }
.cmplz-dropdown summary > div { display: grid; grid-template-columns: 1fr auto 25px; align-items: center; gap: 10px; }
.cmplz-dropdown summary > div::after {
  content: ""; justify-self: center; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg);
}
.cmplz-dropdown[open] summary > div::after { margin-top: 5px; transform: rotate(-135deg); }
.page-content .cmplz-dropdown h3 { margin: 0; font-size: 18px; }
.cmplz-dropdown summary p { margin: 0; font-size: 14px; text-align: right; }
.cmplz-service-description, .cmplz-sharing-data { padding: 10px 15px 0; }
.page-content .cmplz-dropdown h4 { margin: 0 0 4px; font-size: 16px; }
.cookies-per-purpose { display: grid; grid-template-columns: 2fr 1fr 2fr; margin: 15px; border: 1px solid var(--rule); background: var(--bg); font-size: 14px; }
.cookies-per-purpose > div { padding: 10px 15px; border-top: 1px solid var(--rule); }
.cookies-per-purpose .purpose { order: -2; grid-column: 1 / -1; border-top: 0; }
.cookies-per-purpose [class$="-header"] { order: -1; background: var(--soft); }
.cookies-per-purpose .name-header ~ .name-header, .cookies-per-purpose .retention-header ~ .retention-header,
.cookies-per-purpose .function-header ~ .function-header { display: none; }
.page-content .cookies-per-purpose h4, .page-content .cookies-per-purpose h5 { margin: 0; font-size: 15px; font-weight: 400; }
[data-theme="dark"] .consent, [data-theme="dark"] .consent-manage { background: #1d2127; color: #e8edf2; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .consent__buttons button { border-color: #3a414c; background: #262b33; color: #e8edf2; }
[data-theme="dark"] .consent__buttons button:hover { border-color: #56606e; }
[data-theme="dark"] .consent__buttons .consent__accept { border-color: #1e73be; background: #1e73be; color: #ffffff; }
[data-theme="dark"] .consent__category { background: #262b33; }
[data-theme="dark"] .consent__links a { color: var(--accent); }
[data-theme="dark"] .consent__always { color: #5cc96b; }
[data-theme="dark"] .cmplz-dropdown summary { background: var(--band); }

/* Dark mode for what the articles bring with their own colours: tables, FAQ boxes, charts. */
[data-theme="dark"] .entry-content .bot-table,
[data-theme="dark"] .entry-content table { background: var(--soft) !important; color: var(--text); }
[data-theme="dark"] .entry-content .bot-table caption { color: var(--heading); }
[data-theme="dark"] .entry-content .bot-table th,
[data-theme="dark"] .entry-content .bot-table td { border-color: var(--border) !important; }
[data-theme="dark"] .entry-content .faq-container-inline,
[data-theme="dark"] .entry-content .faq-container { background: var(--soft) !important; }
[data-theme="dark"] .entry-content .faq-item { background: var(--band) !important; box-shadow: none !important; }
[data-theme="dark"] .entry-content .visual-svg svg { border-radius: 6px; background: #f4f6f8; }

@media (max-width: 921px) {
  .site-header:not(.site-header--overlay) { position: relative; }
  .site-header__row { min-height: 56px; }
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0;
    border-radius: 50%; background: #0170b9; color: #ffffff; cursor: pointer;
  }
  .menu-toggle:hover { background: #015a94; }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
  .site-header--open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--border); }
  .site-nav a, .site-header--overlay .site-nav a { display: block; padding: 12px 20px; color: var(--strong); text-shadow: none; }
  .home .site-header--overlay .site-nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }
  .archive-item__title { font-size: 27.4px; }
  .archive-item__excerpt, .archive-item__more { font-size: 14.6px; }
  .with-sidebar { grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
  .post { padding-right: 0; }
  .sidebar { margin-top: 40px; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  /* Under the article only the search box and "You may also like" stay (Site Layout). */
  .widget-recent, .widget-categories { display: none; }
  .topic-grid, .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-content .visual-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content > table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 544px) {
  .hero { min-height: 0; padding: 78px 16px 28px; }
  .hero__title { margin-bottom: 8px; font-size: 39px; letter-spacing: -1px; }
  .hero__tagline { margin-bottom: 16px; font-size: 15px; }
  /* The Home's topics: two columns of names, the last one alone across both. */
  .home .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home .topic-box { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 8px; }
  .home .topic-box:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .home .topic-box h3 { margin: 0; font-size: 16px; }
  .home .topic-box p { display: none; }
  .hero__search button { padding: 10px 18px; }
  .section-title { font-size: 28px; }
  .topic-grid, .post-cards { grid-template-columns: minmax(0, 1fr); }
  .topic-grid--tall { gap: 20px; }
  .tools-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The latest posts show their title and date only; the footer stacks, centred. */
  .post-card p { display: none; }
  .post-card time { margin-bottom: 0; }
  .site-footer__row, .site-footer ul { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer ul { gap: 8px; }
  .entry-title { font-size: 27.4px; }
  .entry-content { font-size: 17px; line-height: 1.65; }
  .entry-content h2 { font-size: 24px; }
  .entry-content ul, .entry-content ol { margin-left: 1.3em; }
  .entry-content table { font-size: 15px; line-height: 1.5; }
  .entry-content .bot-table th, .entry-content .bot-table td { padding: 9px 10px; }
  .entry-content .bot-table:has(tr > :nth-child(4)) { min-width: 480px; }
  .entry-content .bot-table:has(tr > :nth-child(5)) { min-width: 600px; }
  .entry-content .visual-svg > div { max-width: min(100%, 280px) !important; }
  .page-title { font-size: 32px; }
  .not-found__title { font-size: 36px; }
  .search .archive-band__title { font-size: 36px; }
  .page-content h1 { font-size: 30px; }
  .archive-band__title { font-size: 34px; }
  .theme-toggle { width: 38px; height: 38px; right: 12px; bottom: 12px; }
  /* The banner across the bottom, without its title (as Complianz's on a phone); the cookies of the
     Cookie Policy one under the other. */
  .consent { right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 85vh; padding: 12px 16px 14px; border-radius: 12px 12px 0 0; }
  .consent__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .consent__buttons { gap: 8px; }
  .consent__buttons button { height: 42px; padding: 0 6px; font-size: 14px; }
  .consent-manage { right: 62px; }
  .cookies-per-purpose { grid-template-columns: minmax(0, 1fr); margin: 15px 0; }
  .cookies-per-purpose > div { order: 0 !important; }
  .cookies-per-purpose .name-header ~ .name-header, .cookies-per-purpose .retention-header ~ .retention-header,
  .cookies-per-purpose .function-header ~ .function-header { display: block; }
}