/*
Theme Name: Lennard V. John
Theme URI: https://lennardjohn.org
Description: Terminal-accented child theme of Twenty Twenty-Five. Dark GitHub
             palette with a terminal-green accent, monospace for headings and
             UI chrome, readable sans for body copy.
Author: Lennard V. John
Template: twentytwentyfive
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: lennardjohn
*/

/* ---------------------------------------------------------------------
   Typography split.
   theme.json sets sans as the body default. Headings, navigation, buttons
   and code get mono - the terminal identity without making long-form
   reading tiring. This is the whole design thesis in one rule set.
   --------------------------------------------------------------------- */
.wp-block-heading,
.wp-block-navigation,
.wp-block-button__link,
.wp-block-preformatted,
.wp-block-code,
code, kbd, samp {
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   Headings. h2 gets a shell prompt marker - cheap, and it carries the
   terminal metaphor without any extra markup in the content files.
   --------------------------------------------------------------------- */
h1.wp-block-heading {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h2.wp-block-heading {
  color: var(--wp--preset--color--accent-1);
  font-weight: 600;
  margin-top: 2.5rem;
}

h2.wp-block-heading::before {
  content: "$ ";
  color: var(--wp--preset--color--accent-5);
}

/* Centred headings would look wrong with a left-anchored prompt. */
h2.wp-block-heading.has-text-align-center::before {
  content: none;
}

h3.wp-block-heading {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
  margin-top: 1.75rem;
}

/* ---------------------------------------------------------------------
   Terminal window chrome for the front page hero.
   Drawn entirely in CSS: one pseudo-element paints all three dots using
   box-shadow, the other paints the title bar text. No extra markup, and
   nothing to keep in sync with the content files.
   --------------------------------------------------------------------- */
.terminal-window {
  position: relative;
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 8px;
  background: var(--wp--preset--color--accent-3);
  padding: 3.5rem 2rem 2.5rem;
  margin-top: 1.5rem;
  box-shadow: 0 0 40px rgba(74, 222, 128, 0.05);
}

/* The three window dots. */
.terminal-window::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #28c840;
}

/* Title bar: caption + rule beneath it. */
.terminal-window::after {
  content: "lennard@homelab ~";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  color: var(--wp--preset--color--accent-2);
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
  padding-bottom: 12px;
}

/* Blinking cursor after the site owner's name on the front page. */
.terminal-window h1.wp-block-heading::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--wp--preset--color--accent-1);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: lj-blink 1s step-end infinite;
}

@keyframes lj-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Respect users who have asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .terminal-window h1.wp-block-heading::after { animation: none; }
}

/* ---------------------------------------------------------------------
   Buttons - outlined green, filling on hover, as on the original page.
   --------------------------------------------------------------------- */
.wp-block-button__link {
  border: 1px solid var(--wp--preset--color--accent-1);
  background: transparent;
  color: var(--wp--preset--color--accent-1);
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0.6rem 1.4rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------
   Lists - accent markers, roomier line height than the default.
   --------------------------------------------------------------------- */
.wp-block-list {
  line-height: 1.8;
  padding-left: 1.2rem;
}

.wp-block-list li::marker {
  color: var(--wp--preset--color--accent-1);
}

.wp-block-list strong {
  color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------
   Code / preformatted - panel background, accent text, horizontally
   scrollable so a wide diagram never forces the page to scroll sideways.
   --------------------------------------------------------------------- */
.wp-block-preformatted,
.wp-block-code {
  background: var(--wp--preset--color--accent-3);
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 6px;
  color: var(--wp--preset--color--accent-1);
  padding: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------
   Separators and links.
   --------------------------------------------------------------------- */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--wp--preset--color--accent-4);
  opacity: 1;
  margin: 2.5rem auto;
}

a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--accent-1);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:not(.wp-block-button__link):hover {
  text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
   Navigation - mono, muted until hovered.
   --------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-2);
  font-size: 0.85rem;
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------------
   Responsive navigation.

   Core only shows the hamburger below 600px:
     @media (min-width:600px){.wp-block-navigation__responsive-container-open
       :not(.always-shown){display:none}}

   That leaves tablets (iPad is 768px portrait, 1024px landscape) rendering the
   full menu - six top-level items plus submenus - which overflows the header and
   looks broken. The block's overlayMenu attribute has no breakpoint option, so
   the media query is extended here to 900px instead.

   !important is needed because core's rules are emitted as inline <style> in
   the document head, which can outrank an external stylesheet regardless of
   specificity.
   --------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) {
  /* Show the hamburger... */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  /* ...and hide the inline menu it replaces. */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   The open overlay.

   Core gives the overlay no colours of its own, so on a dark site it inherits
   whatever sits behind it. It also reuses the HEADER's justification setting
   (--navigation-layout-justification-setting) inside the overlay - our header
   nav is right-justified, so every item gets pushed to the right edge - and it
   leaves submenus carrying the styling intended for a floating desktop
   dropdown. Together that is what made the menu look unfinished.

   Everything below forces one consistent left-aligned list.
   --------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base) !important;
  padding: 5rem 1.75rem 2.5rem;
}

