/* -------------- fonts.css ------------- */
@font-face {
  font-family: "News Gothic Std";
  src: url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "News Gothic Std";
  src: url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-Oblique.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-Oblique.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "News Gothic Std";
  src: url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-Bold.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "News Gothic Std";
  src: url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-BoldOblique.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/news-gothic/NewsGothicStd-BoldOblique.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Interstate";
  src: url("/wp-content/themes/sodilibro/assets/fonts/interstate/Interstate-Regular.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/interstate/Interstate-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Interstate";
  src: url("/wp-content/themes/sodilibro/assets/fonts/interstate/Interstate-Bold.woff2") format("woff2"),
    url("/wp-content/themes/sodilibro/assets/fonts/interstate/Interstate-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* -------------- END OF fonts.css ------------- */

/* -------------- variables.css ------------- */
/* Global variables */
:root {
  /* -------------- Typography ------------- */
  /* Fonts */
  /* ↓ Default body text, paragraphs */
  --font-base: "News Gothic Std", sans-serif;
  /* ↓ Headlines, large titles, hero text */
  --font-display: "Interstate", sans-serif;
  /* ↓ Special text: pull quotes, callouts, buttons etc. */
  --font-accent: "Interstate", sans-serif;
  /* ↓ UI fallback, system-native look, accessibility contexts */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Font weight */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;

  /* Line height */
  --leading: 1.4;
  --leading-short: 1.3;
  --leading-slim: 1.2;
  --leading-fine: 1.1;
  --leading-flat: 1;
  --leading-micro: 0.8;

  /* Letter spacing */
  --kerning: normal;
  --kerning-tight: -0.04ch;
  --kerning-loose: 0.1ch;

  --heading-kerning: -0.015em;
  --heading-line-height: var(--leading-fine);
  --heading-font-family: var(--font-display);
  --heading-font-weight: var(--font-bold);

  /* Text length */
  --measure: 65ch;
  --measure-xs: 20ch;
  --measure-s: 35ch;
  --measure-m: 45ch;
  --measure-l: 75ch;

  /* fluid type scale */
  --size-step-8: clamp(2.3125rem, 0.1313rem + 10.906vi, 10.4375rem);
  --size-step-7: clamp(2.0625rem, 0.7706rem + 6.4597vi, 6.875rem);
  --size-step-6: clamp(1.8125rem, 1.0742rem + 3.6913vi, 4.5625rem);
  --size-step-5: clamp(1.6875rem, 1.2177rem + 2.349vi, 3.4375rem);
  --size-step-4: clamp(1.5625rem, 1.2773rem + 1.4262vi, 2.625rem);
  --size-step-3: clamp(1.4375rem, 1.2865rem + 0.755vi, 2rem);
  --size-step-2: clamp(1.3125rem, 1.1951rem + 0.5872vi, 1.75rem);
  --size-step-1: clamp(1.1875rem, 1.1036rem + 0.4195vi, 1.5rem);
  --size-step-0: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);
  --size-step--1: clamp(1rem, 0.9664rem + 0.1678vi, 1.125rem);
  --size-step--2: clamp(0.875rem, 0.8414rem + 0.1678vi, 1rem);
  --size-step--3: clamp(0.8125rem, 0.7957rem + 0.0839vi, 0.875rem);
  --size-step--4: clamp(0.625rem, 0.7043rem + 0.0839vi, 0.6875rem);

  --text-size-base: var(--size-step-0);
  --text-size-lede: var(--size-step-1);
  --text-size-meta: var(--size-step--1);
  --text-size-heading-1: var(--size-step-5);
  --text-size-heading-2: var(--size-step-4);
  --text-size-heading-3: var(--size-step-3);
  --text-size-heading-4: var(--size-step-2);
  --text-size-prose: var(--text-size-base);
  /* -------------- END OF Typography ------------- */

  /* -------------- Colors ------------- */
  --color-grey-1: hsl(0, 3%, 14%);
  --color-grey-2: hsl(0, 2%, 19%);
  --color-grey-3: hsl(20, 2%, 24%);
  --color-grey-4: hsl(20, 2%, 28%);
  --color-grey-5: hsl(20, 2%, 34%);
  --color-grey-6: hsl(40, 2%, 38%);
  --color-grey-7: hsl(30, 2%, 43%);
  --color-grey-8: hsl(45, 2%, 48%);
  --color-grey-9: hsl(36, 2%, 53%);
  --color-grey-10: hsl(48, 2%, 57%);
  --color-grey-11: hsl(40, 3%, 62%);
  --color-grey-12: hsl(50, 4%, 67%);
  --color-grey-13: hsl(50, 4%, 72%);
  --color-grey-14: hsl(50, 5%, 77%);
  --color-grey-15: hsl(51, 8%, 82%);
  --color-grey-16: hsl(51, 10%, 86%);

  --color-darklight-grey: hsl(210, 5%, 17%);
  --color-dark-grey: hsl(210, 4%, 20%);

  --color-dark: hsl(330, 4%, 9%);
  --color-dark-glare: hsl(330, 6%, 13%);
  --color-dark-shade: hsl(0, 0%, 0%);
  --color-dark-rgb: 24, 22, 23;
  --color-dark-glare-rgb: 57, 51, 54;

  --color-code-1: var(--color-dark);
  --color-code-2: var(--color-grey-1);
  --color-code-3: var(--color-grey-2);
  --color-code-4: var(--color-grey-3);
  --color-code-5: var(--color-grey-4);
  --color-code-6: var(--color-grey-5);
  --color-code-7: var(--color-grey-6);

  --color-mid: var(--color-grey-5);
  --color-mid-glare: var(--color-grey-15);
  --color-mid-shade: hsl(48, 2%, 51%);
  --color-mid-dark: var(--color-grey-4);

  --color-light: hsl(53, 18%, 91%);
  --color-light-glare: hsl(48, 19%, 95%);
  --color-light-shade: hsl(51, 4%, 68%);
  --color-light-rgb: 237, 236, 229;

  --color-primary: hsl(51, 100%, 48%);
  --color-primary-glare: hsl(51, 93%, 66%);
  --color-primary-pale: hsl(54, 53%, 86%);
  --color-primary-shade: hsl(51, 100%, 36%);
  --color-primary-rgb: 246, 210, 0;

  --color-secondary: hsl(4, 92%, 55%);
  --color-secondary-glare: hsl(4, 92%, 64%);
  --color-secondary-shade: hsl(4, 86%, 37%);

  --color-global-bg: var(--color-light);
  --color-global-text: var(--color-dark);

  --color-surface-bg: var(--color-mid);
  --color-surface-bg-interact: var(--color-mid-dark);
  --color-surface-text: var(--color-dark);
  --color-surface-text-interact: var(--color-dark);

  --color-selection-bg: var(--color-dark);
  --color-selection-text: var(--color-light);

  --color-disabled: var(--color-mid);
  --color-accent: currentColor;

  --color-error: hsl(357, 54%, 53%);
  --color-warning: hsl(32, 90%, 60%);
  --color-success: hsl(71, 30%, 48%);
  --color-status-success: hsl(87, 62%, 52%);
  --color-status-success-shade: hsl(87, 67%, 38%);
  --color-status-success-glare: hsl(87, 55%, 66%);
  --color-status-warning: hsl(51, 100%, 48%);
  --color-status-warning-shade: hsl(51, 100%, 36%);
  --color-status-warning-glare: hsl(51, 93%, 66%);
  --color-status-error: hsl(4, 93%, 60%);
  --color-status-error-shade: hsl(4, 86%, 37%);
  --color-status-error-glare: hsl(4, 92%, 64%);
  /* -------------- END OF Colors ------------- */

  /* -------------- Spacing ------------- */
  --space-2xs: clamp(0.375rem, 0.3414rem + 0.1678vi, 0.5rem);
  --space-xs: clamp(0.5625rem, 0.5122rem + 0.2517vi, 0.75rem);
  --space-s: clamp(0.75rem, 0.6829rem + 0.3356vi, 1rem);
  --space-m: clamp(1.125rem, 1.0243rem + 0.5034vi, 1.25rem);
  --space-xm: clamp(1.125rem, 1.0243rem + 0.5034vi, 1.5rem);
  --space-l: clamp(1.5rem, 1.3658rem + 0.6711vi, 2rem);
  --space-xl: clamp(1.875rem, 1.7072rem + 0.8389vi, 2.5rem);
  --space-2xl: clamp(3rem, 2.7315rem + 1.3423vi, 4rem);
  --space-3xl: clamp(3.75rem, 3.4144rem + 1.6779vi, 5rem);
  --space-4xl: clamp(5.625rem, 5.1216rem + 2.5168vi, 7.5rem);

  --space-2xs-xs: clamp(0.375rem, 0.2743rem + 0.5034vi, 0.75rem);
  --space-xs-s: clamp(0.5625rem, 0.4451rem + 0.5872vi, 1rem);
  --space-s-m: clamp(0.75rem, 0.5487rem + 1.0067vi, 1.5rem);
  --space-m-l: clamp(1.125rem, 0.8901rem + 1.1745vi, 2rem);
  --space-l-xl: clamp(1.5rem, 1.2315rem + 1.3423vi, 2.5rem);
  --space-xl-2xl: clamp(1.875rem, 1.3045rem + 2.8523vi, 4rem);
  --space-2xl-3xl: clamp(3rem, 2.4631rem + 2.6846vi, 5rem);
  --space-3xl-4xl: clamp(3.75rem, 2.7433rem + 5.0336vi, 7.5rem);
  --space-s-l: clamp(0.75rem, 0.4144rem + 1.6779vi, 2rem);
  --space-l-3xl: clamp(1.5rem, 0.5604rem + 4.698vw, 5rem);

  --radius-2xs: 0.25em;
  --radius-xs: 0.5em;
  --radius-s: 0.75em;
  --radius-m: 1em;
  --radius-xm: 1.25em;
  --radius-l: 2em;
  /* -------------- END OF Spacing ------------- */

  --gutter: var(--space-m);
  --gutter-column: var(--gutter);
  --gutter-row: var(--gutter);

  --space-gutter: var(--space-m);
  --space-gutter-s: var(--space-s);
  --space-gutter-l: var(--space-l);

  --space-regions: var(--space-xl);
  --region-space: var(--space-regions);

  --wrapper-max-width: 1680px;
  --flow-space: var(--space-m);

  --stroke-weight-light: 1px;
  --stroke-weight-medium: 3px;
  --stroke-weight-heavy: 6px;
  --stroke: var(--stroke-weight-light) solid var(--stroke-color, currentColor);
  --stroke-mid: var(--stroke-weight-light) solid var(--stroke-mid-color, var(--color-mid));

  --text-decoration-thickness: 2px;
  --text-decoration-color: var(--color-secondary);

  --focus-ring-width: 2px;
  --focus-ring-color: currentColor;
  --focus-ring-offset: 0.25lh;
  --focus-ring-style: solid;

  --small-screen: 1;

  /** 
  * HTML Layout testing
  * 
  * See https://heydonworks.com/article/testing-html-with-modern-css/  
  */
  --error-outline: 0.25rem solid red;
}

@media (min-width: 600px) {
  :root {
    --gutter: var(--space-m);
    --small-screen: 0;
  }
}
/* -------------- END OF variables.css ------------- */

/* -------------- reset.css ------------- */
/**
 * Selectors specificity
 *
 * ':where' selector is being used to provide 0 specificity for 
 * any subsequent overrides from authored CSS.
 */

/**
 * Different box model
 *
 * Make use of the traditional box model, where the padding and border
 * of the element is drawn inside and not outside the specified width
 * and height. That makes combining relative and absolute units in 
 * properties like 'inline-size' and 'block-size' easier.
 *
 * See https://en.wikipedia.org/wiki/CSS_box_model
 *
 * TODO: Maybe not to declare it by default but whenever needed?
 * 
 * See https://www.oddbird.net/2025/09/04/box-model/
 * and https://www.youtube.com/watch?v=PtAcpV6TAGM
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
 * Remove default spacing and font styling
 *
 * Force usage of proper CSS classes for styling and leaving html
 * elements to semantics purpose.
 *
 * Also, in classical CSS Resets 'font: inherit' is usually being 
 * applied to form controls and buttons. As by default, the don't
 * inherit typographical styles from their parents. Instead, they
 * have their own weird styles.
 *
 * For example, <textarea> will use the system-default monospace 
 * font. Text inputs will use the system-default sans-serif font.
 * And both will choose a microscopically-small font size (e.g.
 * 13.333px in Chrome).
 *
 * As a result, it's very hard to read 13px text on a mobile
 * device. When we focus an input with a small font size, the 
 * browser will automatically zoom in, so that the text is easier
 * to read. 
 *
 * If we want to avoid this auto-zoom behavior, the inputs need 
 * to have a font-size of at least 1rem / 16px. However, instead
 * of just applying band-aid with inheriting font-size only - we
 * go with 'font' declaration that sets a bunch of font-related 
 * properties, like 'font-size', 'font-weight', and 'font-family'.
 *  
 * By setting it to 'inherit', we instruct these elements to match
 * the typography in their surrounding environment.
 *
 * See https://youtu.be/h3bTwCqX4ns?si=a3XigHQEgTCvRfWq&t=1006
 */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/**
 * Prevent double scrollbar bug
 *
 * When we need to use <body> element height usually one applies
 * 'min-height: 100vh' on <body> element. However, in some rare 
 * occasions it may cause double scrollbar. In order to avoid it
 * we resort to setting 'height' on <html> and <body> elements.
 *
 * We should tweak the selector to match the desired framework.
 * We want to select the top-level element that our application
 * is rendered within. For example, 'create-react-app' uses a
 * '<div id="root">', so the correct selector is '#root'.
 * 
 * See https://youtu.be/h3bTwCqX4ns?t=1100
 * and https://www.joshwcomeau.com/css/height-enigma/
 */
:where(html, body, #root) {
  height: 100%;
}

/**
 * Disable text size adjustment
 * 
 * To improve readability on non-mobile optimized websites, browsers
 * like mobile Safari increase the default font size when you switch
 * a website from portrait to landscape. We don't want that for our 
 * optimized sites.
 *
 * See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
:where(html) {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * Increase line height
 *
 * Long paragraphs are easier to read if the line height is higher.
 *
 * See https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html
 */
:where(html) {
  line-height: 1.5;
}

/**
 * Add scrollbar gutter
 *
 * Prevent the page from “jumping” when switching from a long to 
 * a short page.
 *
 * See https://css-tricks.com/almanac/properties/s/scrollbar-gutter/
 * and https://www.zachleat.com/web/stable-scrollbar-gutters/
 *
 * TODO: CSS declarations for Zachleat articles are not applied
 * As it creates different type of scrollbar that shifts more 
 * content of the webpage. Pending investigation.
 */
:where(html) {
  /* overflow-y: scroll; */
}

@supports (scrollbar-gutter: stable) {
  :where(html) {
    /* overflow-y: auto; */
    scrollbar-gutter: stable;
  }
}

/**
 * Enable keyword animations
 *
 * Usage if 'interpolate-size' property allows transitions 
 * between absolute values (like 0px) and derived ones (like auto).
 * It also works on the other size-bazed keywords like 'fit-content'.
 *
 * This allows usage of standard CSS transitions and it will work
 * perfectly.
 *
 * Only apply such behaviour for people that don't have motion
 * sensitivities problems.
 *
 * See https://www.joshwcomeau.com/snippets/html/interpolate-size/
 */
@media (prefers-reduced-motion: no-preference) {
  :where(html) {
    interpolate-size: allow-keywords;
  }
}

/**
 * Add smooth scrolling
 *
 * Prevent sudden jumps when using anchor navigation
 */
:where(html:focus-within) {
  scroll-behavior: smooth;
}

/**
 * Reduced motion prefernce
 *
 * Remove all animations, transitions and smooth scroll for people 
 * that prefer not to see them.
 */
@media (prefers-reduced-motion: reduce) {
  :where(html:focus-within) {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * Improve text rendering
 * 
 * On macOS thr browser will use "subpixel antialiasing" by defaut.
 * This is a technique that aims to make text easier to read, by 
 * leveraging the R/G/B lights within each pixel.
 *
 * In the past, this was seen as an accessibility win, because it
 * improved text constrast. However, today's pixel are much smaller,
 * invisible to the naked eye. The physical arrangement of pixel LEDs
 * has changed as well. 
 *
 * In macOS Mojave, released in 2018, Apple disabled subpixel anti-
 * aliasing across the operating system.
 *
 * Confusingly, macOS browsers like Chrome and Safari still use 
 * subpixel antialiasing by default. We need to explicitly turn
 * it off.
 *
 * macOS is the only operating system to use subpixel antialiasing, 
 * and so this rule has no effect on Windows, Linux, or mobile
 * devices.
 *
 * See https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ 
 */
:where(body) {
  -webkit-font-smoothing: antialiased;
}

/**
 * Improve focus styles
 *
 * Add spacing between content and its focus outline.
 */
:focus-visible {
  outline-offset: 3px;
}

/**
 * Improve abbreviations with titles
 * 
 * The abbr element with the title isn't helpful regarding 
 * accessibility because support is inconsistent, and it's only 
 * accessible to some users. Still, it's commonly used. 
 *
 * This rule shows a dotted underline on abbreviations in all 
 * browsers (there's a bug in Safari) and changes the cursor.
 * 
 * See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
 */
:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/**
 * Optimize mark element in Forced Colors Mode
 *
 * The colors of the mark element don't change in Forced Colors Mode,
 * which can be problematic. Use system colors instead.
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
 */
@media (forced-colors: active) {
  mark {
    color: HighlightText;
    background-color: Highlight;
  }
}

/**
 * Announce del, ins, and s to screen readers
 * 
 * With the exception of NVDA (2024.4.2), which announces "deletion",
 * none of the common screen readers announces the <s> element.
 * Voice Over on macOS and iOS and Narrator don't announce 
 * <ins> and <del>. 
 * 
 * Usually, screen readers not announcing text-level semantics is 
 * something we just accept, but devs using elements like <s> without 
 * knowing that they may not convey semantics is a common issue. 
 * 
 * We announce the start and end of stricken, inserted, and deleted 
 * content with pseudo-elements. For languages other than English, 
 * you should provide translations, e.g. :lang(de) :where(s::before) 
 * { content: "Durchgestrichener Text Beginn "; }.
 * 
 * See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
 */
:where(del, ins, s)::before,
:where(del, ins, s)::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  content: "test";
}

:where(s)::before {
  content: "stricken text start ";
}

:where(s)::after {
  content: " stricken text end";
}

:where(del)::before {
  content: "deletion start ";
}

:where(del)::after {
  content: " deletion end";
}

:where(ins)::before {
  content: "insertion start ";
}

:where(ins)::after {
  content: " insertion end";
}

/**
 * Avoid overflow caused by embedded content
 * 
 * Ensure that embedded content (audio, video, images, etc.) 
 * doesn't overflow its container.
 */
:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
}

/**
 * Make images easier to work with
 * 
 */
:where(img, picture) {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

:where(img[src*=".svg"]) {
  inline-size: 100%;
}

/**
 * Make image determine the size of <figure> element
 * 
 * Image dimensions define the intrinsic prefered width of the
 * <picture> element.
 */
:where(picture) {
  inline-size: max-content;
}

/**
 * Make image determine the size of <figure> element
 * 
 * By default the length of <figcaption> text defines how much 
 * width should <figure> element occupy.
 *
 * By declaring 'fit-content' on <figure> containting element we 
 * can retain margin access. Also, indicating that the <figure> 
 * element should use all the available space, but not more than 
 * the intrinsic preferred width coming from the contained <img>
 * element.
 *
 * See https://youtu.be/cS05Sd77sBE?si=7dmwwVEGWtpa-CsL&t=370
 * and https://jeffbridgforth.com/having-figure-match-width-of-contained-image/
 */
:where(figure) {
  inline-size: fit-content;
  margin-inline: auto;
}

:where(figcaption) {
  /* ↓ no size contribution from figcaption. */
  contain: inline-size;
}

/**
 * Prevent SVG elements from collapsing in flex layouts
 *
 * SVGs are often used as icons within flex containers. By default, 
 * they may shrink and not retain their intrinsic sizes.
 */
:where(svg) {
  flex-shrink: 0;
}

/**
 * Set a default height for SVGs that don't have an explicit height
 * 
 * This ensures consistent vertical alignment — especially for inline 
 * icons - by giving them a height equal to 1 line-height (1lh), 
 * which scales with text size. Width is set to `auto` to preserve 
 * the SVG’s aspect ratio.
 */
:where(svg:not([height])) {
  width: auto;
  height: 1lh;
}

/**
 * Prevent fieldsets from causing overflow
 *
 * Reset the default `min-inline-size: min-content` to prevent
 * children from stretching fieldsets.
 *
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */
:where(fieldset) {
  min-inline-size: 0;
}

/**
 * Turn labels into block elements
 * 
 * Labels for inputs, selects, and textarea should be block 
 * elements.
 *
 * See https://fokus.dev/tools/uaplus/forms/label/
 */
:where(label):has(+ :where(textarea, input, select)) {
  display: block;
}

/**
 * Increase the block-size of textareas
 *
 * The default height of textareas is small. We increase it a bit.
 */
:where(textarea:not([rows])) {
  min-block-size: 6em;
}

/**
 * Normalize search input styles
 *  
 * Remove the rounded corners of search inputs on macOS and iOS 
 * and normalize the background color.
 */
:where([type="search"]) {
  -webkit-appearance: textfield;
}

/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}

/**
 * Maintain direction in some input types
 * 
 * Some input types should remain left-aligned in right-to-left
 * languages, but only if the value isn't empty because the 
 * placeholder should be right-aligned.
 *
 * See https://rtlstyling.com/posts/rtl-styling#form-inputs
 */
:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
  direction: ltr;
}

/**
 * Improve table styling
 *  
 * With the default styling, tables are hard to scan. These rules 
 * add padding and collapsed borders.
 */
:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
}

