/**
 * @file
 * Base styles for the MSU Extension theme.
 *
 * Incorporates some elements from Modern Normalize (https: //raw.githubusercontent.com/sindresorhus/modern-normalize/main/modern-normalize.css) and Tailwind's Preflight (https: //unpkg.com/tailwindcss@3.4.10/src/css/preflight.css).
 */

/* @layer base { */

  /**
  * Use a better box model (opinionated).
  */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* To prevent flash of undefined custom elements, we fade in components. */
  :not(:defined) {
    visibility: hidden;
  }

  @keyframes fade {
    0% {
      opacity: 0.001;
    }

    100% {
      opacity: 1;
    }
  }

  /* body {
    animation-delay: 0.05s;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: fade;
    opacity: 0;
  } */

  /* Remove default margins. */
  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    color: var(--msu-black);
    font-family: var(--msu-font-sans);
    font-size: var(--msu-font-size-base);
    line-height: var(--msu-line-height-base);
    /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%;
    /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    tab-size: 4;
    /* 3. Use a more readable tab size (opinionated). */
  }

  /**
  * Remove the margin in all browsers.
  */
  body {
    margin: var(--msu-space-0);
  }

  /**
  * Typography
  */
  h1,
  h2,
  h3,
  h4,
  p,
  li {
    margin-top: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: var(--msu-space-md);
  }

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

  h1,
  .h1 {
    font: var(--msu-heading1);
    line-height: var(--msu-line-height-xs);
  }

  h2,
  .h2 {
    font: var(--msu-heading2);
    line-height: var(--msu-line-height-xs);
  }

  h3,
  .h3 {
    font: var(--msu-heading3);
    line-height: var(--msu-line-height-xs);
  }

  h4,
  .h4 {
    font: var(--msu-heading4);
    line-height: var(--msu-line-height-xs);
  }

  h5,
  .h5 {
    font: var(--msu-heading5);
    line-height: var(--msu-line-height-xs);
  }

  h6,
  .h6 {
    font: var(--msu-heading6);
    line-height: var(--msu-line-height-xs);
  }

  p {
    margin-bottom: var(--msu-space-lg);
  }

  /* Set a maximum line length for various texts for readability. */
  /* p:not(:has(> :not(*))) { */
  /* p:not(:has(img)),
  li:not(:has(img)) {
    max-inline-size: 83ch;
  } */

  a {
    color: var(--msu-link-color);
    text-decoration: var(--msu-text-decoration-line) var(--msu-text-decoration-thickness) var(--msu-text-decoration-style) rgb(from var(--msu-link-color) r g b / 0.5);
  }

  a:is(:hover, :active, :focus) {
    --msu-text-decoration-style: solid;
  }

  a:not([class]) {
    text-decoration-thickness: var(--msu-text-decoration-thickness);
    text-underline-offset: var(--msu-text-underline-offset);
  }

  /* Tables */
  table {
    margin-block: var(--msu-space-2xl);
  }

  /* States */

  /* :focus-visible {
    --outline-size: max(2px, 0.15em);
    outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid)
      var(--outline-color, currentColor);
    outline-offset: var(--outline-offset, var(--outline-size));
  } */

  /* --msu-table-sticky-top: offset from the top of the viewport for sticky
    elements (sticky table thead, scroll-margin, etc.). When msu-header is
    sticky it contributes its full height; otherwise it contributes nothing.
    JS sets --msu-header-height on :root on load and resize. */
  :root {
    --msu-table-sticky-top: var(--drupal-displace-offset-top, 0px);
  }
  :root:has(msu-header[sticky]) {
    --msu-table-sticky-top: calc(var(--drupal-displace-offset-top, 0px) + var(--msu-header-height, 0px));
  }

  /* Snaps to the top of the viewport when targeted by ID in the URL. */
  [id] {
    scroll-margin-top: var(--msu-table-sticky-top, 2rem);
  }

  /* Scroll margin allowance above anchor links */
  :target {
    scroll-padding-block-start: 2rem;
  }

  /* Scroll margin allowance below focused elements to ensure they are in view */
  :focus {
    scroll-padding-block-end: 8vh;
  }

  img,
  svg,
  picture,
  video {
    display: block;
    max-width: 100%;
    height: var(--msu-image-height, auto);
    object-fit: var(--msu-object-fit, fill);
    object-position: var(--msu-object-position, 50% 50%);
  }

  /* iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  } */

  audio {
    display: block;
    max-width: 100%;
  }

  figure {
    /* margin: 0 0 1rem; */
    margin-block: var(--msu-space-xl);
    inline-size: fit-content;
  }

  figcaption {
    contain: inline-size;
    /* text-align: center; */
    padding: var(--msu-space-sm);
    font-size: var(--msu-text-sm);
  }

  /* figcaption:has(p) {
    padding: var(--msu-space-sm);
  } */

  figcaption p {
    /* max-inline-size: 83ch; */
    max-inline-size: fit-content;
    margin: auto;
  }

  /* a:focus {
    outline: 2px dotted currentColor;
    outline: 2px dotted color-mix(in srgb, currentColor 20%, transparent);
    outline-offset: 2px;
  } */

/* } */