/*
 * @file: variables.css
 * values in use throughout codebase
 */

:root {
  /* COLORS */
  --color-white: #fff;
  --color-black: #000;
  --color-black-2: #1a1a1a;
  --color-black-3: #222222;
  --color-dark-gray: #333;
  --color-medium-gray: #666;
  --color-medium-gray-2: #676767;
  --color-medium-gray-3: #737373;
  --color-medium-gray-4: #d6d6d6;
  --color-light-gray: #ebebeb;
  --color-light-gray-1: #e6e6e6;
  --color-light-gray-2: #c3c3c3;
  --color-dark-blue: #00719a;
  --color-blue: #007fad;
  --color-blue-2: #008bbe;
  --color-medium-blue: #4bbbe0;
  --color-light-blue: #a4d8ef;
  --color-light-blue-1: #e7ecef;
  --color-light-blue-2: #d3e4eb;
  --color-light-teal: #a9e5e2;
  --color-red: #a70e13;

  --app-bg: var(--color-white);
  --nav-bg: var(--color-white);

  /* Global Defaults */
  --font-sans: var(--font-stack-america, Helvetica, Arial, sans-serif);
  --font-serif: var(--font-stack-crimson, Georgia, serif);
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
  "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
  "Courier New", monospace;

  /* UI elements */
  --font-display: var(--font-stack-america, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, sans-serif);

  /* Headings */
  --font-heading: var(--font-sans);
  --font-subheading: var(--font-serif);

  /* Body copy */
  --font-body: var(--font-serif);

  /* Layout */
  --standard-gutter: 20px;
  --standard-width: calc(100% - 40px);
  --standard-max-width: 1280px;
  /* Space above the nav when sticky (e.g. to accomodate a banner) */
  --nav-inset-top: 0px;
  /* Height of the nav. Set to 0 as a fallback in case the page lacks a nav component. */
  --nav-height: 0px;

  /**
   * The total offset of the navbar
   * Used to offset anchor links to account for the navbar and
   * positioning other fixed elements
   */
  --nav-offset: calc(var(--nav-inset-top, 0px) + var(--nav-height, 0px));
  /*
   The safe height of the viewport minus the height of the browser UI
   Does not change when the browser UI is shown or hidden, except for Chromium < 108
  */
  --safe-vph: var(--vph, 100vh);

  /*
   The current height of the viewport's safe area
   Changes when the browser UI is shown or hidden
  */
  --dynamic-vph: var(--vph, 100vh);

  /*
    FONTS

    Font stacks referenced here are defined in ./fonts.css and contain a
    font's name and size-optimized fallbacks created to reduce layout shift.

    Usage:
    - Context-specific variables (heading, subheading, body) should be the first choice.
    - Generic variables (sans, serif, display) should be used when the context doesn't fit or is unknown
    - Never use the font stack variables directly.
  */ /* https://modernfontstacks.com/ */

  /* App Navigation */

  /* Viewport Safe Area */

  /* Fallback for iOS Safari */
}

@supports (-webkit-touch-callout: none) {

:root {
    --safe-vph: var(--vph, -webkit-fill-available);
}
  }

/*
   Modern viewport units
   ~90% support at time of writing: https://caniuse.com/viewport-unit-variants
  */

@supports (height: 100svh) {

:root {
    --safe-vph: 100svh;
    --dynamic-vph: 100dvh;
}
  }

/**
 * Crimson Text, pulled from Google Fonts
 * https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap
 */

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg_it_vi-82cceeb9.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg_it_ex-ecf7fc23.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg_it-381a244e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold_it_vi-8b87a226.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold_it_ex-5b34977c.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold_it-6c40672d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold_it_vi-bebcfb14.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold_it_ex-ddfb0e44.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold_it-875b693a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg-aac0df38.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg_ex-c874bcb3.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/Crimson Text-reg-aac0df38.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold_vi-e72d7de1.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold_ex-f150e228.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/assets/Crimson Text-semibold-94af2060.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* vietnamese */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold_vi-8dee6155.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin-ext */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold_ex-28ae72da.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

/* latin */

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/assets/Crimson Text-bold-2fcaf682.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
  ascent-override: 80.5%;
  descent-override: 19.55%;
  size-adjust: 113.5%;
}

