/*
This is the basis of the modern styles in Apollo.

Created: 3/25/26
Last Updated: 5/7/26
*/

:root {
    --isu-black: #333333;
    --isu-dark: #424242;
    --isu-borders: #e6e7e8;
    --isu-gray-background: #f1f1f1;
    --isu-white: #fff;
    --isu-links: #b82b00;
    --isu-buttons: #d4441c;
    --isu-roarange: #f47920;
    --isu-light-roarange: #f69240;
}


/* These two rules make the page always take the full height, so that theres
 * no whitespace after the footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main#content {
  flex: 1;
}


/* Utility Classes */
.cewt-nav-link { /* Used on navigation links to override ISU styles */
    text-decoration: none;
}

.cewt-nav-btn-link { /* Used on buttons that contain links to override ISU styles */
    text-decoration: none;
}

/* Cap the width of the navbar's brand */
/*
.cewt-navbar-brand { 
    max-width: 20ch !important;
    white-space: unset !important;
    text-decoration: none !important;
    background-color: transparent !important;
    color: rgb(51, 51, 51) !important;
}

.cewt-navbar-brand:hover {
    text-decoration: none !important;
    background-color: transparent !important;
    color: rgb(51, 51, 51) !important;
}
*/


/* The cart button in the top right of the navbar */
.circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--isu-light-roarange);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px 5px 5px;
}

.circle-btn i {
    transition: all 0.3s ease;
}

.circle-btn:hover {
    background-color: var(--isu-light-roarange);
}

.circle-btn:hover i {
    color: white !important;
}

/* The search button beside the input in the top right of the navbar */
.searchbtn {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Bootstrap Overrides */
/* Recolor primary background utility */
.bg-primary {
	background-color: var(--isu-roarange) !important;
}

.text-bg-primary {
	color: #fff !important;
	background-color: var(--isu-roarange) !important;
}

.isuheader .header-icon {
    display: inline;
}

/* Link-buttons (a.btn): webreg.css's `a:link` rule used to clobber
   Bootstrap's .btn text colors. That rule is now scoped with
   :where(:not(.btn)) in webreg.css, so Bootstrap handles all link states
   for every .btn variant natively — no per-variant overrides needed here. */

/* Recolor primary buttons */
/* NOTE: The --bs-btn-* variables below only work on Bootstrap >= 5.2.
   base_wide.html currently loads Bootstrap 5.0.2, which uses hardcoded
   button colors, so explicit fallback rules are also provided further down. */
.btn-primary {
	/* Base state */
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--isu-buttons);
	--bs-btn-border-color: var(--isu-buttons);
	
	/* Hover state */
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--isu-light-roarange);
	--bs-btn-hover-border-color: var(--isu-light-roarange);
	
	/* Active/pressed state */
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--isu-roarange);
	--bs-btn-active-border-color: var(--isu-roarange);
	
	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 241, 121, 32;  /* RGB values */
	
	/* Disabled state */
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--isu-dark);
	--bs-btn-disabled-border-color: var(--isu-dark);
}

/* Recolor primary outline buttons */
.btn-outline-primary {
	/* Base state */
	--bs-btn-color: var(--isu-buttons);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--isu-buttons);

	/* Hover state */
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--isu-roarange);
	--bs-btn-hover-border-color: var(--isu-roarange);

	/* Active/pressed state */
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--isu-roarange);
	--bs-btn-active-border-color: var(--isu-roarange);

	/* Focus ring */
	--bs-btn-focus-shadow-rgb: 241, 121, 32;

	/* Disabled state */
	--bs-btn-disabled-color: var(--isu-buttons);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--isu-buttons);
}

/* Bootstrap 5.0/5.1 fallbacks (no --bs-btn-* variable support) */
.btn-primary {
	color: #fff;
	background-color: var(--isu-buttons);
	border-color: var(--isu-buttons);
}

.btn-primary:hover,
.btn-primary:focus {
	color: #fff;
	background-color: var(--isu-light-roarange);
	border-color: var(--isu-light-roarange);
}

.btn-primary:active,
.btn-primary.active {
	color: #fff;
	background-color: var(--isu-roarange);
	border-color: var(--isu-roarange);
}

.btn-primary:focus,
.btn-primary:active:focus {
	box-shadow: 0 0 0 0.25rem rgba(241, 121, 32, 0.5);
}

.btn-primary:disabled,
.btn-primary.disabled {
	color: #fff;
	background-color: var(--isu-dark);
	border-color: var(--isu-dark);
}

.btn-outline-primary {
	color: var(--isu-buttons);
	background-color: transparent;
	border-color: var(--isu-buttons);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
	color: #fff;
	background-color: var(--isu-roarange);
	border-color: var(--isu-roarange);
}

.btn-outline-primary:focus,
.btn-outline-primary:active:focus {
	box-shadow: 0 0 0 0.25rem rgba(241, 121, 32, 0.5);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
	color: var(--isu-buttons);
	background-color: transparent;
	border-color: var(--isu-buttons);
}
.isu-hero-banner {
  position: relative;
  min-height: 401px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #1f1f1f;
}

.isu-hero-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.isu-hero-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.isu-hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.isu-hero-banner .container {
  position: relative;
  z-index: 2;
}

.isu-hero-banner__content {
  padding: 3.5rem 0;
  max-width: 700px;
}

.isu-hero-banner__title {
  margin: 0 0 1rem;
  font-family: "Museo", "Roboto Slab", Georgia, serif;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: #f47920;
}

.isu-hero-banner__text {
  margin: 0 0 1.75rem;
  font-family: "Museo Sans", "Roboto", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #ffffff;
  max-width: 42rem;
}

.isu-hero-banner__btn {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: 0;
  background-color: #ececf0;
  color: #000000;
  font-family: "Museo Sans", "Roboto", Arial, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.isu-hero-banner__btn:hover,
.isu-hero-banner__btn:focus {
  background-color: #ffffff;
  color: #000000;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .isu-hero-banner {
    min-height: 340px;
  }

  .isu-hero-banner__content {
    padding: 2.75rem 0;
  }

  .isu-hero-banner__btn {
    font-size: 1.125rem;
  }
}

@media (max-width: 575.98px) {
  .isu-hero-banner {
    min-height: 300px;
  }

  .isu-hero-banner__title {
    margin-bottom: 0.75rem;
  }

  .isu-hero-banner__text {
    margin-bottom: 1.25rem;
  }
}