_betterize-slim.scss

@charset "UTF-8";

////////////////////////////////////////////////////////////////////////////////
/// ------------------------------------------------------------------------ ///
/// betterize-slim.scss -- Modern normalization, better cross-browser design ///
/// @author Stephen M Irving -- <@metric_dev> ------------------------------ ///
/// version 2.0.9 -- 03/28/2024 -------------------------------------------- ///
/// ------------------------------------------------------------------------ ///
////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #BASE STYLES: Opinionated defaults and base element styles --------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// 1. Set `box-sizing` to `inherit` while setting the inheritance root,
//    which is the html element, to `box-sizing: border-box`. This is
//    a much more intuitive default box-model than `content-box` as it
//    will make `width` and `height` calculations include `padding` and
//    `border` size.
// 2. Setting `min-width: 0` here is a *very* opinionated decision. It can save
//    you a lot of time trying to figure out a ton of odd and unintuitive
//    behavior, especially with flexbox, but it can also cause unexpected
//    issues if you aren't aware it is here. If an element is unexpectedly
//    shrinking down to nothing, try setting an explicit `min-width` to
//    overwrite this declaration.
// 3. Ensure background images do not repeat by default.

*,
::before,
::after {
  box-sizing: inherit; // 1
  min-width: 0; // 2
  background-repeat: no-repeat; // 3
}

// Improved default settings for the `::before` and `::after` pseudo-elements

::before,
::after {
  vertical-align: inherit;
  text-decoration: inherit;
}

//  1. Prevent horizontal scrolling from being possible and set vertical
//     scrolling. If you want a page with no scrollbar at all change
//     to `overflow-y: hidden`. Setting it here combined with `overflow-x: clip`
//     on the body will prevent the behavior from breaking when an element
//     like a masthead / nav bar is set with `position: sticky`.
//  2. Set the root element box-sizing, the universal selector will inherit.
//  3. Add backup font stack that works across all browsers and devices.
//  4. Set the default font size in an accessible way (such that a user
//     can change the default size with the browser settings).
//  5. Normalize default `line-height` across browsers.
//  6. Set a new default for `word-wrap` (alias for `overflow-wrap`) on the root
//     element since it is an inherited property.
//  7. Allow the browser to automatically break words at appropriate hyphenation
//     points. Ensure you specificy a language using the `lang` HTML attribute.
//     to guarantee the automatic hyphenation applied is language-specific.
//  8. Use a more readable tab size.
//  9. Resets the cursor to default across all browsers and for any property
//     that does not explicitly define a different cursor.
// 10. Tell the browser which color schemes the page can be rendered in.
//     Change to just `light` or just `dark` if only doing a single scheme,
//     but both are strongly recommended for accessibility purposes.
// 11. This will reserve space for a scrollbar, preventing unwanted layout
//     shifts as content grows or shrinks. If you are making a page that
//     has no scrolling whatsoever, you can remove or overwrite this rule.
// 12. Allows opening and closing punctuation like quotes at the start and end
//     of a line of text to "hang" outside the line's content box, making the
//     formatting look more aesthetically pleasing.
// 13. Remove the blue tap box over buttons and links in some versions of
//     iOS browsers for touch-enabled devices.
// 14. Prevent adjustments of font size after orientation changes in iOS.

html {
  overflow-x: hidden; // 1
  overflow-y: scroll; // 1
  box-sizing: border-box; // 2
  font-family:
    // Modern pan-device default
    system-ui,
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    'Segoe UI',
    // Android
    Roboto,
    // Ubuntu
    Ubuntu,
    // GNOME 3+
    Cantarell,
    // KDE Plasma 5+
    'Noto Sans',
    // Basic web fallback
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'; // 3
  font-size: 1em; // 4
  line-height: 1.15; // 5
  word-wrap: break-word; // 6
  -webkit-hyphens: auto; // 7
  hyphens: auto; // 7
  -moz-tab-size: 4; // 8
  tab-size: 4; // 8
  cursor: default; // 9
  color-scheme: light dark; // 10
  scrollbar-gutter: stable; // 11
  hanging-punctuation: first last; // 12
  -webkit-tap-highlight-color: transparent; // 13
  -webkit-text-size-adjust: 100%; // 14
}

