/**
 * @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).
 */

/**
 * 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);
  /* overflow-wrap: break-word; */
  /* hyphens: auto; */
}

/**
 * Typography
 */
h1, h2, h3, h4, p, li {
  overflow-wrap: break-word;
  /* hyphens: auto; */
  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-sm);
}
h3,
.h3 {
  font: var(--msu-heading3);
  line-height: var(--msu-line-height-sm);
}
h4,
.h4 {
  font: var(--msu-heading4);
  line-height: var(--msu-line-height-sm);
}
h5,
.h5 {
  font: var(--msu-heading5);
  line-height: var(--msu-line-height-sm);
}
h6
.h6 {
  font: var(--msu-heading6);
  line-height: var(--msu-line-height-sm);
}
p, li {
  text-wrap: pretty;
}
p {
  margin-bottom: var(--msu-space-md);
}

/* 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;
} */
figcaption:has(p) {
  padding: var(--msu-space-sm);
}
figcaption p {
  font-size: var(--msu-text-sm);
  max-inline-size: 83ch;
  margin: auto;
}

a {
  /* color: inherit; */
  /* color: var(--msu-maroon); */
  color: var(--msu-link-color);
  text-decoration: var(--msu-text-decoration);
}
a:not([class]) {
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

/* Tables */
table {
  margin-bottom: 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));
} */

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

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

figure {
  margin: 0 0 1rem;
}

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