/**
 * uaplus.css version 0.3.1
 */

/**
 * Wrapping everything in an anonymous layer ensures that selectors
 * in UA+ have the lowest specificty or the highest when using
 * !important.
 */
@layer {
  /**
   * Different box model
   * 
   * We use 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 <code>inline-size</code> and 
   * <code>block-size</code> easier.
   * 
   * See https://en.wikipedia.org/wiki/CSS_box_model
   */
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  /**
   * Improve focus styles
   *
   * Add spacing between content and its focus outline.
   */
  :focus-visible {
    outline-offset: 3px;
  }

  /**
   * 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/
   */
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /**
   * Increase line height
   *
   * Long paragraphs are easier to read if the line height is higher.
   */
  html {
    line-height: 1.5;
  }

  /**
   * Add scrollbar gutter
   *
   * Prevent the page from “jumping” when switching from a long to a short page.
   *
   */
  html {
    scrollbar-gutter: stable;
  }

  /**
   * Remove UA styles for h1s nested in sectioning content
   *
   * Nesting h1s in section, articles, etc., shouldn't influence the 
   * styling of the heading since nesting doesn't influence 
   * semantics either.
   * 
   * See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
   * See https://github.com/whatwg/html/pull/11102
   * See https://html.spec.whatwg.org/#sections-and-headings
   */
  h1 {
    font-size: 2em;
    margin-block: 0.67em;
  }

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

  /**
   * Avoid overflow caused by embedded content
   * 
   * Ensure that embedded content (audio, video, images, etc.) 
   * doesn't overflow its container.
   */
  audio,
  iframe,
  img,
  svg,
  video {
    max-block-size: 100%;
    max-inline-size: 100%;
  }

  /**
   * 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
   */
  fieldset {
    min-inline-size: 0;
  }

  /**
   * Turn labels into block elements
   * 
   * Labels for inputs, selects, and textarea should be block 
   * elements.
   */
  label:has(
    + :where(input:not([type="radio"], [type="checkbox"]), select, textarea)
  ) {
    display: block;
  }

  /**
   * Increase the block-size of textareas
   *
   * The default height of textareas is small. We increase it a bit.
   */
  textarea:not([rows]) {
    min-block-size: 6em;
  }

  /**
   * Inherit font styling in form elements
   * 
   * buttons, inputs, selects, and textarea should have the same font
   * family and size as the rest of the page.
   */
  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit;
  }

  /**
   * Normalize search input styles
   *  
   * Remove the rounded corners of search inputs on macOS and IOS 
   * and normalize the background color
   */
  [type="search"] {
    -webkit-appearance: textfield;
  }

  /* iOS only */
  @supports (-webkit-touch-callout: none) {
    [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
   */
  input: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.
   */
  table {
    border-collapse: collapse;
    border: 1px solid;
  }

  th,
  td {
    border: 1px solid;
    padding: 0.25em 0.5em;
    vertical-align: top;
  }

  /**
   * Fading dialogs
   *  
   * Add fade in and fade out transitions for the dialog element
   * and backdrops
   */
  dialog::backdrop {
    background: oklch(0% 0 0 / 0.3);
  }

  dialog,
  [popover],
  dialog::backdrop {
    opacity: 0;
    transition:
      opacity 150ms ease-out,
      display 150ms allow-discrete,
      overlay 150ms allow-discrete;
  }

  dialog[open],
  :popover-open,
  dialog[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    dialog[open],
    :popover-open,
    dialog[open]::backdrop {
      opacity: 0;
    }
  }

  /**
   * Increase specificity of [hidden]
   *  
   * Make it harder to accidentally unhide elements with the 
   * [hidden] attribute while still maintaining the until-found 
   * functionality.
   */
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  /**
   * Turn images into block elements
   */
  img {
    display: block;
  }

  /**
   * Change cursor of <summary>
   *
   * By default, only the ::marker inside the summary uses the 
   * default cursor.
   */
  summary {
    cursor: default;
  }

  /**
   * Remove the default border from iframes
   */
  iframe {
    border: none;
  }

  /**
   * By default popovers look like modals without a backdrop.
   * This makes use of the implicit anchor in popvers to position
   * it closely to the trigger.
   */
  @supports (position-area: end) {
    [popover] {
      margin: 0;
      position-area: end span-end;
      position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
    }
  }
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
blockquote {
  margin: 0;
  padding: 0;
}