// If user does not have prefers-reduced-motion on in their OS settings,
// this will keep scrolling from looking jumpy when an anchor link or other
// action automatically scrolls the page.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  // 1. TODO: May need to modify this value depending on height
  //    of any masthead/top nav bar or similar content
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem; // 1
  }
}

/// Normalize the color of the background and text when it is highlighted by
/// selecting it with a mouse.
///
/// @todo - Customize the selection background and color to match your design.

::selection {
  background: #345172;
  color: #fff;
  text-shadow: none;
}

// 1. Remove the possibility of a horizontal scrollbar. Combined with the
//    `overflow: hidden scroll` on the html element, it prevents this behavior
//    without causing issues when a top level element is set to
//    `position: sticky`.
// 2. Force the body to always take up the whole screen.
// 3. Remove the body margin in all browsers.
// 4. As a best practice, apply a default `background-color` and `color`.
//    As an opinonated default, apply a faint background gradient, and apply an
//    inverted scheme for `prefers-color-scheme: dark`. To overwrite, use the
//    `background` shorthand property.
// 5. Set a normal font-size default.
// 6. Set an opionated line-height for other elements to inherit.
// 7. Set an explicit `text-align: left` so that we can later use
//    the `inherit` value.
// 8. On devices with small screens (likely phone or tablet), set text-rendering
//    to improve speed. On devices with larger screens (likely laptops and PCs),
//    set text-rendering to improve legibility.
// 9. Ensure finer text rendering on Mac OS systems.

