@charset "UTF-8";



/* =========================================

   Root Variables & Brand Overrides

   ========================================= */



:root {

  --cu-primary: #921E33;

  --cu-secondary: #F3D03E;

  --cu-light-gray: #c5ccd1;

  --cu-muted-gray: #ebeff2;

  --cu-sans-serif: "Libre Franklin", sans-serif;

  --cu-serif: "Lora", serif;



  /* Shared brand gradient — used on navbar, CTA, and accordion hover states */

  --cu-gradient: linear-gradient(86deg, #6f263d 0%, #8a1538 45%, #a6192e 100%);

}



/* =========================================

   Base Typography & Global Elements

   ========================================= */



/* Body */

body {

  font-family: var(--cu-sans-serif);

  font-weight: 400;

  font-size: 1rem;

  line-height: 1.8;

  color: #000;

}



/* Headings */

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6 {

  font-weight: 800;

}



h1 { font-size: inherit; }

@media (max-width: 767px) {

  h1 {

    font-size: 1.2rem !important;

  }

}



h2 { font-size: 1.5rem; }

@media (min-width: 576px) {

  h2 { font-size: 1.75rem; }

}

@media (min-width: 768px) {

  h2 { font-size: 2.25rem; }

}

@media (min-width: 992px) {

  h2 { font-size: 2.50rem; }

}



/* Text Utilities */

/* Font-family utilities.

   ⚠ NOTE: these reuse Bootstrap's .text-primary/.text-secondary class names,

   which are normally TEXT-COLOR utilities — here they set font-family instead

   and do not set color. If used expecting Bootstrap's default color behavior,

   this will silently do nothing to the color. Consider renaming to

   .font-primary/.font-secondary if not already relied on elsewhere. */

.text-primary {

  font-family: var(--cu-sans-serif);

}



.text-secondary {

  font-family: var(--cu-serif);

}



/* Links */

a {

  color: var(--cu-primary);

  font-weight: 700;

  text-decoration: none;

  transition: text-decoration-color .2s ease, color .2s ease;

}



a:focus,

a:active,

a:hover {

  text-decoration: underline;

  text-decoration-color: var(--cu-primary);

  color: var(--cu-primary);

}



a.external::after {

  content: "\F143";

  font-family: "bootstrap-icons";

  margin-left: .25rem;

  vertical-align: -.125em;

  display: inline-block;

  text-decoration: none !important;

  -webkit-text-stroke-width: 0.25px;

  -webkit-text-stroke-color: currentColor;

}



/* Layout Base */

main {

  border-top: 2px solid var(--cu-light-gray);

  background-image: url(../img/pttrn-short-gray-white-seamless.svg);

  background-repeat: repeat-x;

  background-position: top center;

}



/* List Styles */

/* Custom bullet markers for #main-content lists — replaces default browser bullets

   with a bootstrap-icons glyph. Scoped to #main-content so Bootstrap components

   (accordions, navbar, etc.) keep their own list behavior. */

#main-content ul,

#main-content ol {

  list-style: none;

  padding-left: 0;

  margin-left: 0;

}



#main-content li {

  --indent: 0.5rem; /* base indentation */

  position: relative;

  padding-left: calc(var(--indent) + 0.75rem);

}



#main-content li::before {

  content: "\F582";

  font-family: "bootstrap-icons";

  font-size: 0.65rem;

  color: var(--cu-primary);

  position: absolute;

  left: 0;

  top: 0.25rem;

}



#main-content li li {

  --indent: calc(0.25rem + (0.25rem * var(--nest-level, 1)));

}



#main-content ul ul,

#main-content ol ol {

  --nest-level: calc(var(--nest-level, 1) + 1);

}



.navbar li {

  list-style-type: none;

}



/* =========================================

   CTA Section

   ========================================= */



/* CTA section — full-width gradient banner */

