/*
Theme Name: Lingo Theme
Theme URI: https://lingotow.com
Author: Your Lingo
Author URI: https://lingotow.com
Description: A specialized WordPress theme for language learning apps, grammar lessons, and vocabulary.
Version: 3.0.55
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lingo-theme
Domain Path: /languages
*/

/* ==========================================================================
   FILE MAP / SECTION ORDER
   Canonical source lives in assets/css/src/ and is ordered by manifest.json.
   style.css is generated with `npm run css:build`; never edit it directly.
   Context-only assets remain outside the global manifest.
   The following is the logical section map from lowest to highest priority.
   --------------------------------------------------------------------------
   tokens     -> Sec 1   Design Tokens (:root)
   reset      -> Sec 2   Reset & Base
   a11y       -> Sec 3   Focus Visible (WCAG 2.4.7)
   layout     -> Sec 5   Site Layout
   controls   -> Sec 4   Block styles and shared action controls
   header     -> Sec 6   Shared header chrome
   nav        -> Sec 7   Navigation interfaces, desktop, mobile, and search
   content    -> Sec 8   Content & Entry
   home       -> Sec 9   Network and homepage surfaces
   publishing -> Sec 10  Loops, cards, singular navigation, integrations, related content
   comments   -> Sec 11  Archives, empty states, and comments
   search     -> Sec 12  Search
   code       -> Sec 13  Copy-code controls
   pages      -> Sec 14  Page surfaces
   reviews    -> Sec 13  Review entry, verdict, and semantic icons
   audio      -> Sec 15  Audio & Game
   cpt        -> Sec 17  CPT Specific (Lessons, Reviews)
   actions    -> Sec 18  Download and share controls
   sidebar    -> Sec 19  Sidebar & Widgets
   widgets    -> Sec 20  Widget Post Lists (9 style variants)
   footer     -> Sec 21  Footer
   author     -> Sec 22  Author & Profile
   tables     -> Sec 23  Tables
   editor     -> Sec 24  Front-end Block Styling (Editor-aligned)
   overlays   -> Sec 25  Lightbox & Popups
   learning   -> Sec 26  Lesson entry, vocabulary, quizzes, and semantic icons
   modern     -> Sec 27  Progressive Enhancements
   tablet     -> Sec 29  Responsive content shell below desktop chrome
   phone      -> Sec 30  Responsive phone contract: width < 768px
   mobile     -> Sec 32  Responsive compact phone: width <= 480px
   states     -> Sec 36  Conditional theme-option states
   final-a11y -> Sec 37  Forced colors after component states
   ========================================================================== */

/* ==========================================================================
 1. Design Tokens (:root)
 ========================================================================== */