/**
 * Fading dialogs
 *  
 * Add fade in and fade out transitions for the dialog element
 * and backdrops.
 */
:where(dialog)::backdrop {
  background: oklch(0% 0 0 / 0.3);
}

:where(dialog),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 300ms ease-out, display 300ms allow-discrete, overlay 300ms allow-discrete;
}

:where(dialog[open]),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open]),
  :where(dialog[open])::backdrop {
    opacity: 0;
  }
}

/**
 * Improve heading readability
 *
 * Better control of how heading text is wrapped in 
 * supported browsers.
 */
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

/**
 * Improve text readability
 *
 * Prevent word orphans on paragraphs and lists in 
 * supported browsers.
 */
:where(p, li, figcaption) {
  text-wrap: pretty;
}

/**
 * Increase specificity of '[hidden]'
 *  
 * Make it harder to accidentally unhide elements with the '[hidden]' 
 * attribute while still maintaining the until-found functionality.
 *
 * See https://developer.chrome.com/docs/css-ui/hidden-until-found
 */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/**
 * Remove list styles
 *
 * Remove styles on ul, ol elements with a list role, which 
 * suggests default styling will be removed.
 */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/**
 * Link default styles
 *
 * <a> elements that don't have a class get default styles.
 */
a:not([class]) {
  color: currentColor;
  text-decoration-skip-ink: auto;
}