.cta {

  position: relative;

  overflow: visible;

  text-align: center;

  padding: 5rem 0;

  color: #fff;

  background: var(--cu-gradient);

  background-color: var(--cu-primary); /* fallback if gradient fails to load */

}



.cta-inner {

  position: relative;

  z-index: 2;

}



.cta-inner h2 {

  text-transform: uppercase;

  font-weight: 900 !important;

  font-size: 3.5rem;

  font-size: clamp(2.0rem, 4.5vw, 3.5rem);

}



.cta-inner h2 span {

  font-weight: 400;

  font-style: italic;

  font-family: var(--cu-serif);

  text-transform: lowercase;

}



/* =========================================

   Navbar & Navigation Elements

   ========================================= */



/* Navbar container */

@media (min-width: 992px) {

  .container-fluid { max-width: 90rem; width: calc(100vw - 80px); }

}



/* Navbar base */

.navbar {

  color: #fff;

  overflow: visible;

  background: var(--cu-gradient);

  background-color: var(--cu-primary); /* fallback if gradient fails to load */

}



/* Logo sizes */

.nav-logo {

  max-height: 40px;

}



@media (min-width: 576px) {

  .nav-logo { max-height: 50px; }

}



@media (min-width: 768px) {

  .nav-logo { max-height: 60px; }

}



@media (min-width: 992px) {

  .nav-logo { max-height: 70px; }

}



/* Toggler */

.navbar-toggler {

  border: 2px solid transparent !important;

  outline: none !important;

  box-shadow: none !important;

}



.navbar-toggler:focus,

.navbar-toggler:active,

.navbar-toggler:hover,

.navbar-toggler:focus-visible {

  border: 2px solid var(--cu-secondary) !important;

  outline: none !important;

  box-shadow: none !important;

}



/* Toggler icon */

.navbar-toggler-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F3D03E' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}



/* Dropdown */

.dropdown-toggle {

  font-size: 2.5rem;

}



.dropdown-toggle::after {

  display: none !important;

}



/* Scrolled navbar behavior */

#mainNav {

  transition: padding 0.25s ease, background-color 0.25s ease;

  box-shadow: none;

}



#mainNav .nav-logo {

  height: 100px;

  transition: height 0.25s ease;

}



#mainNav.nav-shrink {

  padding-top: 0.75rem !important;

  padding-bottom: 0.75rem !important;

  box-shadow: 0 4px 12px rgba(0,0,0,0.30);

}



#mainNav.nav-shrink .nav-logo {

  height: 50px;

}



/* =========================================

   Buttons

   ========================================= */



/* Base button styling */

.btn,

.btn:focus,

.btn:active,

.btn:hover {

  border-radius: 0 !important;

  font-weight: 700;

  transition: background .75s ease, color .75s ease;

  padding: 0.8rem 1.25rem;

  box-shadow: none !important;

  text-decoration: none !important;

}



/* Primary button */

.btn-primary {

  background-color: var(--cu-secondary) !important;

  border-color: transparent;

  color: #000;

}



.btn-primary:hover,

.btn-primary:focus,

.btn-primary:active {

  background: var(--cu-gradient) !important;

  background-color: var(--cu-primary) !important; /* fallback if gradient fails to load */

  border-color: transparent;

  color: #fff;

  box-shadow: none !important;

}



/* Secondary button */

.btn-secondary {

  background-color: var(--cu-secondary) !important;

  border-color: transparent;

  color: #000;

}



.btn-secondary:hover,

.btn-secondary:focus,

.btn-secondary:active {

  background-color: #000 !important;

  border-color: transparent;

  color: #FFF;

}



/* Outline primary */

.btn-outline-primary {

  background-color: var(--cu-primary) !important;

  border-color: var(--cu-secondary) !important;

  color: #FFF;

  font-weight: 400 !important;

}



.btn-outline-primary:hover,

.btn-outline-primary:focus,

.btn-outline-primary:active {

  background-color: var(--cu-secondary) !important;

  border-color: transparent;

  color: #000;

  box-shadow: none !important;

}