body {
  overflow-x: clip; // 1
  min-height: 100vh; // 2
  min-height: 100dvh; // 2
  margin: 0; // 3
  background-color: #fff; // 4
  background-image: linear-gradient(135deg, #fff, #f0f2f4); // 4
  color: #212529; // 4
  font-size: 1rem; // 5
  line-height: 1.5; // 6
  text-align: start; // 7
  text-rendering: optimizeSpeed; // 8
  -moz-osx-font-smoothing: grayscale; // 9
  -webkit-font-smoothing: antialiased; // 9

  @media screen and (max-width: 27.25em),
         screen and (max-height: 41.25em) {
    line-height: 1.4; // 6
  }

  @media screen and (min-width: 80em) {
    text-rendering: optimizeLegibility; // 8
  }

  @media (prefers-color-scheme: dark) {
    background-color: #121212; // 4
    background-image: linear-gradient(135deg, #121212, #0c080c); // 4
    color: #fff; // 4
  }
}

// Ensure HTML5 structual elements and media elements display correctly.

canvas,
dialog,
details,
legend,
main,
summary,
img,
svg,
video {
  display: block;
}

// Better balance blocks of text in headings, blockqutoes, and figure captions.
// See: https://developer.chrome.com/docs/css-ui/css-text-wrap-balance

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption {
  text-wrap: balance;
}

// 1. Remove the top margin for easier control as it avoids margin collapse.
// 2. Overwrite physical margin properties with logical margin properties if
//    they are supported.
// 3. Correct the font size `<h1>` elements within `<section>` and
//    <article> contexts in Chrome, Firefox, and Safari.

h1 {
  margin: 0 0 0.67em; // 1
  margin-block: 0 0.67em; // 2
  margin-inline: 0; // 2
  font-size: 2em; // 3
}

// Remove the top margin for easier control as it avoids margin collapse.

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-block-start: 0;
}

// 1. Limit the inline size of paragraphs to 92 characters.
// 2. Set text-wrap to pretty if possible.

p {
  max-inline-size: 92ch; // 1
  text-wrap: pretty; // 2
}

// Remove the top margin for easier control as it avoids margin collapse.
// Reset the side margins and change the bottom margin from `1em` to `1rem`.
// Overwrite bottom margin with margin-block-end for browesers that support it.

p,
dl,
ol,
ul,
blockquote,
figure {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
}

// Set a normalized font-weight for legacy Edge and older versions of Safari

b,
strong {
  font-weight: bolder;
  line-height: inherit;
}

// Normalize small across browsers

small {
  font-size: 80%;
  line-height: inherit;
}

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

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

sub {
  bottom: -0.25em;
  inset-block: auto -0.25em;
  inset-inline: auto;
}

sup {
  top: -0.5em;
  inset-block: -0.5em auto;
  inset-inline: auto;
}

// Correct the odd font inheritance and size scaling issues seen
// in some browsers when using `code`, `kbd`, `pre`, and `samp`.

code,
kbd,
pre,
samp {
  font-family:
    // Modern pan-device default
    ui-monospace,
    // macOS 10.10+
    Menlo,
    // macOS fallback
    Monaco,
    // Windows 6+
    Consolas,
    // Android 4+
    'Roboto Mono',
    // Ubuntu 10.10+
    'Ubuntu Monospace',
    // KDE Plasma 5+
    'Noto Mono',
    // KDE Plasma 4+
    'Oxygen Mono',
    // Linux/OpenOffice fallback
    'Liberation Mono',
    // Default fallback
    monospace,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 1em;
}

code,
kbd {
  font-size: 0.875em;
}

code {
  border-radius: 3px;
  background-color: #eee;
  word-break: break-word;
}

// Opinionated styling for <kbd> elements
// to make them look like keyboard buttons

kbd {
  position: relative;
  top: -0.125rem;
  inset-block: -0.125rem auto;
  inset-inline: auto;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

// 1. Dont't allow content to break outside.
// 2. Remove top margin to avoid vertical margin collapse.
// 3. Overwrite physical margin properties with logical margin properties for
//    browsers that support it to improve internationalization.

pre {
  overflow: auto; // 1
  margin: 0 0 1rem; // 2
  margin-block: 0 1rem; // 3
  margin-inline: 0; // 3
}

:where(pre:has(code)) {
  max-width: 110ch;
  max-inline-size: 110ch;
  max-height: 21.25rem;
  max-block-size: 21.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #eee;
}

:where(pre) code {
  border-radius: 0;
  background-color: inherit;
  word-break: inherit;
}

output {
  display: inline-block;
}

address {
  margin-bottom: 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
  font-style: normal;
  line-height: inherit;
}

// 1. Remove the bottom border in Chrome 57-
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.

dfn[title],
abbr[title],
acronym[title] {
  border-bottom: none; // 1
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  cursor: help; // 3
}

// Render tables with collapsed borders and other improved defaults.

table {
  vertical-align: middle;
  border-spacing: 0;
  border-collapse: collapse;
  border-color: currentColor;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}

// Child-combinator `tr` for tables without table section elements,
// which can happen with XHTML or dynamically created tables.

table,
table > tr {
  vertical-align: middle;
}

// Matches default `<td>` alignment by inheriting from the `<body>`, or the
// closest parent with a set `text-align`.

th {
  text-align: inherit;
}

caption {
  padding: 0.75rem 0;
  padding-block: 0.75rem;
  padding-inline: 0;
  color: #6c757d;
  caption-side: bottom;
  text-align: inherit;
}

// A better looking horizontal rule that looks the same in all browsers
// and inherits the color of the parent element's text so that it looks good
// by default on all background colors.

hr {
  display: block;
  overflow: hidden;
  box-sizing: content-box;
  height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1rem 0;
  margin-block: 1rem;
  margin-inline: 0;
  color: inherit;
  opacity: 0.6;
}

// If you do not like the look of the modified <hr> above, and you want a more
// basic horizontal rule without having to overwrite styling yourself, use the
// `hr-light` class.

.hr-light {
  border-top-color: #ccc;
  opacity: 1;
}

// Add the correct font style in Android 4.3- and Safari 5.1-

dfn {
  font-style: italic;
}

// Undo browser default inline start margin

dd {
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
}

// Reset all list styles for <ol> and <ul> elements used in <nav> elements

menu,
nav ol,
nav ul,
footer ol,
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

// Remove the margin on nested detail lists in Chrome, Edge, IE, and Safari,

menu dl,
ol dl,
ul dl,
dl dl,
dl ol,
dl ul,
dl menu {
  margin: 0;
}

// Prevent VoiceOver from ignoring list semantics in Safari

nav li:before {
  content: '\200B';
  float: left;
}

// Ensure dialog elements always displayed correctly.

dialog {
  position: absolute;
  right: 0;
  left: 0;
  width: -webkit-intrinsic;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-intrinsic;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1em;
  border: 2px solid currentColor;
  margin: auto;
  background-color: #fff;
  color: #111;
}

// Ensures dialog elements without the 'open' attribute are not displayed and
// adds the correct display value for template elements in legacy Edge and IE.

dialog:not([open]),
template {
  display: none;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #FORMS ------------------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// 1. Remove the margins on controls in Firefox and Safari.
// 2. Change the font styles on controls correctly across browsers.

button,
input,
optgroup,
select,
textarea {
  margin: 0; // 1
  font-family: inherit; // 2
  font-size: 100%; // 2
  line-height: 1.15; // 2
}

// Fix the inconsistent default appearance across browsers.

button,
input,
select,
textarea {
  padding: 0.25em 0.375em;
  padding-block: 0.25em;
  padding-inline: 0.375em;
  background-color: transparent;
  color: inherit;
  letter-spacing: inherit;
}

// Ensure the correct touch action for these elements across mobile browsers.

a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea,
[tabindex='0'] {
  touch-action: manipulation;
}

// 1. Remove underline from links and add them back as a hover/focus effect.
// 2. Ensure default cursor behavior on links.
// 3. Remove gaps in link underlines in iOS8+ and Safari 8+ (opinionated).
// 4. Add a fake color to `:link` and `:visited` which will cause those
//    link states to fall back to the color set on the `<a>` itself.

a {
  text-decoration: none; // 1
  cursor: pointer; // 2
  -webkit-text-decoration-skip: objects; // 3

  &:link,
  &:visited {
    color: _; // 4
  }

  &:hover,
  &:focus,
  &:active {
    text-decoration: underline; // 1
  }
}

// And undo these styles for placeholder links/named anchors (without href)
// which have not been made explicitly keyboard-focusable (without tabindex).

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus {
    color: inherit;
    text-decoration: none;
  }

  &:focus {
    outline: 0;
  }
}

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

button,
select {
  text-transform: none;
}

// Fix the inconsistent appearance across browsers.

select {
  padding: 0.125em 1em 0.125em 0.25em;
  padding-block: 0.125em;
  padding-inline: 1em 0.25em;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
}

// Don't show the arrow for multiple choice selects

select[multiple] {
  background-image: none;
}

// Ensure the same default "down arrow" to indicate
// available options in a select box

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

// 1. Remove the default `border-radius` that macOS Chrome adds.
// 2. Correct the inability to style clickable types in iOS and Safari.
// 3. Changes the default cursor on all buttons to the pointer.

button,
[type='button'],
[type='reset'],
[type='submit'] {
  border-radius: 0; // 1
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

// Remove the inner border and padding on focused buttons in Firefox.

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

// Remove the border and padding in all browsers (opinionated)

[type='color'],
[type='range'] {
  padding: 0;
  border-width: 0;
}

// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
// See https://bugs.webkit.org/show_bug.cgi?id=139848
// and https://github.com/twbs/bootstrap/issues/11266

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}

// Remove the default vertical scrollbar and restric horizontal resizing.

textarea {
  overflow: auto;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: #e6e6e6;
  cursor: not-allowed;
}

// Reset fieldsets to make them behave more like a standard block element and
// not negatively affect page layout.
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

legend {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  margin-bottom: 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: inherit;
  white-space: normal;
}

// Add the correct vertical alignment in Chrome, Firefox, and Opera.

progress {
  display: inline-block;
  vertical-align: baseline;
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.

[tabindex='-1']:focus {
  outline: 0 !important;
}

// Correct the text style of placeholders.

::placeholder {
  color: inherit;
  opacity: 0.54;
}

// Remove the additional :invalid styles in Firefox.

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

:invalid {
  box-shadow: 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 {
  font: inherit;
  -webkit-appearance: button;
}

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

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

// 1. Correct the appearance in Chrome and Safari.
// 2. Correct the outline offset in Safari.

[type='search'] {
  -webkit-appearance: textfield; // 1
  outline-offset: -2px; // 2
}

// Remove the inner padding on search cancel buttons and search decorations in
// Chrome and Safari on macOS.

::-webkit-search-decoration,
::-webkit-search-cancel-button {
  -webkit-appearance: none;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #EMBEDDED MEDIA AND OTHER CONTENT ---------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Make maintaining media aspect-ratios simple

audio,
canvas,
embed,
iframe,
img,
input,
object,
select,
textarea,
video {
  max-width: 100%;
  height: auto;
}

// Change the alignment on media elements in all browsers.

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

// The styles necessary for the most optimized <img> defaults.
// The other styles associated with img are grouped with other selectors.

img {
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  font-style: italic;
  shape-margin: 1rem;

  // Render .svg, .bmp, .png, and .svg <img> elements
  // optimizing for quality over speed.

  &[src$='.bmp'],
  &[src$='.gif'],
  &[src$='.png'],
  &[src$='.svg'] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeQuality;
    image-rendering: crisp-edges;
  }

  // If supported, apply smooth rendering to images likely to be photos.

  &[src$='.avif'],
  &[src$='.jp2'],
  &[src$='.jpeg'],
  &[src$='.jpg'],
  &[src$='.jxr'],
  &[src$='.webp'] {
    image-rendering: smooth;
  }
}

// Remove the border on iframes in all browsers.

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

// https://html.spec.whatwg.org/C/#the-details-and-summary-elements
// The specification doesn't have details > summary:first-of-type but
// it is added because modern Chrome, Safari, and Firefox use
// `summary { display: block }` as there are sites using `<summary>`
// without `<details>`, and they expect that `<summary>` will not display
// as a list-item when doing so. This will add the correct display back
// for those browsers when `<summary>` is used with `<details>`.

details > summary:first-of-type {
  display: list-item;
  list-style: disclosure-closed inside;
  counter-increment: list-item 0;
}

details[open] > summary:first-of-type {
  list-style: disclosure-open inside;
}

svg:not([fill]) {
  fill: currentColor;
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #ACCESSIBILITY ----------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Change the cursor on busy elements in all browsers (opinionated).

[aria-busy='true'] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

// Change the cursor on disabled, not-editable, or otherwise
// inoperable elements in all browsers.

[aria-disabled='true'],
[disabled] {
  cursor: not-allowed;
}

// Change the display on visually hidden accessible elements.

[aria-hidden='false'][hidden] {
  display: initial;

  &:not(:focus) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
}

// Respect prefers-reduced-motion being set by the user in their OS or browser.
// 1. Remove fixed background attachments when prefers-reduced-motion is on.
// 2. Remove transitions when prefers-reduced-motion is on.
// 3. Remove animations when prefers-reduced-motion is on.
// 4. Remove timed scrolling behaviors when prefers-reduced-motion is on.

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important; // 1
    transition-duration: 0s !important; // 2
    transition-delay: 0s !important; // 2
    animation-duration: 1ms !important; // 3
    animation-delay: -1ms !important; // 3
    animation-iteration-count: 1 !important; // 3
    scroll-behavior: auto !important; // 4
  }
}


////////////////////////////////////////////////////////////////////////////////
// -------------------------------------------------------------------------- //
// #UTILITIES --------------------------------------------------------------- //
// -------------------------------------------------------------------------- //
////////////////////////////////////////////////////////////////////////////////


// Hide visually and from screen readers. It is recommended that you use the
// HTML attribute [hidden] rather than a .hidden class for accessibility.

[hidden] {
  display: none !important;
}

// For Screen Readers Only - Hide visually but not from screen readers.
// https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

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

// Extends the `.visually-hidden` and `.sr-only` classes to allow
// the element to be focusable when navigated to via the keyboard:
// https://www.drupal.org/node/897638

.sr-only.focusable:active,
.sr-only.focusable:focus,
.sr-only--focusable:active,
.sr-only--focusable:focus,
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus,
.visually-hidden--focusable:active,
.visually-hidden--focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  white-space: inherit;
}

// Hide visually and from screen readers, but maintain layout

.invisible {
  visibility: hidden;
}

// Contain floats with classic clearfix.

.clearfix {
  &::before,
  &::after {
    content: '';
    display: table;
  }

  &::after {
    clear: both;
  }
}

// Modern float clearing without clearfix hack.
// Chrome 58+, Safari 13+, Firefox 53+

.group {
  display: flow-root;
  overflow: clip;
}

// Apply flex-based centering to an element directly from markup.

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Toggle off an active animation by applying this class with JavaScript

.anim-off {
  animation: none !important;
}

/// The last rule is only needed if your project uses a JS framework or library
/// like React. You want the selector of this rule to select the top level
/// element that your application is rendered within. It ensures that
/// high-priority elements will show up above all others and prevents stacking
/// context bugs and common z-index issues.
///
/// @todo If not using React or something similar, delete this rule and comment.
/// If you are going to use the rule, just delete this comment.

#root,
#__next {
  isolation: isolate;
}