/**
 * Root stacking context
 *
 * This rule is optional and it's generally only needed if
 * the project uses a JS framework like React etc.
 *
 * The isolation property allows us to create a new stacking
 * context without needing to set a 'z-index'.
 *
 * This is beneficial since it allws us to guarantee that
 * certain high-priority elements (modals, dropdowns, tooltips)
 * will always show up above the other elements in our 
 * application. No weird stacking context bugs, no z-index 
 * arms race.
 *
 * We should tweak the selector to match the desired framework.
 * We want to select the top-level element that our application
 * is rendered within. For example, 'create-react-app' uses a
 * '<div id="root">', so the correct selector is '#root'.
 *
 * See https://www.joshwcomeau.com/css/stacking-contexts/
 */
#root,
#__next {
  isolation: isolate;
}
/* -------------- END OF reset.css ------------- */

/* -------------- global-styles.css ------------- */
/**
 * Global styles 
 *
 * Low-specificity, global styles that apply to the whole project.
 */
body {
  font-family: var(--font-base);
  font-size: var(--text-size-base);
  line-height: var(--leading);
  color: var(--color-global-text);
  background: var(--color-global-bg);
  overflow-x: hidden;
}

/**
 * Disable scrolling on the page 
 *
 * Using the ':has()' relational pseudo-class, we check whether the 
 * HTML element contains any descendant with custom data attribute 
 * value. If found, we apply 'overflow: hidden' to '<html>', 
 * effectively locking scroll.
 *
 * This approach allows any component (e.g. modal) to control global 
 * scroll behavior without needing direct access to the '<html>' element.
 *
 * See https://www.joshwcomeau.com/css/has/
 *
 * UPDATE:
 * Apply overflow to <body> instead of <html> to ensure the current
 * scroll position is preserved. Setting overflow on <html> may cause
 * the page to jump or reset when locking scroll.
 */
