/* ============================================================================
   STUDENT DEVELOPER GUIDE — 5041 TRAINING HUB CSS

   This file controls visual styling. HTML supplies the content; CSS decides how
   that content looks and is arranged.

   IMPORTANT IDEAS FOR STUDENTS
   - A selector such as .dt-card styles every element with class="dt-card".
   - A selector such as #quizResult targets one unique id="quizResult" element.
   - More specific selectors can override less specific selectors.
   - Rules later in a stylesheet can override earlier rules when specificity is
     equal. This is called the CSS cascade.
   - CSS variables such as var(--red) come from a shared :root rule. Reuse them
     instead of hard-coding colors when possible.
   - !important forces a declaration to win many cascade conflicts. Use it only
     when necessary; too many !important rules make future editing difficult.
   - display:grid is used heavily for card layouts. grid-template-columns controls
     the number and size of columns; gap controls spacing between items.
   - max-width and margin: 0 auto are commonly used to keep content readable and
     horizontally centered.
   - Media queries near the bottom of many files adjust layouts for smaller screens.

   WHEN ADDING NEW STYLES
   1. Reuse an existing class if it already creates the appearance you need.
   2. If the style is module-specific, use the module prefix already in this file
      (for example dt-, judge-, media-, safety-) to avoid accidental conflicts.
   3. Put related rules together and add a short section comment.
   4. Test the slide at both large and small browser sizes.
   5. Avoid changing a shared selector unless you intend to change every page that
      uses it.
============================================================================ */
/* 5041 Training Hub stylesheet: shared/css/roar-styles.css
   Organized during cleanup; selectors preserved to maintain module appearance. */

/* STUDENT NOTE: Shared CSS variables. Change these carefully because many pages may reuse these values. */
:root {
  --red: #980000;
  --black: #000000;
  --gray: #666666;
  --light: #f3f3f3;
  --white: #ffffff;
  --danger: #b00020;
  --success: #2e7d32;
  --warning: #b26a00;
  --shared-width: 1120px;
}

/* STUDENT NOTE: Styles elements matched by `*`. Search the HTML for these class/id names before changing a shared rule. */
* {
  box-sizing: border-box;
}

/* STUDENT NOTE: Styles elements matched by `body`. Search the HTML for these class/id names before changing a shared rule. */
body {
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(152, 0, 0, 0.12), transparent 35%),
    var(--light);
  color: var(--black);
  font-family: "Droid", sans-serif;
}

/* STUDENT NOTE: Styles elements matched by `.app-shell`. Search the HTML for these class/id names before changing a shared rule. */
.app-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 1.5rem auto 2.5rem;
}

/* STUDENT NOTE: Styles elements matched by `.brand-hero`. Search the HTML for these class/id names before changing a shared rule. */
.brand-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-left: 10px solid var(--black);
  border-top: 16px solid var(--red);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  padding: 1.3rem;
  margin-bottom: 1.2rem;
}

/* STUDENT NOTE: Styles elements matched by `.brand-angle`. Search the HTML for these class/id names before changing a shared rule. */
.brand-angle {
  position: absolute;
  pointer-events: none;
  transform: skewX(-18deg);
}

/* STUDENT NOTE: Styles elements matched by `.brand-angle-black`. Search the HTML for these class/id names before changing a shared rule. */
.brand-angle-black {
  right: -80px;
  top: -45px;
  width: 210px;
  height: 115px;
  background: var(--black);
  opacity: 0.08;
}

/* STUDENT NOTE: Styles elements matched by `.brand-angle-red`. Search the HTML for these class/id names before changing a shared rule. */
.brand-angle-red {
  right: 120px;
  bottom: -70px;
  width: 260px;
  height: 95px;
  background: var(--red);
  opacity: 0.16;
}

/* STUDENT NOTE: Styles elements matched by `.brand-content`. Search the HTML for these class/id names before changing a shared rule. */
.brand-content {
  font-family: "Audiowide", sans-serif;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}

