/* ==========================================================================
   AI @ CSU Fort Collins - Design System Layer
   ai.colostate.edu
   --------------------------------------------------------------------------
   It adds a namespaced layer on top of the existing theme. It does not
   modify the theme, and every class is prefixed .aicsu- so nothing here
   can collide with theme or Elementor styles.

   All colors and pairings come from https://brand.colostate.edu/color/
   Only pairings listed on CSU's accessibility chart are used.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* --- CSU primary palette --- */
  --aicsu-green:        #1E4D2B;   /* Colorado State Green */
  --aicsu-gold:         #C8C372;   /* Colorado State Gold */
  --aicsu-orange:       #D9782D;   /* Aggie Orange */
  --aicsu-black-80:     #59595B;   /* 80% Black */
  --aicsu-white:        #FFFFFF;

  /* --- Energy palette (secondary) --- */
  --aicsu-oval-green:   #006144;
  --aicsu-lovers-lane:  #82C503;
  --aicsu-energy-green: #CFFC00;
  --aicsu-red:          #E56A54;   /* Flower Trial Red */
  --aicsu-purple:       #7E5475;   /* Powered Purple */
  --aicsu-blue:         #008FB3;   /* Horsetooth Blue */
  --aicsu-slate:        #105456;   /* Stalwart Slate */
  --aicsu-sunshine:     #FFC038;

  /* --- Neutrals --- */
  --aicsu-black:        #000000;
  --aicsu-gray:         #CCCCCC;
  --aicsu-tan:          #E3CDB1;

  /* Functional neutrals. Not brand colors, used only for hairlines and
     table banding where no brand color applies. */
  --aicsu-rule:         #DCDCDC;
  --aicsu-band:         #F7F7F7;

  /* --- Semantic roles --- */
  --aicsu-ink:          var(--aicsu-black);      /* body text on white, AAA */
  --aicsu-ink-muted:    var(--aicsu-black-80);   /* meta text on white, AA  */
  --aicsu-heading:      var(--aicsu-green);      /* headings on white, AAA  */
  --aicsu-link:         var(--aicsu-oval-green); /* links on white, AAA     */
  --aicsu-accent:       var(--aicsu-green);      /* per-territory keyline   */

  /* --- Type scale ---
     Deliberately steep at the top and shallow at the bottom. The old page
     failed because card headings were nearly the size of the page title. */
  --aicsu-size-h1:      clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --aicsu-size-h2:      clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --aicsu-size-h3:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --aicsu-size-lede:    clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --aicsu-size-body:    1.0625rem;
  --aicsu-size-small:   0.875rem;
  --aicsu-size-eyebrow: 0.8125rem;

  /* --- Spacing --- */
  --aicsu-space-1: 0.5rem;
  --aicsu-space-2: 1rem;
  --aicsu-space-3: 1.5rem;
  --aicsu-space-4: 2rem;
  --aicsu-space-5: 3rem;
  --aicsu-space-6: 4rem;

  --aicsu-section-y: clamp(3rem, 6vw, 5.5rem);
  --aicsu-max-width: 1180px;
  --aicsu-gutter:    clamp(1.25rem, 4vw, 2.5rem);

  --aicsu-radius: 3px;
}


/* --------------------------------------------------------------------------
   2. SECTIONS
   Vertical rhythm and background. Replaces the <hr> dividers entirely.
   Padding is set once here. Modifiers change color only, never spacing,
   so nothing cancels out.
   -------------------------------------------------------------------------- */

