/* Set Up Variables to be Used Across Application */
@import "./variables.css";
@import "./font.css";
@import "./components.css";

:root {
  interpolate-size: allow-keywords;

  /* Container Variables */
  --padding-inline: 2rem;
  --content-max-width: 120ch;
  --content-min-width: calc(100% - (var(--padding-inline) * 2));
  --breakout-max-width: 140ch;
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );
}

/* Removes Default Spacing */
* {
  margin: 0px;
  padding: 0px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: var(--page-background);
}

/* Form Reset */
input,
button,
select,
textarea,
option {
  font: inherit;
}

.form-group:has(input:required) label::after,
.form-group:has(select:required) label::after,
.form-group:has(textarea:required) label::after {
  content: " *";
}

form {
  display: grid;
  gap: 1rem;
}

.form-group {
  display: grid;
  gap: 0.125rem;
}

input {
  width: 100%;
}

/* Grid System for Page Layout */
.content-grid {
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(var(--content-min-width), var(--content-max-width))
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

/* Image and Video */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video {
  width: 100%;
}

/* Primary Buttons */
button {
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}