/* STUDENT NOTE: Typography/spacing rule for `.brand-copy h1`. These values affect readability and vertical space on slides. */
.brand-copy h1 {
  font-family: "Audiowide", sans-serif;
  margin: 0.1rem 0;
  color: var(--red);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 0.95;
}

/* STUDENT NOTE: Styles elements matched by `.eyebrow`. Search the HTML for these class/id names before changing a shared rule. */
.eyebrow {
  margin: 0;
  color: var(--red);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* STUDENT NOTE: Styles elements matched by `.small-eyebrow`. Search the HTML for these class/id names before changing a shared rule. */
.small-eyebrow {
  font-size: 0.72rem;
}

/* STUDENT NOTE: Styles elements matched by `.muted`. Search the HTML for these class/id names before changing a shared rule. */
.muted {
  color: var(--gray);
}

/* STUDENT NOTE: Styles elements matched by `.small`. Search the HTML for these class/id names before changing a shared rule. */
.small {
  font-size: 0.9rem;
}

/* STUDENT NOTE: Styles elements matched by `.logo-panel`. Search the HTML for these class/id names before changing a shared rule. */
.logo-panel {
  min-width: 190px;
  min-height: 120px;
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--white);
  border-left: 10px solid var(--red);
  padding: 0.8rem;
  text-align: center;
}

/* STUDENT NOTE: Styles elements matched by `.text-logo span`. Search the HTML for these class/id names before changing a shared rule. */
.text-logo span {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--white);
}

/* STUDENT NOTE: Styles elements matched by `.text-logo strong`. Search the HTML for these class/id names before changing a shared rule. */
.text-logo strong {
  display: block;
  font-size: 1.25rem;
  color: var(--white);
}

/* STUDENT NOTE: Styles elements matched by `.hero-action-row`. Search the HTML for these class/id names before changing a shared rule. */
.hero-action-row {
  position: relative;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* STUDENT NOTE: Styles elements matched by `.loading-bar`. Search the HTML for these class/id names before changing a shared rule. */
.loading-bar {
  height: 12px;
  flex: 1;
  background: linear-gradient(90deg, var(--red) 0 55%, var(--black) 55% 78%, var(--gray) 78% 100%);
}

/* STUDENT NOTE: Button styling for `.button-row`. Keep hover/selected/correct states visually consistent with the base button. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* STUDENT NOTE: Layout rule for `.grid, .report-grid`. Grid properties here control columns, gaps, and alignment. */
.grid,
.report-grid {
  display: grid;
  gap: 1.1rem;
}

/* STUDENT NOTE: Layout rule for `.single-grid`. Grid properties here control columns, gaps, and alignment. */
.single-grid {
  grid-template-columns: 1fr;
}

/* STUDENT NOTE: Layout rule for `.compact-report-grid`. Grid properties here control columns, gaps, and alignment. */
.compact-report-grid {
  grid-template-columns: 1fr;
}

/* STUDENT NOTE: Styles elements matched by `.card`. Search the HTML for these class/id names before changing a shared rule. */
.card {
  background: var(--white);
  border-left: 8px solid var(--red);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  padding: 1.2rem;
}

/* STUDENT NOTE: Styles elements matched by `.full-width-card`. Search the HTML for these class/id names before changing a shared rule. */
.full-width-card {
  grid-column: 1 / -1;
}

/* STUDENT NOTE: Styles elements matched by `.section-heading`. Search the HTML for these class/id names before changing a shared rule. */
.section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

/* STUDENT NOTE: Styles elements matched by `.compact-heading`. Search the HTML for these class/id names before changing a shared rule. */
.compact-heading {
  margin-bottom: 0.7rem;
}

/* STUDENT NOTE: Styles elements matched by `.corner-mark`. Search the HTML for these class/id names before changing a shared rule. */
.corner-mark {
  width: 16px;
  height: 42px;
  flex: 0 0 auto;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
}

/* STUDENT NOTE: Typography/spacing rule for `h2`. These values affect readability and vertical space on slides. */
h2 {
  margin: 0;
  font-size: 1.65rem;
}

/* STUDENT NOTE: Styles elements matched by `form`. Search the HTML for these class/id names before changing a shared rule. */
form {
  display: grid;
  gap: 0.9rem;
}

/* STUDENT NOTE: Styles elements matched by `label, legend`. Search the HTML for these class/id names before changing a shared rule. */
label,
legend {
  display: grid;
  gap: 0.35rem;
  font-weight: 800;
}

/* STUDENT NOTE: Styles elements matched by `input, textarea`. Search the HTML for these class/id names before changing a shared rule. */
input,
textarea {
  width: 100%;
  border: 2px solid var(--gray);
  border-left: 8px solid var(--red);
  padding: 0.7rem;
  font: inherit;
  background: var(--white);
}

/* STUDENT NOTE: Styles elements matched by `textarea`. Search the HTML for these class/id names before changing a shared rule. */
textarea {
  resize: vertical;
}

/* STUDENT NOTE: Styles elements matched by `.two-col`. Search the HTML for these class/id names before changing a shared rule. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

/* STUDENT NOTE: Styles elements matched by `.report-type-box`. Search the HTML for these class/id names before changing a shared rule. */
.report-type-box {
  border: 2px solid var(--black);
  padding: 0.85rem;
}

/* STUDENT NOTE: Styles elements matched by `.check-row, .sub-checks label`. Search the HTML for these class/id names before changing a shared rule. */
.check-row,
.sub-checks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* STUDENT NOTE: Styles elements matched by `.check-row input, .sub-checks input`. Search the HTML for these class/id names before changing a shared rule. */
.check-row input,
.sub-checks input {
  width: auto;
}

/* STUDENT NOTE: Styles elements matched by `.sub-checks`. Search the HTML for these class/id names before changing a shared rule. */
.sub-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0.1rem 0 0.5rem 1.5rem;
  color: var(--gray);
}

