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