/* ----------------- FONTS ----------------- */
@font-face {
    font-family: "Helvetica LT Std Light";
    src: url("/wp-content/themes/imporquivi/assets/fonts/HelveticaLTStd-Light.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica 45 Light";
    src: url("/wp-content/themes/imporquivi/assets/fonts/HelveticaNeue-Light.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Helvetica 65 Medium";
    src: url("/wp-content/themes/imporquivi/assets/fonts/HelveticaNeue-Medium.woff2") format("woff2"); 
    font-style: normal;
    font-display: swap;
}
/* -------------- END OF FONTS ------------- */

/* ----------------- VARIABLES ----------------- */
/* 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";

    --ff-primary: "Helvetica LT Std Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ff-secondary: "Helvetica 65 Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
    --ff-tertiary: "Helvetica 45 Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-secondary);
    --ff-subheading: var(--ff-tertiary);

    /* 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);

        /* current */
            /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1366,18,1.2,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
            --step--2: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
            --step--1: clamp(0.89rem, calc(0.87rem + 0.07vw), 0.94rem);
            --step-0: clamp(1rem, calc(0.96rem + 0.19vw), 1.13rem);
            --step-1: clamp(1.13rem, calc(1.06rem + 0.34vw), 1.35rem);
            --step-2: clamp(1.27rem, calc(1.16rem + 0.54vw), 1.62rem);
            --step-3: clamp(1.42rem, calc(1.26rem + 0.8vw), 1.94rem);
            --step-4: clamp(1.6rem, calc(1.38rem + 1.12vw), 2.33rem);
            --step-5: clamp(1.8rem, calc(1.5rem + 1.53vw), 2.8rem);
            --step-6: clamp(2.03rem, calc(1.62rem + 2.04vw), 3.36rem);
            --step-7: clamp(2.28rem, calc(1.75rem + 2.68vw), 4.03rem);
            --step-8: clamp(2.57rem, calc(1.87rem + 3.48vw), 4.84rem);
            --step-9: clamp(2.89rem, calc(1.99rem + 4.46vw), 5.81rem);
            --step-10: clamp(3.25rem, calc(2.11rem + 5.69vw), 6.97rem);
    
        --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 ------------- */
        --clr-neutral-100: #ffffff;
        --clr-neutral-200: #fafafa;
        --clr-neutral-300: #e0e1df;
        --clr-neutral-400: #e0e0e0;
    
        --clr-primary-100: #4d4d4d;
        --clr-primary-200: #3b3b3b;
        --clr-primary-300: #303030;
        --clr-primary-350: #282828;
        --clr-primary-400: #262626;
        --clr-primary-500: #212121;
        --clr-primary-600: #1c1c1c;
        --clr-primary-700: #141414;
        --clr-primary-800: #000000;
    
        --clr-accent-primary: #91c04c;
        --clr-accent-secondary: #af1e4e;

        --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);

        /* Custom pairs */
            /* 0 to 20*/
            --space-0-20: clamp(0rem, calc(-0.38rem + 1.91vw), 1.25rem);
            /* 12 to 60*/
            --space-12-60: clamp(0.88rem, calc(0rem + 4.4vw), 3.75rem);
            /* 16 to 30*/
            --space-16-30: clamp(1rem, calc(0.73rem + 1.34vw), 1.88rem);
            /* 16 to 36*/
            --space-16-36: clamp(1rem, calc(0.17rem + 4.17vw), 2.25rem);
            /* 16 to 60*/
            --space-16-60: clamp(1rem, calc(0.11rem + 4.46vw), 3.75rem);
    
        --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 ------------- */

        --site-width: 85.375rem;
        --site-padding: var(--space-16-30);

        --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;
}
/* -------------- END OF VARIABLES ------------- */

/* -------------- RESET ------------- */
/**
 * 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;
    scroll-padding-top: 2rem;
}

/**
 * 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 ------------- */

/* -------------- GLOBAL STYLES ------------- */
/**
 * Global styles 
 *
 * Low-specificity, global styles that apply to the whole project.
 */
body {
    font-size: var(--step-0);
    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;
}

h1,
h2,
h3,
h4 {
    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); */
    max-width: 40ch;
}

h2 {
    /* max-width: var(--measure-xs); */
    max-width: 40ch;
}

h3,
h4,
h5,
h6 {
    /* max-width: var(--measure-xs); */
    max-width: 40ch;
}

/* 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 ------------- */

a {
    text-decoration: none;
    /* color: inherit; */
    transition: color 350ms ease, background-color 350ms ease, fill 350ms ease;
}

a:hover {
    color: var(--clr-accent-primary);
}

a svg {
    transition: color 350ms ease, background-color 350ms ease, fill 350ms ease;
}

a:hover svg {
    fill: var(--clr-accent-primary);
}

button:hover {
    color: var(--clr-accent-primary);
    cursor: pointer;
    transition: color 350ms ease, background-color 350ms ease, fill 350ms ease;
}

.wm-social-media-links svg {
    width: 1.75rem;
}

.wm-image>* {
    height: auto;
}

strong {
    font-weight: bold; 
}