/* STUDENT NOTE: Styles elements matched by `.required`. Search the HTML for these class/id names before changing a shared rule. */
.required {
  color: var(--red);
}

/* STUDENT NOTE: Styles elements matched by `.summary-box, .totals`. Search the HTML for these class/id names before changing a shared rule. */
.summary-box,
.totals {
  background: var(--light);
  border-left: 8px solid var(--red);
  padding: 0.85rem;
}

/* STUDENT NOTE: Styles elements matched by `.warning-box strong`. Search the HTML for these class/id names before changing a shared rule. */
.warning-box strong {
  display: block;
  margin: 0.2rem 0;
}

/* STUDENT NOTE: Button styling for `button, .button-link`. Keep hover/selected/correct states visually consistent with the base button. */
button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border: 0;
  padding: 0.8rem 1rem;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

/* STUDENT NOTE: Button styling for `button.secondary, .button-link.secondary`. Keep hover/selected/correct states visually consistent with the base button. */
button.secondary,
.button-link.secondary {
  background: var(--black);
}

/* STUDENT NOTE: Button styling for `button:hover, button:focus, .button-link:hover, .button-link:focus`. Keep hover/selected/correct states visually consistent with the base button. */
button:hover,
button:focus,
.button-link:hover,
.button-link:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* STUDENT NOTE: Styles elements matched by `.message`. Search the HTML for these class/id names before changing a shared rule. */
.message {
  min-height: 1.3rem;
  margin: 0.1rem 0 0;
  font-weight: 800;
}

/* STUDENT NOTE: Styles elements matched by `.message.success`. Search the HTML for these class/id names before changing a shared rule. */
.message.success {
  color: var(--success);
}

/* STUDENT NOTE: Styles elements matched by `.message.error`. Search the HTML for these class/id names before changing a shared rule. */
.message.error {
  color: var(--danger);
}

/* STUDENT NOTE: Styles elements matched by `.message.warning`. Search the HTML for these class/id names before changing a shared rule. */
.message.warning {
  color: var(--warning);
}

/* STUDENT NOTE: Styles elements matched by `.report-totals, .totals`. Search the HTML for these class/id names before changing a shared rule. */
.report-totals,
.totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