:root {
  /* Colors - Surfaces */
  --bg-body: var(--wp--preset--color--bg-body, #ffffff);
  --bg-card: var(--wp--preset--color--bg-card, #ffffff);
  --bg-elevated: var(--wp--preset--color--bg-elevated, #eef4ff);
  --lingo-bg: var(--bg-body);

  /* Colors - Text */
  --text-main: var(--wp--preset--color--text-main, #2c2f34);
  --text-meta: var(--wp--preset--color--text-meta, #666666);
  --text-muted: var(--wp--custom--color--semantic--text-muted, #6f6f6f);

  /* Colors - Brand */
  --primary-color: var(--wp--preset--color--primary, #0669ff);
  --primary-color-dark: var(--wp--preset--color--primary-dark, #0051cc);
  --secondary-color: var(--wp--preset--color--secondary, #0051cc);
  --lingo-accent: var(--primary-color);
  --lingo-accent-dark: var(--primary-color-dark);
  --lingo-link-color: var(--primary-color);
  --lingo-link-hover-color: var(--primary-color-dark);

  /* Colors - Semantic */
  --color-success: var(--wp--custom--color--semantic--success, #28a745);
  --color-success-text: var(--wp--custom--color--semantic--success-text, #1f6f2f);
  --color-error: var(--wp--custom--color--semantic--error, #dc3545);
  --color-warning: var(--wp--custom--color--semantic--warning, #ff9800);
  --color-star: var(--wp--custom--color--semantic--star, #f1c40f);
  --text-strong: var(--wp--custom--color--semantic--text-strong, #1f2937);

  /* Colors - Borders */
  --border-color: var(--wp--preset--color--border, rgba(0, 0, 0, 0.1));
  --thumb-border: var(--wp--custom--color--border--thumb, #d9dde2);

  /* Typography */
  --font-family-system: var(
    --wp--preset--font-family--system,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    "Open Sans",
    Arial,
    sans-serif
  );
  --font-family-base: var(--font-family-system);
  --font-family-headings: var(--font-family-base);
  --font-family-arabic: var(--font-family-base);
  --font-family-foreign: var(--font-family-base);
  --font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  /* Font-weight */
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-heading-strong: var(--font-bold);

  /* Typography scale */
  --text-ui-sm: 0.8125rem;
  --text-sm: var(--wp--preset--font-size--small, 0.875rem);
  --text-base: var(--wp--preset--font-size--medium, 1rem);
  --text-lg: var(--wp--preset--font-size--large, 1.125rem);
  --text-xl: var(--wp--preset--font-size--x-large, 1.375rem);
  --text-2xl: var(--wp--preset--font-size--xx-large, 1.75rem);
  --text-3xl: var(--wp--preset--font-size--huge, 2.5rem);
  --lingo-base-font-size: 13px;
  --lingo-base-line-height: 1.6;

  /* Line-height */
  --leading-display: 1.25;
  --leading-heading: 1.35;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-prose: 1.82;

  /* Spacing scale */
  --spacing-sm: var(--wp--preset--spacing--sm, 0.5rem);
  --spacing-md: var(--wp--preset--spacing--md, 1rem);
  --spacing-lg: var(--wp--preset--spacing--lg, 1.5rem);
  --spacing-xl: var(--wp--preset--spacing--xl, 2rem);

  /* Flat surfaces use elevation only for overlays and keyboard focus. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-surface: none;
  --shadow-soft: none;
  --shadow-brand-hover: none;
  --shadow-soft-press: none;

  /* Radius */
  --radius-xs: var(--wp--custom--radius--xs, 4px);
  --radius-sm: var(--wp--custom--radius--sm, 6px);
  --radius-base: var(--wp--custom--radius--base, 6px);
  --radius-md: var(--wp--custom--radius--md, 8px);
  --radius-card: var(--wp--custom--radius--card, 8px);
  --radius-lg: var(--wp--custom--radius--lg, 8px);
  --radius-full: var(--wp--custom--radius--full, 999px);
  --radius-circle: 50%;

  /* Transitions */
  --transition-fast: 200ms ease-out;
  --transition-link: 220ms ease;
  --transition-ui: 0.2s ease;

  /* Code and strong-muted text */
  --surface-code-bg: var(--wp--custom--color--surface--code-bg, #111827);
  --text-code: #e5e7eb;
  --text-subtle-strong: var(--wp--custom--color--semantic--text-subtle-strong, #6b7280);

  /* Surface tint tokens (primary-color derivative surfaces) */
  --surface-primary-tint-1: var(--wp--custom--color--surface--primary-tint-1, #eff6ff);
  /* blockquote / aside backgrounds */
  --surface-primary-tint-2: var(--wp--custom--color--surface--primary-tint-2, #e6f0ff);
  /* nav hover / review badge bg */
  --surface-primary-tint-3: var(--wp--custom--color--surface--primary-tint-3, #f5f9ff);
  /* category / author link hover bg */
  --surface-code-inline-bg: var(--wp--custom--color--surface--code-inline-bg, #f4f8ff);
  /* inline <code> background */
  /* vocab list item background */
  --surface-table-hover: var(--wp--custom--color--surface--table-hover, #eaf2ff);
  /* table tbody row hover */

  /* Focus / interactive tokens */
  --focus-outline-strong: var(--wp--custom--color--focus--outline-strong, #0051cc);
  --shadow-focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary-color-dark);
  --shadow-btn-brand-hover: none;

  /* Overlay scrims */
  --overlay-scrim: var(--wp--custom--color--overlay--scrim, rgba(0, 0, 0, 0.38));
  --overlay-scrim-strong: var(--wp--custom--color--overlay--scrim-strong, rgba(15, 23, 42, 0.58));

  /* Semantic color aliases */
  --color-white: var(--wp--preset--color--white, #fff);
  --border-color-light: var(--wp--custom--color--border--light, rgba(0, 0, 0, 0.06));

  /* Motion */
  --lift-sm: -1px;
}

/* ==========================================================================
 1. Runtime and Component Contracts
 ========================================================================== */

/* These defaults are intentionally separate from design primitives. PHP may
   override the public runtime variables, while component modules consume them. */
:root {
  /* Public compatibility aliases. Current code consumes lingo-* tokens. */
  --tie-buttons-color: var(--lingo-accent);
  --tie-buttons-hover-color: var(--lingo-accent-dark);
  --tie-buttons-radius: var(--lingo-button-radius);

  /* Domain surfaces */
  --share-btn-icon-color: var(--wp--preset--color--white, #ffffff);
  --surface-quiz-pass: var(--wp--custom--color--quiz--pass-bg, #d4edda);
  --border-quiz-pass: var(--wp--custom--color--quiz--pass-border, #c3e6cb);
  --text-quiz-pass: var(--wp--custom--color--quiz--pass-text, #155724);
  --surface-quiz-fail: var(--wp--custom--color--quiz--fail-bg, #f8d7da);
  --border-quiz-fail: var(--wp--custom--color--quiz--fail-border, #f5c6cb);
  --text-quiz-fail: var(--wp--custom--color--quiz--fail-text, #721c24);
  --lingo-footer: var(--wp--custom--color--footer--background, #0f172a);
  --lingo-footer-text: var(--wp--custom--color--footer--text, #e2e8f0);
  --lingo-mobile-panel: var(--wp--custom--color--panel--mobile, #102544);
  --lingo-mobile-panel-text: var(--color-white, #fff);
  --lingo-mobile-panel-text-muted: rgb(255 255 255 / 78%);
  --lingo-mobile-panel-border: rgb(255 255 255 / 14%);

  /* Shared component controls */
  --control-size-touch: 44px;
  --logo-height-mobile: 44px;
  --logo-height-mobile-compact: 40px;
  --lingo-logo-max-height-mobile: 55px;
  --lingo-logo-max-width: 100%;
  --lingo-card-radius: var(--radius-card);
  --lingo-button-radius: var(--radius-base);
  --lingo-widget-title-size: 18px;
  --lingo-nav-padding-x: 12px;
  --lingo-nav-padding-y: 10px;
  --lingo-grammar-verb-color: currentcolor;
  --lingo-grammar-noun-color: currentcolor;
  --lingo-grammar-particle-color: currentcolor;

  /* Lesson surfaces consume these tokens directly; the generic article root
     remains free of lesson-only styling state. */
  --lesson-section-gap: clamp(1.5rem, 3vw, 2.35rem);
  --lesson-section-padding: clamp(0.9rem, 2.2vw, 1.4rem);
  --lesson-control-gap: clamp(0.45rem, 1vw, 0.7rem);
  --lesson-border-color: color-mix(
    in srgb,
    var(--primary-color) 12%,
    var(--border-color-light) 88%
  );
  --lesson-surface-soft: color-mix(in srgb, var(--bg-card) 92%, var(--bg-elevated) 8%);
  --lesson-primary-soft: color-mix(in srgb, var(--primary-color) 6%, var(--bg-card) 94%);
  --lesson-primary-soft-strong: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card) 90%);
  --lesson-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 28%, transparent);
  --lesson-brand-shadow: none;

  /* Entry rhythm */
  --entry-shell-flow-space: var(--spacing-md);
  --entry-shell-stack-gap: clamp(1.15rem, 2.2vw, 2rem);
  --entry-shell-breadcrumb-margin-block-start: calc(var(--entry-shell-flow-space) * 0.42);
  --entry-shell-breadcrumb-margin-block-end: calc(var(--entry-shell-flow-space) * 0.78);
  --entry-shell-title-margin-block: 0 15px;
  --entry-shell-summary-margin-block: var(--entry-shell-flow-space);
  --entry-shell-summary-paragraph-gap: calc(var(--entry-shell-flow-space) * 0.55);
  /* Collection grids */
  --grid-min-col: 300px;
  --grid-gap: 2rem;
  --grid-gap-list: 1rem;
  --grid-card-padding: 1rem;
  --grid-card-content-gap: 0.55rem;
  --grid-meta-gap: 0.4rem;
  --video-grid-min-col: 280px;
  --video-grid-gap: 1.25rem;
  /* Layout and environment */
  --site-gutter-x-configured: 15px;
  --opt-site-max-width: 75rem;
  --entry-content-max-width: 45rem;
  --size-reading: var(--entry-content-max-width);
  --size-content: var(--wp--style--global--wide-size, 75rem);
  --site-content-padding-bottom-mobile: clamp(1.05rem, 2vw, 1.5rem);
  --site-content-start-gap: 30px;
  --site-content-start-gap-mobile: 15px;
  --admin-bar-offset: 0px;
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
  --safe-inline-start: var(--safe-left);
  --safe-inline-end: var(--safe-right);

  /* Header and navigation rhythm */
  --header-shell-radius: 0;
  --header-divider-width: 1px;
  --header-divider-color: var(--border-color-light);
  --header-brand-gap: 0.8rem;
  --header-brand-gap-mobile: 0.35rem;
  --header-brand-gap-mobile-tight: 0.2rem;
  --header-logo-margin-block: 40px;
  --header-mobile-row-block-size: 44px;
  --header-mobile-row-padding-block: 0.5rem;
  --main-nav-margin-bottom-above-brand: 0.55rem;
  --main-nav-border-width: 1px;
  --main-nav-border-color: var(--border-color);

  /* Stacking order */
  --z-copy-btn: 10;
  --z-header: 100;
  --z-search-results: 120;
  --z-submenu: 200;
  --z-nav-backdrop: 900;
  --z-search-popup: 950;
  --z-nav-panel: 1000;
  --z-lightbox: 1200;
}

:root:has(> body.admin-bar) {
  --admin-bar-offset: 32px;
}

/* WordPress core admin-bar breakpoint; it is an external platform contract. */
@media (max-width: 782px) {
  :root:has(> body.admin-bar) {
    --admin-bar-offset: 46px;
  }
}

:root[dir="rtl"] {
  --safe-inline-start: var(--safe-right);
  --safe-inline-end: var(--safe-left);
}

/* ==========================================================================
 2. Reset & Base
 ========================================================================== */

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

:where(img, video, embed, object) {
  max-inline-size: 100%;
}

/* AD SAFETY: do not apply max-width globally to ALL iframes — that would
   resize AdSense/third-party iframes injected outside content wrappers and
   break their reported dimensions. Homepage media carries an owned marker;
   standard embed wrappers target their immediate media child only. */
iframe.lingo-video-embed__frame,
:where(
    .video-embed:not(.home-video-reviews__embed),
    .lingo-embed,
    .wp-block-embed__wrapper,
    .wp-block-embed.is-type-video,
    .wp-block-video
  )
  > iframe {
  max-width: 100%;
}

img {
  height: auto;
}

html {
  font-size: 100%;
  scroll-padding-top: calc(var(--admin-bar-offset) + 8px);
}

html,
body {
  margin: 0;
  padding: 0;
  /* Keep document overflow native for provider overlays attached to body.
     The layout owner clips #ling-wrapper locally; clipping and the containing
     block of a fixed element are separate CSS mechanisms. */
}

body {
  background: var(--lingo-bg);
  color: var(--text-main);
  font-family: var(--font-family-base);
  font-size: var(--lingo-base-font-size);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  line-height: var(--lingo-base-line-height, var(--leading-relaxed));
}

/* Native form grouping must shrink with its container without replacing
 * component-owned control typography. */
:where(#ling-wrapper) :where(fieldset) {
  min-inline-size: 0;
}

:where(#ling-wrapper) :where(legend) {
  max-inline-size: 100%;
  white-space: normal;
}

:where(#ling-wrapper) :where(textarea) {
  max-inline-size: 100%;
  resize: vertical;
}

:where(.foreign-text, .entry-content [lang]:not(code):not(pre):not(kbd):not(samp)) {
  font-family: var(--font-family-foreign);
}

:where(body, .entry-content [lang]):is(
    :lang(ae),
    :lang(ar),
    :lang(arc),
    :lang(bcc),
    :lang(bqi),
    :lang(ckb),
    :lang(dv),
    :lang(fa),
    :lang(glk),
    :lang(ks),
    :lang(ku),
    :lang(mzn),
    :lang(nqo),
    :lang(pnb),
    :lang(ps),
    :lang(sd),
    :lang(ug),
    :lang(ur)
  ):not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--font-family-arabic);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.entry-title {
  font-family: var(--font-family-headings);
}

a {
  color: var(--lingo-link-color);
  transition: none;
}

a:where(:not(.wp-block-button__link, .wp-element-button, .lingo-btn, .download-primary-btn)):hover {
  color: var(--lingo-link-hover-color);
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Support focusable skip links supplied by child themes or extensions. */
.skip-link:focus {
  position: fixed;
  inset-block-start: calc(var(--admin-bar-offset, 0px) + 0.5rem);
  inset-inline-start: 0.5rem;
  z-index: var(--z-lightbox);
  width: auto;
  height: auto;
  max-inline-size: calc(100% - 1rem);
  padding: 0.75rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: Canvas;
  color: CanvasText;
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
 3. Focus Visible (WCAG 2.4.7)
 ========================================================================== */

:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
 3. Component Focus Integrations
 ========================================================================== */

.share-btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--primary-color);
}

/* ==========================================================================
 5. Layout System
 ========================================================================== */

/* This module is the only owner of page containers, reading width, shell
   columns, sidebar placement, and contained/full-width chrome states. */

:root {
  --layout-shell-max: var(--opt-site-max-width, 75rem);
  --layout-reading-max: var(--entry-content-max-width, 45rem);
  --layout-reading-inset: 15px;
  --layout-reading-inline-size: min(
    var(--layout-reading-max),
    calc(100% - (2 * var(--layout-reading-inset)))
  );
  /* Root-level wide-block limit; --size-content remains the WordPress input. */
  --layout-wide-max: var(--size-content, 75rem);
  --layout-gutter: min(var(--site-gutter-x-configured, 15px), 15px);
  --layout-column-gap: 3px;
  --layout-frame-inline-max: calc(var(--layout-shell-max) + (2 * var(--layout-gutter)));
  --layout-home-section-inset: clamp(0.9375rem, 2vw, 1.5rem);
  --layout-home-section-gutter: calc(var(--layout-gutter) + var(--layout-home-section-inset));
  --layout-sidebar-track: clamp(15%, var(--sidebar-width, 33.3333%), 40%);
  --layout-page-inset-wide: 16px;
  --layout-page-inset-shell: 8px;
  --layout-page-inset: var(--layout-page-inset-wide);
  --layout-frame-border-width: 1px;
  --layout-page-radius: var(--radius-lg);

  /* Compatibility alias for component styles; layout-gutter is authoritative. */
  --site-gutter-x: var(--layout-gutter);
}

/* Keep the page root as the formatting context for the inner frame and its
   fixed mobile-navigation siblings. Native block sizing supplies its width. */
:where(#ling-container) {
  display: flow-root;
}

/* Clipping the inner owned shell prevents horizontal overflow without creating
   a root scroll container, so fixed third-party overlays stay viewport-bound. */
:where(#ling-wrapper) {
  overflow-x: clip;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--bg-body, #fff);
}

/* One border-box contract for the four structural containers in the page tree.
 * A nested third-party `.container` must not inherit shell geometry merely by
 * sharing the generic compatibility class. */
:where(#ling-wrapper > .site-header > .header-container).container,
:where(#ling-wrapper > .site-header #main-nav) > .container,
:where(#ling-wrapper > #content.site-content).container,
:where(#ling-wrapper > .site-footer > #footer-widgets-container > .container),
:where(#ling-wrapper > .site-footer > #site-info > .container) {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--layout-shell-max);
  margin-inline: auto;
}

:where(#ling-wrapper > .site-header > .header-container).container,
:where(#ling-wrapper > .site-header #main-nav) > .container,
:where(#ling-wrapper > #content.site-content).container {
  padding-inline-start: calc(var(--layout-gutter) + var(--safe-inline-start, 0px));
  padding-inline-end: calc(var(--layout-gutter) + var(--safe-inline-end, 0px));
}

/* The reference Footer keeps the same stable 15px inner gutter. */
:where(#ling-wrapper > .site-footer > #footer-widgets-container > .container),
:where(#ling-wrapper > .site-footer > #site-info > .container) {
  padding-inline-start: calc(15px + var(--safe-inline-start, 0px));
  padding-inline-end: calc(15px + var(--safe-inline-end, 0px));
}

/* The page tree is explicit: chrome and content are direct page regions;
 * none may widen the parent or become an accidental viewport container. */
:where(#ling-wrapper) > :is(.site-header, .site-content, .site-footer) {
  min-inline-size: 0;
}

:where(#ling-wrapper) > :is(.site-header, .site-footer) {
  max-inline-size: 100%;
}

:where(#content).site-content.container {
  margin-block-start: var(--site-content-start-gap);
  padding-block-start: 0;
}

body.home:not(.lnsd-directory-page) :where(#content).site-content.container {
  padding-inline-start: calc(var(--layout-home-section-gutter) + var(--safe-inline-start, 0px));
  padding-inline-end: calc(var(--layout-home-section-gutter) + var(--safe-inline-end, 0px));
}

/* Extend the home section surface while its own children retain the site limit. */
body.home.has-full-width-home-sections:not(
    .lnsd-directory-page,
    .site-layout-boxed,
    .site-layout-framed,
    .site-layout-narrow
  )
  :where(#content).site-content:where(.container) {
  max-inline-size: none;
}

/* Like the reference row, this broad structural boundary stays in normal block
 * flow. flow-root contains Desktop floats without making unknown injected
 * children into flex/grid items. */
.main-content-row {
  display: flow-root;
  inline-size: calc(100% + var(--layout-gutter) + var(--layout-gutter));
  min-inline-size: 0;
  margin-inline: calc(-1 * var(--layout-gutter));
}

/* Additions outside the column pair occupy a separate block in source order. */
.main-content-row > :where(:not(.main-content, .sidebar, script, style, link, template)) {
  clear: both;
}

.main-content-row > .main-content {
  --layout-main-gutters: calc(2 * var(--layout-gutter));

  box-sizing: border-box;
  padding-inline: var(--layout-gutter);
}

/* The article inherits the primary track and owns the same flat content surface
 * as the reference article without becoming a second width container. */
.main-content-row > .main-content > .post-content {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  background: var(--bg-card);
  border-radius: 15px;
  box-shadow: none;
}

.main-content-row > .sidebar {
  box-sizing: border-box;
  position: static;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding-inline: var(--layout-gutter);
}

body.site-layout-narrow .main-content-row > .sidebar {
  max-inline-size: var(--layout-reading-max);
  margin-inline: auto;
}

/* Reading width measures the text; column padding and the shared prose/header
 * inset must fit outside it. The sidebar keeps its own track constraint. */
body.site-layout-narrow .main-content-row > .main-content {
  max-inline-size: calc(
    var(--layout-reading-max) + var(--layout-main-gutters) + (2 * var(--layout-reading-inset))
  );
  margin-inline: auto;
}

/* Physical right is the default; the row needs a modifier only for left.
 * Natural document direction is preserved while scoped floats reproduce the
 * useful reference two-column flow. */
@media (width >= 992px) {
  .main-content-row--with-sidebar > .main-content {
    --layout-main-gutters: calc(var(--layout-gutter) + var(--layout-column-gap));

    float: left;
    inline-size: calc(100% - var(--layout-sidebar-track));
    padding-right: var(--layout-column-gap);
  }

  .main-content-row--with-sidebar > .sidebar {
    float: right;
    inline-size: var(--layout-sidebar-track);
  }

  .main-content-row--with-sidebar.main-content-row--sidebar-left > .main-content {
    float: right;
    padding-right: var(--layout-gutter);
    padding-left: var(--layout-column-gap);
  }

  .main-content-row--with-sidebar.main-content-row--sidebar-left > .sidebar {
    float: left;
  }

  .main-content-row--with-sidebar > :where(#sidebar).sidebar--sticky {
    inset-block-start: calc(var(--admin-bar-offset) + var(--sidebar-sticky-offset, 0px));
  }

  .main-content-row--with-sidebar > :where(#sidebar).sidebar--sticky.sidebar--sticky-fit {
    position: sticky;
  }

  /* A visible insertion between the columns keeps its DOM reading order.
   * Stack this row instead of shrinking the insertion or floating past it. */
  .main-content-row.main-content-row--with-sidebar:has(
      > :where(.main-content)
        ~ :where(:not(.sidebar, script, style, link, template, [hidden]))
        ~ :where(.sidebar)
    )
    > :is(.main-content, .sidebar) {
    --layout-main-gutters: calc(2 * var(--layout-gutter));

    float: none;
    inline-size: 100%;
    padding-inline: var(--layout-gutter);
  }

  .main-content-row.main-content-row--with-sidebar:has(
      > :where(.main-content)
        ~ :where(:not(.sidebar, script, style, link, template, [hidden]))
        ~ :where(.sidebar)
    )
    > .sidebar {
    position: static;
    margin-block-start: 15px;
  }
}

/* Page-frame states share the same shell variables instead of redefining
 * content, header and footer widths independently. */
body.site-layout-boxed {
  background-color: var(--bg-elevated);
}

body:is(.site-layout-boxed, .site-layout-framed) :where(#ling-wrapper) {
  inline-size: min(calc(100% - (2 * var(--layout-page-inset))), var(--layout-frame-inline-max));
  margin: var(--layout-page-inset) auto;
  min-block-size: calc(100dvh - (2 * var(--layout-page-inset)));
  border-radius: var(--layout-page-radius);
}

@supports not (height: 100dvh) {
  body:is(.site-layout-boxed, .site-layout-framed) :where(#ling-wrapper) {
    min-block-size: calc(100vh - (2 * var(--layout-page-inset)));
  }
}

body.site-layout-framed :where(#ling-wrapper) {
  border: var(--layout-frame-border-width) solid rgb(0 0 0 / 8%);
}

body.site-layout-narrow :where(#ling-wrapper) {
  inline-size: min(calc(100% - (2 * var(--layout-page-inset))), 67.5rem);
  margin-inline: auto;
}

body:is(.site-layout-boxed, .site-layout-framed) :where(#ling-wrapper) > .site-header:first-child {
  --header-shell-radius: var(--layout-page-radius);
}

body:is(.site-layout-boxed, .site-layout-framed) :where(#ling-wrapper) > .site-footer:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* The generic container is the contained Header state; only full width needs a modifier. */
.site-header.lingo-header-full-width .header-container.container,
.site-header.lingo-header-full-width :where(#main-nav) > .container,
.header-container.header-container--full {
  max-inline-size: none;
}

.header-container.header-container--full {
  box-sizing: border-box;
  inline-size: 100%;
  padding-inline-start: calc(var(--layout-gutter) + var(--safe-inline-start, 0px));
  padding-inline-end: calc(var(--layout-gutter) + var(--safe-inline-end, 0px));
}

.site-header.lingo-header-full-width {
  inline-size: 100%;
  max-inline-size: none;
}

/* Main-column presentation shares the layout seam because its width and
   standalone surface depend on the selected shell mode. */
.main-content {
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.main-content.main-content--standalone {
  margin-inline: auto;
}

body:is(.page:not(.home), .search, .error404) .main-content.main-content--standalone {
  padding: clamp(0.82rem, 1.1vw, 1.12rem);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: none;
}

/* Smaller viewport contracts own chrome, gutter, and collapsed-sidebar
 * behavior below the desktop column threshold. */
@media (width < 992px) {
  :root {
    --layout-page-inset: var(--layout-page-inset-shell);
  }

  :where(#content).site-content.container {
    margin-block-start: var(--site-content-start-gap-mobile);
    padding-block-end: var(--site-content-padding-bottom-mobile);
  }

  .main-content-row > :is(.main-content, .sidebar) {
    --layout-main-gutters: 0px;

    padding-inline: 0;
  }

  .main-content-row--with-sidebar > :where(#sidebar).sidebar {
    margin-block-start: 15px;
  }

  .main-content-row > :where(#sidebar).sidebar.sidebar-hidden-mobile {
    display: none;
  }

  body:is(.page:not(.home), .search, .error404) .main-content.main-content--standalone {
    padding: 0.72rem 0.7rem 0.78rem;
    border-radius: var(--radius-md);
  }
}

@media (width < 768px) {
  body:is(.page:not(.home), .search, .error404) .main-content.main-content--standalone {
    padding: 0.62rem 0.58rem 0.7rem;
    border-radius: var(--radius-base);
  }
}

/* WordPress' native Home state keeps one stable inset whether the optional
 * full-width sections setting is enabled or not. The Network Directory owns a
 * separate shell and is deliberately excluded. */
body.home:not(.lnsd-directory-page) :where(#main-content).main-content {
  padding-block-start: var(--layout-home-section-inset);
  padding-block-end: 0;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ==========================================================================
 4. Shared action controls
 ========================================================================== */

.lingo-btn {
  display: inline-block;
  margin-block-start: 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--primary-color);
  color: var(--color-white);
  text-decoration: none;
  transition:
    color var(--transition-link),
    opacity var(--transition-link),
    transform var(--transition-link),
    box-shadow var(--transition-link);
}

.lingo-btn:is(:hover, :focus-visible, :active, :visited) {
  color: var(--color-white);
}

.lingo-btn:hover {
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-btn-brand-hover);
}

/* ==========================================================================
 6. Reference-shaped header chrome
 ========================================================================== */

:where(#theme-header).theme-header {
  position: relative;
  z-index: var(--z-header);
  margin: 0;
  border: 0;
  border-block-end: var(--header-divider-width) solid var(--header-divider-color);
  border-radius: var(--header-shell-radius);
  background: var(--lingo-header-bg, var(--bg-card));
  color: var(--lingo-header-text, var(--text-main));
  box-shadow: none;
}

:where(#theme-header) .header-container {
  display: block;
  padding-block: 0;
}

:where(#theme-header) .logo-row,
:where(#theme-header) .lingo-header-layout,
:where(#theme-header) .lingo-header-brand,
:where(#theme-header) .logo-wrapper,
:where(#theme-header) .logo-container {
  min-inline-size: 0;
}

:where(#theme-header) .logo-row {
  position: relative;
}

/* The brand and its controls move together around content inserted in the
 * surrounding block containers. No provider element is moved or resized. */
.lingo-header-brand {
  position: relative;
  display: flow-root;
}

:where(#theme-header) .logo-container {
  position: relative;
  display: block;
  min-block-size: 0;
}

:where(#theme-header) .logo-container::before,
:where(#theme-header) .logo-container::after {
  display: block;
  block-size: 0;
  overflow: hidden;
  content: " ";
}

:where(#theme-header) .logo-container::after {
  clear: both;
}

:where(#logo) {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: 100%;
  margin-block: var(--header-logo-margin-block);
  text-align: center;
}

:where(#logo) .custom-logo-link {
  display: inline-flex;
  border-radius: var(--radius-xs);
}

:where(#logo) .custom-logo-link:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 4px;
}

:where(#logo) .custom-logo {
  display: block;
  inline-size: auto;
  max-inline-size: var(--lingo-logo-max-width, 100%);
  max-block-size: var(--lingo-logo-max-height, 66px);
}

:where(#logo) .site-title {
  margin: 0.15rem 0 0;
}

:where(#logo) .site-title a {
  color: var(--lingo-header-text, var(--text-main));
  font-size: 0.98rem;
  font-weight: var(--font-bold);
  text-decoration: none;
}

.mobile-header-components {
  display: none;
}

:where(#theme-header) .components {
  display: flex;
  align-items: center;
  gap: var(--header-brand-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-size-touch);
  min-inline-size: var(--control-size-touch);
  block-size: var(--control-size-touch);
  min-block-size: var(--control-size-touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--lingo-header-text, var(--text-strong));
  cursor: pointer;
  transition:
    color var(--transition-link),
    background-color var(--transition-link);
}

.header-icon-btn:hover {
  background: color-mix(in srgb, currentcolor 10%, transparent);
}

.header-icon-btn:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.header-icon-btn:active {
  background: color-mix(in srgb, currentcolor 18%, transparent);
}

.header-icon-glyph {
  position: relative;
  display: inline-block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.header-icon-glyph--menu {
  inline-size: 1.25rem;
}

.header-icon-glyph svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  fill: currentcolor;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-size-touch);
  max-inline-size: min(18rem, 30vw);
  padding: 0.5rem 0.85rem;
  overflow: hidden;
  border-radius: var(--lingo-button-radius);
  background: var(--lingo-accent);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: var(--font-semibold);
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-cta:hover,
.header-cta:active {
  background: var(--lingo-accent-dark);
  color: var(--color-white);
}

.header-cta:focus-visible {
  outline: 2px solid var(--lingo-accent-dark);
  outline-offset: 3px;
}

/* ==========================================================================
 7. Navigation foundations
 ========================================================================== */

:where(#main-nav),
.main-menu-wrapper,
:where(#menu-components-wrap),
.main-menu-wrap,
:where(#main-nav-menu) {
  min-inline-size: 0;
}

:where(#main-nav) {
  position: relative;
  inline-size: 100%;
  margin: 0;
}

.side-aside,
.side-aside-backdrop {
  display: none;
}

:where(.header-search-popup)[popover] {
  inline-size: auto;
  block-size: auto;
  margin: 0;
  border: 0;
}

/* ==========================================================================
 7a. Desktop navigation
 ========================================================================== */

@media (width >= 992px) {
  :where(#ling-wrapper > #theme-header > .header-container.container) > .logo-row {
    margin-inline: calc(-1 * var(--layout-gutter));
  }

  :where(#ling-wrapper > #theme-header > .header-container.container) > .logo-row .logo-container {
    padding-inline: var(--layout-gutter);
  }

  :where(#main-nav) {
    z-index: var(--z-header);
    display: block;
    border-block-start: var(--main-nav-border-width) solid var(--main-nav-border-color);
    border-block-end: 0;
    background: var(--lingo-header-bg, var(--bg-card));
  }

  :where(#theme-header).has-main-nav-above :where(#main-nav) {
    border-block-start: 0;
    border-block-end: var(--header-divider-width) solid var(--header-divider-color);
    margin-block-end: var(--main-nav-margin-bottom-above-brand);
  }

  :where(#menu-components-wrap) {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    inline-size: 100%;
  }

  .lingo-search-trigger-desktop {
    flex: 0 0 auto;
  }

  .main-menu-wrap,
  :where(#main-nav-menu) {
    flex: 1 1 auto;
    inline-size: 100%;
  }

  :where(#main-nav-menu) > .primary-menu {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    inline-size: 100%;
    padding: 0.25rem 0.4rem;
    margin: 0;
    list-style: none;
  }

  :where(#main-nav-menu) li {
    position: relative;
    margin: 0;
  }

  :where(#main-nav-menu) > .primary-menu > li {
    display: flex;
    align-items: center;
    min-inline-size: max-content;
  }

  :where(#main-nav-menu) > .primary-menu > li > a,
  :where(#main-nav-menu) > .primary-menu > li > .lingo-overflow-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-size-touch);
    padding: var(--lingo-nav-padding-y) var(--lingo-nav-padding-x);
    margin: 0;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--lingo-header-text, var(--text-main));
    font-size: 0.97rem;
    font-weight: var(--font-bold);
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  :where(#main-nav-menu) > .primary-menu > li > a:hover,
  :where(#main-nav-menu) > .primary-menu > li > .lingo-overflow-toggle:hover,
  :where(#main-nav-menu)
    > .primary-menu
    > .lingo-overflow-menu.is-overflow-open
    > .lingo-overflow-toggle {
    color: var(--primary-color);
  }

  :where(#main-nav-menu) > .primary-menu > li > a:focus-visible,
  :where(#main-nav-menu) > .primary-menu > li > .lingo-overflow-toggle:focus-visible {
    color: var(--primary-color);
    outline: 2px solid var(--focus-outline-strong);
    outline-offset: 2px;
  }

  :where(#main-nav-menu)
    > .primary-menu
    > :is(.current-menu-item, .current-menu-ancestor, .current_page_item)
    > a {
    color: var(--primary-color);
    border-block-end-color: currentcolor;
  }

  :where(#main-nav-menu) a::after {
    content: none;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) {
    --lingo-submenu-shift-x: 0px;
    --lingo-submenu-shift-y: 0px;

    position: absolute;
    top: calc(100% + 0.375rem);
    inset-inline-start: 0;
    z-index: var(--z-submenu);
    display: block;
    min-inline-size: 13.75rem;
    max-inline-size: min(22.5rem, 78vw);
    padding: 0.3rem 0.5rem;
    margin: 0.5rem 0 0;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--lingo-header-bg, var(--bg-card));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(var(--lingo-submenu-shift-x), var(--lingo-submenu-shift-y));
    transition:
      opacity 0.18s ease,
      margin-block-start 0.18s ease,
      visibility 0s linear 0.18s;
  }

  :where(#main-nav-menu) .lingo-overflow-menu > [hidden] {
    display: none;
  }

  :where(#main-nav-menu) .lingo-submenu--scrollable {
    max-block-size: calc(100dvh - 1rem);
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* Nested flyouts would be clipped by a scroll container. Expand them in flow. */
  :where(#main-nav-menu) .lingo-submenu--scrollable :is(.sub-menu, .children) {
    position: static;
    display: none;
    min-inline-size: 0;
    max-inline-size: none;
    margin: 0;
    transform: none;
  }

  :where(#main-nav-menu) .lingo-submenu--scrollable :is(.sub-menu, .children)::before {
    content: none;
  }

  :where(#main-nav-menu)
    .lingo-submenu--scrollable
    .lingo-nav-item:where(:has(> .lingo-nav-toggle[aria-expanded="true"]))
    > :is(.sub-menu, .children) {
    display: block;
  }

  /* Keep the visual gap inside the parent's hover target. */
  :where(#main-nav-menu) :is(.sub-menu, .children)::before {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    block-size: 0.375rem;
    content: "";
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) :is(.sub-menu, .children) {
    top: -1px;
    inset-inline-start: calc(100% + 0.375rem);
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) :is(.sub-menu, .children)::before {
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 100%;
    inline-size: 0.375rem;
    block-size: auto;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) .lingo-submenu--reverse {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 0.375rem);
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) .lingo-submenu--reverse::before {
    inset-inline-start: 100%;
    inset-inline-end: auto;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) a {
    display: block;
    min-block-size: 2.5rem;
    padding: 0.52rem 0.7rem;
    color: var(--lingo-header-text, var(--text-main));
    font-size: 0.93rem;
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    text-decoration: none;
    white-space: normal;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) a:hover,
  :where(#main-nav-menu) :is(.sub-menu, .children) a:focus-visible,
  :where(#main-nav-menu) :is(.sub-menu, .children) .current-menu-item > a,
  :where(#main-nav-menu) :is(.sub-menu, .children) .current-menu-ancestor > a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) a:focus-visible {
    outline: 2px solid var(--focus-outline-strong);
    outline-offset: -2px;
  }

  :where(#main-nav-menu)
    li:not(.lingo-nav-item):not(.lingo-overflow-menu):hover
    > :is(.sub-menu, .children),
  :where(#main-nav-menu)
    li:not(.lingo-nav-item):not(.lingo-overflow-menu):focus-within
    > :is(.sub-menu, .children),
  :where(#main-nav-menu)
    .lingo-nav-item:where(:has(> .lingo-nav-toggle[aria-expanded="true"]))
    > :is(.sub-menu, .children),
  :where(#main-nav-menu) .lingo-overflow-menu.is-overflow-open > :is(.sub-menu, .children) {
    margin-block-start: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  :where(#main-nav).main-nav-dark-skin {
    border-color: var(--border-color-light);
    background: var(--lingo-header-bg, var(--bg-card));
  }

  .lingo-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--control-size-touch);
    min-block-size: var(--control-size-touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--lingo-header-text, var(--text-main));
    cursor: pointer;
  }

  .lingo-nav-toggle::before {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-inline-end: 2px solid currentcolor;
    border-block-end: 2px solid currentcolor;
    transform: rotate(45deg);
    content: "";
  }

  .lingo-nav-toggle[aria-expanded="true"]::before {
    transform: rotate(225deg);
  }

  .lingo-nav-toggle:focus-visible {
    outline: 2px solid var(--focus-outline-strong);
    outline-offset: -2px;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) .lingo-nav-toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  :where(#main-nav-menu) :is(.sub-menu, .children) .lingo-nav-item > a {
    min-block-size: var(--control-size-touch);
    padding-inline-end: calc(var(--control-size-touch) + 0.7rem);
  }

  :where(#main-nav).main-nav-dark-skin :is(a, .lingo-overflow-toggle) {
    color: var(--lingo-header-text, var(--text-main));
  }

  /* -- Optional Mega Menu: opt-in through the top-level WordPress menu class. -- */
  :where(#main-nav-menu) > .primary-menu > .mega-menu {
    position: static;
  }

  /* The mega-panel scrolls internally, so its hover bridge must sit outside
     that clipping area and cover the menu row's 0.25rem bottom padding. */
  :where(#main-nav-menu)
    > .primary-menu
    > .mega-menu:is(
      :not(.lingo-nav-item):hover,
      :not(.lingo-nav-item):focus-within,
      .lingo-nav-item:where(:has(> .lingo-nav-toggle[aria-expanded="true"]))
    )::before {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% - 0.25rem);
    z-index: var(--z-submenu);
    block-size: 0.625rem;
    content: "";
  }

  :where(#main-nav-menu) > .primary-menu > .mega-menu > :is(.sub-menu, .children) {
    inset-inline: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 0.75rem;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    max-block-size: min(70vh, 42rem);
    padding: clamp(0.75rem, 1.4vw, 1.15rem);
    overflow: auto;
    overscroll-behavior: contain;
  }

  :where(#main-nav-menu)
    > .primary-menu
    > .mega-menu.lingo-nav-item:where(:has(> .lingo-nav-toggle[aria-expanded="true"]))
    > :is(.sub-menu, .children) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  :where(#main-nav-menu)
    > .primary-menu
    > .mega-menu
    > :is(.sub-menu, .children)
    > li
    > .lingo-nav-toggle {
    display: none;
  }

  :where(#main-nav-menu)
    > .primary-menu
    > .mega-menu
    > :is(.sub-menu, .children)
    > .lingo-nav-item
    > a {
    padding-inline-end: 0.7rem;
  }

  :where(#main-nav-menu)
    > .primary-menu
    > .mega-menu
    > :is(.sub-menu, .children)
    > li
    > :is(.sub-menu, .children) {
    position: static;
    inset: auto;
    display: grid;
    gap: 0.12rem;
    min-inline-size: 0;
    max-inline-size: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    opacity: 1;
    visibility: inherit;
    pointer-events: inherit;
  }

  :where(#main-nav-menu)
    .mega-menu
    > :is(.sub-menu, .children)
    > li
    > :is(.sub-menu, .children)::before {
    content: none;
  }

  :where(#main-nav) > .container {
    box-sizing: border-box;
  }

  :where(#main-nav) .components {
    flex: 0 0 auto;
  }

  :where(#theme-header) .lingo-header-layout {
    display: flow-root;
  }

  :where(#theme-header) .lingo-header-layout > .lingo-header-ad-region {
    clear: both;
    inline-size: 100%;
    min-inline-size: 0;
  }

  :where(#theme-header).lingo-header-header-1 .lingo-header-layout:has(> .lingo-header-ad-region) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.5rem);
  }

  :where(#theme-header).lingo-header-header-1
    .lingo-header-layout:has(> .lingo-header-ad-region)
    > .logo-wrapper {
    flex: 1 1 12rem;
  }

  :where(#theme-header).lingo-header-header-1 .lingo-header-layout > .lingo-header-ad-region {
    flex: 2 1 20rem;
    clear: none;
    inline-size: auto;
    min-inline-size: auto;
    max-inline-size: 100%;
  }

  /* Intrinsic provider width can wrap the known pair. Extra insertions keep
   * their DOM order and use a complete line, including before the brand. */
  :where(#theme-header).lingo-header-header-1
    .lingo-header-layout:has(> .lingo-header-ad-region)
    > :where(:not(.logo-wrapper, .lingo-header-ad-region)) {
    flex: 0 0 100%;
    min-inline-size: 0;
  }

  /* Additional content in the brand's outer containers needs a complete row.
   * Inspect our boundaries, preserving all inserted content in place. */
  :where(#theme-header).lingo-header-header-1
    .lingo-header-layout:has(.logo-wrapper > :not(.logo-container, script, style, link, template)),
  :where(#theme-header).lingo-header-header-1
    .lingo-header-layout:has(
      .logo-container > :not(.lingo-header-brand, script, style, link, template)
    ) {
    display: flow-root;
  }

  /* With its Desktop menu intentionally hidden, the Network Directory keeps
   * the compact brand rhythm instead of reserving an empty full Header row. */
  body.lnsd-directory-page.lnsd-hide-header-menu-large :where(#theme-header) .logo-container {
    min-block-size: calc(
      var(--header-mobile-row-block-size) + (2 * var(--header-mobile-row-padding-block))
    );
    padding-block: var(--header-mobile-row-padding-block);
  }

  body.lnsd-directory-page.lnsd-hide-header-menu-large :where(#theme-header) :where(#logo) {
    min-block-size: var(--header-mobile-row-block-size);
    margin-block: 0;
  }

  body.lnsd-directory-page.lnsd-hide-header-menu-large
    :where(#theme-header)
    .lingo-header-layout
    > .lingo-header-ad-region {
    margin-block-end: 0;
  }
}

/* ==========================================================================
 7b. Mobile header: brand, controls, and the independent advertisement region
 ========================================================================== */

@media (width < 992px) {
  :where(#theme-header).theme-header {
    border-block-end: 0;
    border-radius: 0;
  }

  :where(#theme-header) :where(#main-nav) {
    display: none;
  }

  :where(#theme-header) .header-container {
    padding-inline-start: calc(var(--site-gutter-x) + var(--safe-inline-start, 0px));
    padding-inline-end: calc(var(--site-gutter-x) + var(--safe-inline-end, 0px));
  }

  :where(#theme-header) .logo-container {
    --mobile-header-side-track: var(--control-size-touch);
  }

  .lingo-header-brand {
    min-block-size: calc(
      var(--header-mobile-row-block-size) + (2 * var(--header-mobile-row-padding-block)) +
        env(safe-area-inset-top)
    );
    padding-block-start: calc(var(--header-mobile-row-padding-block) + env(safe-area-inset-top));
    padding-block-end: var(--header-mobile-row-padding-block);
  }

  :where(#theme-header) .logo-container::before {
    content: none;
  }

  /* The divider belongs to the brand, independently of provider insertions. */
  .lingo-header-brand::after {
    position: absolute;
    inset-block-start: calc(
      env(safe-area-inset-top) + (2 * var(--header-mobile-row-padding-block)) +
        var(--header-mobile-row-block-size)
    );
    inset-inline-start: calc(-1 * (var(--site-gutter-x) + var(--safe-inline-start, 0px)));
    inset-inline-end: calc(-1 * (var(--site-gutter-x) + var(--safe-inline-end, 0px)));
    z-index: 1;
    block-size: var(--header-divider-width);
    background: var(--header-divider-color);
    pointer-events: none;
    content: "";
  }

  :where(#theme-header) .logo-container--clustered-controls {
    --mobile-header-side-track: calc(
      (2 * var(--control-size-touch)) + var(--header-brand-gap-mobile)
    );
  }

  .mobile-header-components {
    position: absolute;
    inset-block-start: calc(var(--header-mobile-row-padding-block) + env(safe-area-inset-top));
    display: block;
    inline-size: var(--mobile-header-side-track);
    min-inline-size: 0;
  }

  /* stylelint-disable selector-id-pattern -- WordPress reference contract keeps these public IDs. */
  :where(#mobile-header-components-area_1) {
    left: 0;
  }

  :where(#mobile-header-components-area_2) {
    right: 0;
  }

  :where(#theme-header) .mobile-header-components .components {
    gap: var(--header-brand-gap-mobile);
  }

  :where(#mobile-header-components-area_1) .components {
    justify-content: flex-start;
  }

  :where(#mobile-header-components-area_2) .components {
    justify-content: flex-end;
  }
  /* stylelint-enable selector-id-pattern */

  body.mobile-hide-navbar .mobile-component_menu {
    display: none;
  }

  :where(#logo) {
    inline-size: fit-content;
    min-block-size: var(--header-mobile-row-block-size);
    max-inline-size: max(
      0px,
      calc(100% - (2 * var(--mobile-header-side-track)) - (2 * var(--header-brand-gap-mobile)))
    );
    margin: 0 auto;
    overflow: hidden;
  }

  :where(#logo) .custom-logo {
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: min(var(--logo-height-mobile), var(--lingo-logo-max-height-mobile));
    object-fit: contain;
  }

  /* Keep the keyboard ring inside the logo's clipping boundary. */
  :where(#logo) .custom-logo-link:focus-visible {
    outline-offset: -2px;
  }

  body.wp-custom-logo :where(#logo) .site-title {
    display: none;
  }

  :where(#theme-header).mobile-logo-left :where(#logo) {
    margin-left: calc(var(--mobile-header-side-track) + var(--header-brand-gap-mobile));
    margin-right: auto;
    text-align: left;
  }

  :where(#theme-header).mobile-logo-right :where(#logo) {
    margin-right: calc(var(--mobile-header-side-track) + var(--header-brand-gap-mobile));
    margin-left: auto;
    text-align: right;
  }

  :where(#theme-header).mobile-compact-header :where(#logo) .custom-logo {
    max-block-size: min(var(--logo-height-mobile-compact), var(--lingo-logo-max-height-mobile));
  }

  :where(#theme-header) .lingo-header-layout > .lingo-header-ad-region {
    inline-size: 100%;
    min-inline-size: 0;
    border-block-start: 0;
  }
}

/* Mobile drawer: visibility, scrolling, and hierarchical navigation. */
@media (width < 992px) {
  .side-aside-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-backdrop);
    display: block;
    background: var(--overlay-scrim-strong);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0.25s;
  }

  :where(#ling-container).side-aside-open > .side-aside-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .side-aside {
    position: fixed;
    top: 0;
    z-index: var(--z-nav-panel);
    display: block;
    inline-size: var(--lingo-mobile-panel-width, min(100vw, 350px));
    max-inline-size: 100%;
    block-size: 100vh;
    block-size: 100dvh;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--lingo-mobile-panel);
    color: var(--lingo-mobile-panel-text);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.28s;
  }

  .side-aside[hidden] {
    display: none;
  }

  .side-aside.appear-from-left {
    right: auto;
    left: 0;
    border-right: 1px solid var(--lingo-mobile-panel-border);
    transform: translateX(-100%);
  }

  .side-aside.appear-from-right {
    right: 0;
    left: auto;
    border-left: 1px solid var(--lingo-mobile-panel-border);
    transform: translateX(100%);
  }

  .side-aside.is-fullwidth {
    inline-size: 100vw;
    border-inline: 0;
  }

  :where(#ling-container).side-aside-open > .side-aside {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .close-side-aside {
    position: absolute;
    top: calc(var(--admin-bar-offset) + max(0.5rem, env(safe-area-inset-top)));
    inset-inline-end: max(0.5rem, var(--safe-inline-end));
    z-index: 3;
    display: grid;
    place-items: center;
    inline-size: var(--control-size-touch);
    min-inline-size: var(--control-size-touch);
    block-size: var(--control-size-touch);
    min-block-size: var(--control-size-touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--lingo-mobile-panel-text);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
  }

  .close-side-aside:hover,
  .close-side-aside:focus-visible,
  :where(#mobile-menu) .mobile-arrows:hover,
  :where(#mobile-menu) .mobile-arrows:focus-visible {
    background: color-mix(in srgb, currentcolor 10%, transparent);
  }

  .close-side-aside:focus-visible,
  :where(#mobile-menu) .mobile-arrows:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  :where(#mobile-menu) {
    block-size: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-start: calc(
      var(--admin-bar-offset) + max(4rem, calc(3.5rem + env(safe-area-inset-top)))
    );
    padding-block-end: calc(0.75rem + env(safe-area-inset-bottom));
    padding-inline-start: max(1.25rem, var(--safe-inline-start));
    padding-inline-end: max(1.25rem, var(--safe-inline-end));
  }

  :where(#mobile-menu) ul {
    display: block;
    inline-size: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    background: transparent;
  }

  :where(#mobile-menu) li {
    position: relative;
    padding: 0;
    margin: 0;
    border-block-end: 1px solid var(--lingo-mobile-panel-border);
  }

  :where(#mobile-menu) a {
    display: flex;
    align-items: center;
    min-block-size: 3.25rem;
    padding-block: 0.625rem;
    padding-inline: 0;
    border: 0;
    border-inline-start: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--lingo-mobile-panel-text);
    font-size: 1rem;
    font-weight: var(--font-bold);
    line-height: 1.36;
    text-decoration: none;
  }

  :where(#mobile-menu) :is(.menu-item-has-children, .page_item_has_children) > a {
    padding-inline-end: 3.5rem;
  }

  :where(#mobile-menu) a:hover,
  :where(#mobile-menu) a:focus-visible,
  :where(#mobile-menu) .current-menu-item > a,
  :where(#mobile-menu) .current-menu-ancestor > a {
    color: var(--lingo-mobile-panel-text);
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  :where(#mobile-menu) :is(.current-menu-item, .current-menu-ancestor) > a {
    padding-inline-start: 0.5rem;
    border-inline-start-color: var(--lingo-mobile-panel-active-color, currentcolor);
  }

  :where(#mobile-menu) a:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: -3px;
  }

  :where(#mobile-menu) :is(.sub-menu, .children) {
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--lingo-mobile-panel-border);
  }

  :where(#mobile-menu) :is(.sub-menu, .children)[hidden] {
    display: none;
  }

  :where(#mobile-menu) :is(.sub-menu, .children) a {
    display: inline-flex;
    min-block-size: var(--control-size-touch);
    padding-block: 0.5625rem;
    color: var(--lingo-mobile-panel-text-muted);
    font-size: var(--text-ui-sm);
    font-weight: var(--font-semibold);
  }

  :where(#mobile-menu) .mobile-arrows {
    position: absolute;
    top: 0.125rem;
    inset-inline-end: 0.125rem;
    display: inline-grid;
    place-items: center;
    inline-size: var(--control-size-touch);
    min-inline-size: var(--control-size-touch);
    block-size: var(--control-size-touch);
    min-block-size: var(--control-size-touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--lingo-mobile-panel-text);
    cursor: pointer;
  }

  :where(#mobile-menu) .mobile-arrows span {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    /* The chevron points down/up in both writing directions. */
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  :where(#mobile-menu) .mobile-arrows[aria-expanded="true"] span {
    transform: translateY(0.125rem) rotate(225deg);
  }
}

/* ==========================================================================
 7c. Header search dialog
 ========================================================================== */

.header-search-popup {
  position: fixed;
  inset: 0;
  z-index: var(--z-search-popup);
  display: block;
  padding: calc(var(--admin-bar-offset) + 0.75rem) 0.75rem 0.75rem;
  border: 0;
  background: var(--overlay-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
}

.header-search-popup[hidden] {
  display: none;
}

.header-search-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.header-search-popup-inner.container {
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: min(45rem, 100%);
  padding: 0.75rem;
  padding-inline-end: calc(0.75rem + var(--control-size-touch) + 0.55rem);
  margin-inline: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-base);
  background: var(--bg-card);
}

.header-search-close {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--control-size-touch);
  min-inline-size: var(--control-size-touch);
  block-size: var(--control-size-touch);
  min-block-size: var(--control-size-touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-strong);
  font-size: 1.3rem;
  cursor: pointer;
  transform: translateY(-50%);
}

.header-search-close:hover {
  color: var(--primary-color);
  background: var(--surface-primary-tint-2);
}

.header-search-close:focus-visible {
  color: var(--primary-color);
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 2px;
}

.header-search-popup .search-form {
  gap: 0.6rem;
  margin: 0;
}

.header-search-popup :is(.search-field, .search-submit) {
  min-block-size: 3rem;
  border-radius: var(--radius-base);
}

/* ==========================================================================
 8. Content & Entry
 ========================================================================== */

.post-content-loop__header {
  text-align: center;
  margin-block-end: var(--entry-shell-stack-gap);
  margin-inline: 0;
}

.entry-title {
  margin: 0.35rem 0 0.65rem;
  line-height: var(--leading-heading);
}

.entry-title a {
  color: var(--lingo-link-color);
}

.entry-title a:hover {
  color: var(--lingo-link-hover-color);
}

.single-featured-image {
  inline-size: 100%;
  max-inline-size: min(100%, 43.75rem);
  margin-block: 15px;
  margin-inline: auto;
}

.single-featured-image > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  border: 0;
  border-radius: 0;
}

.single-featured-image > figcaption {
  margin-block: 0 20px;
  margin-inline: 0;
  padding-block-start: 5px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 21px;
  text-align: center;
}

.entry-content {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-inline: 0;
  font-size: var(
    --entry-content-configured-font-size,
    clamp(1.0625rem, 1.03rem + 0.24vw, 1.1875rem)
  );
  line-height: var(--leading-prose);
  overflow-wrap: break-word;
  word-break: normal;
}

.entry-content :is(pre, code, kbd, samp, table) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Contain floated classic alignments so media never bleeds past the article. */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Defaults remain below WordPress Global Styles and per-block customization. */
:where(.entry-content) :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 0.5em;
  margin-inline: 0;
}

.entry-content :where(p) {
  margin-block: 0 1.5rem;
  margin-inline: 0;
}

.entry-content
  a:where(:not(.wp-block-button__link, .wp-element-button, .lingo-btn, .download-primary-btn)) {
  color: var(--lingo-link-color);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

.entry-content
  a:where(
    :not(.wp-block-button__link, .wp-element-button, .lingo-btn, .download-primary-btn)
  ):hover {
  color: var(--lingo-link-hover-color);
  text-decoration-color: currentColor;
}

.entry-content
  a:where(
    :not(.wp-block-button__link, .wp-element-button, .lingo-btn, .download-primary-btn)
  ):focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:where(.entry-content) :is(h2, h3, h4) {
  line-height: var(--leading-heading);
  color: var(--text-main);
  letter-spacing: normal;
}

:where(.entry-content) h2 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: var(--font-bold);
}

:where(.entry-content) h3 {
  font-size: clamp(1.22rem, 1.7vw, 1.58rem);
  font-weight: var(--font-bold);
}

:where(.entry-content) h4 {
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  font-weight: var(--font-semibold);
}

/* Classic prose keeps its defaults; authored block styles own block lists. */
.entry-content :is(ul, ol):not(:where(.wp-block-list, .wp-block-list *)),
:where(.entry-content .wp-block-list, .entry-content .wp-block-list :is(ul, ol)) {
  margin-block: 0 1.25rem;
  margin-inline: 0;
  padding-inline-start: 1.35rem;
  line-height: 1.9;
}

.entry-content li:not(:where(.wp-block-list *)),
:where(.entry-content .wp-block-list li) {
  margin-block-end: 0.3125rem;
}

.entry-content li :is(ul, ol):not(:where(.wp-block-list, .wp-block-list *)),
:where(.entry-content .wp-block-list li :is(ul, ol)) {
  margin-block: 0.3125rem;
}

.entry-content blockquote:not(:where(.wp-block-quote, .wp-block-pullquote, .wp-block-pullquote *)) {
  margin-block: 1.5rem;
  margin-inline: 0;
  padding: 0.9rem 1rem;
  border-inline-start: 4px solid var(--primary-color);
  background: var(--surface-primary-tint-1);
  color: var(--text-main);
  font-size: 1.03rem;
  line-height: 1.85;
  border-radius: var(--radius-md);
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-block-start: 0.5rem;
  margin-block-end: 0;
  margin-inline: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/*
 * Classic-editor alignment classes. WP RTL convention: floats stay physical
 * here and rtl.css flips them for RTL locales.
 */
.entry-content .alignleft:where(:not(.lingo-ad-slot, .google-auto-placed, .adsbygoogle)) {
  float: left;
  margin: 0.35rem 1.4rem 0.85rem 0;
  max-width: 50%;
}

.entry-content .alignright:where(:not(.lingo-ad-slot, .google-auto-placed, .adsbygoogle)) {
  float: right;
  margin: 0.35rem 0 0.85rem 1.4rem;
  max-width: 50%;
}

.entry-content .aligncenter:where(:not(.lingo-ad-slot, .google-auto-placed, .adsbygoogle)) {
  display: block;
  clear: both;
  margin-block: 1.5rem;
  margin-inline: auto;
}

.entry-content .wp-caption {
  max-width: 100%;
}

.entry-content hr {
  height: 0;
  margin-block: 1.5rem;
  margin-inline: 0;
  border: 0;
  border-top: 1px solid var(--border-color);
  opacity: 0.72;
}

.entry-content code:not(pre code) {
  padding: 0.1rem 0.36rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--surface-code-inline-bg);
  color: var(--text-main);
  font-size: 0.88em;
  font-family: var(--font-family-mono);
}

.entry-content pre {
  margin-block: 1.5rem;
  margin-inline: 0;
  padding: 0.92rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-code-bg);
  color: var(--text-code);
  overflow-x: auto;
  line-height: 1.6;
  font-size: 0.94rem;
}

.entry-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.entry-content kbd,
.entry-content samp {
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  font-size: 0.86em;
  font-family: var(--font-family-mono);
  color: var(--text-main);
}

.breadcrumbs {
  margin-block: var(--entry-shell-breadcrumb-margin-block-start)
    var(--entry-shell-breadcrumb-margin-block-end);
  margin-inline: auto;
  max-width: min(860px, 100%);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-meta);
  text-align: center;
}

.breadcrumbs-list {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs .sep {
  display: inline;
  margin-inline: 0.24rem;
  opacity: 0.6;
  font-size: 0.82em;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  color: var(--text-meta);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.breadcrumbs a:hover {
  color: var(--primary-color);
}

.breadcrumbs-current {
  color: var(--text-main);
  font-weight: var(--font-medium);
}

/* Defensive reset: prevent ordered-list numbering from leaking into breadcrumbs. */
nav.breadcrumbs[data-delimiter] > ol,
.breadcrumbs-list,
.breadcrumbs > ol {
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: none;
}

:where(nav.breadcrumbs[data-delimiter] > ol > li, .breadcrumbs-item, .breadcrumbs > ol > li) {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-increment: none;
}

nav.breadcrumbs[data-delimiter] > ol > li::marker,
.breadcrumbs-item::marker,
.breadcrumbs > ol > li::marker {
  content: "";
}

nav.breadcrumbs[data-delimiter] a,
.breadcrumbs > ol a {
  text-decoration: none;
}

@media (width < 992px) {
  /* The current crumb repeats the H1. Removing it and intermediate crumbs
   * prevents the 768-991px clipping that a phone-only rule could not cover. */
  :is(.breadcrumbs, nav.breadcrumbs[data-delimiter]) {
    overflow: hidden;
    max-inline-size: 100%;
    white-space: nowrap;
    text-align: start;
    text-overflow: ellipsis;
  }

  .breadcrumbs-list {
    max-inline-size: 100%;
    direction: inherit;
    text-align: start;
  }

  .breadcrumbs-item:where(:not(:first-child):not(:nth-last-child(2)):not(:last-child)),
  .breadcrumbs-item:where(.is-current:last-child) {
    display: none;
  }
}

.category-secondary-description {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: none;
}

.category-secondary-description__title {
  margin-block: 0 0.8rem;
  color: var(--text-main);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: var(--leading-snug);
}

.category-secondary-description__content > :first-child {
  margin-block-start: 0;
}

.category-secondary-description__content > :last-child {
  margin-block-end: 0;
}

.lingo-tldr-summary {
  margin-block: var(--entry-shell-summary-margin-block);
  margin-inline: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-main);
  line-height: var(--leading-relaxed);
}

.lingo-tldr-summary p {
  margin: 0;
}

.lingo-tldr-summary p + p {
  margin-block-start: var(--entry-shell-summary-paragraph-gap);
}

/* ==========================================================================
 8a. Reference-shaped Editorial entry header
 ========================================================================== */

.entry-header-outer {
  text-align: center;
}

.entry-header-outer > .entry-header {
  display: block;
  inline-size: var(--layout-reading-inline-size);
  container-type: inline-size;
  min-inline-size: 0;
  margin-block: 0;
  margin-inline: auto;
  /* Hook content inherits normal body text; the title owns its display size. */
  font-size: inherit;
  line-height: var(--leading-normal);
  text-align: inherit;
}

.entry-header-outer > .entry-header > .breadcrumbs {
  margin-block: 0 20px;
  font-size: 13px;
  line-height: 21px;
  text-align: inherit;
}

.entry-header-outer .breadcrumbs-list {
  text-align: inherit;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-cat-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 5px;
  color: var(--text-meta);
  font-size: 13px;
  line-height: 1.5;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-cat-wrap > .post-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-cat-wrap .post-cat {
  display: inline-flex;
  align-items: center;
  min-block-size: 2em;
  padding-inline: 0.7rem;
  border-radius: var(--radius-xs);
  background: var(--primary-color);
  color: var(--color-white);
  font-size: 13px;
  line-height: 2;
  text-decoration: none;
}

.entry-header-outer
  :is(.entry-header, .entry-header__details)
  > .post-cat-wrap
  .post-cat:where(:hover, :focus-visible) {
  background: var(--primary-color-dark);
  color: var(--color-white);
}

.entry-header-outer > .entry-header > .entry-title {
  margin-block: var(--entry-shell-title-margin-block);
  margin-inline: 0;
  color: var(--text-main);
  font-size: clamp(28px, 3.2vw, 41px);
  font-weight: var(--font-heading-strong);
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Follow the available header width when the sidebar appears. Older browsers
 * keep the viewport-based fluid fallback instead of a font-size breakpoint. */
@supports (font-size: 1cqi) {
  .entry-header-outer > .entry-header > .entry-title {
    font-size: clamp(28px, 5.7cqi, 41px);
  }
}

.entry-header-outer > .entry-header > .entry-sub-title {
  margin: -5px 0 15px;
  color: var(--text-meta);
  font-family: inherit;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.23;
  overflow-wrap: anywhere;
}

/* Flex children must be allowed to shrink before an unbroken category or
 * nested metadata value can wrap. Keep this scoped to the owned details. */
.entry-header-outer
  :where(
    .post-cat-wrap,
    .post-categories,
    .post-categories > li,
    .post-cat,
    .post-meta,
    .meta-item,
    .meta-item :is(span, a)
  ) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 5px 0 0;
  padding: 0;
  color: var(--text-meta);
  font-size: 12px;
  line-height: 24px;
  list-style: none;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-meta > .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Only owned details participate in the row; injected header siblings stay blocks. */
.entry-header-outer > .entry-header > .entry-header__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.75rem;
}

.entry-header-outer
  .entry-header__details:has(> .single-post-meta)
  > :is(.post-cat-wrap, .single-post-meta) {
  max-inline-size: 100%;
  margin-block: 0;
}

.entry-header-outer :where(.post-meta > .meta-item + .meta-item)::before {
  content: "•";
  margin-inline: 0 0.2rem;
  color: var(--border-color);
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-meta a {
  color: inherit;
  text-decoration: none;
}

.entry-header-outer :is(.entry-header, .entry-header__details) > .post-meta a:hover {
  color: var(--primary-color);
}

.entry-header-outer :where(.post-meta .meta-author a[rel="author"]) {
  font-weight: var(--font-semibold);
}

.entry-header-outer > .quiz-entry-header .quiz-meta-kicker {
  color: var(--text-meta);
  font-weight: var(--font-semibold);
}

.entry-header-outer > .quiz-entry-header .quiz-meta-value {
  color: inherit;
  font-weight: var(--font-semibold);
}

.entry-header-outer > .quiz-entry-header .quiz-meta-value a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.entry-header-outer > .quiz-entry-header > .quiz-entry-summary,
.entry-header-outer > .quiz-entry-header > .quiz-entry-summary > :first-child,
.entry-header-outer > .quiz-entry-header > .quiz-entry-summary > :last-child {
  margin-inline: 0;
}

.entry-header-outer > .quiz-entry-header > .quiz-entry-summary > :first-child {
  margin-block-start: 0;
}

.entry-header-outer > .quiz-entry-header > .quiz-entry-summary > :last-child {
  margin-block-end: 0;
}

@media (width < 992px) {
  .entry-header-outer > .entry-header > .entry-sub-title {
    font-size: 18px;
    line-height: 1.28;
  }
}

/* ==========================================================================
 9c. Network Sites Directory Adapter
 ========================================================================== */

/* The plugin owns its public markup; this adapter is restricted to network home. */
body.lnsd-directory-page.lnsd-hide-header-menu-large {
  --site-content-start-gap: var(--site-content-start-gap-mobile);
}

body.home :where(.lnsd-main) {
  --home-directory-border: color-mix(
    in srgb,
    var(--primary-color) 13%,
    var(--border-color-light) 87%
  );

  padding-block-end: clamp(1.5rem, 4vw, 3rem);
}

body.home :where(.lnsd-main) .lnsd-header {
  margin-block-end: 0;
  padding-block: clamp(1rem, 3vw, 1.75rem);
  padding-inline: 0;
  border: 0;
  border-block-end: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.home :where(.lnsd-main) .lnsd-header .page-title {
  color: var(--text-main);
  font-size: clamp(1.45rem, 4vw, 2.35rem);
  font-weight: var(--font-heading-strong);
  line-height: 1.25;
}

body.home :where(.lnsd-main) .lnsd-subtitle {
  max-inline-size: 62ch;
  margin-block-start: 0.65rem;
  color: var(--text-meta);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: var(--leading-relaxed);
}

body.home :where(.lnsd-main) .lnsd-toolbar {
  margin-block-start: clamp(1rem, 2.5vw, 1.4rem);
  padding-block: 0.75rem;
  padding-inline: 0;
  border: 0;
  border-block-end: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
}

body.home :where(.lnsd-main) .lnsd-total {
  min-block-size: var(--control-size-touch);
  padding-block: 0.45rem;
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: var(--primary-color-dark);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

body.home :where(.lnsd-main) .lnsd-search-input {
  min-block-size: var(--control-size-touch);
  padding-block: 0.7rem;
  padding-inline: 0.9rem;
  border: 1px solid var(--home-directory-border);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  transition: border-color var(--transition-ui);
}

body.home :where(.lnsd-main) .lnsd-search-input:focus-visible {
  border-color: var(--primary-color);
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

body.home :where(.lnsd-main) .lnsd-section {
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
  padding: 0;
}

body.home :where(.lnsd-main) .lnsd-grid {
  gap: clamp(1rem, 2vw, 1.35rem);
}

body.home :where(.lnsd-main) .lnsd-card {
  gap: clamp(0.7rem, 1.4vw, 0.8rem);
  padding-block: 0 0.9rem;
  padding-inline: 0;
  border: 0;
  border-block-end: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

body.home :where(.lnsd-main) .lnsd-card .entry-header {
  inline-size: 100%;
  margin-block-end: 0;
  padding-block-end: 0.25rem;
  border-block-end: 0;
}

body.home :where(.lnsd-main) .lnsd-card .entry-title {
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  font-weight: var(--font-heading-strong);
  line-height: var(--leading-snug);
}

body.home :where(.lnsd-main) .lnsd-card .entry-title a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-size-touch);
  padding-block: 0.25rem;
  padding-inline: 0;
  color: var(--text-main);
  transition: color var(--transition-ui);
}

body.home :where(.lnsd-main) .lnsd-card .entry-summary {
  gap: 0.7rem;
}

body.home :where(.lnsd-main) .lnsd-meta-block {
  padding-block: 0.6rem;
  padding-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
}

body.home :where(.lnsd-main) .lnsd-meta-group {
  gap: 0.5rem;
}

body.home :where(.lnsd-main) .lnsd-meta-item {
  min-block-size: 2.5rem;
  padding-block: 0.42rem;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

body.home :where(.lnsd-main) .lnsd-meta-item:has(.lnsd-meta-link) {
  padding: 0;
}

body.home :where(.lnsd-main) .lnsd-meta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.5rem;
  padding-block: 0.42rem;
  padding-inline: 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  transition: color var(--transition-ui);
}

body.home :where(.lnsd-main) .lnsd-template-sections-block,
body.home :where(.lnsd-main) .lnsd-template-section-item {
  background: transparent;
}

body.home :where(.lnsd-main) .lnsd-template-section-item {
  border-color: var(--home-directory-border);
}

body.home :where(.lnsd-main) .lnsd-bottom-menu {
  margin-block-start: clamp(1.15rem, 2.5vw, 1.5rem);
  padding-block: 0.75rem;
  padding-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.home :where(.lnsd-main) .lnsd-bottom-menu-list {
  justify-content: center;
  gap: 0.55rem;
}

body.home :where(.lnsd-main) .lnsd-bottom-menu-item a {
  min-block-size: var(--control-size-touch);
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  font-weight: var(--font-semibold);
  transition: color var(--transition-ui);
}

body.home :where(.lnsd-main) .lnsd-no-results {
  padding-block: 1rem;
  padding-inline: 0;
  border: 0;
  border-block: 1px solid var(--home-directory-border);
  border-radius: 0;
  background: transparent;
}

body.home :where(.lnsd-main) .lnsd-card .entry-title a:focus-visible,
body.home :where(.lnsd-main) .lnsd-url a:focus-visible,
body.home :where(.lnsd-main) .lnsd-meta-link:focus-visible,
body.home :where(.lnsd-main) .lnsd-bottom-menu-item a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  body.home :where(.lnsd-main) .lnsd-card .entry-title a:hover,
  body.home :where(.lnsd-main) .lnsd-meta-link:hover,
  body.home :where(.lnsd-main) .lnsd-bottom-menu-item a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

@media (width < 768px) {
  body.home :where(.lnsd-main) {
    padding-block-end: 1.5rem;
  }

  body.home :where(.lnsd-main) .lnsd-header {
    padding-block: 1.25rem;
  }

  body.home :where(.lnsd-main) .lnsd-section {
    margin-block-start: 1.25rem;
  }

  body.home :where(.lnsd-main) .lnsd-grid {
    gap: 1rem;
  }
}

/* ==========================================================================
 9. Homepage Sections
 ========================================================================== */

.home-section {
  --grid-gap: clamp(1rem, 2.5vw, 1.5rem);
  --grid-card-content-gap: 0.45rem;
  --grid-card-padding: 0.9rem;

  clear: both;
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
  container-name: home-section;
  container-type: inline-size;
}

body.has-full-width-home-sections .home-section {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
}

body.has-full-width-home-sections .home-section > * {
  max-inline-size: var(--opt-site-max-width, 75rem);
  margin-inline: auto;
}

.home-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.55rem, 2vw, 0.75rem);
  margin-block-end: 0.9rem;
  padding-block-end: 0.65rem;
  border-block-end: 1px solid var(--border-color-light);
}

.home-section__header > * {
  min-inline-size: 0;
}

.home-section__title {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: var(--font-heading-strong);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.home-section__archive-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-size-touch);
  padding-block: 0.35rem;
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: var(--primary-color);
  font-size: 0.86rem;
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: color var(--transition-link);
}

.home-section__archive-link:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-section__archive-link:focus-visible,
.home-section__load-more:focus-visible,
.home-section__items .post-card__title > a:focus-visible,
.home-section__items .post-card__action:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 3px;
}

.home-section__items.posts-grid {
  gap: var(--grid-gap);
  margin-block-start: 0;
}

.home-section__items .post-card {
  min-block-size: 0;
  padding-block-end: var(--grid-card-padding);
  border-block-end: 1px solid var(--border-color-light);
  background: transparent;
}

.home-section__items .post-card__title {
  margin: 0;
  font-size: 1rem;
}

@container home-section (min-width: 48rem) {
  .home-section__title {
    font-size: clamp(1.08rem, 1.85cqi, 1.3rem);
  }

  .home-section__items .post-card__title {
    font-size: clamp(1.05rem, 1.6cqi, 1.14rem);
  }
}

.home-section__items .post-card__title > a:hover {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-section__items .post-card__summary {
  color: var(--text-muted);
}

.home-section__items .post-card__summary p {
  line-height: 1.65;
}

.home-section__items .post-card__action {
  padding-inline: 0;
  color: var(--primary-color);
  font-size: 0.88rem;
}

.home-section__footer {
  display: flex;
  justify-content: center;
}

.home-section__load-more {
  min-block-size: var(--control-size-touch);
}

.home-section .no-results {
  padding-block: 0.75rem;
  border-block: 1px solid var(--border-color-light);
}

:where(body.home:not(.lnsd-directory-page) #main-content.main-content) > .home-section:first-child {
  margin-block-start: 0;
}

:where(body.home:not(.lnsd-directory-page) #main-content.main-content) .home-section__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-col)), 1fr));
}

:where(body.home:not(.lnsd-directory-page) #main-content.main-content)
  .home-section__items:has(> :only-child) {
  grid-template-columns: minmax(0, min(100%, 38rem));
  justify-content: start;
}

/* ==========================================================================
 9b. Homepage Video Reviews
 ========================================================================== */

.home-video-reviews__header {
  isolation: isolate;
}

.home-video-reviews__title {
  text-wrap: balance;
}

.home-video-reviews__archive-link {
  white-space: nowrap;
}

.home-video-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--video-grid-min-col)), 1fr));
  gap: var(--video-grid-gap);
}

.home-video-reviews__card {
  overflow: visible;
  border: 1px solid var(--border-color);
  border-radius: var(--lingo-card-radius);
  background: var(--bg-card);
  box-shadow: none;
}

.home-video-reviews__embed {
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 4px);
}

.home-video-reviews__embed iframe.lingo-video-embed__frame,
.home-video-reviews__embed video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: inherit;
}

.home-video-reviews__card-title {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  font-size: 1rem;
}

.home-video-reviews__card-title > a {
  color: var(--lingo-link-color);
  text-decoration: none;
}

.home-video-reviews__card-title > a:hover {
  color: var(--lingo-link-hover-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-video-reviews__card-title > a:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 3px;
}

/* ==========================================================================
 10. Post Loop Layout
 ========================================================================== */

:is(.posts-grid, .posts-list) {
  min-inline-size: 0;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-col)), 1fr));
  gap: var(--grid-gap);
  margin-block-start: var(--grid-gap);
  container-name: posts-grid;
  container-type: inline-size;
}

.posts-grid > * {
  min-inline-size: 0;
}

.posts-grid > :not(.post-card):not(:has(> .post-card)) {
  grid-column: 1 / -1;
}

.posts-list {
  margin-block-start: var(--spacing-lg);
}

.posts-list > * + * {
  margin-block-start: var(--grid-gap-list);
}

.posts-grid .post-card {
  display: flex;
  flex-direction: column;
  gap: var(--grid-card-content-gap);
  block-size: 100%;
}

.posts-grid .post-card.no-thumb {
  padding-block-start: 0;
}

.posts-grid.is-layout-featured-first .post-card--featured-first {
  display: grid;
  grid-template-columns: minmax(15rem, 1.15fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  column-gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  min-block-size: clamp(15rem, 30vw, 21rem);
}

.posts-grid.is-layout-featured-first .post-card--featured-first .post-card__media {
  grid-column: 1;
  align-self: stretch;
  margin: 0;
}

.posts-grid.is-layout-featured-first .post-card--featured-first .post-card__media img {
  block-size: 100%;
  aspect-ratio: auto;
}

.posts-grid.is-layout-featured-first .post-card--featured-first .post-card__title {
  font-size: clamp(1.45rem, 3vw, 2.35rem);
}

.posts-grid.is-layout-featured-first .post-card--featured-first .post-card__title > a {
  -webkit-line-clamp: 3;
}

.posts-grid.is-layout-featured-first .post-card--featured-first.no-thumb {
  grid-template-columns: minmax(0, 1fr);
}

@container posts-grid (max-width: 47.99rem) {
  .posts-grid.is-layout-featured-first .post-card--featured-first {
    display: flex;
    min-block-size: 0;
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
 10. Post Card
 ========================================================================== */

.post-card {
  padding: 0 0 clamp(0.55rem, 1.2vw, var(--grid-card-padding));
  overflow: visible;
  border: 0;
  border-block-end: 1px solid var(--border-color-light);
  border-radius: 0;
  background: var(--bg-card);
  box-shadow: none;
}

.post-card__details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--grid-card-content-gap);
  min-inline-size: 0;
  text-align: start;
}

/* Archive/index columns reach the mobile shell edge. Inset their text here;
 * home sections, search surfaces, and related panels already own an inset. */
@media (width < 992px) {
  :where(body:not(.home)) .main-content > :is(.posts-grid, .posts-list) .post-card__details {
    padding-inline: var(--layout-reading-inset);
  }
}

.post-card__title {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
}

.post-card__title > a {
  color: var(--lingo-link-color);
  text-decoration: none;
}

.post-card__title > a:hover {
  color: var(--lingo-link-hover-color);
}

.post-card__title > a:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.post-card__media {
  display: block;
  margin-block-end: 0.6rem;
  overflow: hidden;
}

.post-card__media img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--thumb-border);
  border-radius: calc(var(--radius-lg) - 4px);
  object-fit: cover;
}

.posts-grid .post-card__title > a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card__summary p {
  margin: 0;
}

.posts-grid .post-card__summary p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem var(--grid-meta-gap);
}

.post-card__price-badge {
  display: inline-flex;
  align-items: center;
  margin-block-end: 0.45rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--surface-primary-tint-2);
  color: var(--primary-color-dark);
  font-size: 0.78rem;
  font-weight: var(--font-bold);
}

.post-card__action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  margin-block-start: auto;
  min-block-size: var(--control-size-touch);
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lingo-accent);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  text-decoration: none;
  transition:
    color var(--transition-link),
    text-decoration-color var(--transition-link);
}

.post-card__action:hover {
  color: var(--lingo-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.post-card__action:focus-visible {
  outline: 3px solid var(--focus-outline-strong);
  outline-offset: 3px;
}

/* ==========================================================================
 10. Singular entry footer and adjacent-post navigation
 ========================================================================== */

.entry-footer {
  margin-block-start: 1.875rem;
}

.entry-footer > .post-share,
.entry-footer > .post-navigation {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
}

.entry-footer > .post-author-box {
  margin-block-start: 0;
}

.entry-footer
  > :is(.post-share, .post-navigation, .post-author-box)
  + :is(.post-share, .post-navigation, .post-author-box) {
  margin-block-start: 1rem;
}

.post-navigation {
  max-inline-size: var(--entry-content-max-width);
  margin-block: 2rem 1.5rem;
  margin-inline: auto;
}

.post-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-soft-press);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  min-inline-size: 0;
  padding: 0;
  transition: background-color var(--transition-link);
}

.post-navigation .nav-next {
  border-inline-start: 1px solid var(--border-color-light);
}

.post-navigation .nav-previous:only-child,
.post-navigation .nav-next:only-child {
  grid-column: 1 / -1;
}

.post-navigation .nav-next:only-child {
  border-inline-start: 0;
}

.post-navigation .nav-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-block-end: 0.32rem;
  color: var(--text-subtle-strong);
  font-size: 0.86rem;
  line-height: var(--leading-normal);
}

.post-navigation .nav-next .nav-subtitle {
  justify-content: flex-end;
}

.post-navigation .nav-direction {
  color: var(--primary-color);
  font-size: 0.9rem;
  line-height: 1;
}

.post-navigation .nav-title {
  display: block;
  color: var(--text-main);
  font-weight: var(--font-bold);
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: color var(--transition-link);
}

.post-navigation .nav-next .nav-title {
  text-align: end;
}

.post-navigation a {
  display: block;
  block-size: 100%;
  min-block-size: var(--control-size-touch);
  padding-block: 0.82rem 0.9rem;
  padding-inline: 0.95rem;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--transition-link),
    box-shadow var(--transition-link);
}

.post-navigation a:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: -3px;
  box-shadow: var(--shadow-focus-ring);
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
  background: var(--surface-primary-tint-3);
}

.post-navigation a:hover .nav-title,
.post-navigation a:focus-visible .nav-title {
  color: var(--primary-color);
}

@media (width < 768px) {
  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }

  .post-navigation .nav-next {
    border-block-start: 1px solid var(--border-color-light);
    border-inline-start: 0;
  }
}

/* ==========================================================================
 10. Third-party integration slots
 ========================================================================== */

.integration-slot {
  inline-size: 100%;
  max-inline-size: var(--entry-content-max-width);
  margin-block: clamp(1.75rem, 4vw, 2.5rem) 0;
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 1.5rem);
  border-block: 1px solid var(--border-color);
  background: transparent;
}

.integration-slot > * + * {
  margin-block-start: 0.85rem;
}

.integration-slot__title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: var(--leading-snug);
}

.integration-slot__content {
  max-inline-size: 100%;
}

.integration-slot__content > :first-child {
  margin-block-start: 0;
}

.integration-slot__content > :last-child {
  margin-block-end: 0;
}

/* ===========================================================================
 10. Manual Advertising delivery surfaces
 ========================================================================== */

.lingo-ad-slot {
  position: relative;
  box-sizing: border-box;
  clear: both;
  inline-size: 100%;
  min-inline-size: 0;
  margin-block: 1.25rem;
  padding: 0;
  text-align: center;
}

.lingo-ad-slot__title {
  display: block;
  margin-block-end: 0.2rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.lingo-ad-slot__content {
  inline-size: 100%;
  min-block-size: var(--lingo-ad-slot-min-height, 0);
  max-inline-size: min(100%, var(--lingo-ad-slot-max-width, 100%));
  margin-inline: auto;
}

.lingo-ad-slot__link,
.lingo-ad-slot__image {
  display: inline-block;
  max-inline-size: 100%;
}

.lingo-ad-slot__image {
  block-size: auto;
  vertical-align: middle;
}

.lingo-ad-slot.alignleft {
  text-align: start;
}

.lingo-ad-slot.alignright {
  text-align: end;
}

.lingo-ad-slot.aligncenter {
  text-align: center;
}

.lingo-ad-slot--banner-header {
  margin-block: 0;
}

.lingo-ad-slot--banner-top {
  align-self: center;
  margin-block: 0;
}

/* Empty/pending provider code retains its measurable width, with no theme
 * spacing. Only this owned wrapper changes when its content becomes visible. */
.lingo-ad-slot--banner-top[data-lingo-ad-visible] {
  margin-block: 0.75rem;
}

.lingo-ad-slot--banner-above,
.lingo-ad-slot--banner-above-content {
  margin-block: 0 1.875rem;
}

.lingo-ad-slot--banner-below,
.lingo-ad-slot--banner-below-content {
  margin-block: 1.875rem;
}

.lingo-ad-slot--banner-bottom {
  margin-block: 2.5rem 0.3125rem;
}

/* ==========================================================================
 10. Related content panel
 ========================================================================== */

.related-posts-section {
  max-inline-size: min(100%, var(--entry-content-max-width, var(--size-reading, 54rem)));
  margin-block-start: 30px;
  margin-inline: auto;
  text-align: start;
}

.related-section-title {
  margin: 0 0 16px;
  color: var(--text-main);
  font-size: 20px;
  line-height: 1.4;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 30px;
}

.related-card {
  min-inline-size: 0;
}

.related-card-thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  margin-block-end: 12px;
  overflow: hidden;
}

.related-card-thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.related-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-bold);
  line-height: 19px;
  text-align: start;
}

.related-card-title a {
  display: block;
  color: var(--text-main);
  text-decoration: none;
}

.related-card-title a:hover {
  color: var(--primary-color);
}

.related-card-title a:focus-visible {
  outline: 3px solid var(--focus-outline-strong);
  outline-offset: 3px;
}

@media (width < 992px) {
  .related-posts-section {
    margin-block-start: 24px;
    padding-inline: 8px;
  }
}

@media (width < 768px) {
  .related-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

@media (width <= 480px) {
  .related-posts-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
 11. Archive headings and Empty States
 ========================================================================== */

.page-header .page-title {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: var(--leading-snug);
  font-weight: var(--font-bold);
}

.archive-heading,
.empty-state__header,
.lingo-search-results__header {
  min-inline-size: 0;
}

.archive-heading__title,
.empty-state__title,
.lingo-search-results__title {
  overflow-wrap: anywhere;
}

.archive-heading__description > :first-child,
.empty-state__content > :first-child {
  margin-block-start: 0;
}

.archive-heading__description > :last-child,
.empty-state__content > :last-child {
  margin-block-end: 0;
}

.empty-state__content .lingo-search-form {
  margin-block-start: 1rem;
}

@media (width < 992px) {
  .page-header {
    padding: 0 0.3rem;
  }
}

/* ==========================================================================
 11. Comment thread and response form
 ========================================================================== */

.comments-area {
  min-inline-size: 0;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-list .children {
  padding-inline-start: 2.5rem;
}

.comment-body {
  margin-block-end: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: #f4f4f4;
  box-shadow: var(--shadow-soft);
}

@media (width < 768px) {
  .comment-list .children {
    padding-inline-start: 0.75rem;
  }

  .comment-body {
    padding: 0.75rem;
  }
}

.comment-meta {
  margin-block-end: 1rem;
  color: var(--text-meta);
  font-size: 0.9rem;
}

.comment-content {
  overflow-wrap: anywhere;
}

.comment-respond,
.comment-form {
  min-inline-size: 0;
}

.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  inline-size: 100%;
  max-inline-size: 100%;
}

/* ==========================================================================
 12. Archive pagination
 ========================================================================== */

.navigation.pagination {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.44rem;
  margin-top: 0;
  padding: 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-block-size: var(--control-size-touch);
  min-inline-size: var(--control-size-touch);
  padding: 0.5rem 0.95rem;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition-link);
}

.page-numbers .nav-label {
  white-space: nowrap;
}

.page-numbers.current {
  border-block-end-color: currentcolor;
  color: var(--primary-color);
  pointer-events: none;
}

.page-numbers.prev,
.page-numbers.next {
  min-inline-size: 0;
  padding-inline: 0.78rem;
}

.page-numbers:hover,
.page-numbers:focus-visible {
  border-block-end-color: currentcolor;
  color: var(--primary-color);
}

.page-numbers:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 2px;
}

.navigation.posts-navigation {
  max-inline-size: 760px;
  margin: 2.4rem auto 0;
}

.navigation.posts-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.navigation.posts-navigation .nav-previous:only-child,
.navigation.posts-navigation .nav-next:only-child {
  grid-column: 1 / -1;
}

.navigation.posts-navigation .nav-previous a,
.navigation.posts-navigation .nav-next a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-size-touch);
  gap: 0.32rem;
  padding: 0.65rem 0.8rem;
  border: 0;
  border-block-end: 1px solid var(--border-color-light);
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: color var(--transition-link);
}

.navigation.posts-navigation .nav-next {
  text-align: end;
}

.navigation.posts-navigation .nav-previous a:hover,
.navigation.posts-navigation .nav-next a:hover,
.navigation.posts-navigation .nav-previous a:focus-visible,
.navigation.posts-navigation .nav-next a:focus-visible {
  color: var(--primary-color);
}

.navigation.posts-navigation .nav-previous a:focus-visible,
.navigation.posts-navigation .nav-next a:focus-visible {
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 2px;
}

@media (width < 768px) {
  .navigation.posts-navigation .nav-links {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 12. Search Experience
 ========================================================================== */

.lingo-search-form,
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lingo-search-form__field-wrap,
.search-input-wrap {
  position: relative;
  /* Wrap the submit button before the input loses its usable reading width. */
  flex: 1 1 12rem;
  min-inline-size: min(12rem, 100%);
}

.lingo-search-form__field,
.search-field {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: auto;
  min-block-size: clamp(46px, calc(46px + (100vw - 768px) / 56), 50px);
  padding-block: 0.55rem;
  padding-inline: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--bg-body);
  color: var(--text-main);
}

.lingo-search-form__field:focus,
.search-field:focus {
  border-color: var(--lingo-accent);
  outline: 2px solid var(--focus-outline-strong);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}

.lingo-search-form__submit,
.search-submit {
  flex: 0 1 auto;
  block-size: auto;
  min-block-size: clamp(46px, calc(46px + (100vw - 768px) / 56), 50px);
  min-inline-size: clamp(80px, calc(80px + (100vw - 768px) / 14), 96px);
  max-inline-size: 100%;
  padding-block: 0.55rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--lingo-button-radius);
  background: var(--lingo-accent);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: var(--font-bold);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    color var(--transition-link),
    background-color var(--transition-link),
    text-decoration-color var(--transition-link);
}

.lingo-search-form__submit:hover,
.search-submit:hover {
  background: var(--lingo-accent-dark);
  box-shadow: none;
}

.lingo-search-form__results,
.live-search-results {
  position: absolute;
  z-index: var(--z-search-results);
  inset-block-start: calc(100% + 0.25rem);
  inset-inline: 0;
  max-block-size: 50vh;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  box-shadow: none;
}

.lingo-search-form__results[hidden],
.live-search-results[hidden] {
  display: none;
}

.live-search-result-item,
.live-search-empty {
  display: block;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  text-decoration: none;
}

.live-search-result-item:last-child,
.live-search-empty:last-child {
  border-bottom: 0;
}

.live-search-result-item:hover,
.live-search-result-item[aria-selected="true"] {
  background: var(--bg-card);
}

.live-search-result-item[aria-selected="true"] {
  color: var(--primary-color-dark);
  font-weight: var(--font-semibold);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

.lingo-search-results__content {
  min-inline-size: 0;
}

/* ==========================================================================
 13. Copy Code
 ========================================================================== */
pre.has-copy-code-btn {
  position: relative;
}

.copy-code-btn {
  position: sticky;
  inset-inline-start: 0;
  display: block;
  max-inline-size: 100%;
  margin-block-end: 0.75rem;
  margin-inline-start: auto;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-ui);
  font-family: inherit;
  white-space: normal;
  z-index: var(--z-copy-btn);
}

pre:hover .copy-code-btn,
pre:focus-within .copy-code-btn,
.copy-code-btn:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .copy-code-btn {
    opacity: 1;
  }
}

/* ==========================================================================
 14. Standard and specialized page surfaces
 ========================================================================== */

.special-page {
  min-inline-size: 0;
}

.special-page__header {
  margin-block-end: var(--entry-shell-stack-gap);
}

.special-page__extension {
  min-inline-size: 0;
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
}

.sitemap-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.sitemap-page__section {
  min-inline-size: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}

.sitemap-page__title {
  margin: 0 0 0.75rem;
  color: var(--text-main);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
}

.sitemap-page__list {
  margin: 0;
  padding-inline: 1.2rem 0;
}

.sitemap-page__list > li + li {
  margin-block-start: 0.45rem;
}

.sitemap-page__list li {
  min-inline-size: 0;
}

.sitemap-page__list a {
  color: var(--text-main);
  overflow-wrap: anywhere;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.sitemap-page__list a:hover {
  color: var(--primary-color);
}

.sitemap-page__list a:focus-visible {
  outline: 3px solid var(--focus-outline-strong);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@media (width < 768px) {
  .special-page__extension {
    margin-block-start: 1rem;
  }

  .sitemap-page__section {
    padding: 0.85rem;
  }
}

/* Shared lesson/review semantic icon-mask infrastructure. */
/* stylelint-disable property-no-vendor-prefix -- Safari requires -webkit-mask-* alongside the standards-based declarations. */
.lingo-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}

.lingo-icon::before {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--lingo-icon-background, transparent);
  content: "";
  mask-image: var(--lingo-icon-mask, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: var(--lingo-icon-mask, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

@media (forced-colors: active) {
  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .lingo-icon::before {
      background-color: CanvasText;
    }
  }
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .lingo-icon::before {
    display: inline-block;
    width: auto;
    height: auto;
    background-color: transparent;
    content: var(--lingo-icon-fallback, "");
    font-size: 1em;
    line-height: 1;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
/* stylelint-enable property-no-vendor-prefix */

/* ==========================================================================
 13. Review entry metadata, rating, media, and downloads
 ========================================================================== */

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.34rem 0.58rem;
}

.review-meta .badge-review {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-block-size: 2rem;
  padding-block: 0.28rem;
  padding-inline: 0.66rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 24%, var(--border-color-light) 76%);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-card) 86%);
  color: var(--primary-color-dark);
  font-size: 0.86rem;
  font-weight: var(--font-bold);
  line-height: 1.4;
  box-shadow: none;
}

.review-meta .difficulty-level {
  font-weight: var(--font-semibold);
}

.review-meta .target-language-level {
  color: var(--primary-color);
  font-weight: var(--font-bold);
}

.review-meta .target-language-level a {
  color: inherit;
  text-decoration: none;
}

.entry-header-outer > .entry-header > .review-rating {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  margin-block-start: 5px;
  color: var(--text-main);
  font-size: 1.1rem;
}

.entry-header-outer > .entry-header .review-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  color: var(--color-star);
}

.entry-header-outer > .entry-header > .review-rating .rating-value {
  margin-inline-start: 0.3rem;
  color: var(--text-main);
  font-size: 0.98rem;
}

.review-download-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-block-start: 2.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  box-shadow: none;
}

.review-download-area .download-primary-btn {
  margin: 0;
}

@media (width < 768px) {
  .review-meta .badge-review {
    padding: 0.2rem 0.46rem;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
 13. Review verdict comparison
 ========================================================================== */

.review-verdict-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-block-start: 2.2rem;
  padding: 1.3rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: none;
}

.review-verdict-box > section {
  min-width: 0;
}

.review-verdict-box > section > h2 {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
}

.review-verdict-box > .pros > h2 {
  border-color: var(--color-success);
  color: var(--color-success-text);
}

.review-verdict-box > .cons > h2 {
  border-color: var(--color-error);
  color: var(--color-error);
}

.review-verdict-box > section > ul {
  padding-inline-start: 1.2rem;
  font-size: 1rem;
}

@media (width < 768px) {
  .review-verdict-box {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
}

/* ==========================================================================
 13. Review rating icon contracts
 ========================================================================== */

/* stylelint-disable property-no-vendor-prefix -- Safari requires -webkit-mask-* alongside the standards-based declarations. */

.review-rating-stars .lingo-icon--star-filled {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2605";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2.8 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L3 9.4l6.2-.9L12 2.8z'/></svg>");
}

.review-rating-stars .lingo-icon--star-empty {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2606";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.8' d='m12 2.8 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L3 9.4l6.2-.9L12 2.8z'/></svg>");
}

.review-rating-stars .lingo-icon--star-half {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2BE8";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><clipPath id='half-star'><rect width='12' height='24'/></clipPath></defs><path fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.8' d='m12 2.8 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L3 9.4l6.2-.9L12 2.8z'/><path fill='black' clip-path='url(%23half-star)' d='m12 2.8 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L3 9.4l6.2-.9L12 2.8z'/></svg>");
}

/* ==========================================================================
 15. Audio & Game
 ========================================================================== */

.entry-content audio,
.wp-block-audio audio {
  width: 100%;
  margin-block: 1.5rem;
  margin-inline: 0;
  border-radius: var(--radius-base);
}

/* ==========================================================================
17. Shared learning-entry details
 ========================================================================== */

.entry-target-language {
  font-weight: var(--font-bold);
  color: var(--primary-color);
}

.entry-target-language a {
  color: inherit;
  text-decoration: none;
}

.quiz-card-excerpt {
  margin: 0;
  color: var(--quiz-text-soft, var(--text-meta));
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
 18. Review download controls
 ========================================================================== */

.download-primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  min-inline-size: 165px;
  min-block-size: 55px;
  margin-block: 0.45rem 0.8rem;
  margin-inline: auto;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border: 0;
  border-radius: var(--lingo-button-radius);
  background: var(--lingo-accent);
  color: var(--color-white);
  font-weight: var(--font-bold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transition-ui);
}

.download-primary-btn:hover {
  background: var(--lingo-accent-dark);
  color: var(--color-white);
}

.download-primary-btn img,
.entry-content .download-primary-btn img {
  display: block;
  /* Keep this box stable for native loading and lazy-load placeholder swaps. */
  inline-size: 165px;
  block-size: 55px;
  border: 0;
  object-fit: contain;
}

.download-primary-btn.is-image {
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  background: transparent;
}

.download-primary-btn.is-image:hover {
  background: transparent;
}

.download-primary-btn:is(:focus, :active, :visited) {
  border: 0;
  color: var(--color-white);
}

.download-primary-btn:focus-visible {
  outline: 2px solid var(--lingo-accent);
  outline-offset: 2px;
}

/* ==========================================================================
 18. Singular share panel and network controls
 ========================================================================== */

.post-share {
  display: block;
  max-inline-size: var(--entry-content-max-width);
  margin-block: 1.875rem 0;
  margin-inline: auto;
  padding-block: 1.125rem;
  padding-inline: 1.75rem;
  border-block-start: 1px solid var(--border-color);
  border-radius: 0;
  background: color-mix(in srgb, var(--text-main) 3%, var(--bg-card) 97%);
  box-shadow: none;
}

.post-share-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-share-item {
  margin: 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-size-touch);
  block-size: var(--control-size-touch);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--share-btn-icon-color, #fff);
  font-size: 0.95rem;
  font-weight: var(--font-bold);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  transition: filter var(--transition-ui);
}

.post-share .share-btn,
.post-share .share-btn:visited,
.post-share .share-btn:hover,
.post-share .share-btn:focus,
.post-share .share-btn:active {
  color: var(--share-btn-icon-color, #fff);
}

.share-btn:hover {
  filter: brightness(1.08);
}

.share-btn:active {
  filter: brightness(0.94);
}

.share-btn > span[aria-hidden="true"],
.share-btn .share-btn-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  font-family: var(--font-family-base);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1;
}

.share-btn-icon-svg {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  fill: currentcolor;
}

.share-btn-icon-svg path {
  fill: currentcolor;
}

.share-btn-telegram {
  background: #1c95e0;
}

.share-btn-whatsapp {
  background: #2bc659;
}

.share-btn-pinterest {
  background: #e63946;
}

.share-btn-tumblr {
  background: #344b6a;
}

.share-btn-linkedin {
  background: #2e9ad8;
}

.share-btn-x {
  background: #000;
}

.share-btn-facebook {
  background: #4f86f7;
}

.share-btn-messenger {
  background: #0a7cff;
}

.share-btn-line {
  background: #00be2f;
}

.post-share .share-btn-mobile-only {
  display: none;
}

@media (width < 992px) {
  .post-share .share-btn-mobile-only {
    display: inline-flex;
  }
}

@media (width < 768px) {
  .post-share {
    padding: 0.9375rem;
  }
}

@media (width >= 768px) {
  a.viber-share-btn {
    display: none;
  }
}

/* ==========================================================================
 19. Sidebar and WordPress widgets
 ========================================================================== */

.lingo-sidebar {
  min-inline-size: 0;
}

.widget {
  min-inline-size: 0;
  margin-block-end: 1.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lingo-sidebar > .widget {
  margin-block-end: 30px;
  padding: 0;
}

.lingo-sidebar > .widget:last-child {
  margin-block-end: 0;
}

@media (width < 992px) {
  .lingo-sidebar > .widget {
    margin-block-end: 15px;
  }

  .lingo-sidebar .lingo-widget-posts {
    padding-inline: var(--layout-reading-inset);
  }

  /* Inset owned text and controls without narrowing arbitrary widget embeds. */
  .lingo-sidebar > .widget > :is(.widget-title, .search-form, ul, .tagcloud, .calendar_wrap) {
    margin-inline: var(--layout-reading-inset);
  }
}

.sidebar-search-widget :is(.search-input-wrap, .search-submit) {
  order: initial;
}

.widget-title {
  margin: 0 0 0.9rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--widget-border, var(--border-color-light));
  color: var(--widget-heading, var(--text-strong));
  font-size: var(--lingo-widget-title-size);
  font-weight: var(--font-bold);
}

/* WordPress core list widgets retain their generated class contract. */
:is(
    .widget_archive,
    .widget_categories,
    .widget_pages,
    .widget_meta,
    .widget_nav_menu,
    .widget_recent_entries,
    .widget_recent_comments,
    .widget_rss
  )
  ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(
    .widget_archive,
    .widget_categories,
    .widget_pages,
    .widget_meta,
    .widget_nav_menu,
    .widget_recent_entries,
    .widget_recent_comments,
    .widget_rss
  )
  li {
  min-inline-size: 0;
  margin: 0;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--widget-border, var(--border-color-light));
  color: var(--widget-text-muted, var(--text-meta));
  overflow-wrap: anywhere;
}

:is(
    .widget_archive,
    .widget_categories,
    .widget_pages,
    .widget_meta,
    .widget_nav_menu,
    .widget_recent_entries,
    .widget_recent_comments,
    .widget_rss
  )
  li:last-child {
  border-block-end: 0;
}

:is(
    .widget_archive,
    .widget_categories,
    .widget_pages,
    .widget_meta,
    .widget_nav_menu,
    .widget_recent_entries,
    .widget_recent_comments,
    .widget_rss
  )
  li
  a {
  color: var(--widget-link, var(--text-main));
  font-weight: var(--font-medium);
  text-decoration: none;
}

:is(
    .widget_archive,
    .widget_categories,
    .widget_pages,
    .widget_meta,
    .widget_nav_menu,
    .widget_recent_entries,
    .widget_recent_comments,
    .widget_rss
  )
  li
  a:is(:hover, :focus-visible) {
  color: var(--widget-link-hover, var(--primary-color));
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(.widget_pages, .widget_nav_menu) li > ul {
  margin-block-start: 0.45rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 2px solid var(--widget-border, var(--border-color-light));
}

.widget_recent_entries .post-date,
.widget_rss :is(.rss-date, cite) {
  display: block;
  margin-block-start: 0.24rem;
  color: var(--widget-text-muted, var(--text-meta));
  font-size: 0.84rem;
}

.widget_rss .rssSummary {
  margin-block-start: 0.45rem;
  color: var(--widget-text, var(--text-main));
  font-size: 0.92rem;
  line-height: var(--leading-normal);
}

.widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.widget_tag_cloud .tagcloud a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding: 0.35rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--widget-link, var(--text-main));
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.widget_tag_cloud .tagcloud a:is(:hover, :focus-visible) {
  color: var(--widget-link-hover, var(--primary-color));
}

.widget_calendar .wp-calendar-table {
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.widget_calendar .wp-calendar-table caption {
  margin-block-end: 0.55rem;
  color: var(--widget-heading, var(--text-strong));
  font-weight: var(--font-semibold);
}

.widget_calendar .wp-calendar-table :is(th, td) {
  block-size: 2.25rem;
  padding: 0.2rem;
  border: 1px solid var(--widget-border, var(--border-color-light));
  font-size: 0.86rem;
}

.widget_calendar .wp-calendar-table th {
  background: transparent;
  color: var(--widget-heading, var(--text-strong));
}

.widget_calendar .wp-calendar-table a {
  color: var(--widget-link, var(--primary-color));
  font-weight: var(--font-bold);
}

.widget_calendar .wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  margin-block-start: 0.58rem;
}

.widget :is(select, img, video, audio) {
  max-inline-size: 100%;
}

.widget select {
  inline-size: 100%;
  min-block-size: var(--control-size-touch);
  padding-inline: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-base);
  background: var(--bg-card);
  color: var(--text-main);
  font: inherit;
}

@media (width < 768px) {
  .widget select {
    font-size: 1rem;
  }
}

/* ==========================================================================
 20. Posts Widget component
 ========================================================================== */

.widget_lingo_theme_widget_posts {
  container-name: lingo-widget-posts;
  container-type: inline-size;
}

.lingo-widget-posts {
  --widget-post-thumb-width: 110px;
  --widget-post-thumb-height: 75px;
  --widget-post-gap: 15px;

  display: block;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lingo-widget-posts__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--widget-post-thumb-width) minmax(0, 1fr);
  align-items: start;
  gap: var(--widget-post-gap);
  min-inline-size: 0;
  margin: 0;
  padding-block: 8px;
}

.lingo-widget-posts__item:first-child {
  padding-block-start: 0;
}

.lingo-widget-posts__item:last-child {
  padding-block-end: 0;
}

.lingo-widget-posts__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  inline-size: var(--widget-post-thumb-width);
  block-size: var(--widget-post-thumb-height);
}

.lingo-widget-posts__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lingo-widget-posts__title {
  display: -webkit-box;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--widget-link, var(--text-main));
  font-size: 14px;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lingo-widget-posts__title:is(:hover, :focus-visible) {
  color: var(--widget-link-hover, var(--primary-color-dark));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lingo-widget-posts__item.no-thumb {
  grid-template-columns: minmax(0, 1fr);
}

.lingo-widget-posts.has-media-overlay .lingo-widget-posts__media-icon {
  position: absolute;
  inset-inline-end: 0.35rem;
  inset-block-end: 0.35rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-circle);
  background: var(--overlay-scrim-strong);
}

.lingo-widget-posts.has-media-overlay .lingo-widget-posts__media-icon::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 54%;
  border-block: 0.25rem solid transparent;
  border-inline-start: 0.4rem solid var(--color-white);
  content: "";
  transform: translate(-50%, -50%);
}

/* One editorial lead followed by the shared compact list. */
.lingo-widget-posts.is-style-featured-first .lingo-widget-posts__item:first-child {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block-start: 0;
}

:where(.lingo-widget-posts.is-style-featured-first)
  .lingo-widget-posts__item:first-child
  .lingo-widget-posts__thumb {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
}

:where(.lingo-widget-posts.is-style-featured-first)
  .lingo-widget-posts__item:first-child
  .lingo-widget-posts__title {
  font-size: 18px;
  -webkit-line-clamp: 2;
}

/* The grid starts as one column and responds to its widget wrapper. */
.lingo-widget-posts.is-style-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.lingo-widget-posts.is-style-grid .lingo-widget-posts__item {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: 0;
  border-block-end: 0;
}

.lingo-widget-posts.is-style-grid .lingo-widget-posts__thumb {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
}

.lingo-widget-posts.is-style-grid .lingo-widget-posts__title {
  font-size: var(--text-sm);
  -webkit-line-clamp: 4;
}

/*
 * A sidebar is navigation, not an editorial feed. Keep saved grid styles as
 * compact media rows here to remove the long feed-like geometry observed in
 * production. The stable list boundary remains available for an account-side
 * AdSense excluded-area rule without styling provider-owned elements.
 */
:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid {
  display: block;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__item {
  grid-template-columns: var(--widget-post-thumb-width) minmax(0, 1fr);
  align-content: normal;
  align-items: start;
  gap: var(--widget-post-gap);
  padding-block: 8px;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__item:first-child {
  padding-block-start: 0;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__item:last-child {
  padding-block-end: 0;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__thumb {
  inline-size: var(--widget-post-thumb-width);
  block-size: var(--widget-post-thumb-height);
  aspect-ratio: auto;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__title {
  -webkit-line-clamp: 3;
}

:where(.lingo-sidebar) .lingo-widget-posts.is-style-grid .lingo-widget-posts__item.no-thumb {
  grid-template-columns: minmax(0, 1fr);
}

@container lingo-widget-posts (max-width: 18rem) {
  .lingo-widget-posts {
    --widget-post-thumb-width: 72px;
    --widget-post-thumb-height: 54px;
    --widget-post-gap: 10px;
  }
}

@container lingo-widget-posts (min-width: 20rem) {
  .lingo-widget-posts.is-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports not (container-type: inline-size) {
  @media (width >= 992px) {
    .widget_lingo_theme_widget_posts .lingo-widget-posts.is-style-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* ==========================================================================
 21. Footer
 ========================================================================== */

.site-footer {
  --footer-surface: var(--lingo-footer);
  --footer-info-surface: color-mix(in srgb, var(--footer-surface) 92%, black);
  --footer-text-strong: var(--color-white);
  --footer-text-muted: color-mix(in srgb, var(--lingo-footer-text) 82%, transparent);
  --footer-divider: color-mix(in srgb, var(--lingo-footer-text) 22%, transparent);

  inline-size: 100%;
  max-inline-size: 100%;
  margin-block-start: 50px;
  border-block-start: 8px solid var(--lingo-accent);
  color: var(--lingo-footer-text);
  background: var(--footer-surface);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-link);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--footer-text-strong);
}

.site-footer a:focus-visible {
  outline-color: var(--footer-text-strong);
  outline-offset: 3px;
}

:where(#footer-widgets-container) {
  padding-block: 2rem;
}

.footer-widget-area {
  --widget-text: var(--lingo-footer-text);
  --widget-text-muted: var(--footer-text-muted);
  --widget-heading: var(--footer-text-strong);
  --widget-link: var(--lingo-footer-text);
  --widget-link-hover: var(--footer-text-strong);
  --widget-border: var(--footer-divider);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.25rem;
  text-align: start;
}

.footer-widget-area .widget {
  min-inline-size: 0;
  margin: 0;
  color: inherit;
  background: transparent;
}

.footer-widget-area .widget-title {
  margin-block: 0 0.75rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--footer-divider);
  color: var(--footer-text-strong);
  font-size: 1rem;
}

.site-info {
  padding-block: 20px;
  color: var(--footer-text-muted);
  background: var(--footer-info-surface);
  font-size: 0.8125rem;
  line-height: 2rem;
  text-align: center;
}

.footer-content {
  display: block;
}

.footer-content > * + * {
  margin-block-start: 0.625rem;
}

.copyright-text,
.copyright-text p {
  margin: 0;
}

.copyright-text-first {
  color: var(--lingo-footer-text);
}

.footer-menu .menu,
.social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu .menu {
  gap: 0 0.625rem;
}

.footer-menu a {
  display: block;
  min-block-size: 2rem;
  padding-inline: 0.15rem;
  line-height: 2rem;
}

.footer-menu :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a {
  color: var(--footer-text-strong);
}

.social-icons {
  gap: 0.5rem;
}

.social-icons a {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--footer-divider);
  border-radius: 50%;
}

.social-icons svg {
  inline-size: 1rem;
  block-size: 1rem;
  fill: currentcolor;
}

.social-icon-fallback {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: currentcolor;
}

@media (width < 992px) {
  .site-footer {
    margin-block-start: 30px;
  }

  .social-icons a {
    inline-size: 3rem;
    block-size: 3rem;
  }

  .social-icons svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
}

@media (forced-colors: active) {
  .site-footer a:focus-visible {
    outline-color: CanvasText;
  }
}

/* ==========================================================================
 22. Author identity, archives, directory, and profile
 ========================================================================== */

.post-author-box {
  --author-border: color-mix(in srgb, var(--primary-color) 16%, var(--border-color) 84%);

  inline-size: 100%;
  margin-block: clamp(2rem, 5vw, 3rem) 0;
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-block: 1px solid var(--author-border);
}

.author-archive-header,
.author-profile__header {
  margin-block-end: var(--entry-shell-stack-gap);
}

.author-profile__identity {
  max-inline-size: 100%;
}

.entry-footer .post-author-box {
  max-inline-size: min(100%, var(--entry-content-max-width, var(--size-reading, 54rem)));
  margin-inline: auto;
}

.post-author-box-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.author-avatar {
  align-self: start;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-circle);
}

.author-avatar-link,
.author-avatar img,
.author-avatar .avatar {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.author-avatar img,
.author-avatar .avatar {
  object-fit: cover;
  border-radius: inherit;
}

.author-info,
.post-author-box-meta {
  min-inline-size: 0;
  text-align: start;
}

.author-info > * + * {
  margin-block-start: 0.9rem;
}

.post-author-box-meta > * + * {
  margin-block-start: 0.42rem;
}

.author-kicker,
.author-role,
.author-bio,
.author-archive,
.author-name {
  margin: 0;
}

.author-kicker {
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.author-name {
  color: var(--text-main);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: var(--font-bold);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.author-name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-ui);
}

.author-name a:hover,
.author-profile-latest-posts a:hover {
  color: var(--primary-color);
}

.author-name a:focus-visible,
.author-archive-link:focus-visible,
.post-author-box-social a:focus-visible,
.authors-directory .author-card a:focus-visible,
.author-profile-latest-posts a:focus-visible {
  outline: 3px solid var(--focus-outline-strong);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.author-role {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: var(--font-semibold);
}

.author-bio {
  max-inline-size: 70ch;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.author-box-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--author-border);
}

.author-box-actions-compact,
.post-author-box-profile-page .author-box-actions {
  justify-content: flex-start;
}

.author-archive {
  display: flex;
  flex: 1 1 15rem;
  flex-wrap: wrap;
  align-items: center;
}

.author-archive-link,
.post-author-box-social a {
  display: inline-flex;
  min-block-size: var(--control-size-touch);
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.author-archive-link:hover,
.post-author-box-social a:hover {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-author-box-social,
.post-author-box-social ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-author-box-social {
  flex: 0 1 auto;
}

.post-author-box-social li {
  margin: 0;
}

.post-author-box-profile-page .author-kicker,
.post-author-box-profile-page .author-archive {
  display: none;
}

.post-author-box-profile-page .author-box-actions {
  padding-block-start: 0;
  border-block-start: 0;
}

.post-author-box-archive {
  margin-block: 0.4rem 0.8rem;
}

.post-author-box-archive .author-avatar {
  inline-size: 4.75rem;
  block-size: 4.75rem;
}

.post-author-box-archive .author-name {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.author-profile-page-template .post-author-box-profile-page {
  margin-block-start: 0.9rem;
}

.author-profile-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.75rem;
  margin-block: 0.9rem 1.1rem;
}

.author-fact-card,
.author-profile-section {
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--border-color);
}

.author-fact-label {
  display: block;
  margin-block-end: 0.3rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.author-fact-value {
  display: block;
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: var(--font-bold);
}

.author-profile-section {
  margin-block-end: 1rem;
}

.author-profile-section-title {
  margin: 0 0 0.65rem;
  color: var(--text-main);
  font-size: 1.12rem;
  font-weight: var(--font-bold);
}

.author-profile-section-text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.author-profile-tags,
.author-profile-list,
.author-profile-latest-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.author-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.author-profile-tags li {
  padding-block: 0.25rem;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: var(--font-semibold);
}

.author-profile-list li {
  position: relative;
  margin-block-end: 0.35rem;
  padding-inline-start: 1rem;
}

.author-profile-list li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--primary-color);
  content: "\2022";
}

.author-profile-latest-posts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  padding-block: 0.5rem;
  border-block-end: 1px dashed var(--border-color);
}

.author-profile-latest-posts a {
  min-inline-size: 0;
  color: var(--text-main);
  font-weight: var(--font-semibold);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.author-profile-latest-posts span {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.authors-directory {
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
}

.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.authors-directory .author-card {
  min-inline-size: 0;
  padding: 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  text-align: center;
}

.authors-directory .author-card > * + * {
  margin-block-start: 0.65rem;
}

.author-directory__avatar {
  display: block;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-circle);
}

.author-directory__avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.author-directory__name,
.author-directory__count {
  margin: 0;
}

.author-directory__name {
  font-size: 1.08rem;
  line-height: var(--leading-heading);
}

.author-directory__name a {
  color: var(--text-main);
  text-decoration: none;
}

.author-directory__name a:hover {
  color: var(--primary-color);
}

.author-directory__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.author-directory__pagination {
  margin-block-start: 1.5rem;
}

@media (width < 992px) {
  .post-author-box {
    padding-block: 1.15rem;
  }

  .post-author-box-head {
    gap: 0.85rem;
  }

  .author-avatar {
    inline-size: 4.5rem;
    block-size: 4.5rem;
  }
}

@media (width < 768px) {
  .post-author-box-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .author-avatar {
    inline-size: 4.25rem;
    block-size: 4.25rem;
  }

  .author-info,
  .post-author-box-meta {
    justify-items: center;
    text-align: center;
  }

  .author-box-actions,
  .author-archive,
  .post-author-box-social,
  .post-author-box-social ul {
    justify-content: center;
  }

  .author-archive {
    flex-basis: 100%;
  }

  .author-profile-latest-posts li {
    grid-template-columns: minmax(0, 1fr);
  }

  .author-profile-latest-posts span {
    justify-self: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
 23. Tables
 ========================================================================== */

:where(.single .entry-content .wp-block-table),
:where(.single) .entry-content .lingo-responsive-table {
  margin-block: 2.5rem;
  margin-inline: 0;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  box-shadow: none;
}

:where(.single .entry-content .wp-block-table) {
  font-size: 1.12rem;
  line-height: 1.55;
  border-radius: var(--radius-card);
  overflow-y: hidden;
  transition: border-color var(--transition-ui);
}

:where(.single) .entry-content .lingo-responsive-table {
  border-radius: var(--radius-lg);
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)),
:where(.single .entry-content .wp-block-table table) {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)) {
  font-size: 1.12rem;
  line-height: 1.55;
}

/* Block typography belongs to the figure targeted by Global Styles. */
:where(.single .entry-content .wp-block-table table) {
  font-size: inherit;
  line-height: inherit;
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)) :is(th, td),
:where(.single .entry-content .wp-block-table :is(th, td)) {
  padding: 0.5rem 0.62rem;
  border-inline-end: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* Defaults must yield to WordPress cell alignment and authored table colors.
 * Transparent cells leave row stripes and ancestor backgrounds visible. */
:where(.single .entry-content table :is(th, td)) {
  background: transparent;
  color: inherit;
  text-align: start;
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)) th,
:where(.single .entry-content .wp-block-table th) {
  font-weight: var(--font-bold);
}

:where(.single .entry-content table th):not(:where(.has-text-color, .has-text-color *)) {
  color: var(--primary-color);
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)) tr > :last-child,
:where(.single .entry-content .wp-block-table tr > :last-child) {
  border-inline-end: 0;
}

:where(.single) .entry-content table:not(:where(.wp-block-table *)) tbody tr:last-child td,
:where(.single .entry-content .wp-block-table tbody tr:last-child td) {
  border-bottom: 0;
}

:where(.single .entry-content)
  table:where(:not(.has-background, .has-background *, .is-style-stripes *))
  tbody
  tr:hover
  td:where(:not(.has-background, .has-background *)) {
  background: var(--surface-table-hover);
}

:where(.post-content:not(.single-disable-responsive-tables))
  .entry-content
  .wp-block-table:has(> .lingo-responsive-table) {
  overflow: visible;
}

:where(.post-content:not(.single-disable-responsive-tables))
  .entry-content
  .wp-block-table
  > .lingo-responsive-table {
  margin-block: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

:where(.post-content:not(.single-disable-responsive-tables))
  .entry-content
  .lingo-responsive-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.post-content:not(.single-disable-responsive-tables)) .entry-content table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

:where(.post-content:not(.single-disable-responsive-tables)) .entry-content table :is(th, td) {
  background-clip: padding-box;
}

/* A minimum table width requires an actual scrolling container. */
:where(.post-content:not(.single-disable-responsive-tables))
  .entry-content
  .lingo-responsive-table
  table {
  min-width: 520px;
}

/* Opt in for compact data tables; prose cells wrap by default. */
.entry-content table.lingo-table--nowrap :is(th, td) {
  white-space: nowrap;
}

/* ==========================================================================
 24. WordPress Block Compatibility
 ========================================================================== */

:where(.entry-content :is(.wp-block-quote, .wp-block-pullquote)) {
  padding: 0.5rem 1rem;
  border: 0;
  border-inline-start: 4px solid var(--primary-color);
  font-size: 1.03rem;
  line-height: 1.85;
}

:where(.entry-content :is(.wp-block-quote, .wp-block-pullquote) p:last-child) {
  margin-bottom: 0;
}

/* HTML5 classic galleries emitted by the WordPress gallery shortcode.
 * Gutenberg keeps its own gallery layout and authored controls. */
.entry-content .gallery:not(.wp-block-gallery) {
  --lingo-gallery-columns: 3;

  display: grid;
  grid-template-columns: repeat(var(--lingo-gallery-columns), minmax(0, 1fr));
  gap: var(--lingo-gallery-gap, 1rem);
  margin-block: 1.5rem;
  margin-inline: 0;
}

.entry-content .gallery.gallery-columns-1 {
  --lingo-gallery-columns: 1;
}

.entry-content .gallery.gallery-columns-2 {
  --lingo-gallery-columns: 2;
}

.entry-content .gallery.gallery-columns-3 {
  --lingo-gallery-columns: 3;
}

.entry-content .gallery.gallery-columns-4 {
  --lingo-gallery-columns: 4;
}

.entry-content .gallery.gallery-columns-5 {
  --lingo-gallery-columns: 5;
}

.entry-content .gallery.gallery-columns-6 {
  --lingo-gallery-columns: 6;
}

.entry-content .gallery.gallery-columns-7 {
  --lingo-gallery-columns: 7;
}

.entry-content .gallery.gallery-columns-8 {
  --lingo-gallery-columns: 8;
}

.entry-content .gallery.gallery-columns-9 {
  --lingo-gallery-columns: 9;
}

.entry-content .gallery:not(.wp-block-gallery) > .gallery-item {
  float: none;
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
  margin: 0;
  text-align: center;
}

.entry-content .gallery:not(.wp-block-gallery) > br {
  display: none;
}

.entry-content .gallery:not(.wp-block-gallery) > :not(.gallery-item):not(br) {
  grid-column: 1 / -1;
}

.entry-content .gallery-icon :is(a, img),
.entry-content .wp-caption img[class*="wp-image-"] {
  display: block;
}

.entry-content .gallery-icon img,
.entry-content .wp-caption:not(.alignleft):not(.alignright) {
  margin-inline: auto;
}

.entry-content .gallery-caption {
  margin-block: 0.5rem 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (width < 768px) {
  .entry-content .gallery:not(.wp-block-gallery):not(.gallery-columns-1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 480px) {
  .entry-content .gallery:not(.wp-block-gallery):not(.gallery-columns-1) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Gutenberg compatibility edges retained across current and legacy markup. */
/* A group's chosen text color also supplies its uncustomized headings. */
:where(.entry-content)
  .wp-block-group:where(.has-text-color)
  :where(h1, h2, h3, h4, h5, h6):not(:where(.has-text-color)) {
  color: inherit;
}

.entry-content .blocks-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: clamp(0.55rem, 1.5vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-content .blocks-gallery-grid .blocks-gallery-item {
  min-inline-size: 0;
  margin: 0;
}

.entry-content .blocks-gallery-grid figure,
.entry-content .blocks-gallery-grid img {
  inline-size: 100%;
}

.entry-content .wp-block-column {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.entry-content :is(.wp-block-cover, .wp-block-cover-image) {
  display: flex;
  max-inline-size: 100%;
  overflow: hidden;
}

.entry-content :is(.wp-block-cover, .wp-block-cover-image) > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.entry-content .wp-block-embed__wrapper {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

/* Keep social embeds centered without targeting unrelated iframes. */
.entry-content .wp-block-embed__wrapper:has(.twitter-tweet-rendered) {
  display: flex;
  justify-content: center;
}

.entry-content .wp-block-embed__wrapper .twitter-tweet-rendered {
  max-inline-size: 100%;
  margin-inline: auto;
}

/* ==========================================================================
 25. Lightbox & Popups
 ========================================================================== */

.lingo-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-lightbox);
  padding: 1.5rem;
}

.lingo-lightbox.is-open {
  display: flex;
}

.lingo-lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-base);
}

.lingo-lightbox-close {
  position: absolute;
  top: calc(
    var(--lingo-lightbox-admin-offset, var(--admin-bar-offset, 0px)) +
      max(1rem, env(safe-area-inset-top))
  );
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  width: var(--control-size-touch);
  height: var(--control-size-touch);
  border-radius: var(--radius-circle);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.42);
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.lingo-lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Scroll locking is shared with header overlays through app/scroll-lock.js.
   The document root is locked without removing #ling-container or body-level ads from
   normal flow. */

.login-box {
  padding: 1rem;
  border: 1px solid var(--border-color);
}

/* ==========================================================================
 26. Lesson entry shell and metadata
 ========================================================================== */

/* Singular lesson metadata. */
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.34rem 0.58rem;
}

.lesson-meta .lesson-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color-light) 80%);
  border-radius: var(--radius-circle);
  background: var(--lesson-primary-soft-strong);
  color: var(--primary-color);
  vertical-align: middle;
  box-shadow: none;
}

.lesson-meta .difficulty-label,
.lesson-meta .lesson-language-label {
  font-weight: var(--font-semibold);
}

.lesson-meta span:not(.lesson-meta-icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-block-size: 2rem;
  padding-block: 0.28rem;
  padding-inline: 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 0.86rem;
  line-height: 1.4;
  box-shadow: none;
}

.lesson-meta span.lesson-language-label {
  border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color-light) 76%);
  background: var(--lesson-primary-soft);
  color: var(--primary-color-dark);
  font-weight: var(--font-bold);
}

.lesson-meta :is(.lesson-language-label, .difficulty-label) a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.16em;
}

.lesson-meta :is(.lesson-language-label, .difficulty-label) a:hover {
  color: inherit;
  text-decoration: underline;
}

.lesson-resources-after-title {
  margin-block-start: 1rem;
  text-align: start;
}

.lesson-resources-after-title .vocab-box {
  margin-block-end: 0;
}

.lesson-resources-sidebar-fallback {
  display: block;
  margin: 1.25rem 0;
}

.lesson-linked-quiz {
  margin-block: var(--lesson-section-gap);
  margin-inline: 0;
}

.lesson-linked-quiz-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-block: 0 1rem;
  margin-inline: 0;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border-color-light);
  color: var(--text-main);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.lesson-linked-quiz-title::before {
  content: "";
  inline-size: 0.38rem;
  block-size: 1.35em;
  flex: 0 0 0.38rem;
  border-radius: var(--radius-full);
  background: var(--primary-color);
}

@media (width < 768px) {
  .lesson-meta span:not(.lesson-meta-icon) {
    min-block-size: 2.1rem;
    font-size: 0.875rem;
    line-height: var(--leading-normal);
    padding-block: 0.24rem;
    padding-inline: 0.54rem;
  }
}

/* ==========================================================================
 26. Lesson Vocabulary presentation
 ========================================================================== */

.vocab-box {
  --vocab-box-padding: clamp(0.9rem, 2vw, 1.25rem);

  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-block: var(--lesson-section-gap, clamp(1.5rem, 3vw, 2.25rem));
  margin-inline: 0;
  padding: var(--vocab-box-padding);
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, var(--border-color) 88%);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: none;
  text-align: start;
}

.vocab-box::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--vocab-box-padding);
  block-size: 3px;
  border-radius: 0;
  background: var(--primary-color);
}

.vocab-box h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-block: 0 1rem;
  margin-inline: 0;
  padding-block: 0.2rem 0.85rem;
  border-block-end: 1px solid var(--border-color-light);
  color: var(--text-main);
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.vocab-box h3 .lingo-icon {
  flex: 0 0 auto;
  color: var(--primary-color);
}

.vocab-box-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: center;
  margin-block-end: 1rem;
  justify-content: initial;
}

.vocab-box-toolbar > * {
  min-width: 0;
}

.vocab-toggle-translation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-size-touch);
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-light);
  background: var(--bg-card);
  color: var(--text-main);
  padding-block: 0.45rem;
  padding-inline: 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color var(--transition-ui),
    border-color var(--transition-ui),
    color var(--transition-ui);
}

@media (hover: hover) and (pointer: fine) {
  .vocab-toggle-translation:hover {
    border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color-light) 66%);
    background: var(
      --lesson-primary-soft,
      color-mix(in srgb, var(--primary-color) 6%, var(--bg-card) 94%)
    );
    color: var(--primary-color-dark);
    box-shadow: none;
  }
}

.vocab-toggle-translation[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-light) 68%);
  background: var(
    --lesson-primary-soft-strong,
    color-mix(in srgb, var(--primary-color) 10%, var(--bg-card) 90%)
  );
  color: var(--primary-color-dark);
}

.vocab-toggle-translation:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--lesson-focus-ring, var(--shadow-focus-ring));
}

.vocab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.25rem;
  font-weight: var(--font-bold);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-meta);
  padding: 0.35rem 0.55rem;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.vocab-list,
.vocab-box .vocab-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vocab-box .vocab-list > .vocab-item {
  margin: 0;
}

.vocab-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(0.72rem, 1.4vw, 0.9rem);
  border: 0;
  border-block-end: 1px solid var(--border-color-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    background-color var(--transition-ui),
    border-color var(--transition-ui);
}

.vocab-item:focus-within {
  border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color-light) 58%);
  background: var(--bg-card);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .vocab-item:hover {
    border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-light) 68%);
    background: var(--bg-card);
    box-shadow: none;
  }
}

.vocab-box.vocab-direction-ltr .vocab-item {
  direction: ltr;
  text-align: start;
}

.vocab-word {
  font-weight: var(--font-bold);
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vocab-trans {
  color: var(--text-meta);
  flex: 1;
  min-width: 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.vocab-speak-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-circle);
  width: var(--control-size-touch);
  height: var(--control-size-touch);
  flex: 0 0 var(--control-size-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary-color);
  box-shadow: none;
  transition:
    background-color var(--transition-ui),
    color var(--transition-ui),
    border-color var(--transition-ui);
}

.vocab-speak-btn.playing {
  background: var(--primary-color);
  color: var(--color-white);
  border-color: var(--primary-color);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .vocab-speak-btn:hover {
    background: var(--primary-color);
    color: var(--color-white);
    border-color: var(--primary-color);
    box-shadow: none;
  }
}

.vocab-speak-btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: var(--lesson-focus-ring, var(--shadow-focus-ring));
}

/* Component-owned responsive rules. */
@media (width < 768px) {
  .vocab-box {
    --vocab-box-padding: 0.85rem;

    margin-block: 1.5rem;
  }

  .vocab-box h3 {
    align-items: flex-start;
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .vocab-box-toolbar {
    align-items: stretch;
  }

  .vocab-count {
    min-inline-size: 4.5rem;
  }

  .vocab-toggle-translation {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .vocab-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-size-touch);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    padding: 0.75rem;
  }

  .vocab-word,
  .vocab-trans {
    grid-column: 1;
    text-align: start;
  }

  .vocab-word {
    grid-row: 1;
    font-size: 1rem;
  }

  .vocab-trans {
    grid-row: 2;
  }

  .vocab-box.vocab-direction-ltr .vocab-speak-btn,
  .vocab-speak-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    place-self: center end;
    margin: 0;
  }
}

/* ==========================================================================
 26. Lesson-linked quiz presentation
 ========================================================================== */

/* Lesson Quiz */
.lesson-quiz-box {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 1.5rem;
  margin: 2rem 0;
}

.lesson-quiz-box h3 {
  margin-top: 0;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quiz-question {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.quiz-opt-btn {
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  padding: 0.8rem;
  text-align: start;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  font-family: inherit;
  font-size: 1rem;
  line-height: var(--leading-normal);
  color: var(--text-main);
}

.quiz-opt-btn:hover:not(:disabled) {
  background: var(--border-color);
}

.quiz-opt-btn.correct {
  background-color: var(--surface-quiz-pass);
  border-color: var(--border-quiz-pass);
  color: var(--text-quiz-pass);
}

.quiz-opt-btn.wrong {
  background-color: var(--surface-quiz-fail);
  border-color: var(--border-quiz-fail);
  color: var(--text-quiz-fail);
}

.quiz-feedback {
  margin-top: 1rem;
  font-weight: bold;
  min-height: 1.5rem;
}

.quiz-feedback.correct {
  color: var(--color-success-text);
}

.quiz-feedback.wrong {
  color: var(--color-error);
}

/* ==========================================================================
 26. Learning icon contracts
 ========================================================================== */

/* Lesson-owned icon masks. */

.lingo-icon--translation {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\1F310";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 4h9v2H9.8c.8 1.9 2 3.6 3.6 4.9l-1.4 1.4c-.7-.6-1.3-1.3-1.9-2.1-.8 1.2-1.7 2.3-2.8 3.2L6 12.1c1.4-1.1 2.6-2.5 3.5-4.1H5V6h4V4zm11 5l4 11h-2.1l-.9-2.5h-4L12 20H9.9l4-11H16zm.3 6.7L15 11.9l-1.3 3.8h2.6z'/></svg>");
}

.lingo-icon--flashcards {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\25A3";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 5h10a2 2 0 0 1 2 2v10H6a2 2 0 0 1-2-2V5zm14 2h2v12a2 2 0 0 1-2 2H8v-2h10V7zM7 15h8l-2.5-3.2-2 2.4-1.5-1.9L7 15z'/></svg>");
}

.lingo-icon--context {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2261";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v3h14V6H5zm0 5v3h4v-3H5zm6 0v3h8v-3h-8zm-6 5v2h4v-2H5zm6 0v2h8v-2h-8z'/></svg>");
}

.lingo-icon--listening {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\1F50A";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 9h3l4-4v14l-4-4H5V9zm10.5 3a3.5 3.5 0 0 0-1.8-3.1v6.2c1.1-.6 1.8-1.7 1.8-3.1zm2.5 0c0 2.3-1.3 4.2-3.3 5.2v-2.2a3.5 3.5 0 0 0 0-6v-2.2c2 1 3.3 2.9 3.3 5.2z'/></svg>");
}

.lingo-icon--grammar {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2713";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12.7 4 18 18h-2.2l-1.2-3.2H9.4L8.2 18H6L11.3 4h1.4zm1.1 8.9L12 7.9l-1.8 5h3.6zM19.6 19.8l-3-3 1.2-1.2 1.8 1.8 3.4-3.4 1.2 1.2-4.6 4.6z'/></svg>");
}

.lingo-icon--word-duel {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2605";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 3h10v3a5 5 0 1 1-10 0V3zm2 12h6l1.5 6-4.5-2-4.5 2L9 15z'/></svg>");
}

.lingo-icon--book {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\25A4";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M5 4h12a2 2 0 0 1 2 2v12h-2V6H7v12H5V4zm3 4h7v2H8V8zm0 4h7v2H8v-2z'/></svg>");
}

.lingo-icon--previous {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2039";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M14.7 5.3 8 12l6.7 6.7-1.4 1.4L5.2 12l8.1-8.1z'/></svg>");
}

.lingo-icon--next {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\203A";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.3 5.3 16 12l-6.7 6.7 1.4 1.4 8.1-8.1-8.1-8.1z'/></svg>");
}

.lingo-icon--microphone {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\1F3A4";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 15a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-1 3.9V22h2v-3.1a6 6 0 0 0 5-5.9h-2a4 4 0 0 1-8 0H6a6 6 0 0 0 5 5.9z'/></svg>");
}

