/* ============================================================
   kindredreaders template stylesheet
   One hand-edited, uncompressed file. No SCSS, no build step.
   Rule: every value in a rule is a var(--token); literals live in :root only.
   Responsive steps redefine tokens (section 10); they do not override values.
   ============================================================ */

/* ============================================================
   1. FONTS (self-hosted, latin subset)
   Fjalla One            = headings (as on the previous site)
   Barlow Semi Condensed = body text (replaces Abel: slightly wider, easier to read)
   @font-face descriptors cannot read custom properties, so they stay literal.
   ============================================================ */
@font-face {
  font-family: "Fjalla One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fjalla-one-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-400-italic-latin.woff2") format("woff2");
}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
  /* colour: surfaces */
  --color-page: #393a3c;
  --color-nav: #2a2b2c;
  --color-nav-hover: #1b1c1c;
  --color-nav-active: #393a3c;
  --color-nav-sub-hover: #111212;
  --color-header: #ffffff;
  --color-showcase: #ffffff;
  --color-feature: #c8cbd2;
  --color-card: #ffffff;
  --color-footer: #393a3c;
  --color-footer-rule: rgba(0, 0, 0, 0.05);
  --color-drawer: #354d59;
  --color-drawer-hover: #6c2842;
  --color-tile: #fafafa;
  --color-tile-border: #dddddd;
  --color-table-border: #eaeaea;
  --color-table-head: #f7f7f7;
  --color-field-border: #dddddd;
  --color-field: #ffffff;

  /* colour: text and brand */
  --color-text-on-dark: #ffffff;
  --color-text: #393a3c;
  --color-brand: #7b2d4b;
  --color-brand-hover: #8e3456;
  --color-link: #c54878;
  --color-link-hover: #a0691e;
  --color-link-showcase: #7b2d4b;
  --color-btn-from: #c54878;
  --color-btn-to: #7b2d4b;
  --color-btn-text: #ffffff;
  --color-focus: #c54878;
  --color-focus-on-feature: #7b2d4b;

  /* typography */
  --font-body: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-head: "Fjalla One", "Arial Narrow", Impact, sans-serif;
  --fs-root: 100%;
  --fs-body: 18px;
  --fs-h1: 2.25rem;
  --fs-h2: 1.9rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.15rem;
  --fs-h5: 1rem;
  --fs-h6: 0.85rem;
  --fs-btn: 22px;
  --fs-small: 0.875rem;
  --fs-sup: 0.75rem;
  --fs-burger: 1.5rem;
  --flh-body: 1.5;
  --flh-none: 0;
  --flh-feature-text: 1.1em;
  --flh-nav: normal;
  --fw-body: 400;
  --fw-head: 400;
  --fw-strong: 600;
  --fw-nav: 400;
  --ls-normal: normal;

  /* radius */
  --br-small: 0.1875rem;
  --br-btn: 5px;
  --br-none: 0;

  /* spacing */
  --sp-content-margin: 0.625rem;
  --sp-content-pad: 0.938rem;
  --sp-section: 1.5rem;
  --sp-flow: 1.5rem;
  --sp-head-top: 0.75rem;
  --sp-card-pad-y: 1.5625rem;
  --sp-card-pad-x: 2.3125rem;
  --sp-logo-inset: 2rem;
  --sp-header-y: 30px;
  --sp-nav-item-x: 0.938rem;
  --sp-nav-gap: 0.25rem;
  --sp-sub-item-y: 0.7815rem;
  --sp-sub-item-x: 1rem;
  --sp-drawer-item-y: 0.938rem;
  --sp-drawer-item-x: 1rem;
  --sp-drawer-indent: 1rem;
  --sp-btn-y: 10px;
  --sp-btn-x: 20px;
  --sp-tile: 0.3rem;
  --sp-tile-gap: 4px;
  --sp-blog-gap: 1.5rem;
  --sp-list-indent: 1.5rem;
  --sp-feature-min: 40px;
  --sp-float-gap: 1rem;
  --sp-field-pad: 0.375rem;
  --sp-cell: 0.5rem;
  --sp-chevron-gap: 0.5rem;
  --sp-none: 0;
  --sp-login-gap: 1rem;
  --sp-icon-gap: 0.5rem;
  --sp-hide: -1px;

  /* layout */
  --container-w: 75rem;
  --nav-h: 65px;
  --sticky-top: 0px;
  --nav-logo-left: var(--sp-logo-inset);
  --logo-h: 90px;
  --logo-sm-h: 36px;
  --sub-w: 180px;
  --drawer-w: 17rem;
  --burger-w: 2.75rem;
  --burger-line-w: 1.5rem;
  --burger-line-h: 3px;
  --burger-line-gap: 7px;
  --chevron-size: 0.5em;
  --size-social-icon: 1.25rem;
  --size-passkey: 1.5rem;
  --btn-w: 12rem;
  --blog-cols-1: 1;
  --blog-cols-2: 2;
  --blog-cols-3: 3;
  --blog-cols-4: 4;
  --split-a: 35%;
  --split-b: 65%;
  --feature-cols: 3;
  --sp-card-inset: 1.5625rem;
  --sp-feature-gap: 3.125rem;
  --footer-home-a: 52%;
  --footer-home-b: 48%;
  --footer-def-a: 46%;
  --footer-def-b: 54%;
  --footer-social-justify: flex-end;

  /* effects */
  --shadow-surround: 0 0 15px rgba(0, 0, 0, 0.4);
  --shadow-field: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  --transition: 0.3s ease-out;
  --opacity-chevron: 0.5;
  --btn-hover-filter: brightness(0.92);
  --bw: 1px;
  --btn-gradient: linear-gradient(to bottom, var(--color-btn-from), var(--color-btn-to));

  /* stacking */
  --z-nav: 3;
  --z-drawer: 20;
  --z-burger: 30;
  --z-skip: 100;
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-root); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-top) + var(--nav-h)); }
body {
  margin: var(--sp-none);
  background: var(--color-page);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--flh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
h1, h2, h3, h4, h5, h6 {
  margin: var(--sp-head-top) 0 var(--sp-flow);
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  text-rendering: optimizeLegibility;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
p { margin: var(--sp-flow) 0; }
small { font-size: var(--fs-small); }
strong, b { font-weight: var(--fw-strong); }
sup, sub { font-size: var(--fs-sup); line-height: var(--flh-none); position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin-block: var(--sp-flow); }
ul { margin-left: var(--sp-list-indent); padding: var(--sp-none); }
ol { padding-left: var(--sp-list-indent); }
ul ul, ol ul, ul ol, ol ol { margin-block: var(--sp-none); }
hr { margin: var(--sp-flow) 0; border: 0; border-top: 4px solid var(--color-table-head); }
blockquote { margin: var(--sp-flow) 0; padding-left: var(--sp-content-pad); border-left: 5px solid var(--color-field-border); }
table { width: 100%; border-collapse: collapse; border: var(--bw) solid var(--color-table-border); }
th { padding: var(--sp-cell); background: var(--color-table-head); text-align: left; }
td { padding: var(--sp-cell); border: var(--bw) solid var(--color-table-border); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select {
  padding: var(--sp-field-pad);
  border: var(--bw) solid var(--color-field-border);
  border-radius: var(--br-small);
  background: var(--color-field);
  box-shadow: var(--shadow-field);
  color: var(--color-text);
  font: inherit;
}
label { display: inline-block; margin-bottom: var(--sp-field-pad); }

.visually-hidden, .t-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: var(--sp-hide); padding: var(--sp-none);
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.t-skip {
  position: fixed; left: 0; top: 0; z-index: var(--z-skip);
  padding: var(--sp-content-pad); background: var(--color-card); color: var(--color-brand);
  transform: translateY(-120%);
}
.t-skip:focus { transform: none; }
.t-container { width: var(--container-w); max-width: 100%; margin-inline: auto; }
.t-content { margin: var(--sp-content-margin); padding: var(--sp-content-pad); }
.t-page { min-height: 100vh; position: relative; background: var(--color-page); box-shadow: var(--shadow-surround); overflow-x: clip; }
.t-grid { display: flex; flex-flow: row wrap; }
.t-grid > * { min-width: 0; }

/* buttons: Joomla core and component buttons */
.btn, .btn-primary {
  display: inline-block;
  padding: var(--sp-btn-y) var(--sp-btn-x);
  border: 0;
  border-radius: var(--br-small);
  background: var(--color-brand);
  color: var(--color-btn-text);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--flh-body);
  cursor: pointer;
}
.btn:hover, .btn-primary:hover { background: var(--color-brand-hover); color: var(--color-btn-text); }

/* Joomla core helper classes (the template does not load Bootstrap) */
.float-start { float: left; margin: 0 var(--sp-float-gap) var(--sp-float-gap) 0; }
.float-end { float: right; margin: 0 0 var(--sp-float-gap) var(--sp-float-gap); }
.list-unstyled { margin-left: var(--sp-none); list-style: none; }
.text-center { text-align: center; }
.clearfix::after { display: table; clear: both; content: ""; }
.d-none { display: none; }
.img-fluid { max-width: 100%; height: auto; }

/* ============================================================
   4. HEADER: logo band, main menu, mobile drawer
   Markup comes from the Menu module (mod_menu default layout) in position-1.
   Joomla 6 adds sub-menu toggle buttons itself; for Joomla 5 js/template.js adds
   the same buttons, so both versions share one set of rules.
   ============================================================ */
.t-header { background: var(--color-header); }
.t-header .t-container { padding-block: var(--sp-header-y); padding-inline: var(--sp-logo-inset); }
.t-logo { display: inline-block; line-height: var(--flh-none); }
.t-logo img { height: var(--logo-h); width: auto; }

/* Sticky menu bar: the logo band scrolls away, the bar stays at the top of the viewport.
   A small copy of the logo (same image as the band) fades in inside the bar once the band
   is out of sight. It is decoration only (aria-hidden, no alt text, not focusable), so the
   logo is not announced twice. */
.t-nav { position: sticky; top: var(--sticky-top); z-index: var(--z-nav); background: var(--color-nav); text-align: center; }
.t-nav-inner { position: relative; }
.t-nav-logo {
  position: absolute; top: 0; bottom: 0; left: var(--nav-logo-left);
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.t-nav-logo img { height: var(--logo-sm-h); width: auto; }
.t-nav.is-stuck .t-nav-logo { opacity: 1; visibility: visible; }
.t-menu ul { margin: var(--sp-none); padding: var(--sp-none); list-style: none; }
.t-menu .mod-menu { display: flex; flex-flow: row wrap; justify-content: center; }
.t-menu .mod-menu > li { position: relative; display: flex; align-items: center; }
.t-menu a,
.t-menu .mod-menu__heading {
  display: flex; align-items: center;
  min-height: var(--nav-h);
  padding: var(--sp-none) var(--sp-nav-item-x);
  color: var(--color-text-on-dark);
  font-weight: var(--fw-nav); line-height: var(--flh-nav);
  text-decoration: none;
}
.t-menu .mod-menu__toggle-sub {
  display: inline-flex; align-items: center;
  margin: var(--sp-none); padding: var(--sp-none);
  border: 0; background: none;
  color: var(--color-text-on-dark);
  font: inherit; cursor: pointer;
}
.t-menu .mod-menu__toggle-sub::after {
  content: ""; width: var(--chevron-size); height: var(--chevron-size);
  margin-right: var(--sp-nav-item-x);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  opacity: var(--opacity-chevron);
}
.t-menu .mod-menu__toggle-sub[aria-expanded="true"]::after { transform: translateY(0.12em) rotate(225deg); }
.t-menu .mod-menu__toggle-sub [class*="icon-"] { display: none; }
.t-menu .mod-menu > li:hover,
.t-menu .mod-menu > li.is-open { background: var(--color-nav-hover); }
.t-menu .mod-menu > li.active { background: var(--color-nav-active); }
.t-menu .mod-menu > li.active:hover { background: var(--color-nav-hover); }

.t-menu .mod-menu__sub {
  position: absolute; top: 100%; left: 0; z-index: 1;
  display: block; width: var(--sub-w);
  background: var(--color-nav-hover); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(0.4rem);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.t-menu .mod-menu__sub li { position: relative; display: flex; align-items: center; }
.t-menu .mod-menu__sub a { flex: 1; min-height: var(--sp-none); padding: var(--sp-sub-item-y) var(--sp-sub-item-x); }
.t-menu .mod-menu__sub .mod-menu__toggle-sub::after { margin-right: var(--sp-sub-item-x); transform: rotate(-45deg); }
.t-menu .mod-menu__sub .mod-menu__toggle-sub[aria-expanded="true"]::after { transform: rotate(45deg); }
.t-menu .mod-menu__sub li:hover { background: var(--color-nav-sub-hover); }
.t-menu .mod-menu__sub .mod-menu__sub { top: 0; left: 100%; }
/* open states: core JS (Joomla 6) and template.js (Joomla 5) both set one of these */
.t-menu .mod-menu__sub.show-menu,
.t-menu .mod-menu__sub[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; }

/* mobile menu: hamburger + off-canvas drawer built from the same menu markup */
.t-burger {
  display: none;
  position: absolute; top: 0; left: 0; z-index: var(--z-burger);
  width: var(--burger-w); height: var(--nav-h);
  align-items: center; justify-content: center;
  border: 0; background: none; color: var(--color-text-on-dark);
  font-size: var(--fs-burger); cursor: pointer;
}
.t-burger span, .t-burger span::before, .t-burger span::after {
  display: block; width: var(--burger-line-w); height: var(--burger-line-h);
  background: currentColor; border-radius: var(--br-small); content: "";
}
.t-burger span { position: relative; }
.t-burger span::before { position: absolute; top: calc(var(--burger-line-gap) * -1); }
.t-burger span::after { position: absolute; top: var(--burger-line-gap); }

/* ============================================================
   5. HERO (home: showcase-1 and showcase-2)
   ============================================================ */
.t-showcase { padding: var(--sp-section) 0; background: var(--color-showcase); color: var(--color-text); }
.t-showcase h1, .t-showcase h2, .t-showcase h3 { color: var(--color-text); }
.t-showcase a:not(:where(.btn)) { color: var(--color-link-showcase); }
.t-showcase a:not(:where(.btn)):hover { color: var(--color-link-hover); }
.t-showcase-a { flex: 0 0 var(--split-a); max-width: var(--split-a); }
.t-showcase-b { flex: 0 0 var(--split-b); max-width: var(--split-b); }
.t-showcase-a:only-child, .t-showcase-b:only-child { flex-basis: 100%; max-width: 100%; }

/* ============================================================
   6. LAYOUT (home feature row, main area, content card)
   ============================================================ */
.t-feature { padding: var(--sp-section) 0; background: var(--color-feature); color: var(--color-text); }
.t-feature h1, .t-feature h2, .t-feature h3 { color: var(--color-text); }
.t-feature-grid {
  display: grid;
  grid-template-columns: repeat(var(--feature-cols), minmax(0, 1fr));
  column-gap: var(--sp-feature-gap);
  padding: var(--sp-card-inset);
}
.t-main { padding: var(--sp-section) 0; background: var(--color-page); color: var(--color-text-on-dark); }
.t-messages:empty { display: none; }
/* Home layout: the main landmark wraps the showcase and feature sections and has no
   spacing of its own. Only when a system message is present does it get room. */
.t-home-main #system-message-container > * { margin: var(--sp-content-margin); }
.t-card {
  padding: var(--sp-card-pad-y) var(--sp-card-pad-x);
  background: var(--color-card); color: var(--color-text);
}
.t-card h1, .t-card h2, .t-card h3, .t-card h4, .t-card strong { color: var(--color-text); }
/* Text links only. A link that is a button (.btn) keeps the button's own colours; without
   the :not() this rule (0,1,1) beats .btn (0,1,0) and paints link-coloured text on the
   button fill, which fails contrast. Write :not(:where(.btn)), never :not(.btn): :where()
   adds no specificity, so the rule stays (0,1,1) and module link colours such as
   .jpc-sociallinks--outline .jpc-sociallinks__link (0,2,0) still win over it. */
.t-card a:not(:where(.btn)) { color: var(--color-link); }
.t-card a:not(:where(.btn)):hover { color: var(--color-link-hover); }

/* Joomla article and category blog output (core markup, no overrides) */
.page-header h1, .page-header h2 { margin-top: var(--sp-head-top); }
.blog-items { --blog-cols: var(--blog-cols-1); display: grid; grid-template-columns: repeat(var(--blog-cols), minmax(0, 1fr)); gap: var(--sp-blog-gap); }
.blog-items.columns-2 { --blog-cols: var(--blog-cols-2); }
.blog-items.columns-3 { --blog-cols: var(--blog-cols-3); }
.blog-items.columns-4 { --blog-cols: var(--blog-cols-4); }
.article-info { margin: var(--sp-none); padding: var(--sp-none); font-size: var(--fs-small); }
.article-info dd { display: inline; margin: var(--sp-none) var(--sp-content-pad) var(--sp-none) var(--sp-none); }
.pagenavigation .pagination { margin-left: var(--sp-none); display: flex; justify-content: space-between; list-style: none; }

/* ============================================================
   7. MODULE DESIGN HOOKS (opt-in through the module's Module Class)
   kr-hero      showcase modules (jpc_feature_imagetext, no tile or hairline)
   kr-feature   feature modules (Custom HTML: heading, text, button on shared rows)
   kr-social    jpc_sociallinks (white tiles, brand-coloured icons)
   kr-copyright jpc_footer_copyright (no paragraph margins)
   ============================================================ */
.kr-hero .jpc-fit {
  --jpc-fit-row: var(--sp-none);
  --jpc-fit-rule: none;
  --jpc-fit-gap-x: var(--sp-none);
  --jpc-fit-gap-y: var(--sp-none);
  --jpc-fit-tile-min: var(--sp-none);
  --jpc-fit-tile-pad: var(--sp-none);
  --jpc-fit-tile-radius: var(--br-none);
  --jpc-fit-tile-border: none;
  --jpc-fit-tile-bg: none;
  --jpc-fit-tile-shadow: none;
  --jpc-fit-img-radius: var(--br-none);
  --jpc-fit-head-gap: var(--sp-flow);
}
.kr-hero .jpc-fit__media { display: block; }
.kr-hero .jpc-fit__img { width: 100%; }
.kr-hero .jpc-fit__content { flex-basis: 100%; }

/* kr-feature: a feature card. The feature row (.t-feature-grid) has three columns; each
   card spans three shared rows (heading, text, button) through CSS subgrid, so the
   headings, texts and buttons line up across the cards whatever their length. This needs
   the module content in the recommended shape: exactly one heading, one text paragraph and
   one paragraph holding the button, in that order (see the guide). */
.kr-feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; text-align: center; }
.kr-feature > * { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: var(--sp-none); }
.kr-feature h1, .kr-feature h2, .kr-feature h3 { margin: var(--sp-head-top) 0 var(--sp-none); }
.kr-feature p { margin: var(--sp-flow) 0 var(--sp-none); line-height: var(--flh-feature-text); }
.kr-feature p:last-child { margin-bottom: var(--sp-flow); line-height: var(--flh-body); }
.kr-feature .btn {
  width: var(--btn-w); max-width: 100%;
  white-space: nowrap;
  padding: var(--sp-btn-y) var(--sp-btn-x);
  border-radius: var(--br-btn);
  background: var(--btn-gradient);
  font-size: var(--fs-btn);
}
.kr-feature .btn:hover { background: var(--btn-gradient); filter: var(--btn-hover-filter); }
/* the default focus ring is too faint (2.8:1) on the grey feature band */
.kr-feature .btn:focus-visible { outline-color: var(--color-focus-on-feature); }

.kr-social .jpc-sociallinks {
  --jpc-sl-gap: var(--sp-tile-gap);
  --jpc-sl-size: auto;
  --jpc-sl-icon: var(--size-social-icon);
  --jpc-sl-pad: var(--sp-tile);
  --jpc-sl-color: var(--color-link);
  --jpc-sl-bg: var(--color-tile);
  --jpc-sl-border: var(--bw) solid var(--color-tile-border);
  --jpc-sl-radius: var(--br-small);
  --jpc-sl-hover-bg: var(--color-tile);
  --jpc-sl-hover-color: var(--color-link-hover);
  --jpc-sl-focus: var(--color-focus);
}
/* right-justified in its footer column; centred when the footer columns stack (token redefined in section 10) */
.kr-social .jpc-sociallinks__list { justify-content: var(--footer-social-justify); }

.kr-copyright p { margin: var(--sp-none); }

/* Joomla login form (core markup). The Log in button is moved above the passkey
   button by js/template.js so the page order, the tab order and the visual order agree. */
.com-users-login__submit + .com-users-login__submit { margin-top: var(--sp-login-gap); }
.plg_system_webauthn_login_button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-icon-gap); }
.plg_system_webauthn_login_button svg { width: var(--size-passkey); height: var(--size-passkey); fill: currentColor; }

/* ============================================================
   8. FOOTER
   ============================================================ */
.t-footer { background: var(--color-footer); color: var(--color-text-on-dark); border-top: var(--bw) solid var(--color-footer-rule); }
.t-footer a:not(:where(.btn)) { color: var(--color-text-on-dark); text-decoration: underline; }
.t-footer .jpc-sociallinks__link { text-decoration: none; }
.layout-home .t-footer-a { flex: 0 0 var(--footer-home-a); max-width: var(--footer-home-a); }
.layout-home .t-footer-b { flex: 0 0 var(--footer-home-b); max-width: var(--footer-home-b); }
.layout-default .t-footer-a, .t-error .t-footer-a { flex: 0 0 var(--footer-def-a); max-width: var(--footer-def-a); }
.layout-default .t-footer-b, .t-error .t-footer-b { flex: 0 0 var(--footer-def-b); max-width: var(--footer-def-b); }

/* ============================================================
   9. SYSTEM PAGES (error, offline, component-only)
   ============================================================ */
.t-error .t-card, .t-offline .t-card { min-height: var(--sp-feature-min); }
.t-component { background: var(--color-card); color: var(--color-text); }
.t-component .t-card { padding: var(--sp-none); }

/* ============================================================
   10. RESPONSIVE: redefine tokens. Steps follow the previous site:
   75rem / 60rem / 48rem / 30rem.
   ============================================================ */
@media (max-width: 74.99rem) { :root { --container-w: 60rem; } }
@media (max-width: 59.99rem) { :root { --container-w: 48rem; } }

/* desktop only: hover opens a sub menu (keyboard and touch use the toggle buttons) */
@media (min-width: 48rem) {
  .t-menu li:hover > .mod-menu__sub { opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 47.99rem) {
  :root {
    --container-w: 30rem;
    --split-a: 100%;
    --split-b: 100%;
    --feature-cols: 1;
    --footer-home-a: 100%;
    --footer-home-b: 100%;
    --footer-def-a: 100%;
    --footer-def-b: 100%;
    --footer-social-justify: center;
    --blog-cols-2: 1;
    --blog-cols-3: 1;
    --blog-cols-4: 1;
  }
  :root { --nav-logo-left: 3.25rem; }
  .t-nav { min-height: var(--nav-h); }
  .t-nav-inner { position: static; }
  .t-burger { display: flex; }
  .t-menu {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer);
    width: var(--drawer-w); max-width: 100%; padding-top: var(--nav-h);
    overflow-y: auto; background: var(--color-drawer); text-align: left;
    visibility: hidden; transform: translateX(-100%);
    transition: transform var(--transition), visibility var(--transition);
  }
  .menu-open .t-menu { visibility: visible; transform: none; }
  .t-menu .mod-menu { display: block; }
  .t-menu .mod-menu > li { display: flex; flex-wrap: wrap; }
  .t-menu .mod-menu > li:hover, .t-menu .mod-menu > li.is-open, .t-menu .mod-menu > li.active { background: none; }
  .t-menu a, .t-menu .mod-menu__heading { min-height: var(--sp-none); padding: var(--sp-drawer-item-y) var(--sp-drawer-item-x); }
  .t-menu .mod-menu > li > a, .t-menu .mod-menu > li > .mod-menu__toggle-sub { flex: 1; }
  .t-menu .mod-menu__toggle-sub::after { margin-right: var(--sp-drawer-item-x); }
  .t-menu li.active > a, .t-menu a:hover, .t-menu a:focus-visible { background: var(--color-drawer-hover); }
  .t-menu .mod-menu__sub {
    position: static; display: none; flex-basis: 100%; width: auto;
    background: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .t-menu .mod-menu__sub.show-menu, .t-menu .mod-menu__sub[aria-hidden="false"] { display: block; }
  .t-menu .mod-menu__sub a { padding-left: calc(var(--sp-drawer-item-x) + var(--sp-drawer-indent)); }
  .t-menu .mod-menu__sub .mod-menu__sub a { padding-left: calc(var(--sp-drawer-item-x) + var(--sp-drawer-indent) * 2); }
  .t-menu .mod-menu__sub .mod-menu__sub { top: auto; left: auto; }
  .t-footer { text-align: center; }
  .t-showcase-a { text-align: center; }
  /* no JavaScript: the menu stays a plain stacked list */
  .no-js .t-menu { position: static; padding-top: var(--sp-none); visibility: visible; transform: none; background: none; }
  .no-js .t-burger { display: none; }
  .no-js .t-menu .mod-menu__sub { display: block; }
}
@media (max-width: 30rem) { :root { --container-w: 100%; } }

/* ============================================================
   11. PRINT
   ============================================================ */
@media print {
  body, .t-page, .t-header, .t-showcase, .t-feature, .t-main, .t-footer, .t-card { background: none; color: #000; box-shadow: none; }
  .t-nav, .t-burger, .t-skip { display: none; }
}

/* ============================================================
   12. MOTION (always last)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
  .t-menu .mod-menu__sub { transform: none; }
}