/* Override the inherited right-justification. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
  gap: 0;
}

/* One row per item, full width, so the whole row is a tap target rather than
   just the text. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1.05rem;
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-1);
}

/* Submenus: strip the floating-dropdown treatment and render them as an
   indented continuation of the same list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-2);
  font-size: 0.92rem;
  padding-left: 1.1rem;
  border-bottom: none;
  position: relative;
}

/* A prompt marker instead of a bullet, matching the h2 treatment elsewhere. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: "└ ";
  color: var(--wp--preset--color--accent-5);
  position: absolute;
  left: 0;
}

/* The parent row of a submenu keeps its divider; the last child restores the
   spacing the removed borders would otherwise lose. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li:last-child {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

/* Hide the submenu chevron - everything is expanded in the overlay, so an arrow
   suggesting "click to open" is misleading. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: none;
}

/* Open and close buttons. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--accent-1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  padding: 1.5rem;
}

/* ---------------------------------------------------------------------
   Narrow-screen safety.
   --------------------------------------------------------------------- */

/* The blog grid uses minimumColumnWidth: 20rem, which resolves to
   minmax(20rem, 1fr). On a 320px device the content box is narrower than 20rem,
   so the column overflows and the whole page scrolls sideways. Force a single
   column before that happens. */
@media (max-width: 26rem) {
  .lj-post-cards.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Long unbroken strings - URLs, image names, command flags - are the other
   common cause of horizontal overflow on phones. */
body {
  overflow-wrap: break-word;
}

.wp-block-post-title a,
.lj-post-cards .wp-block-post-excerpt__excerpt {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Status badges.
   Used to mark work that is genuinely unfinished, so a thin page reads as
   deliberately in progress rather than as a broken or abandoned one.
   Amber deliberately, not the accent green: green reads as "done" everywhere
   else on this site, so reusing it here would undercut the whole point.

   Usage in content files:
     <span class="lj-badge lj-badge--progress">In Progress</span>
   --------------------------------------------------------------------- */
.lj-badge {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--wp--preset--color--accent-4);
  color: var(--wp--preset--color--accent-2);
  background: var(--wp--preset--color--accent-3);
  vertical-align: middle;
  white-space: nowrap;
}

.lj-badge--progress {
  border-color: #ffbd2e;
  color: #ffbd2e;
  background: rgba(255, 189, 46, 0.08);
}

/* A badge in its own paragraph block sits directly under the page title, so
   it needs the surrounding margin collapsed. */
p.lj-badge-row {
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------
   Curriculum table. Wide tables are the classic cause of horizontal page
   scroll on phones, so the table scrolls inside its own container instead.
   --------------------------------------------------------------------- */
.lj-curriculum {
  overflow-x: auto;
  margin: 2rem 0;
}

.lj-curriculum table {
  border-collapse: collapse;
  min-width: 34rem;
}

.lj-curriculum th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--wp--preset--color--accent-5);
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.lj-curriculum td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--wp--preset--color--accent-4);
  font-size: 0.92rem;
  vertical-align: top;
}