/* Outline secondary */

.btn-outline-secondary {

  background: transparent !important;

  background-color: transparent !important;

  border-color: var(--cu-secondary) !important;

  color: #FFF;

  font-weight: 400 !important;

}



.btn-outline-secondary:hover,

.btn-outline-secondary:focus,

.btn-outline-secondary:active {

  background: var(--cu-secondary) !important;

  background-image: none !important;

  border-color: transparent;

  color: #000;

  box-shadow: none !important;

}



/* Larger screens — filled background for outline-secondary */

@media (min-width: 768px) {

  .btn-outline-secondary {

    background: var(--cu-primary) !important;

    background-color: var(--cu-primary) !important;

  }

}



/* =========================================

   Alerts

   ========================================= */



/* Standard alert-warning override */

#notice .alert-warning {

  background-color: #fdf8e4;

  border: 1px solid var(--cu-secondary);

  padding: 20px;

  color: #000;

  border-radius: 0 !important;

}



/* Gradient alert-warning variant (not currently used on the homepage —

   kept here in case another page opts into #notice-gradient instead of #notice) */

#notice-gradient .alert-warning {

  background: var(--cu-gradient);

  background-color: var(--cu-primary) !important; /* fallback if gradient fails to load */

  border: none;

  padding: 20px;

  color: #FFF;

  border-radius: 0 !important;

}



#notice-gradient a {

  color: var(--cu-secondary);

  text-decoration: none;

}



#notice-gradient a:hover {

  text-decoration: underline;

  color: var(--cu-secondary);

}



/* =========================================

   Footer

   ========================================= */



footer {

  background: #FFF;

  color: #000;

  border-top: 2px solid var(--cu-light-gray);

  background-image: url(../img/pttrn-short-gray-white-seamless.svg);

  background-repeat: repeat-x;

  background-position: top center;

}



footer h3 {

  margin-bottom: .5rem;

  font-size: 1.2rem;

}



footer a {

  color: var(--cu-secondary);

  text-decoration: none;

}



footer a:hover {

  text-decoration: underline;

  color: #fff;

}



/* =========================================

   Multi‑Column Lists

   ========================================= */



/* Two-column layout for long link/contact lists on wide screens. */

@media (min-width: 1200px) {

  .two-col-flex {

    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

  }

}



/* =========================================

   Social Icons

   ========================================= */



.social-icons a i {

  color: var(--cu-primary);

  transition: color .2s ease-in-out;

}



.social-icons a:hover i {

  color: var(--cu-secondary);

}



/* =========================================

   Contact Section

   ========================================= */



#contacts h3 {

  font-size: 1.2em;

}



/* =========================================

   Accordions

   ========================================= */



/* Unified border radius reset */

.accordion-item,

.accordion-button,

.accordion-button:not(.collapsed) {

  border-radius: 0 !important;

}



/* Closed state */

.accordion-button {

  background-color: var(--cu-muted-gray);

  border-color: var(--cu-light-gray) !important;

  font-weight: 700;

  color: #000;

  transition: background .75s ease, color .75s ease;

}



/* Hover when collapsed */

.accordion-button.collapsed:hover {

  background: var(--cu-gradient);

  background-color: var(--cu-primary) !important; /* fallback if gradient fails to load */

  border-color: var(--cu-light-gray) !important;

  color: #FFF;

}



/* Open state */

.accordion-button:not(.collapsed) {

  background-color: var(--cu-muted-gray);

  border-color: var(--cu-light-gray) !important;

  color: #000;

  box-shadow: none;

}



.accordion-button:not(.collapsed):hover {

  background: var(--cu-gradient);

  background-color: var(--cu-primary) !important; /* fallback if gradient fails to load */

  color: #FFF;

}



/* Bootstrap's default focus ring is a soft box-shadow that's low-contrast

   against the muted-gray background here, so swap it for a visible outline

   instead of removing it outright (keeps keyboard focus visible). */