/* STUDENT NOTE: Styles elements matched by `.totals div`. Search the HTML for these class/id names before changing a shared rule. */
.totals div {
  background: var(--white);
  border-left: 8px solid var(--red);
  padding: 0.75rem;
}

/* STUDENT NOTE: Styles elements matched by `.totals span`. Search the HTML for these class/id names before changing a shared rule. */
.totals span {
  display: block;
  color: var(--gray);
  font-size: 0.86rem;
}

/* STUDENT NOTE: Styles elements matched by `.totals strong`. Search the HTML for these class/id names before changing a shared rule. */
.totals strong {
  display: block;
  font-size: 1.7rem;
}

/* STUDENT NOTE: Styles elements matched by `.reports-list`. Search the HTML for these class/id names before changing a shared rule. */
.reports-list {
  display: grid;
  gap: 1rem;
}

/* STUDENT NOTE: Styles elements matched by `.report-card`. Search the HTML for these class/id names before changing a shared rule. */
.report-card {
  background: var(--light);
  border: 2px solid var(--black);
  border-left: 10px solid var(--red);
  padding: 1rem;
}

/* STUDENT NOTE: Styles elements matched by `.report-card header`. Search the HTML for these class/id names before changing a shared rule. */
.report-card header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--gray);
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
}

/* STUDENT NOTE: Styles elements matched by `.report-pill`. Search the HTML for these class/id names before changing a shared rule. */
.report-pill {
  align-self: flex-start;
  background: var(--black);
  color: var(--white);
  border-left: 8px solid var(--red);
  padding: 0.45rem 0.6rem;
  font-size: 0.86rem;
  font-weight: 800;
}

/* STUDENT NOTE: Styles elements matched by `.report-card dl`. Search the HTML for these class/id names before changing a shared rule. */
.report-card dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.45rem 0.85rem;
  margin: 0;
}

/* STUDENT NOTE: Styles elements matched by `.report-card dt`. Search the HTML for these class/id names before changing a shared rule. */
.report-card dt {
  font-weight: 800;
}

/* STUDENT NOTE: Styles elements matched by `.report-card dd`. Search the HTML for these class/id names before changing a shared rule. */
.report-card dd {
  margin: 0;
  white-space: pre-wrap;
}

/* STUDENT NOTE: Styles elements matched by `.empty`. Search the HTML for these class/id names before changing a shared rule. */
.empty {
  color: var(--gray);
  font-weight: 700;
}

/* STUDENT NOTE: Styles elements matched by `#hiddenSubmitFrame`. Search the HTML for these class/id names before changing a shared rule. */
#hiddenSubmitFrame {
  display: none;
}

/* STUDENT NOTE: Responsive breakpoint. Rules inside this block apply only when the screen matches this condition. */
@media (max-width: 800px) {
  /* STUDENT NOTE: Styles elements matched by `.brand-content, .hero-action-row, .report-card header`. Search the HTML for these class/id names before changing a shared rule. */
  .brand-content,
  .hero-action-row,
  .report-card header {
    flex-direction: column;
    align-items: stretch;
  }

  /* STUDENT NOTE: Styles elements matched by `.logo-panel`. Search the HTML for these class/id names before changing a shared rule. */
  .logo-panel {
    min-width: 0;
    min-height: 90px;
  }

  /* STUDENT NOTE: Styles elements matched by `.two-col, .report-totals, .totals, .report-card dl`. Search the HTML for these class/id names before changing a shared rule. */
  .two-col,
  .report-totals,
  .totals,
  .report-card dl {
    grid-template-columns: 1fr;
  }
/* STUDENT NOTE: Styles elements matched by `} .team-logo`. Search the HTML for these class/id names before changing a shared rule. */
}

.team-logo {
  /* STUDENT NOTE: Styles elements matched by `height: 200px; width: auto; object-fit: contain; display: block; } #pageTitle`. Search the HTML for these class/id names before changing a shared rule. */
  height: 200px;
  width: auto;
  object-fit: contain;
  display: block;
}

#pageTitle {
  font-family: "Audiowide", sans-serif;
  font-size: 6em;
}