.lj-curriculum tbody tr:hover {
  background: var(--wp--preset--color--accent-3);
}

/* Day number column - mono and accented, so the week reads as a sequence. */
.lj-curriculum td:first-child {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent-1);
  width: 3rem;
}

/* Project column carries the payoff for a parent skim-reading. */
.lj-curriculum td:last-child {
  color: var(--wp--preset--color--contrast);
}

.lj-curriculum td:nth-child(3) {
  color: var(--wp--preset--color--accent-2);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Tech camp classes and capacity bars.
   Rendered by the [lj_camp_classes] shortcode. The three states map to real
   stock levels, not decoration: open, filling (>=75% taken), and full.
   --------------------------------------------------------------------- */
.lj-classes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.lj-class {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px) auto;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 8px;
  background: var(--wp--preset--color--accent-3);
  padding: 1.25rem 1.5rem;
}

.lj-class__name {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1rem;
  margin: 0;
  color: var(--wp--preset--color--contrast);
}

.lj-class__when {
  margin: 0.3rem 0 0;
  color: var(--wp--preset--color--accent-2);
  font-size: 0.85rem;
}

/* The bar itself. */
.lj-capacity {
  height: 8px;
  border-radius: 4px;
  background: var(--wp--preset--color--accent-4);
  overflow: hidden;
}

.lj-capacity__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.lj-capacity__label {
  margin: 0.45rem 0 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  color: var(--wp--preset--color--accent-2);
}

/* State colours. Green while there is room, amber once it is filling, red when
   full - the same semantics as the In Progress badge, so the palette stays
   consistent about what each colour means. */