.lingo-icon--pause {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\2016";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 5h4v14H7V5zm6 0h4v14h-4V5z'/></svg>");
}

.lingo-icon--play {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\25B6";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>");
}

.lingo-icon--refresh {
  --lingo-icon-background: currentcolor;
  --lingo-icon-fallback: "\21BB";
  --lingo-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 6V3l4 4-4 4V8a4 4 0 1 0 4 4h2a6 6 0 1 1-6-6z'/></svg>");
}

/* ==========================================================================
 27. Modern Layout Architecture (2026)
 ========================================================================== */

/* Keep the article flexible, constrain ordinary content, and preserve the
 * native WordPress wide/full alignment signals. */

.main-content .entry-supplement {
  inline-size: 100%;
  max-inline-size: var(--layout-reading-inline-size);
  margin-inline: auto;
}

.post-content
  > .entry-content
  > :where(
    :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.lingo-ad-slot):not(
        .google-auto-placed
      ):not(.adsbygoogle)
  ) {
  /* Limit block flow without stretching inline controls or hidden labels. */
  max-inline-size: var(--layout-reading-inline-size);
}

/* Keep legacy prose centered while authored quote/list/table margins win over
 * their defaults. Width constraints stay in the structural rule above. */
.post-content
  > .entry-content
  > :where(
    :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.lingo-ad-slot):not(
        .google-auto-placed
      ):not(.adsbygoogle):not(.wp-block-quote, .wp-block-pullquote, .wp-block-list, .wp-block-table)
  ),