.aicsu-section {
  /* Theme's content wrapper applies its own margin + max-width and ignores
     Gutenberg's "Full width" alignment, so every section is boxed in
     without this. Escapes that wrapper regardless of how deep it is nested. */
  /* !important needed: core .wp-block-group.alignfull (two classes) beats
     our single .aicsu-section class on these three properties otherwise. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
  padding-top:    var(--aicsu-section-y);
  padding-bottom: var(--aicsu-section-y);
  padding-left:   var(--aicsu-gutter);
  padding-right:  var(--aicsu-gutter);
  color: var(--aicsu-ink);
}

.aicsu-inner {
  max-width: var(--aicsu-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Approved background / text pairings only. */

.aicsu-section--green {
  background-color: var(--aicsu-green);
  color: var(--aicsu-white);                 /* AAA */
}
.aicsu-section--green .aicsu-eyebrow { color: var(--aicsu-energy-green); }  /* AAA */
/* Doubled class selector to out-specificity .aicsu-section h1/h2/h3 below,
   which shares the same (0,1,1) weight and would otherwise win on source
   order alone, since a green-on-green h1 goes invisible. */
.aicsu-section.aicsu-section--green h1,
.aicsu-section.aicsu-section--green h2,
.aicsu-section.aicsu-section--green h3 { color: var(--aicsu-white); }

.aicsu-section--tan {
  background-color: var(--aicsu-tan);
  color: var(--aicsu-green);                 /* AA */
}
.aicsu-section.aicsu-section--tan h1,
.aicsu-section.aicsu-section--tan h2,
.aicsu-section.aicsu-section--tan h3,
.aicsu-section--tan .aicsu-eyebrow { color: var(--aicsu-green); }

.aicsu-section--gray {
  background-color: var(--aicsu-gray);
  color: var(--aicsu-black);                 /* AAA */
}
.aicsu-section.aicsu-section--gray h1,
.aicsu-section.aicsu-section--gray h2,
.aicsu-section.aicsu-section--gray h3 { color: var(--aicsu-green); }  /* AA */

/* Tighter variant for short utility strips. */
.aicsu-section--tight {
  padding-top:    calc(var(--aicsu-section-y) * 0.5);
  padding-bottom: calc(var(--aicsu-section-y) * 0.5);
}


/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */

.aicsu-section h1,
.aicsu-section h2,
.aicsu-section h3 {
  font-family: inherit;              /* the theme owns the brand typeface */
  line-height: 1.12;
  text-wrap: balance;
  margin-top: 0;
}

.aicsu-section h1 {
  font-size: var(--aicsu-size-h1);
  color: var(--aicsu-heading);
  letter-spacing: -0.015em;
  margin-bottom: var(--aicsu-space-3);
}

.aicsu-section h2 {
  font-size: var(--aicsu-size-h2);
  color: var(--aicsu-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--aicsu-space-4);
}

.aicsu-section h3 {
  font-size: var(--aicsu-size-h3);
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: var(--aicsu-space-2);
}

.aicsu-section p {
  font-size: var(--aicsu-size-body);
  line-height: 1.65;
  max-width: 68ch;
}

/* Small label that sits above a heading. Carries hierarchy without size,
   which is what lets card headings stay small. */
.aicsu-eyebrow {
  display: block;
  font-size: var(--aicsu-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aicsu-oval-green);
  margin-bottom: var(--aicsu-space-2);
}

.aicsu-lede {
  font-size: var(--aicsu-size-lede) !important;
  line-height: 1.55;
  max-width: 60ch;
}

.aicsu-section--green .aicsu-lede { color: rgba(255, 255, 255, 0.92); }

.aicsu-meta {
  font-size: var(--aicsu-size-small);
  color: var(--aicsu-ink-muted);
}


/* --------------------------------------------------------------------------
   4. CARDS
   Applied to a core Column block inside a Columns block.
   Solves the two layout faults on the current homepage: unequal heights
   and CTAs that fall out of alignment when a heading wraps.
   -------------------------------------------------------------------------- */

.aicsu-cards {
  gap: var(--aicsu-space-3);
  align-items: stretch;
}

.aicsu-card {
  /* Theme's own grid class (s-grid) sets flex: 0 1 auto on columns, which
     shrink-to-fit each card's content instead of splitting evenly, so
     widths vary with how much copy each card holds. Force equal width. */
  flex: 1 1 0 !important;
  min-width: 0;
  --aicsu-accent: var(--aicsu-green);
  display: flex;
  flex-direction: column;
  background-color: var(--aicsu-white);
  border: 1px solid var(--aicsu-rule);
  border-top: 4px solid var(--aicsu-accent);
  border-radius: var(--aicsu-radius);
  padding: var(--aicsu-space-3);
  color: var(--aicsu-ink);
}

.aicsu-card h3 { color: var(--aicsu-green); }

.aicsu-card p {
  font-size: var(--aicsu-size-body);
  color: var(--aicsu-ink-muted);
  margin-bottom: var(--aicsu-space-3);
}

/* Pushes the CTA to the bottom edge so every card's button lines up,
   however long the heading or body copy runs. */
.aicsu-card__cta {
  margin-top: auto;
  margin-bottom: 0;
}

/* Territory keylines. The accent tells the reader which part of the site a
   card leads to. It is a wayfinding signal, not decoration, so it is used
   in exactly one place per card and nowhere else. */
.aicsu-card--tools     { --aicsu-accent: var(--aicsu-green); }
.aicsu-card--teaching  { --aicsu-accent: var(--aicsu-purple); }
.aicsu-card--research  { --aicsu-accent: var(--aicsu-blue); }
.aicsu-card--training  { --aicsu-accent: var(--aicsu-orange); }
.aicsu-card--support   { --aicsu-accent: var(--aicsu-slate); }
.aicsu-card--news      { --aicsu-accent: var(--aicsu-gold); }
.aicsu-card--governance{ --aicsu-accent: var(--aicsu-oval-green); }

/* Cards sitting on a tinted section keep a white face so they lift off it. */
.aicsu-section--tan .aicsu-card,
.aicsu-section--gray .aicsu-card { border-color: transparent; }

.aicsu-section--tan .aicsu-card,
.aicsu-section--gray .aicsu-card { border-top-color: var(--aicsu-accent); }


/* --------------------------------------------------------------------------
   5. BUTTONS
   Class goes on the core Button block wrapper (.wp-block-button), so the
   selectors chain wrapper + link to clear theme specificity.
   -------------------------------------------------------------------------- */

.wp-block-button.aicsu-btn--primary .wp-block-button__link,
.wp-block-button.aicsu-btn--primary .wp-element-button {
  background-color: var(--aicsu-green);
  color: var(--aicsu-white);                 /* AAA */
  border: 2px solid var(--aicsu-green);
  border-radius: var(--aicsu-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: var(--aicsu-size-body);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button.aicsu-btn--primary .wp-block-button__link:hover,
.wp-block-button.aicsu-btn--primary .wp-element-button:hover {
  background-color: var(--aicsu-oval-green);
  border-color: var(--aicsu-oval-green);
  color: var(--aicsu-white);
}

.wp-block-button.aicsu-btn--secondary .wp-block-button__link,
.wp-block-button.aicsu-btn--secondary .wp-element-button {
  background-color: transparent;
  color: var(--aicsu-green);                 /* AAA on white */
  border: 2px solid var(--aicsu-green);
  border-radius: var(--aicsu-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: var(--aicsu-size-body);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.aicsu-btn--secondary .wp-block-button__link:hover,
.wp-block-button.aicsu-btn--secondary .wp-element-button:hover {
  background-color: var(--aicsu-green);
  color: var(--aicsu-white);
}

/* Inverted pair for use on the green hero. */
.aicsu-section--green .wp-block-button.aicsu-btn--primary .wp-block-button__link,
.aicsu-section--green .wp-block-button.aicsu-btn--primary .wp-element-button {
  background-color: var(--aicsu-white);
  color: var(--aicsu-green);                 /* AAA */
  border-color: var(--aicsu-white);
}

.aicsu-section--green .wp-block-button.aicsu-btn--primary .wp-block-button__link:hover,
.aicsu-section--green .wp-block-button.aicsu-btn--primary .wp-element-button:hover {
  background-color: var(--aicsu-energy-green);
  border-color: var(--aicsu-energy-green);
  color: var(--aicsu-black);                 /* AAA */
}

.aicsu-section--green .wp-block-button.aicsu-btn--secondary .wp-block-button__link,
.aicsu-section--green .wp-block-button.aicsu-btn--secondary .wp-element-button {
  background-color: transparent;
  color: var(--aicsu-white);
  border-color: var(--aicsu-white);
}

.aicsu-section--green .wp-block-button.aicsu-btn--secondary .wp-block-button__link:hover,
.aicsu-section--green .wp-block-button.aicsu-btn--secondary .wp-element-button:hover {
  background-color: var(--aicsu-white);
  color: var(--aicsu-green);
}

/* Smaller CTA for inside cards. */
.aicsu-card .wp-block-button .wp-block-button__link,
.aicsu-card .wp-block-button .wp-element-button {
  padding: 0.5rem 1rem;
  font-size: var(--aicsu-size-small);
}


/* --------------------------------------------------------------------------
   6. CALLOUT
   -------------------------------------------------------------------------- */

.aicsu-callout {
  background-color: var(--aicsu-white);
  border: 1px solid var(--aicsu-rule);
  border-left: 5px solid var(--aicsu-green);
  border-radius: var(--aicsu-radius);
  padding: var(--aicsu-space-3);
  color: var(--aicsu-ink);
}

.aicsu-callout h3 { color: var(--aicsu-green); }
.aicsu-callout p:last-child { margin-bottom: 0; }

.aicsu-callout--action  { border-left-color: var(--aicsu-blue); }
.aicsu-callout--caution {
  background-color: var(--aicsu-sunshine);
  border-color: var(--aicsu-sunshine);
  border-left-color: var(--aicsu-black);
  color: var(--aicsu-black);                 /* AAA */
}
.aicsu-callout--caution h3 { color: var(--aicsu-black); }


/* --------------------------------------------------------------------------
   7. COMPARISON TABLE
   For /tools/comparison/. Add .aicsu-table to a core Table block.
   -------------------------------------------------------------------------- */

.aicsu-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--aicsu-size-small);
}

.aicsu-table thead th {
  background-color: var(--aicsu-green);
  color: var(--aicsu-white);                 /* AAA */
  text-align: left;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border: none;
  position: sticky;
  top: 0;
}

.aicsu-table tbody th,
.aicsu-table tbody td {
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--aicsu-rule);
  vertical-align: top;
}

.aicsu-table tbody th {
  font-weight: 700;
  color: var(--aicsu-green);
  text-align: left;
}

.aicsu-table tbody tr:nth-child(even) { background-color: var(--aicsu-band); }

.aicsu-table figcaption {
  font-size: var(--aicsu-size-small);
  color: var(--aicsu-ink-muted);
  margin-top: var(--aicsu-space-2);
}

/* Horizontal scroll on small screens instead of a squashed table. */
@media (max-width: 780px) {
  .aicsu-table { overflow-x: auto; }
  .aicsu-table table { min-width: 640px; }
}


/* --------------------------------------------------------------------------
   8. STEPS
   Add .aicsu-steps to a core List block (ordered). Numbers are used only
   where order genuinely matters, such as the tool approval process.
   -------------------------------------------------------------------------- */

.aicsu-steps { list-style: none; padding-left: 0; counter-reset: aicsu-step; }

.aicsu-steps li {
  counter-increment: aicsu-step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: var(--aicsu-space-3);
  line-height: 1.6;
}

.aicsu-steps li::before {
  content: counter(aicsu-step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--aicsu-green);
  color: var(--aicsu-white);
  font-weight: 700;
  font-size: var(--aicsu-size-small);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   9. LINK LIST
   Add .aicsu-linklist to a core List block for resource indexes.
   -------------------------------------------------------------------------- */

.aicsu-linklist { list-style: none; padding-left: 0; margin: 0; }

.aicsu-linklist li { border-bottom: 1px solid var(--aicsu-rule); }

.aicsu-linklist li a {
  display: block;
  padding: 0.875rem 0;
  color: var(--aicsu-link);
  font-weight: 600;
  text-decoration: none;
}

.aicsu-linklist li a:hover {
  color: var(--aicsu-green);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   10. QUALITY FLOOR
   -------------------------------------------------------------------------- */

/* Visible keyboard focus everywhere in the layer. Aggie Orange reads
   clearly against white, tan, gray and CSU Green backgrounds. */
.aicsu-section a:focus-visible,
.aicsu-section button:focus-visible,
.aicsu-section .wp-block-button__link:focus-visible,
.aicsu-section .wp-element-button:focus-visible {
  outline: 3px solid var(--aicsu-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.aicsu-section a { color: var(--aicsu-link); }
.aicsu-section--green a { color: var(--aicsu-energy-green); }   /* AAA */
.aicsu-section--tan a,
.aicsu-section--gray a { color: var(--aicsu-green); }

@media (prefers-reduced-motion: reduce) {
  .aicsu-section *,
  .aicsu-section *::before,
  .aicsu-section *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Core Columns stack below 782px by default. Cards get breathing room
   back once stacked. */
@media (max-width: 781px) {
  .aicsu-cards { gap: var(--aicsu-space-2); }
  .aicsu-card  { margin-bottom: var(--aicsu-space-2); }
}


/* --------------------------------------------------------------------------
   11. HEADER SEAM
   Theme header is CSU Green with no bottom edge. When the first section on
   a page is also .aicsu-section--green (the homepage hero), the two blocks
   merge into one shape with no boundary. A seam keeps them visually
   separate regardless of what color the first section uses.
   -------------------------------------------------------------------------- */

#mainheader.site-header {
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   12. THEME TITLE BAND
   The theme prints a page-title banner ("Home") above page content, which
   duplicates the H1 in the hero. Inspect that element on the live page,
   copy its selector, and uncomment the rule below.

   Only hide it on pages where the hero already carries the H1. Do not hide
   it sitewide, since interior pages rely on it for orientation.
   -------------------------------------------------------------------------- */

/*
.page-id-XXX .REPLACE-WITH-THEME-TITLE-BAND-SELECTOR { display: none; }
*/