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

:root {
  /* COLORS */
  --color-white: #fff;
  --color-black: #000;
  --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-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-red: #a70e13;

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

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

  /* 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; /* https://modernfontstacks.com/ */

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

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

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

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

/* 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);
  /* scroll-behavior: smooth; */
}

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

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