@font-face {
  font-family: "GT America";
  src: url('/static/assets/GT-America-Standard-Regular-e5f8894e.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "GT America";
  src: url('/static/assets/GT-America-Standard-Regular-Italic-8034e51e.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "GT America";
  src: url('/static/assets/GT-America-Standard-Bold-d386c658.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "GT America";
  src: url('/static/assets/GT-America-Standard-Bold-Italic-915de75d.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

/**
 * Font Stacks
 *
 * In order to reduce the layout shift caused by font loading, we use these font stacks to
 * ensure that the fallback fonts have approximately the same metrics as the fonts they are replacing.
 *
 * The font stacks were generated with packages provided by @capsizecss, then hand-tweaked.
 */

/** Generated Font Stack Fallbacks **/

/* America */

@font-face {
  font-family: "America Temp: Helvetica Neue";
  src: local("Helvetica Neue");
  ascent-override: 99.1131%;
  descent-override: 25.5712%;
  size-adjust: 101.35%; /* Hand-tweaked from 100.8949% */
}

@font-face {
  font-family: "America Temp: Helvetica Neue"; /* All Values Set Manually */
  src: local("Helvetica Neue Bold");
  font-weight: 700;
  ascent-override: 99.1131%;
  descent-override: 25.5712%;
  size-adjust: 100%;
}

@font-face {
  font-family: "America Temp: Helvetica";
  src: local("Helvetica");
  ascent-override: 105%;
  descent-override: 50%;
  size-adjust: 102.1735%; /* Hand-tweaked from 102.1735% */
}

@font-face {
  font-family: "America Temp: Helvetica"; /* All Values Set Manually */
  src: local("Helvetica Bold");
  font-weight: 700;
  ascent-override: 105%;
  descent-override: 50%;
  size-adjust: 99.75%;
}

@font-face {
  font-family: "America Temp: Arial";
  src: local("Arial");
  ascent-override: 97.8728%;
  descent-override: 25.2512%;
  size-adjust: 102.1735%; /* Hand-tweaked from 102.1735% */
}

@font-face {
  font-family: "America Temp: Arial"; /* All Values Set Manually */
  src: local("Arial Bold");
  ascent-override: 97.8728%;
  font-weight: 700;
  descent-override: 25.2512%;
  size-adjust: 99.75%;
}

@font-face {
  font-family: "America Temp: Roboto";
  src: local("Roboto");
  ascent-override: 97.981%;
  descent-override: 25.2791%;
  size-adjust: 101.915%; /* Hand-tweaked from 102.0606% */
}

@font-face {
  font-family: "America Temp: Roboto"; /* All Values Set Manually */
  src: local("Roboto Bold");
  font-weight: 700;
  ascent-override: 97.981%;
  descent-override: 25.2791%;
  size-adjust: 106.5%;
}

/* Crimson Text bases its scale and ascent/decent metrics on Georgia Regular. */

@font-face {
  font-family: "Crimson Temp: Georgia";
  src: local("Georgia");
  /* Georgia's leading gets bumped to match Crimson Text */
  line-gap-override: 3.1%;
}

/* All other Georgia fallbacks have size adjustments based on Crimson Text to compensate for CLS */

@font-face {
  font-family: "Crimson Temp: Georgia";
  src: local("Georgia Italic");
  font-style: italic;
  /* line-gap-override: 13.41%; */
  size-adjust: 89.45%;
  ascent-override: 100%;
}

@font-face {
  font-family: "Crimson Temp: Times New Roman"; /* All Values Set Manually */
  font-weight: bold;
  src: local("Times New Roman Bold");
  ascent-override: 114.1135%;
  descent-override: 43.1208%;
  line-gap-override: 25.8523%;
  size-adjust: 102.25%;
}

@font-face {
  font-family: "Crimson Temp: Georgia";
  src: local("Georgia Bold");
  font-weight: 700;
  /* line-gap-override: 6.775%; */
  size-adjust: 94.35%;
  ascent-override: 100%;
}

@font-face {
  font-family: "Crimson Temp: Georgia";
  src: local("Georgia Bold Italic");
  font-weight: 700;
  font-style: italic;
  /* line-gap-override: 27.55%; */
  size-adjust: 80.45%;
  ascent-override: 100%;
}

/** Font Stacks **/

:root {
  --font-stack-crimson: "Crimson Text", "Crimson Temp: Georgia";
  --font-stack-america: "GT America", "America Temp: Helvetica Neue", "America Temp: Helvetica",
    "America Temp: Arial", "America Temp: Roboto";
}

/*
  SciAm Reset
  A subset of essentials pulled from modern-normalize and cssremedy.

  About CSS Remedy:
  > Sets CSS properties or values to what they would be if the CSSWG were creating the CSS today,
  > from scratch, and didn’t have to worry about backwards compatibility.

  Notable differences from both:
  - Removed compatibility fixes for dead browsers (IE, non-Chromium Edge/Opera, etc.)
  - Removed elements that will likely go unused
  - Tweaks to make component development more predictable
  - :where() used extensively for zero specificity
  - Forms aren't really reset, just mildly more consistent
*/

/**
 * ----------------
 * Document
 * ----------------
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Predictable border behavior across browsers and elements
     ++ allow us to add a border to an element by simply adding a border-width
*/

:where(*, ::before, ::after) {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor;
  border-color: var(--border-color, currentColor); /* 2 */
}

/*
1. Set default font size to 16px
2. Use a consistent sensible line-height in all browsers.
3. Use default display stack or system font stack instead of Times.
4. Prevent adjustments of font size after orientation changes in iOS.
5. Use a more readable default tab size.
*/

html {
  font-size: 100%; /* 1 */
  line-height: 1.5; /* 2 */
  font-family: "GT America", "America Temp: Helvetica Neue", "America Temp: Helvetica",
    "America Temp: Arial", "America Temp: Roboto";
  font-family: var(--font-display, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, sans-serif); /* 3 */
  -webkit-text-size-adjust: 100%; /* 4 */
  /* DISABLED: Uncomment if we start using code blocks
  -moz-tab-size: 4;
  tab-size: 4;
  */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so we can set them via `html` class across browsers
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/**
 * ----------------
 * Flow Content
 * ----------------
 */

/* Reset default spacing */

:where(blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre) {
  margin: 0;
}

:where(fieldset) {
  margin: 0;
  padding: 0;
}

:where(legend) {
  padding: 0;
}

:where(ol, ul, menu) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
1. Correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

:where(hr) {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Remove the default font size and weight for headings.

This puts the burden of styling headings to the component scope and
establishes headings as purely semantic elements.
*/

:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

:where(table) {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/**
 * ----------------
 * Phrasing Content
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content
 * ----------------
 */

/* DISABLED: Reset links to optimize for opt-in styling instead of opt-out.
:where(a) {
  color: inherit;
  text-decoration: inherit;
}
*/

/*
1. Set proper `mono` font family by default.
2. Correct `em` font sizing inconsistencies across browsers.
*/

/* DISABLED: Uncomment if we start using code blocks
:where(code, kbd, samp, pre) {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1em;
}
*/

/*
Correct font size in all browsers.
*/

:where(small) {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from shifting line heights.
*/

:where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

/* Add the correct display in Safari. */

:where(summary) {
  display: list-item;
}

/**
 * ----------------
 * Interactive Content
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content
 * ----------------
 */

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

:where(button, input, optgroup, select, textarea) {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

:where(button, select) {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

:where(button, [type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

:where([type="search"]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to a nice cool gray.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

:where(button, [role="button"]) {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:where(:disabled) {
  cursor: default;
}

/*
 * ----------------
 * Replaced Elements / Embedded Content
 * https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#embedded_content
 * ----------------
 */

/*
1. Treat embedded objects like the block-scoped elements we think they are. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block; /* 1 */
  vertical-align: middle;
}

/*
1. Prevent images from breaking out of their containers.
2. Preserve intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
3. Never stretch images.
4. Whenever we crop and image, focus on the upper center area. Because most images follow the rule
   of thirds, this almost always contains the focal point and avoids cutting off heads.
*/

:where(img, video) {
  max-width: 100%; /* 1 */
  height: auto; /* 2 */
  -o-object-fit: cover;
     object-fit: cover; /* 3 */
  -o-object-position: 50% 15%;
     object-position: 50% 15%; /* 4 */
}

/* These are inline by default which often causes unexpected spacing issues. */

:where(picture) {
  display: contents;
}

:where(source) {
  display: none;
}

/**
 * ----------------
 * Other
 * ----------------
 */

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

html {
  background: #fff;
  background: var(--app-bg, #fff);
  scroll-padding-top: calc(0px + 0px);
  scroll-padding-top: var(--nav-offset, 1rem);
  height: 100%;
}

body {
  font-family: "GT America", "America Temp: Helvetica Neue", "America Temp: Helvetica",
    "America Temp: Arial", "America Temp: Roboto";
  font-family: var(--font-display);
  color: #333;
  color: var(--color-dark-gray);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

.skiptocontent {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.5rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  background: #333;
  background: var(--color-dark-gray);
  color: #fff;
  color: var(--color-white);
  z-index: 100;
}

.scroll-lock,
.scroll-lock body {
  height: 100vh;
  overflow: hidden !important;
  overscroll-behavior: contain;

  /* @TODO: Prevent layout shift when scrollbar disappears */
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    text-rendering: geometricPrecision;
  }
}