body:has([data-disable-document-scroll="true"]) {
  overflow: hidden;
}

/**
 * Enable container queries on key layout areas of the page
 *
 * Container queries require a container to be explicitly defined. 
 * If none exists, they simply don't work — there is no fallback to media 
 * queries.
 *
 * To provide a reliable baseline for container-based responsive styles, 
 * we assign container-type to common landmark elements of the page. 
 * This ensures container queries function even when no more specific 
 * container is declared.
 */
body > :is(header, footer),
main,
section,
article {
  container-type: inline-size;
}

h1,
h2,
h3,
h4 {
  font-family: var(--heading-font-family, var(--font-display));
  font-weight: var(--heading-font-weight, var(--font-bold));
  letter-spacing: var(--heading-kerning, var(--kerning));
  line-height: var(--heading-line-height, var(--leading-fine));
  overflow-wrap: anywhere;
}

@media (min-width: 50em) {
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: unset;
  }
}

:is(h1, h2, h3, h4) em {
  font-style: normal;
}

:is(h1, h2, h3, h4) a:not(:hover) {
  text-decoration: none;
}

h1 {
  max-width: var(--measure-xs);
}

h2 {
  max-width: var(--measure-s);
}

h3,
h4,
h5,
h6 {
  max-width: var(--measure-m);
}