:where(.post-content > .entry-content)
  > :where(
    :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.lingo-ad-slot):not(
        .google-auto-placed
      ):not(.adsbygoogle)
  ) {
  margin-inline: auto;
}

.entry-content > .alignwide {
  inline-size: 100%;
  max-inline-size: var(--layout-wide-max, var(--size-content, 75rem));
  margin-inline: auto;
}

.entry-content > .alignfull {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

/* Prevent accidental overflow for embedded content without global iframe targeting. */
.entry-content :where(.wp-block-embed, .wp-block-image, .wp-block-table, figure) {
  max-inline-size: 100%;
}

@supports (text-wrap: balance) {
  .entry-title:not(.post-title) {
    text-wrap: balance;
  }
}

/* ==========================================================================
 29. Responsive content shell below desktop chrome
 ========================================================================== */

@media (width < 992px) {
  :root {
    --entry-shell-flow-space: 0.96rem;
  }

  body.mobile-hide-read-more .read-more-link {
    display: none;
  }

  /*
   * Restore the `.entry-title:not(.post-title)` size constraint removed in
   * v3.0.55. The compact `loop-mini.php` template only emits the
   * `.post-mini__title.entry-title` heading; without this rule its size on
   * tablet/mobile collapsed to the browser h3 default.
   *
   * Range tightened from clamp(1.8rem, 6.5vw, 2.2rem) to clamp(1.2rem, 3vw,
   * 1.5rem) so the title stays proportional to `.post-card__title` (1rem-
   * 1.35rem) and reads above `.entry-content` (1.0625rem on this breakpoint).
   */
  .entry-title:not(.post-title) {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: var(--leading-snug);
  }

  .entry-content {
    padding-inline: 0;
    font-size: max(1.0625rem, calc(var(--entry-content-configured-font-size, 1.17rem) - 1px));
    line-height: 1.86;
  }

  .entry-content img,
  .entry-content video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* WordPress owns the dimensions of blocks with an explicit aspect ratio. */
  .wp-block-embed.is-type-video:not(.wp-has-aspect-ratio) > .wp-block-embed__wrapper > iframe {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
 30. Responsive phone contract
 ========================================================================== */

@media (width < 768px) {
  :root {
    --entry-shell-flow-space: 0.92rem;
    --site-content-padding-bottom-mobile: 1.05rem;
  }

  .entry-content {
    line-height: 1.82;
  }

  /* iOS input zoom prevention */
  input:not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* Entry-content overflow protection */
  .entry-content pre {
    max-width: 100%;
  }

  .entry-content
    blockquote:not(:where(.wp-block-quote, .wp-block-pullquote, .wp-block-pullquote *)) {
    padding: 0.75rem 1rem;
  }

  .lingo-ad-slot--mobile-hidden {
    display: none;
  }

  .lingo-ad-slot--banner-bottom {
    margin-block: 1.875rem 0.3125rem;
  }
}

/* ==========================================================================
 32. Responsive compact phone
 ========================================================================== */

@media (width <= 480px) {
  :root {
    --entry-shell-flow-space: 0.88rem;
  }

  :where(#theme-header) .logo-container {
    --header-brand-gap-mobile: var(--header-brand-gap-mobile-tight);
  }

  .entry-content {
    font-size: max(1rem, calc(var(--entry-content-configured-font-size, 1.17rem) - 2px));
    line-height: 1.78;
  }

  /* Floated classic alignments stack full-width on small phones. */
  .entry-content .alignleft:where(:not(.lingo-ad-slot, .google-auto-placed, .adsbygoogle)),
  .entry-content .alignright:where(:not(.lingo-ad-slot, .google-auto-placed, .adsbygoogle)) {
    float: none;
    display: block;
    max-width: 100%;
    margin-block: 1.5rem;
    margin-inline: auto;
  }
}

/* ==========================================================================
 36. Theme Option States
 ========================================================================== */

/* Finite option choices live on the component that owns their behavior;
   numeric and color choices consume typed runtime custom properties. */

body.lingo-font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.entry-content :is(.grammar-verb, .verb) {
  color: var(--lingo-grammar-verb-color);
}

.entry-content :is(.grammar-noun, .noun) {
  color: var(--lingo-grammar-noun-color);
}

.entry-content :is(.grammar-particle, .particle) {
  color: var(--lingo-grammar-particle-color);
}

/* Finite appearance choices. */
body.lingo-bg-pattern-dots {
  background-image: radial-gradient(var(--text-meta) 0.75px, transparent 0.75px);
  background-size: 18px 18px;
  background-attachment: fixed;
}

body.lingo-bg-pattern-grid {
  background-image:
    linear-gradient(to right, var(--text-meta) 1px, transparent 1px),
    linear-gradient(to bottom, var(--text-meta) 1px, transparent 1px);
  background-size: 26px 26px;
  background-attachment: fixed;
}

:where(#theme-header).lingo-nav-type-compact .main-menu-wrap a {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
}

:where(#theme-header).lingo-nav-type-strong .main-menu-wrap a {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.post-content.lingo-title-type-compact .entry-title {
  font-size: 1.65rem;
  line-height: 1.35;
  font-weight: 700;
}

.post-content.lingo-title-type-display .entry-title {
  font-size: 2.15rem;
  line-height: 1.2;
  font-weight: 800;
}

body.lingo-card-shadow-soft :is(.post-card, .video-card, .widget) {
  box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}

body.lingo-title-transform-uppercase
  :is(.section-title, .widget-title, .related-posts-section .section-title) {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.lingo-title-transform-capitalize
  :is(.section-title, .widget-title, .related-posts-section .section-title) {
  text-transform: capitalize;
}

:where(#theme-header).lingo-no-header-border {
  --header-divider-width: 0px;
}

@media (width >= 992px) {
  :where(#theme-header).lingo-header-header-1 :where(#logo) {
    justify-content: flex-start;
    margin-inline-end: auto;
    text-align: start;
  }

  :where(#theme-header).lingo-header-header-1 :where(#main-nav-menu) > .primary-menu {
    justify-content: flex-start;
  }
}

body.lightbox-theme-dark .lingo-lightbox {
  background: rgb(0 0 0 / 88%);
}

body.lightbox-theme-dark .lingo-lightbox-close {
  background: #111;
  color: #fff;
}

body.lightbox-theme-light .lingo-lightbox {
  background: rgb(255 255 255 / 92%);
}

body.lightbox-theme-light .lingo-lightbox-close {
  background: #fff;
  color: #222;
}

body.lightbox-theme-light .lingo-lightbox-close:focus-visible {
  outline-color: currentcolor;
}

.post-content.lingo-audio-minimal :is(.entry-content audio, .wp-block-audio audio) {
  width: min(260px, 100%);
  height: 34px;
}

.post-content :is(.entry-content audio, .wp-block-audio audio) {
  width: 100%;
  max-width: 640px;
}

.post-content.lingo-vocab-rtl :is(.entry-content .vocabulary-table, .entry-content .vocab-table) {
  direction: rtl;
  text-align: right;
}

.post-content.lingo-vocab-ltr :is(.entry-content .vocabulary-table, .entry-content .vocab-table) {
  direction: ltr;
  text-align: left;
}

/* Mobile state and icon choices. */
@media (width < 992px) {
  body.mobile-hide-footer :where(#footer-widgets-container),
  body.mobile-hide-copyright .site-info {
    display: none;
  }

  body.mobile-hide-footer.mobile-hide-copyright .site-footer {
    display: none;
  }

  body.mobile-hide-author-box .post-author-box,
  body.mobile-hide-post-navigation .post-navigation,
  body.mobile-hide-share-buttons .post-share,
  body.mobile-hide-related-posts .related-posts-section {
    display: none;
  }

  :where(#theme-header).lingo-mobile-icons-1 .mobile-header-components .header-icon-btn {
    border: 1px solid rgb(15 23 42 / 14%);
    border-radius: var(--radius-base);
    background: transparent;
    font-size: 1.3rem;
  }

  :where(#theme-header).lingo-mobile-icons-2 .mobile-header-components .header-icon-btn {
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.3rem;
  }
}

/* ==========================================================================
 37. Forced colors after component and option-state declarations
 ========================================================================== */

@media (forced-colors: active) {
  :focus-visible {
    outline-color: CanvasText;
    outline-width: 2px;
    outline-offset: 2px;
  }

  .share-btn:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }

  .lingo-search-form__field:focus,
  .search-field:focus {
    outline-color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }

  /* Third-party cookie/consent styles may reset button outlines with
     !important. Keep keyboard focus visible in Windows High Contrast. */
  .lesson-game-pill:focus-visible,
  .lesson-game-item .quiz-opt-btn:focus-visible,
  .vc-card:focus-visible,
  .vc-nav:focus-visible,
  .vc-mini-btn:focus-visible,
  .game-btn:focus-visible,
  .quiz-filter-chip:focus-visible,
  .quiz-start-btn:focus-visible,
  .quiz-card-levels a:focus-visible,
  .quiz-entry-header .quiz-meta-value a:focus-visible,
  .quiz-runtime .quiz-prev-btn:focus-visible,
  .quiz-runtime .quiz-next-btn:focus-visible,
  .quiz-runtime .quiz-option-btn:focus-visible,
  .quiz-runtime .quiz-submit-btn:focus-visible,
  .quiz-runtime .quiz-reset-best-btn:focus-visible,
  .quiz-runtime .quiz-retry-btn:focus-visible,
  .quiz-runtime .quiz-next-quiz-btn:focus-visible,
  .quiz-levels-runtime .quiz-prev-btn:focus-visible,
  .quiz-levels-runtime .quiz-next-btn:focus-visible,
  .quiz-levels-runtime .ql-option-btn:focus-visible,
  .quiz-levels-runtime .ql-level-choice-btn:focus-visible,
  .quiz-levels-runtime .ql-retry-wrong-btn:focus-visible,
  .contact-form-page-template .lingo-contact-form input:focus-visible,
  .contact-form-page-template .lingo-contact-form textarea:focus-visible,
  .contact-form-page-template .lingo-contact-form select:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
    box-shadow: none;
  }
}