.accordion-button:focus {

  box-shadow: none;

  outline: 2px solid var(--cu-primary);

  outline-offset: -2px;

}



/* Accordion container borders */

.accordion-item {

  border: 1px solid var(--cu-light-gray);

  border-top: 1px solid var(--cu-light-gray) !important;

}



.accordion-collapse {

  border-top: 1px solid var(--cu-light-gray);

}



/* Icons */

.accordion-button::after {

  background-image: none !important;

  font-family: "bootstrap-icons";

  content: "\F64D";

  font-weight: 800;

  font-size: 1.25rem;

  line-height: 1;

  transform: none !important;

}



.accordion-button:not(.collapsed)::after {

  font-family: "bootstrap-icons";

  content: "\F63B";

}



/* Body spacing */

.accordion-body {

  padding-top: 2.0em;

}



/* =========================================

   Hero Image & Overlay

   ========================================= */



/* Container */

.hero-image {

  overflow: hidden;

}



/* Image behavior */

.hero-image img {

  display: block;

  max-height: 675px;

  object-fit: cover;

}



/* Text/content overlay */

.hero-image-content {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  padding: 1.25rem;

  padding-bottom: 5rem;

}



@media (min-width: 1200px) {

  .hero-image-content {

    padding-left: 5em;

    padding-bottom: 5rem;

  }

}



/* Dark overlay only on MD+ screens */

@media (min-width: 768px) {

  .hero-image-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

      to top right,

      rgb(0,0,0),

      rgba(111,38,61,0)

    );

    opacity: 0.6;

    pointer-events: none;

  }

}



/* Hero title */

.hero-image-title {

  font-family: var(--cu-sans-serif);

  font-weight: 700;

  font-size: clamp(1.75rem, 4vw, 3.5rem) !important;

  margin-bottom: 1.25rem;

}



.hero-image-bar {

  width: 100%;

  max-width: 100px;

  height: 3px;

  background-color: var(--cu-secondary);

}



@media (min-width: 768px) {

  .hero-image-title {

    font-size: clamp(2rem, 5vw, 3.5rem);

    margin-bottom: 2.0rem;

  }

}



/* =========================================

   Decorative Elements

   ========================================= */



.alert-warning h2:before {

  content: "\F33B";

  font-family: "bootstrap-icons";

  margin-right: .25rem;

  vertical-align: -.125em;

  display: inline-block;

  text-decoration: none !important;

  -webkit-text-stroke-color: currentColor;

}



.border-top {

  border-color: var(--cu-primary) !important;

}



/* =========================================

   CU Experience Graphic Animation

   ========================================= */



/* Wrapper sizes itself to the image and anchors the pattern layer.

   overflow: visible lets the pattern peek past the image edges

   once it slides into its resting position. */

.wysiwyg-media {

    position: relative;

    overflow: visible;

}



/* Image stays static — sits above the pattern, never animates. */

.wysiwyg-media img {

    position: relative;

    z-index: 1;

    display: block;

}



/* Pattern accent — matches the image size the entire time (no scaling).

   Starts fully overlapping the image (bottom-left aligned), then slides

   up + right into its resting spot once .is-visible is added by the

   IntersectionObserver script. */

.wysiwyg-media:after {

    content: "";

    display: block;

    position: absolute;

    z-index: 0;

    top: 0;

    left: 0;

    width: 100%;

    max-width: 242px;

    height: calc(100% - 1rem); /* subtracts the pb-3 padding */

    aspect-ratio: 242 / 72;

    background-image: url(../img/pttrn-maroon.png);

    background-repeat: repeat;

    background-size: 5px 5px;

    background-position: top left;

    transform: translate(0, 0);

    transition: transform 750ms cubic-bezier(0.42, 0.08, 0.06, 0.98) 250ms;

}



.oho-animate.is-visible:after {

    /* Resting position to the right of the image */

    transform: translate(15px, -15px);

}