p,
li,
figcaption {
  max-width: var(--measure);
}

button,
input,
label {
  line-height: var(--leading-fine);
}

iframe[src*="vimeo"],
iframe[src*="youtube"],
video {
  aspect-ratio: 16/9;
  display: block;
  height: auto;
  width: 100%;
}

strong {
  font-family: var(--font-accent);
  font-weight: 700;
}

small {
  font-size: 0.8em;
}

del {
  color: var(--del-color, var(--color-mid-dark));
}

ins {
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  padding-inline: 0.3em;
  text-decoration: none;
}

code,
kbd,
samp {
  background: transparent;
  border-radius: 0;
  color: var(--code-color, var(--color-mid-dark));
  font-family: var(--font-mono);
  font-size: 0.95em;
  hyphens: none;
  tab-size: 2;
  text-align: left;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

var {
  color: var(--color-primary);
  font-style: normal;
  font-weight: var(--font-medium);
}

q {
  font-style: italic;
}

sub,
sup {
  display: inline-block;
  font-size: 0.75em;
  vertical-align: baseline;
}

sub {
  transform: translateY(0.65ex);
}

sup {
  transform: translateY(-0.7ex);
}

blockquote:not([class]) {
  font-size: var(--blockquote-font-size, var(--size-step-2));
  font-style: italic;
  margin-inline: 0;
  padding: 0;
  padding: var(--gutter);
  position: relative;
}

blockquote:not([class]):before {
  content: "“";
  font-family: var(--heading-font-family);
  font-size: var(--blockquote-decor-font-size, var(--size-step-7));
  left: calc((var(--gutter) / 2) * -1);
  line-height: 0.8;
  opacity: 0.2;
  position: absolute;
  top: 0;
}

blockquote:not([class]) > * + * {
  margin-block-start: var(--blockquote-space, var(--space-s));
}

ul {
  list-style-type: disc;
  padding-inline-start: var(--global-ul-padding, 1.75ch);
}

ol {
  padding-inline-start: var(--global-ol-padding, 1.75ch);
}

:is(ol, ul, dl):where(:not([class])) > li + li {
  margin-block-start: var(--global-list-flow, 0.5em);
}

:is(ol, ul, dl):where(:not([class])) :is(ol, ul, dl) {
  margin-block-start: var(--global-list-flow, 0.5em);
}

ul::marker {
  line-height: 1;
}

ol::marker {
  font-size: 1em;
  font-weight: var(--font-bold);
}

[role="list"][class],
[role="tablist"] {
  list-style: none;
}

dt {
  color: var(--dt-color, inherit);
  font-family: var(--dt-font-family, var(--font-base));
  font-size: var(--dt-font-size, inherit);
  font-weight: var(--dt-font-weight, var(--font-bold));
  letter-spacing: var(--dt-kerning, var(--kerning-loose));
  text-transform: var(--dt-text-transform, uppercase);
}

dd {
  font-size: var(--text-size-lede);
  margin-inline: 0;
}

dt + dd {
  margin-block-start: var(--space-2xs);
}

dd + dt {
  margin-block-start: var(--space-m);
}

dd + dd {
  margin-block-start: var(--space-3xs);
}

figure {
  margin-block: var(--figure-block-margin, 0);
}

figcaption {
  font-size: var(--text-size-meta);
  padding-block-start: 0.5em;
}

table {
  border: var(--stroke);
  min-width: 35rem;
  table-layout: fixed;
  width: 100%;
}

th {
  background: var(--table-header-bg, rgb(0 0 0/2%));
  font-family: var(--font-display);
  font-size: var(--size-step-2);
  font-weight: var(--font-bold);
  line-height: var(--leading-fine);
  text-align: left;
}

thead th {
  padding-block: var(--space-s);
}

td,
th {
  padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
  border-block-end: var(--stroke);
}

th:only-of-type {
  border-inline-end: var(--stroke);
}

:is(th, td) ~ :is(th, td) {
  border-inline-start: var(--stroke);
}

tr + tr:is(th, td) {
  border-block-start: var(--stroke);
}

caption {
  caption-side: bottom;
  margin-block-start: var(--space-2xs, 0.5lh);
}

a:not([class]):hover,
abbr {
  text-underline-offset: 0.2ex;
}

abbr {
  color: var(--color-primary);
  cursor: help;
}

:focus {
  outline-color: var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  outline-style: var(--focus-ring-style);
  outline-width: var(--focus-ring-width);
}

@supports selector(:focus-visible) {
  :focus {
    outline: none;
  }

  :focus-visible {
    outline-color: var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    outline-style: var(--focus-ring-style);
    outline-width: var(--focus-ring-width);
  }
}

@supports (-moz-appearance: none) {
  :root {
    --focus-ring-offset: 0.2ex;
  }
}

:is([tabindex="-1"]):focus,
:is([tabindex="-1"]):focus-visible {
  outline: none;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

:target {
  scroll-margin-block: 5ex;
}

hr {
  border: 0;
  border-block-start: 1px solid;
  color: var(--color-global-text);
  height: 1px;
  margin: var(--hr-space, var(--space-3xl)) 0;
  padding: 0;
}

form {
  --focus-color: var(--color-primary);
}

form > * {
  text-align: left;
}

form > * + * {
  margin-top: var(--flow-space, 1rem);
}

input,
select,
textarea {
  accent-color: var(--color-primary);
}

input:not([type="checkbox"], [type="radio"], [type="color"]),
select,
textarea {
  --focus-ring-offset: -0.6ex;
  --color-selection-text: var(--input-background, var(--color-dark));
  background: var(--input-background, var(--color-light));
  border: var(--input-stroke, var(--stroke));
  border-radius: var(--input-radius, var(--radius-s));
  font-family: var(--input-font-family, var(--font-base));
  font-size: var(--input-font-size, var(--text-size-base));
  font-weight: var(--input-weight, var(--font-normal));
  line-height: var(--input-leading, var(--leading));
  padding: var(--input-padding, 0.5em 0.8em);
  width: var(--input-width, 100%);
}

:is(input, select)[aria-describedby] + [id] {
  margin-block-start: var(--space-2xs);
}

label {
  font-family: var(--label-font-family, var(--font-accent));
  font-size: var(--label-font-size, var(--size-step-4));
  font-weight: var(--label-weight, var(--font-normal));
  line-height: var(--label-leading, var(--leading-fine));
}

label:after {
  content: "\A";
  white-space: pre;
}

label:has(input) {
  align-items: var(--label-align-items, flex-start);
  display: var(--label-display, flex);
  flex-direction: var(--label-flex-direction, column);
  font-weight: revert;
  gap: var(--input-flex-gap, var(--space-s));
}

label:has(input) + label:has(input) {
  margin-block-start: var(--input-check-sibling-space, var(--space-xs));
}

label:has(input) input {
  transform: translateY(0.25ex);
}

input:disabled {
  background: var(--color-disabled);
}

input:disabled,
label input:disabled + * {
  cursor: not-allowed;
}

fieldset {
  border: var(--stroke);
  padding: var(--space-s);
}

legend {
  font-weight: var(--font-medium);
  padding-inline: var(--space-xs);
}

summary {
  cursor: default;
  font-weight: var(--font-bold);
}

details[open] summary {
  margin-block-end: var(--space-s);
}

mark {
  background: var(--mark-bg, var(--color-primary));
  color: inherit;
}
/* -------------- END OF global-styles.css ------------- */