.lj-class.is-open .lj-capacity__fill    { background: var(--wp--preset--color--accent-1); }
.lj-class.is-filling .lj-capacity__fill { background: #ffbd2e; }
.lj-class.is-full .lj-capacity__fill    { background: #ff5f57; }

.lj-class.is-filling .lj-capacity__label strong { color: #ffbd2e; }
.lj-class.is-full    .lj-capacity__label strong { color: #ff5f57; }
.lj-class.is-open    .lj-capacity__label strong { color: var(--wp--preset--color--accent-1); }

.lj-class.is-full {
  border-color: rgba(255, 95, 87, 0.35);
}

/* A full class gets a muted button, so it is clearly a different action from
   booking rather than looking like the primary path. */
.lj-class__waitlist {
  border-color: var(--wp--preset--color--accent-2) !important;
  color: var(--wp--preset--color--accent-2) !important;
}

.lj-class__waitlist:hover {
  background: var(--wp--preset--color--accent-2) !important;
  color: var(--wp--preset--color--base) !important;
}

/* Full-day offer - visually distinct from the session rows so it reads as an
   upgrade rather than a third class. */
.lj-fullday {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 1.1rem 1.5rem;
  border: 1px dashed var(--wp--preset--color--accent-1);
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.05);
}

.lj-fullday strong {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent-1);
  font-size: 0.95rem;
}

.lj-fullday span {
  color: var(--wp--preset--color--accent-2);
  font-size: 0.85rem;
}

.lj-class__empty {
  color: var(--wp--preset--color--accent-2);
  font-style: italic;
}

/* Stack on tablets and phones - three columns in a row stop being readable
   well before the cards themselves get narrow. */
@media (max-width: 860px) {
  .lj-class {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .lj-class__action .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   Footer.
   --------------------------------------------------------------------- */
.lj-footer .wp-block-site-title {
  margin: 0;
}

.lj-footer .wp-block-site-title a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
  font-size: 1.1rem;
}

.lj-footer .wp-block-site-tagline {
  color: var(--wp--preset--color--accent-2);
  margin: 0.25rem 0 0;
}

/* Section labels, matching the "// homelab" style of the original page. */
.lj-footer__label {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent-5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.7rem !important;
  margin: 0 0 0.75rem;
}

.lj-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2;
}

.lj-footer__links li::marker {
  content: none;
}

.lj-footer__links a {
  color: var(--wp--preset--color--accent-2);
  text-decoration: none;
  font-size: 0.9rem;
}

.lj-footer__links a:hover {
  color: var(--wp--preset--color--accent-1);
}

.lj-footer__base {
  color: var(--wp--preset--color--accent-5);
  font-family: var(--wp--preset--font-family--mono);
}

.lj-footer__base p {
  margin: 0;
  color: var(--wp--preset--color--accent-5);
  font-size: 0.78rem;
}

.lj-footer__base a {
  color: var(--wp--preset--color--accent-2);
}

.lj-footer__base a:hover {
  color: var(--wp--preset--color--accent-1);
}

/* Footer columns stack on narrow screens with usable spacing. */
@media (max-width: 781px) {
  .lj-footer__cols { gap: 2rem; }
  .lj-footer__base { gap: 0.75rem; }
}

/* ---------------------------------------------------------------------
   Blog index - post cards.
   The grid itself comes from the post-template block layout in
   templates/home.html; this styles each card. Each <li> is one post.
   --------------------------------------------------------------------- */
.lj-post-cards > li {
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 8px;
  background: var(--wp--preset--color--accent-3);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.lj-post-cards > li:hover {
  border-color: var(--wp--preset--color--accent-1);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .lj-post-cards > li { transition: none; }
  .lj-post-cards > li:hover { transform: none; }
}

/* Date - small, dim, mono, sitting above the title like a log line. */
.lj-post-cards .wp-block-post-date {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent-5);
  margin: 0;
}

.lj-post-cards .wp-block-post-title {
  margin: 0;
  line-height: 1.3;
}

.lj-post-cards .wp-block-post-title a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

.lj-post-cards .wp-block-post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tags rendered as small chips. */
.lj-post-cards .wp-block-post-terms {
  margin: 0;
}

.lj-post-cards .wp-block-post-terms a {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin: 0 0.25rem 0.25rem 0;
  color: var(--wp--preset--color--accent-2);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  text-decoration: none;
}

.lj-post-cards .wp-block-post-terms a:hover {
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

/* Excerpt fills the remaining height so "Read more" aligns across cards
   of differing text length. */
.lj-post-cards .wp-block-post-excerpt {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
}

.lj-post-cards .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--accent-2);
  font-size: 0.92rem;
  line-height: 1.65;
}

.lj-post-cards .wp-block-post-excerpt__more-text {
  margin-top: auto;
  padding-top: 0.75rem;
}

.lj-post-cards .wp-block-post-excerpt__more-link {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.8rem;
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
}

.lj-post-cards .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

/* Pagination */
.wp-block-query-pagination {
  margin-top: 2.5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Single post - date and tags below the title.
   --------------------------------------------------------------------- */
.single .wp-block-post-date {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--accent-5);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------
   Columns on the front page - panelled cards.
   --------------------------------------------------------------------- */
.wp-block-columns .wp-block-column {
  border: 1px solid var(--wp--preset--color--accent-4);
  border-radius: 6px;
  padding: 1.5rem;
  background: var(--wp--preset--color--accent-3);
}

.wp-block-columns .wp-block-column h3.wp-block-heading {
  margin-top: 0;
  color: var(--wp--preset--color--accent-1);
  font-size: 1rem;
}

/* Cards stack on narrow screens; drop the fixed padding a little. */
@media (max-width: 781px) {
  .wp-block-columns .wp-block-column { padding: 1.25rem; }
  .terminal-window { padding: 3.25rem 1.25rem 2rem; }
}

/* Phones: the hero heading at its desktop size is wide enough to force
   horizontal scroll on a 320px screen, and the terminal title bar caption
   collides with the window dots. */
@media (max-width: 480px) {
  .terminal-window {
    padding: 3rem 1rem 1.75rem;
  }

  .terminal-window h1.wp-block-heading {
    font-size: 1.9rem;
  }

  /* The dots occupy the left of the title bar; centring the caption across the
     full width overlaps them at this size, so shift it clear. */
  .terminal-window::after {
    text-align: right;
    padding-right: 1rem;
  }

  h2.wp-block-heading { font-size: 1.3rem; }
  h3.wp-block-heading { font-size: 1rem; }

  .wp-block-preformatted,
  .wp-block-code { font-size: 0.75rem; }
}