/* Grabbed from https://unpkg.com/tailwindcss@3.3.3/src/css/preflight.css
 *
 * This is used to selectively load Tailwind's Preflight CSS without actually
 * having the Tailwind preflight plugin enabled in Tailwind's configuration
 *
 * This is loaded on select marketing pages that were recently designed.
 *
 * Once we migrate fully to Tailwind, we can enable Tailwind's preflight plugin
 * again and load it directly. Until then, this file will serve as a stopgap.
 *
 * What's this :where(.tailwind-preflight) thing?
 * In order to continue supporting all existing pages where our old styles/resets
 * were used, we need a way to selectively target pages where this CSS applies.
 *
 * One way to do that is to only load this CSS file on selective routes.
 * That approach conflicts with client-side routing where it becomes tricky
 * to swap out and replace CSS files on the fly.
 *
 * In order to keep the reset selectors in this file at the lowest level
 * of specificity (so Tailwind classes work properly), we need a way to target
 * specific pages. Doing something like `.tailwind-preflight h1 {margin: 0}` will conflict
 * with `mt-12` on an h1 where `.tailwind-preflight h1` is more specific.
 *
 * The specificity-adjustment pseudo-class can help define global resets in the presence
 * of a `.tailwind-preflight` class higher up on the page without affecting the
 * specificity of the selectors.
 *
 * Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

:where(.tailwind-preflight) ::before,
  :where(.tailwind-preflight) ::after {
    --tw-content: "";
  }

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
 */

:where(.tailwind-preflight) html {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
       tab-size: 4; /* 3 */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
    font-feature-settings: normal; /* 5 */
    font-variation-settings: normal; /* 6 */
  }

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
 */

:where(.tailwind-preflight) body {
    margin: 0; /* 1 */
    line-height: inherit; /* 2 */
  }

/*
1. Add the 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(.tailwind-preflight) hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
  }

/*
Add the correct text decoration in Chrome, Edge, and Safari.
 */

:where(.tailwind-preflight) abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
  }

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

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
 */

:where(.tailwind-preflight) a {
    color: inherit;
    text-decoration: inherit;
  }

/*
Add the correct font weight in Edge and Safari.
 */

:where(.tailwind-preflight) b,
  :where(.tailwind-preflight) strong {
    font-weight: bolder;
  }

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
 */

:where(.tailwind-preflight) code,
  :where(.tailwind-preflight) kbd,
  :where(.tailwind-preflight) samp,
  :where(.tailwind-preflight) pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

/*
Add the correct font size in all browsers.
 */

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

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */

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

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

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

/*
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(.tailwind-preflight) table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
  }

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

:where(.tailwind-preflight) button,
  :where(.tailwind-preflight) input,
  :where(.tailwind-preflight) optgroup,
  :where(.tailwind-preflight) select,
  :where(.tailwind-preflight) textarea {
    font-family: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: 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(.tailwind-preflight) button,
  :where(.tailwind-preflight) select {
    text-transform: none;
  }

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

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

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

:where(.tailwind-preflight) :-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)
 */

:where(.tailwind-preflight) :-moz-ui-invalid {
    box-shadow: none;
  }

/*
Add the correct vertical alignment in Chrome and Firefox.
 */

:where(.tailwind-preflight) progress {
    vertical-align: baseline;
  }

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

:where(.tailwind-preflight) ::-webkit-inner-spin-button,
  :where(.tailwind-preflight) ::-webkit-outer-spin-button {
    height: auto;
  }

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

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

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

:where(.tailwind-preflight) ::-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.
 */

:where(.tailwind-preflight) ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

/*
Add the correct display in Chrome and Safari.
 */

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

/*
Removes the default spacing and border for appropriate elements.
 */

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

:where(.tailwind-preflight) fieldset {
    margin: 0;
    padding: 0;
  }

:where(.tailwind-preflight) legend {
    padding: 0;
  }

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

/*
Reset default styling for dialogs.
 */

:where(.tailwind-preflight) dialog {
    padding: 0;
  }

/*
Prevent resizing textareas horizontally by default.
 */

:where(.tailwind-preflight) textarea {
    resize: vertical;
  }

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
 */

:where(.tailwind-preflight) input::-moz-placeholder, :where(.tailwind-preflight) textarea::-moz-placeholder {
    opacity: 1; /* 1 */
    color: #9ca3af; /* 2 */
  }

:where(.tailwind-preflight) input::placeholder,
  :where(.tailwind-preflight) textarea::placeholder {
    opacity: 1; /* 1 */
    color: #9ca3af; /* 2 */
  }

/*
Set the default cursor for buttons.
 */

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

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

:where(.tailwind-preflight) :disabled {
    cursor: default;
  }

/*
1. Make replaced elements `display: block` by default. (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(.tailwind-preflight) img,
  :where(.tailwind-preflight) svg,
  :where(.tailwind-preflight) video,
  :where(.tailwind-preflight) canvas,
  :where(.tailwind-preflight) audio,
  :where(.tailwind-preflight) iframe,
  :where(.tailwind-preflight) embed,
  :where(.tailwind-preflight) object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
  }

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */

:where(.tailwind-preflight) img,
  :where(.tailwind-preflight) video {
    max-width: 100%;
    height: auto;
  }

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

:where(.tailwind-preflight) [hidden] {
    display: none;
  }