/**
 * uaplus.css version 0.4.1
 */

/**
 * Wrapping everything in a cascade layer ensures that selectors
 * in UA+ have the lowest specificty or the highest when using
 * !important.
 */
@layer uaplus-reset - styles {
	/**
   * 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;
	}

   /**
   * Disable subpixel antialiasing on macOS
   * 
   * Text in browsers on macOS is rendered thicker than on other operating systems.
   * With this rule fonts are rendered closer in weight to other operating systems.
   * 
   * See https://dbushell.com/2024/11/05/webkit-font-smoothing/
   */
   body {
      -webkit-font-smoothing: antialiased;
   }

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

  /**
   * Smaller default line heights for headings
   */
   h1, h2, h3 {
      line-height: 1.2;
   }

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

  /**
   * Use “not-allowed” cursor for all disabled elements
   */
  :disabled {
    cursor: not - allowed;
  }

	/**
   * 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
*  
* 1. With the default styling, tables are hard to scan. These rules 
* add padding and collapsed borders.
* 2. Keep numbers aligned and consistent in tables, making data easier to read.
*/
table {
		border-collapse: collapse; /* 1 */
border: 1px solid; /* 1 */
font - variant - numeric: tabular - nums lining - nums slashed - zero; /* 2 */
	}

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

  /**
   * Dialogs
   *  
   * Make the backdrop in modal dialogs a bit darker.
   */

  dialog::backdrop {
background: oklch(0 % 0 0 / 0.5);
}

/**
* Fading dialogs
*  
* Add fade in and fade out transitions for the dialog element
* and backdrops
*/

/* Transition property for dialogs */
dialog {
    --_dialog-transition-speed: 150ms;
--_dialog - transition: var(--_dialog - transition - speed);
  }

   /* Set it 0 for Safari when fading out because of a bug that occurs when you transition display */
  dialog: not(:modal) {
    --_dialog - transition: 0;
}

/* Reset the pervious change for Chromium browsers */
dialog: -internal -dialog -in-top - layer {
    --_dialog - transition: var(--_dialog - transition - speed);
}

dialog,

[popover],
dialog::backdrop {
		opacity: 0;
transition: opacity var(--_dialog - transition) ease -out, display var(--_dialog-transition) allow - discrete,
			overlay var(--_dialog-transition) 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;
        }
  }
}