/* =========================================
   Global base + typography
   ========================================= */

/* Base document text */
body {
font-family: var(--font-family-body);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

/* Paragraphs (normal body copy) */
p,
.body-md {
  font-size: var(--font-size-sm);      /* Linked to 1rem/16px */
  line-height: calc(1.5 * var(--font-size-sm));
  margin-bottom: 1rem;
}

/* Lead / large intro copy */
.lead,
.body-lg {
  font-size: var(--font-size-md);      /* Linked to 1.25rem/20px */
  line-height: calc(1.5 * var(--font-size-md));
}

/* Small copy */
.body-sm {
  font-size: var(--font-size-xs);      /* Linked to 0.75rem/12px */
  line-height: calc(1.5 * var(--font-size-xs));
}

/* Extra small copy (meta/utility text) */
.body-xs {
  font-size: var(--font-size-xxs);     /* Linked to 0.625rem/10px */
  line-height: calc(1.5 * var(--font-size-xxs));
}

/* =========================
   Headings (Fluid via Bootstrap RFS)
   ========================= */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-family-heading);
  /* Bootstrap's RFS now handles the font-size and scaling */
	line-height: 1.2; 
}
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):not([class*="ds-"] *) {
  color: var(--fau-blue);
}


h1, .h1 { font-weight: var(--font-weight-bold); }
h2, .h2 { font-weight: var(--font-weight-semibold); }
h3, .h3 { font-weight: var(--font-weight-medium); }
h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--font-weight-regular); }

/* Margin adjustments to match your original spec */
h1, .h1 { margin-bottom: 1rem; }
h2, .h2, h3, .h3 { margin-bottom: 1rem; }
h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1rem; }

.fau-refresh h1.hero-heading {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
	color:#fff;
}

/* ==========================================================================
   BLOG CONTENT HEADING OVERRIDES
   Reduces scale for long-form article readability
   ========================================================================== */

/* Mobile (Base Sizes) */
body .blog-content h1, body .blog-content .h1,
body .blog-content h2, body .blog-content .h2 { font-size: 2.125rem !important; } /* ~34px */
body .blog-content h3, body .blog-content .h3 { font-size: 1.75rem !important; }  /* 28px */
body .blog-content h4, body .blog-content .h4 { font-size: 1.5rem !important; }   /* 24px */
body .blog-content h5, body .blog-content .h5 { font-size: 1.25rem !important; }  /* 20px */
body .blog-content h6, body .blog-content .h6 { font-size: 1.1rem !important; }   /* ~18px */

/* Desktop (Large screens >= 992px) */
@media (min-width: 992px) {
    body .blog-content h1, body .blog-content .h1 { 
        font-size: 2.5rem !important;  /* 40px */
    }
    body .blog-content h2, body .blog-content .h2 { 
        font-size: 2.25rem !important;  /* 40px */
    }
    body .blog-content h3, body .blog-content .h3 { 
        font-size: 2rem !important;    /* 32px */
    }
    body .blog-content h4, body .blog-content .h4 { 
        font-size: 1.75rem !important; /* 28px */
    }
    body .blog-content h5, body .blog-content .h5 { 
        font-size: 1.5rem !important;  /* 24px */
    }
    body .blog-content h6, body .blog-content .h6 { 
        font-size: 1.25rem !important; /* 20px */
    }
}



/* ==========================================================================
   FAU REFRESH: SCOPED RESPONSIVE HEADING SCALE
   Targets body.fau-refresh to hit 40px/40px on Desktop.
   ========================================================================== */

/* Mobile (Base Sizes) */
body.fau-refresh h1, body.fau-refresh .h1,
body.fau-refresh h2, body.fau-refresh .h2 { font-size: 2.125rem !important; } /* ~34px */
body.fau-refresh h3, body.fau-refresh .h3 { font-size: 1.75rem !important; }  /* 28px */
body.fau-refresh h4, body.fau-refresh .h4 { font-size: 1.5rem !important; }   /* 24px */
body.fau-refresh h5, body.fau-refresh .h5 { font-size: 1.25rem !important; }  /* 20px */
body.fau-refresh h6, body.fau-refresh .h6 { font-size: 1.1rem !important; }   /* ~18px */

/* Desktop (Large screens >= 992px) */
@media (min-width: 992px) {
    body.fau-refresh h1, body.fau-refresh .h1 { 
        font-size: 2.5rem !important;  /* 40px */
    }
    body.fau-refresh h2, body.fau-refresh .h2 { 
        font-size: 2.5rem !important;  /* 40px */
    }
    body.fau-refresh h3, body.fau-refresh .h3 { 
        font-size: 2rem !important;    /* 32px */
    }
    body.fau-refresh h4, body.fau-refresh .h4 { 
        font-size: 1.75rem !important; /* 28px */
    }
    body.fau-refresh h5, body.fau-refresh .h5 { 
        font-size: 1.5rem !important;  /* 24px */
    }
    body.fau-refresh h6, body.fau-refresh .h6 { 
        font-size: 1.25rem !important; /* 20px */
    }
}



/* font family utilities */
.font-inter{font-family: var(--font-family-body);}
.font-unbounded{font-family: var(--font-family-heading);}

/* =========================
   Subheading utilities
   ========================= */

/* SH1 – typically paired with H1/H2 */
.sh-1,
.subheading-1 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);    /* 1.5rem / 24px */
  line-height: var(--space-lg);      /* 2rem / 32px */
  font-weight: var(--font-weight-medium);
	margin-bottom: 1rem;
}

/* SH2 – mid-level subheading */
.sh-2,
.subheading-2 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-md);    /* 1.25rem / 20px */
	line-height: var(--font-size-xl);  /* 1.75rem / 28px */
	font-weight: var(--font-weight-regular);
	margin-bottom: 1rem;
}


/* SH3 – small subheading / kicker */
.sh-3,
.subheading-3 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-sm);    /* 1rem / 16px */
	line-height: var(--font-size-lg);  /* 1.5rem / 24px */
	font-weight: var(--font-weight-regular);
	margin-bottom: 1rem;
}

/* Eyebrow / label text */
.eyebrow-text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);    /* 0.75rem / 12px (Updated to match your xs token) */
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================
   Small / legal / notes text
   ========================= */

.text-small {
  font-size: var(--font-size-xs);    /* 0.875rem / 14px */
}

.text-notes {
  font-size: var(--font-size-xs);    /* 0.875rem / 14px */
  line-height: var(--line-height-normal);
}

.text-legal {
  font-size: var(--font-size-xxs);   /* 0.75rem / 12px */
  line-height: var(--line-height-snug);
}

/* =========================
   Lists
   ========================= */

ul,
ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

/* ============================================================
   SKIP NAVIGATION: FAU Brand Standard
   ============================================================ */
.skip-to-main {
    position: absolute;
    top: -100px; /* Hide off-screen by default */
    left: 10px;
    background: var(--fau-blue); /* #003366 */
    color: #fff !important;
    padding: 12px 24px;
    z-index: 9999;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-family-heading); /* Unbounded */
    transition: top 0.2s ease-in-out;
}

/* FIX: Strictly visible ONLY on keyboard focus */
.skip-to-main:focus-visible {
    top: 0; /* Slide down into view */
    outline: 3px solid var(--fau-red); /* #CC0000 */
    outline-offset: -3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Ensure mouse clicks don't accidentally trigger it */
.skip-to-main:focus:not(:focus-visible) {
    top: -100px;
}

/* =========================================
   Color utilities (Custom Gradients)
   ========================================= */

/* Gradients - Unique brand patterns not generated by Bootstrap */
.bg-gradient-blue { 
	/*background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, #036 0%, #048 50%, #05A 100%);*/
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, #036 0%, #048 109.9%, #05A 219.81%);
}
.bg-gradient-dark-gray {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%),
    linear-gradient(217deg, #6D6D6D -77.8%, #414141 -7.16%, #4B4B4B 63.49%);
}

.bg-gradient-red {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%),
    linear-gradient(154deg, #C00 -13.96%, #780000 76.69%, #CD0101 167.33%);
}
.bg-gradient-purple-blue { 
  background: linear-gradient(136deg, var(--pale-purple) 0%, var(--dark-blue) 112.25%); 
}
.bg-gradient-blue-red { 
  background: linear-gradient(136deg, var(--dark-blue) 0%, var(--fau-red) 112.25%); 
}
.bg-gradient-red-blue { 
  background: linear-gradient(136deg, var(--fau-red) 0%, var(--dark-blue) 112.25%); 
}
.bg-gradient-red-faublue { 
 background: linear-gradient(98deg, var(--fau-red) -16.85%, var(--fau-blue) 136.8%);
}


.bg-immersive-red-blue{
	  background:
    linear-gradient(137deg, rgba(204,0,0,0.00) 3.32%, #C00 191.41%),
    linear-gradient(0deg, rgba(0,0,0,0.00) 54.61%, #000 118.28%),
    linear-gradient(0deg, rgba(0,51,102,0.80) 0%, rgba(0,51,102,0.80) 100%);
}
.bg-immersive-blue{
	background: 
		linear-gradient(0deg, rgba(0, 0, 0, 0.00) 54.61%, rgba(0, 0, 0, 0.4) 118.28%),
		linear-gradient(180deg, rgba(0, 51, 102, 0.00) 0%, rgba(0, 85, 170, 0.4) 100%),
		linear-gradient(0deg, rgba(0, 51, 102, 0.80) 0%, rgba(0, 51, 102, 0.80) 100%);
}

.bg-gradient-yellow-red { 
  background: linear-gradient(138deg, var(--sunny-yellow) -20.67%, var(--fau-red) 100.06%); 
}

.bg-gradient-green-blue { 
  background: linear-gradient(135deg, var(--grass-green) 0%, rgba(var(--fau-blue-rgb), 0.80) 100%); 
}

.text-gradient-blue{
    background: linear-gradient(0deg, #003366 -8.83%, #004488 47.24%, #0055AA 163.31%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	
}



/* =========================================
   FAU Brand Gradients
   ========================================= */

/* --- hero/header Variants --- */
/* Red to Blue Diagonal - 135deg */
.bg-red-blue-diag-30 { background: linear-gradient(135deg, rgba(204, 0, 0, 0.3) 0%, rgba(0, 51, 102, 0.3) 100%); }
.bg-red-blue-diag-50 { background: linear-gradient(135deg, rgba(204, 0, 0, 0.5) 0%, rgba(0, 51, 102, 0.5) 100%); }
.bg-red-blue-diag-80 { background: linear-gradient(135deg, rgba(204, 0, 0, 0.8) 0%, rgba(0, 51, 102, 0.8) 100%); }
.bg-red-blue-diag { background: linear-gradient(135deg, #CC0000 0%, #003366 100%); }

/* Blue to Red Diagonal - 135deg */
.bg-blue-red-diag-30 { background: linear-gradient(135deg, rgba(0, 51, 102, 0.3) 0%, rgba(204, 0, 0, 0.3) 100%); }
.bg-blue-red-diag-50 { background: linear-gradient(135deg, rgba(0, 51, 102, 0.5) 0%, rgba(204, 0, 0, 0.5) 100%); }
.bg-blue-red-diag-80 { background: linear-gradient(135deg, rgba(0, 51, 102, 0.8) 0%, rgba(204, 0, 0, 0.8) 100%); }
.bg-blue-red-diag { background: linear-gradient(135deg, #003366 0%, #CC0000 100%); }

/* Blue to Red Linear - 180deg (Top to Bottom) */
.bg-blue-red-linear-30 { background: linear-gradient(180deg, rgba(0, 51, 102, 0.3) 0%, rgba(204, 0, 0, 0.3) 100%); }
.bg-blue-red-linear-50 { background: linear-gradient(180deg, rgba(0, 51, 102, 0.5) 0%, rgba(204, 0, 0, 0.5) 100%); }
.bg-blue-red-linear-80 { background: linear-gradient(180deg, rgba(0, 51, 102, 0.8) 0%, rgba(204, 0, 0, 0.8) 100%); }
.bg-blue-red-linear { background: linear-gradient(180deg, #003366 0%, #CC0000 100%); }

/* --- Primary Blue Gradient --- */
.bg-gradient-blue {
    /* HEX: #003366 (0%) -> #004488 (50%) -> #0055AA (100%) */
    background: linear-gradient(180deg, #003366 0%, #004488 50%, #0055AA 100%); 
}

/* --- Secondary Red Gradient --- */
.bg-gradient-red {
    /* HEX: #CC0000 (0%) -> #780000 (50%) -> #CD0101 (100%) */
    /* 154deg approximates the 'Top Left to Bottom Right' flow */
    background: linear-gradient(154deg, #CC0000 0%, #780000 50%, #CD0101 100%); 
}

/* --- Neutral Dark Gray Gradient --- */
.bg-gradient-dark-gray {
    /* HEX: #6D6D6D (0%) -> #414141 (50%) -> #4B4B4B (100%) */
    /* 217deg approximates the 'Bottom Left to Bottom Right' diagonal sweep */
    background: linear-gradient(217deg, #6D6D6D 0%, #414141 50%, #4B4B4B 100%); 
}





/* =========================================
   Sections: vertical spacing
   ========================================= */

/* Default section:
   - Generous padding inside (xl)
   - Large separation between sections (xxl) */

section, .spacer-xxl {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
@media (min-width: 992px) {
  section, .spacer-xxl {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
  }
}

.spacer-xl {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
}

/* When one .section follows another, create
   a strong visual break between topics */
/* .section + .section {
  margin-top: var(--space-xxl);
} */

/* Tighter variant for sections that should
   feel more compact (e.g., small promos) */
.section--tight {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
hr.spacer-xxl, hr.spacer-xl {
    margin: 0;
    border: 0;
}

.no-hero+section {
    padding-top: var(--space-lg);
}




.ds-component {
	padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}
.ds-component+.ds-component {
	padding-top: var(--space-lg);
}



@media (min-width: 992px) {
	.ds-component {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}
	.ds-component+.ds-component {
		padding-top: var(--space-xl);
	}
}



.ds-component.ds-diagonal-bg.full-bleed {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.ds-faqs.ds-component+.ds-faqs.ds-component {
    padding-top: 0;
}
div.ds-component:last-child:not(.keep-component-padding) {
    padding-bottom: 0;
}

/* Vertical rhythm: Any heading following a paragraph */
p + h1, p + .h1,
p + h2, p + .h2,
p + h3, p + .h3,
p + h4, p + .h4,
p + h5, p + .h5,
p + h6, p + .h6 {
    padding-top: var(--space-md); /* 1rem spacing defined in tokens.css */
}

/* =========================================
   Header / navigation
   ========================================= */

.site-main {
  flex: 1 0 auto;
  padding-top: var(--header-height);
}
.nav-overlay .site-main {
  padding-top: 0;
}

/* ===== Navbar active color overrides ===== */
.main-nav {
  --bs-navbar-active-color: #fff;
}

.secondary-nav .nav-link {
    font-size: 0.875rem;
}
.eyebrow-nav {
  --bs-navbar-active-color: #fff;
}

/* ===== Eyebrow strip ===== */
.eyebrow-nav {
  background: var(--eyebrow-bg);
  color: var(--eyebrow-fg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.eyebrow-nav .navbar-nav {
  display: flex;
  align-items: center;
}


.eyebrow-nav .navbar-nav{
	margin-left: -16px;
}


.eyebrow-nav a,
.eyebrow-nav .link-invert {
  color: var(--eyebrow-fg);
  text-decoration: none;
}

/* Eyebrow links */
.eyebrow-nav .nav-link {
  padding: 1rem 1rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.eyebrow-nav .nav-link.active {
  border-bottom-width: 2px;
  border-bottom-color: #fff;
}

.eyebrow-nav a:hover,
.eyebrow-nav a:focus {
  text-decoration: none;
  border-bottom-color: #fff;
}

.eyebrow-nav .material-symbols {
  color: var(--eyebrow-fg);
  font-size: 24px;
  vertical-align: middle;
  transition: opacity 0.2s ease-in-out;
}


/* ===== Main nav bar ===== */

/* Prevent key items from shrinking */
.main-nav .navbar-brand,
.main-nav .nav-divider,
.main-nav .search-toggle,
.main-nav .nav-toggle {
  flex: 0 0 auto;
}

/* Main nav backgrounds */
.main-nav {
  background: var(--mainnav-bg);
}
@media(min-width:1200px){
 padding: 0 !important;
	
}

.site-nav .navbar {
  background: var(--mainnav-bg);
}

/* Top-level main nav links */
.main-nav .nav-link,
.site-nav .navbar .nav-link {
  color: var(--nav-link-dim);
  font-weight: 600;
  text-decoration: none !important;
  display: inline-block;
  border-bottom: 1px solid transparent;
  font-family: Unbounded;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.show,
.site-nav .navbar .nav-link:hover,
.site-nav .navbar .nav-link:focus {
  border-bottom: 1px solid #fff;
}

/* Toggler contrast */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

/* Slightly tighter caret spacing for dropdowns */
.site-nav .navbar .dropdown-toggle::after {
  margin-left: 0.35rem;
}


/* ===== Mega menu panel ===== */
.dropdown-menu.megamenu {
  width: 100%;
  left: 0;
  right: 0;
  border: 0;
  border-radius: 0;
  margin-top: 0;
  color: #fff;
  background: var(--mainnav-bg);
}

/* Mega menu title row */
.megamenu .mega-title {
  color: var(--mega-title);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

/* Mega menu headings */
.megamenu .mega-heading {
    font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: #fff;
	letter-spacing: 0.02em;
}

/* Mega menu links */
.megamenu .mega-link,
.dropdown-menu.megamenu a
 {
	display: block;
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none !important;
/* 	padding: 0.25rem; */
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 212.5% */
}

.megamenu .mega-link:hover,
.megamenu .mega-link:focus,
.dropdown-menu.megamenu a:hover,
.dropdown-menu.megamenu a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: var(--mega-link-hover);
  text-decoration: none !important;
}

/* Mega menu inner padding */
.dropdown-menu.megamenu .container {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}


/* ===== Search dropdown bar ===== */
.searchbar {
  background: var(--mainnav-bg);
}

.navbar-expand-xl .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* ===== college nav / secondary nav ====== */
.secondary-nav .navbar-toggler {
    border-radius: 999px;
/*     width: 48px;
    height: 48px; */
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fau-blue);
    color: var(--fau-blue);
    padding: 0;
}

.secondary-nav .navbar-toggler:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
.secondary-nav .school-link a{
	text-decoration:none;
	font-weight:600;
	color: var(--fau-blue);
}
.secondary-nav .school-link a:hover {
    text-decoration: underline;
}


/* ===== Search / hamburger icon swaps ===== */
.search-toggle[aria-expanded="false"] .search-open {
  display: inline-block;
}

.search-toggle[aria-expanded="false"] .search-close {
  display: none;
}

.search-toggle[aria-expanded="true"] .search-open {
  display: none;
}

.search-toggle[aria-expanded="true"] .search-close {
  display: inline-block;
}

.nav-toggle[aria-expanded="false"] .nav-open {
  display: inline-block;
}

.nav-toggle[aria-expanded="false"] .nav-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-close {
  display: inline-block;
}


/*  FAU NAVIGATION MOBILE FIXES */
@media (max-width: 1199.98px) {
    body:has(.navbar-collapse.show) {
        overflow: hidden;
    }

    .navbar-collapse.show {
        max-height: calc(100vh - 100px); 
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        display: block; 
    }

    .main-nav .dropdown-menu.megamenu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        padding: 0;
    }

    .nav-ctas {
        display: flex;
        padding: 0 0 2.5rem 0;
        margin-top: 0;
        width: 100%;
    }

    .navbar-collapse::-webkit-scrollbar {
        width: 6px;
    }
    
    .navbar-collapse::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .navbar-collapse::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }
    
    .navbar-collapse::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }

    .navbar-collapse {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .megamenu .container-xl {
        padding-top: 1rem !important;
        padding-bottom: 0;
    }
}

.navbar-collapse.collapsing {
    overflow: hidden !important;
}

html {
    scrollbar-gutter: stable;
}

/* ===== Transparent header + scroll/hover/open states ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: transparent;
}

/* .site-header .eyebrow-nav,
.site-header .main-nav {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.site-header:hover .eyebrow-nav,
.site-header.is-scrolled .eyebrow-nav,
.site-header.is-open .eyebrow-nav {
  background-color: var(--eyebrow-bg);
}

.site-header:hover .main-nav,
.site-header.is-scrolled .main-nav,
.site-header.is-open .main-nav {
  background-color: var(--mainnav-bg);
} */
.site-header .eyebrow-nav {
  background-color: var(--eyebrow-bg);
  transition: background-color 0.3s ease;
}

.site-header .main-nav {
  background-color: var(--mainnav-bg);
  transition: background-color 0.3s ease;
}


.site-header.is-open .eyebrow-nav {
  background-color: var(--eyebrow-bg);
}
.site-header.is-open .main-nav {
  background-color: var(--mainnav-bg);
}


body.nav-overlay .site-header {
  background: transparent;
}

body.nav-overlay .site-header .eyebrow-nav,
body.nav-overlay .site-header .main-nav {
  background-color: transparent;
}


body.nav-overlay .site-header:hover .eyebrow-nav,
body.nav-overlay .site-header.is-scrolled .eyebrow-nav,
body.nav-overlay .site-header.is-open .eyebrow-nav {
  background-color: var(--eyebrow-bg);
}

body.nav-overlay .site-header:hover .main-nav,
body.nav-overlay .site-header.is-scrolled .main-nav,
body.nav-overlay .site-header.is-open .main-nav {
  background-color: var(--mainnav-bg);
}

/* ===== CTA buttons in main nav ===== */
.btn.header-btn {
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 1rem 2rem;
	min-height: 0 !important;
	line-height: 1.5;
}

.header-btn-apply {
  background-color: #fff;
  color: var(--mainnav-bg);
  border: 1px solid #fff;
}

.header-btn-apply:hover,
.header-btn-apply:focus {
  background-color: #f4f4f4;
  color: var(--mainnav-bg);
}

.header-btn-visit {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.header-btn-visit:hover,
.header-btn-visit:focus {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}


/* ===== Icon buttons (search, hamburger) ===== */

.icon-btn {
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 0;
}
@media(min-width:1200px){
	  width: 58px;
  height: 58px;
}


.search-toggle.icon-btn .material-symbols {
  font-size: 18px;
  line-height: 1;
}

.icon-btn:hover,
.icon-btn:focus {
  background: rgba(255, 255, 255, 0.12);
}


/* ===== Vertical divider between logo and nav ===== */
.nav-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.4);
  margin-inline: 1.5rem;
}


/* ===== Search input styles ===== */
.searchbar input,
.searchbar input:focus {
  border: none;
  background: transparent;
  border-radius: 28px 0 0 28px;
  border-right: none;
  color: #fff;
}

.searchbar input::placeholder {
  color: #fff;
}

.searchbar button {
  border: 1px solid #fff;
  background: transparent;
  border-radius: 0 28px 28px 0;
  border-left: none;
}

.searchbar button:hover {
/*   border: 1px solid #fff; */
  background: rgba(255, 255, 255, 0.25);
  border-left: none;
}


/* ===== Focus ring behavior for header controls ===== */
.site-header .navbar-nav .nav-link:focus,
.site-header .icon-btn:focus,
.site-header .header-btn:focus {
  outline: none;
  box-shadow: none;
}

.site-header .navbar-nav .nav-link:focus-visible,
.site-header .icon-btn:focus-visible,
.site-header .header-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

  .main-nav .navbar-brand img {
    max-width: 210px;
    height: auto;
  }

/* ===== Responsive: up to 575.98px ===== */
@media (max-width: 575.98px) {
/*   .eyebrow-nav .navbar-nav {
    justify-content: space-between;
    width: 100%;
    gap: 0.25rem;
  } */

/*   .eyebrow-nav .nav-link {
    padding: 0.35rem 0.25rem;
    font-size: 0.7rem;
  } */
	
  .nav-divider {
    height: 32px;
    margin-inline: 1rem;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .search-toggle.d-inline-flex {
    margin-right: 0.5rem;
  }
}


/* ===== Responsive: up to 1199.98px ===== */
@media (max-width: 1199.98px) {
/*   .eyebrow-nav .d-flex {
    justify-content: center;
  } */

/*   .eyebrow-nav .navbar-nav {
    justify-content: center;
    margin-left: 0 !important;
    gap: 1rem;
  } */
}


/* ===== Responsive: from 1200px up ===== */
@media (min-width: 1200px) {
  .main-nav .nav-link,
  .site-nav .navbar .nav-link {
    padding: 1.5rem 1rem;
    padding: calc(1.0375rem + 20px) 1rem !important;
  }

  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus,
  .main-nav .nav-link.show,
  .site-nav .navbar .nav-link:hover,
  .site-nav .navbar .nav-link:focus {
    color: var(--nav-link-hover);
    background: var(--mega-bg);
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
  }

  .main-nav .nav-link.active,
  .main-nav .nav-item.show > .nav-link,
  .site-nav .navbar .nav-link.active,
  .site-nav .navbar .nav-item.show > .nav-link {
    color: var(--mainnav-fg);
    background: var(--mainnav-active-bg);
    text-decoration: none !important;
  }

/*   .megamenu .mega-link,
  .dropdown-menu.megamenu a,
  .dropdown-menu .dropdown-item,
  h4 {
    padding: 0.25rem 0;
  } */

  .dropdown-menu.megamenu {
    background: var(--mega-bg);
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  div#navSearch form {
    max-width: 600px;
    margin-left: auto;
  }
}



/* Nav Pills */	
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-primary);
    background-color: #fff;
}
.nav-pills .nav-link {
    color: #ffff;
}

/* =========================================
   Footer
   ========================================= */

/* ===== Footer base ===== */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-fg);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--footer-fg);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  text-decoration: underline;
}

/* ===== Footer logo ===== */
.footer-logo img {
  max-width: 260px;
}

/* ===== Footer headings & text ===== */
.footer-heading {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	margin-bottom: 1rem;
	color:#fff;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

/* ===== Footer nav lists ===== */
.footer-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-list li + li {
  margin-top: 0.35rem;
}

.footer-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
}

.footer-link:hover,
.footer-link:focus {
  color: #fff;
}

/* ===== Newsletter form ===== */
.footer-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

.footer-input-group .form-control {
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: transparent;
  color: #fff;
  font-size: 0.9rem;
}

.footer-input-group .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.footer-input-group .form-control:focus {
  background-color: transparent;
  border-color: #fff;
  box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.2);
}

.footer-btn-subscribe {
  margin-top: 0.2rem;
  border-radius: 999px;
  padding: 0.6rem 2.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  background-color: #fff;
  color: var(--footer-bg);
  border: 1px solid #fff;
}

.footer-btn-subscribe:hover,
.footer-btn-subscribe:focus {
  background-color: #f4f4f4;
  color: var(--footer-bg);
}

/* ===== Social icons ===== */
.footer-social, .social-row {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-social .footer-social-link, .social-row a {
  display: inline-flex;
  align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	text-decoration: none;
}

.footer-social .footer-social-link:hover,
.footer-social .footer-social-link:focus,
.social-row a:hover,
.social-row a:focus{
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  text-decoration: none;
}


/* Apply to subfooter links, but EXCLUDE anything acting as a button */
.subfooter a:not([class*="btn"]):not(.footer-social-link) {
    color: var(--dark-gray);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
}

/* Hover state excluding buttons and button-links */
.subfooter a:not([class*="btn"]):not(.footer-social-link):hover {
    color: var(--fau-blue);
    text-decoration: underline;
}

.subfooter a.footer-social-link {
    background: var(--fau-blue);
    color: var(--light-gray);
}
.subfooter .footer-social .footer-social-link:hover,
.subfooter .footer-social .footer-social-link:focus,
.subfooter .social-row a:hover,
.subfooter .social-row a:focus{
  background-color: #fff;
	color: var(--fau-blue);
  text-decoration: none;
}
.subfooter .form-control {
    color: var(--fau-blue);
    border-color: var(--fau-blue);
}
.subfooter .form-control::placeholder {
    color: var(--fau-blue);
}

/* ===== Divider ===== */
.footer-divider {
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 1;
  margin: 0 auto;
}

/* ===== Address + legal ===== */
.footer-address {
/*   color: var(--slate-gray); */
  font-size: 0.82rem;
}

.footer-legal {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.25rem;
}

.footer-link-small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
}

.footer-dot {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

/* ===== Footer responsive ===== */
@media (max-width: 767.98px) {
  .site-footer {
    text-align: center;
  }

  .footer-heading {
    margin-bottom: 0.6rem;
  }

  .footer-list {
    margin-bottom: 1.5rem;
  }

  .footer-newsletter {
    max-width: 320px;
    margin-inline: auto;
  }

  .footer-logo img {
    max-width: 260px;
  }

  .footer-divider {
    width: 85%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-logo img {
    max-width: 280px;
  }
}

@media (min-width: 992px) {
  .footer-divider {
    width: 90%;
  }
}

/* =========================================
   Buttons – global overrides
   ========================================= */

/* Alignment fixes for icons inside buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1; /* Matches your 110% spec */
  min-height: 3rem; /* Ensures consistent 48px height across variants */
}

/* Custom Focus behavior: 
   Prevents the "stuck" ring on click but keeps it for keyboard users */
.btn:focus {
  outline: none;
  box-shadow: none;
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-btn-focus-shadow-rgb, 0, 0, 0), 0.25);
}

/* =========================================
   Primary button (.btn-primary)
   ========================================= */

.btn-primary:focus {
  outline: none;
  box-shadow: none;
}

.btn-primary:focus-visible {
  outline: 0;
  /* Uses the black-rgb variable we defined in the root */
  box-shadow: 0 0 0 0.15rem rgba(var(--black-rgb), 0.25);
}

/* =========================================
   Secondary button (.btn-secondary)
   ========================================= */

/* Functional focus overrides only. 
   Colors, hover-flip, and disabled states handled in custom.scss */

.btn-secondary:focus {
  outline: none;
  box-shadow: none;
}

.btn-secondary:focus-visible {
  outline: 0;
  /* 0.35 opacity as per your spec */
  box-shadow: 0 0 0 0.15rem rgba(var(--fau-blue-rgb), 0.35);
}



/* Link-style button (.btn-link) */

.btn-link {
	/* Undo pill button look */
	padding: 0;
	min-height: 0;
	border-radius: 0;
	border: none;

	background-color: transparent;
	color: var(--bs-primary);      /* FAU blue */
	font-weight: 600;
	text-decoration: none;
	display:inline-block;
}

/* Hover: underline only, keep FAU blue */
.btn-link:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Disabled link button */
.btn-link.disabled,
.btn-link:disabled {
  color: var(--medium-gray);
  text-decoration: none;
  pointer-events: none;
}

/* Focus: keyboard only */
.btn-link:focus {
  outline: none;
  box-shadow: none;
}

.btn-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

/* Link button with Material Symbols arrow, no extra HTML element */
.btn-link {
  position: relative;
  padding-right: 1.25rem; /* room for the arrow */
}

/* Inject the icon via ::after */
.btn-link::after {
  content: "arrow_forward_ios";
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: text-bottom;
  color: currentColor; /* matches link color */

  /* match your material-symbols defaults */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* =========================================
   Badges
   ========================================= */

.badge {
  /* Shape & Alignment */
  border-radius: var(--btn-radius-pill); /* Keeps consistency with buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Fine-tuning Typography */
  text-transform: capitalize;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* =========================================
   Forms - Functional Overrides
   ========================================= */

/* Use this ONLY if you want to change the shadow color globally 
   to match your brand primary instead of Bootstrap default */
.form-control:focus {
  border-color: var(--fau-blue);
  box-shadow: 0 0 0 0.15rem rgba(var(--fau-blue-rgb), 0.25);
}

/* Ensure placeholder opacity remains consistent across browsers */
.form-control::placeholder {
  opacity: 1;
}

/* ===== Checkboxes (color-only, unchanged visually) ===== */

.form-check-input[type="checkbox"] {
	border: 1px solid var(--light-gray);
	background-color: var(--light-gray);
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input[type="checkbox"]:active {
    filter: none;
    border: 1px solid var(--dark-gray);
}
/* Disabled checkbox */
.form-check-input[type="checkbox"]:disabled {
  background-color: var(--inactive);
  border-color: var(--inactive);
}

.form-check-input[type="checkbox"]:disabled + .form-check-label {
  color: var(--medium-gray);
}


/* ===== Radios (FAU blue, same size as default) ===== */

/* Radios: use FAU blue for the inner dot instead of white */
.form-check-input[type="radio"]:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.8' fill='%23003366'/%3e%3c/svg%3e");
  border-color: var(--bs-primary);
}

.form-check-input[type="radio"]:disabled {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.8' fill='%23d9d9d9'/%3e%3c/svg%3e");
  border-color: var(--bs-primary);
}

.form-check-input[type="radio"] {
  /* keep default dimensions from Bootstrap */
  background-color: #ffffff;           /* white center when unchecked */
  border-color: var(--bs-primary);     /* FAU blue ring */
  accent-color: var(--bs-primary);     /* FAU blue inner dot when checked */
}

/* Disabled radio: muted gray */
.form-check-input[type="radio"]:disabled {
  accent-color: var(--inactive);
  border-color: var(--inactive);
  background-color: #ffffff;
}

.form-check-input[type="radio"]:disabled + .form-check-label {
  color: var(--medium-gray);
}


/* ===== Shared focus behavior (checkbox + radio) ===== */

.form-check-input:focus {
  outline: none;
  box-shadow: none;
}

.form-check-input:focus-visible {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.35);
}


/* ===== Toggle switches (.form-switch): focus + colors ===== */


/* Make Bootstrap switch thumb always white in all states */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked,
.form-switch .form-check-input:disabled {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Off state: light gray track */
.form-switch .form-check-input {
  background-color: var(--light-gray);
  border-color: var(--light-gray);
}

/* Hover (off): Global UI Green @ 50% */
.form-switch .form-check-input:not(:checked):hover {
  background-color: rgba(var(--success-rgb), 0.5);
  border-color: rgba(var(--success-rgb), 0.5);
}

/* On / checked: Global UI Green track */
.form-switch .form-check-input:checked {
  background-color: var(--success);
  border-color: var(--success);
}

/* Disabled: inactive gray */
.form-switch .form-check-input:disabled {
  background-color: var(--inactive);
  border-color: var(--inactive);
}

/* Focus: no ring on click, ring only for keyboard users */
.form-switch .form-check-input:focus {
  outline: none;
  box-shadow: none;
}

.form-switch .form-check-input:focus-visible {
  outline: 0;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.35);
}



	  
/* ===== Range input (slider) ===== */

.form-range {
  cursor: pointer;
  background: transparent;
  --range-fill: 0%; /* updated via JS */
}

/* Click vs keyboard focus */
.form-range:focus {
  outline: none;
  box-shadow: none;
}

.form-range:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.35);
}

/* ---------- WebKit (Chrome, Edge, Safari) ---------- */

/* Track: two-tone via CSS variable */
.form-range::-webkit-slider-runnable-track {
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--bs-primary) 0%,
    var(--bs-primary) var(--range-fill),
    var(--light-gray) var(--range-fill),
    var(--light-gray) 100%
  );
}

/* Thumb: default (white with primary border) */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.3rem; /* center on track */
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--bs-primary);
}

/* Thumb: active (primary bg + primary border) */
.form-range:active::-webkit-slider-thumb {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ---------- Firefox ---------- */

.form-range::-moz-range-track {
  height: 0.4rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--bs-primary) 0%,
    var(--bs-primary) var(--range-fill),
    var(--light-gray) var(--range-fill),
    var(--light-gray) 100%
  );
}

/* We’ll let the gradient handle the fill, so hide default progress coloring */
.form-range::-moz-range-progress {
  background: transparent;
}

/* Thumb: default (white with primary border) */
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--bs-primary);
}

/* Thumb: active */
.form-range:active::-moz-range-thumb {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ---------- IE / old Edge (best-effort) ---------- */

.form-range::-ms-track {
  height: 0.4rem;
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.form-range::-ms-fill-lower {
  height: 0.4rem;
  border-radius: 999px;
  background-color: var(--bs-primary);
}

.form-range::-ms-fill-upper {
  height: 0.4rem;
  border-radius: 999px;
  background-color: var(--light-gray);
}

.form-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--bs-primary);
}

.form-range:active::-ms-thumb {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}


/* ===== form-control ===== */
.form-control {
    border-radius: 100px;
    border: 1px solid var(--light-gray);
    background: var(--light-gray);
}
.form-label {
    color: var(--dark-gray);
}
.form-control:hover {
    border: 1px solid var(--medium-gray);
}
.form-control:active {
    border: 1px solid var(--dark-gray);
}

/* ===== Select fields (.form-select) ===== */

/* Base select: match text input visual language */
.form-select {
  border-radius: 24px;
  padding: 0.75rem 2.5rem 0.75rem 0.75rem; /* extra space for arrow */
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dark-gray);
    border: 1px solid var(--light-gray);
    background: var(--light-gray);

  /* Custom arrow icon (light gray) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23CCCCCC' d='M4.646 6.146a.5.5 0 0 1 .708 0L8 8.793l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 2.2rem 2.2rem;
}

.form-select:hover {
    border: 1px solid var(--medium-gray);
}
.form-select:active {
    border: 1px solid var(--dark-gray);
}

/* Remove default focus ring; we’ll use focus-visible only */
.form-select:focus {
  outline: none;
  box-shadow: none;
}

/* Keyboard focus ring */
.form-select:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
  outline: 0;
}

/* =========================================
   Input groups (prefix / suffix)
   ========================================= */

/* Make the container itself the pill shape */
.input-group {
/*   border-radius: 40px;
  border: 1px solid var(--medium-gray);
  overflow: hidden;           /* keeps children inside the pill */
  padding: 5px; */
}
header .input-group { border: 1px solid var(--medium-gray); border-radius: 40px;}

/* Children inside are flat; the group border provides the outline */
.input-group > .form-control,
.input-group > .input-group-text,
.input-group > .btn {
  border-radius: 40px;
  border: 0;
  box-shadow: none;
}

/* Keep your existing button sizing */
.input-group .btn {
  min-height: auto;
  padding: .375rem 1rem;
}

/* Prefix / suffix styles */
.input-group > .input-group-text {
  min-width: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: var(--dark-gray);
  font-size: 0.875rem;
}
.input-group > .form-control::placeholder {
    color: var(--dark-gray);
}

#navSearch .input-group > .form-control::placeholder {
    color: #fff;
}

/* =========================================
   File inputs
   ========================================= */

/* Style the inner "Choose file" button */
.form-control[type="file"]::file-selector-button {
	min-height:45px;
	padding: 0.75rem 1.5rem;
	margin: -0.75rem 1rem -0.75rem -1rem;
  
}


/* =========================================
   Color input
   ========================================= */

/* Base control */
.form-control[type="color"] {
  /* match general field style */
  border-radius: 24px;
  border: 1px solid var(--medium-gray);
  padding: 0.25rem;          /* thin padding around swatch */
  width: 3.5rem;             /* tweak as desired */
  height: 2.25rem;           /* close to your text field height */
  cursor: pointer;
}

/* WebKit (Chrome, Edge, Safari) */
.form-control[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: inherit;
}

.form-control[type="color"]::-webkit-color-swatch {
  border-radius: 999px;      /* fully rounded swatch */
  border: 0;
}

/* Firefox */
.form-control[type="color"]::-moz-color-swatch {
  border-radius: 999px;
  border: 0;
}


/* Dark theme variant */
.form-dark-theme .input-group {
  background-color: transparent;
  border-color: #ffffff;
}

.form-dark-theme .input-group > .form-control,
.form-dark-theme .input-group > .btn {
  background-color: transparent;
  color: #ffffff;
}



/* Dark theme variant */
.form-dark-theme .input-group > .input-group-text {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
	
	  

/* Forms on dark surfaces (use .form-dark-theme wrapper) */
.form-dark-theme .form-label {
  color: #ffffff;
}

.form-dark-theme .form-text {
  color: rgba(255, 255, 255, 0.85);
}

/* Error text on dark: keep danger color */
.form-dark-theme .invalid-feedback {
  color: var(--danger);
}

/* Inputs on dark surfaces */
.form-dark-theme .form-control {
/*   background-color: transparent; */
	background-color: var(--dark-blue);
  border-color: #ffffff;
  color: #ffffff;
}

/* Placeholder on dark */
.form-dark-theme .form-control::placeholder {
  color: #ffffff;
  opacity: 0.9;
}

/* Error state on dark */
.form-dark-theme .form-control.is-invalid,
.form-dark-theme .form-control[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 0.15rem rgba(var(--danger-rgb), 0.35);
}

/* Disabled on dark */
.form-dark-theme .form-control:disabled,
.form-dark-theme .form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

/* Form focus behavior (click vs keyboard)
   - :focus: no visible ring (mouse users)
   - :focus-visible: show accessible ring (keyboard users) */

/* Light surface */
.form-control:focus {
  outline: none;
  box-shadow: none;
}

.form-control:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
  outline: 0;
}

/* Dark theme */
.form-dark-theme .form-control:focus {
  outline: none;
  box-shadow: none;
}

.form-dark-theme .form-control:focus-visible {
  border-color: #ffffff;
  box-shadow: 0 0 0 0.15rem var(--header-focus-ring);
  outline: 0;
}


/* =========================================
   Modal
   ========================================= */


.modal-backdrop {
    --bs-backdrop-bg: #222;
    --bs-backdrop-opacity: 0.8;
}


/* =========================================
   Icon fonts & Material Symbols
   ========================================= */

/* Material Symbols (outlined) */
.material-symbols, .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  letter-spacing: normal;
  text-transform: none;
  color: currentColor;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Icon helpers for outlined set */
.material-symbols.icon-16, .material-symbols-rounded.icon-16 { font-size: 16px; line-height: 1; }
.material-symbols.icon-20, .material-symbols-rounded.icon-20 { font-size: 20px; line-height: 1; }
.material-symbols.icon-24, .material-symbols-rounded.icon-24 { font-size: 24px; line-height: 1; }
.material-symbols.icon-32, .material-symbols-rounded.icon-32 { font-size: 32px; line-height: 1; }

.icon-fill  { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-bold  { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }

/* FAU icon font */
/* @font-face {
  font-family: "fau";
  src: url("https://www.fau.edu/css/fonts/fau.eot?58knac");
  src:
    url("https://www.fau.edu/css/fonts/fau.eot?58knac#iefix") format("embedded-opentype"),
    url("https://www.fau.edu/css/fonts/fau.ttf?58knac") format("truetype"),
    url("https://www.fau.edu/css/fonts/fau.woff?58knac") format("woff"),
    url("https://www.fau.edu/css/fonts/fau.svg?58knac#fau") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-fau {
  font-family: "fau" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\ea2b";
}
.icon-instagram:before {
  content: "\e94d";
}
.icon-youtube:before {
  content: "\e975";
}
.icon-twitter-x:before {
  content: "\ea4e";
}
.icon-instagram:before {
  content: "\e976";
}
.icon-linkedin:before {
  content: "\e973";
} */


/* NEW FAU SOCIAL FONT */
@font-face {
  font-family: 'fau-social';
  src: url('/_resources/fonts/fau-social.eot?5hqvp7');
  src: url('/_resources/fonts/fau-social.eot?5hqvp7#iefix') format('embedded-opentype'),
       url('/_resources/fonts/fau-social.woff?5hqvp7') format('woff'),
       url('/_resources/fonts/fau-social.ttf?5hqvp7') format('truetype'),
       url('/_resources/fonts/fau-social.svg?5hqvp7#fau-social') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-fau {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fau-social' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\e900";
}
.icon-instagram:before {
  content: "\e901";
}
.icon-linkedin:before {
  content: "\e902";
}
.icon-pintrest:before {
  content: "\e903";
}
.icon-snapchat:before {
  content: "\e904";
}
.icon-telegram:before {
  content: "\e905";
}
.icon-threads:before {
  content: "\e906";
}
.icon-tiktok:before {
  content: "\e907";
}
.icon-whatsapp:before {
  content: "\e908";
}
.icon-twitter-x:before {
  content: "\e909";
}
.icon-youtube:before {
  content: "\e90a";
}



/* global layout */

/* .hero-immersive-container+section#section1 {
    padding-top: 0;
} */
body.nav-overlay #main-content section:first-of-type, body.nav-overlay #main-content .ds-component:first-of-type, .fau-refresh .ds-component:first-of-type:not(.keep-component-padding) {
padding-top: 0;
}


.breadcrumb-container+section{
	padding-top:0 !important;
}

/* custom classes */

/* Default state: Rule is left-aligned (margin: 0) */
.ruled-heading::before {
    display: block;
    width: 155px;
    border-top: 4px solid var(--fau-red);
    content: "";
    margin: 0; /* Default changed from '0 auto' to '0' */
    padding: 0 0 20px 0;
}

/* Centered state: Rule is centered (margin: 0 auto) */

.ruled-heading.text-center::before,
.text-center > .ruled-heading::before,
.ruled-heading[style*="text-align:center"]::before,
.ruled-heading[style*="text-align: center"]::before{
    margin: 0 auto;
}


/* =========================================================
   FIXED ANNOUNCEMENT BAR + FIXED HEADER OFFSET (HOMEPAGE)
   Drop-in: paste at the END of style.css so it overrides
   earlier .site-main and .site-header rules.
   ========================================================= */

/*
  Heights:
  - Mobile-first announcement height: 73px (wraps)
  - Desktop announcement height: 52px (>= 576px)
  - Header heights: your inspected values
      Mobile: 96.96px
      Desktop: 130px (>= 576px)
*/

:root {
  /* Header heights (mobile-first) */
  --header-height: 96.96px;

  /* Announcement heights (mobile-first) */
  --announcement-height: 73px;

  /* Default top offset is just the header */
  --page-top-offset: var(--header-height);
}

:root {
    /* CSS-side fallback used before JS measures the real header.
       Matching these to the known breakpoint heights prevents the
       initial layout jump on first paint. */
    --dynamic-header-height: 96.96px;
}

/* Desktop breakpoint matches your existing pattern */
@media (min-width: 576px) {
  :root {
    --header-height: 126px;
    --announcement-height: 52px;
    /* Keep the dynamic fallback in sync at this breakpoint too so
       the pre-JS render already has the right offset on desktop. */
    --dynamic-header-height: 126px;
  }
}

/* When the announcement is active, content must clear BOTH bars */
body.has-announcement {
  --page-top-offset: calc(var(--announcement-height) + var(--header-height));
}
.site-main {
    /* Use the dynamic variable for padding */
    padding-top: var(--dynamic-header-height);
}
.nav-overlay.has-fau-alert .site-main {
    padding-top: var(--alert-height);
}

/* Fixed announcement bar sits above the fixed header */
.fau-announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040; /* Above .site-header (yours is 1030) */
}

/* Announcement content sizing and basic presentation */
.fau-announcement {
  min-height: var(--announcement-height);
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
	justify-content: center;

  /* Keep this minimal; swap to tokens as desired */
  background: var(--fau-red);
  color: #fff;
}

/* Link treatment inside announcement */
.fau-announcement a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* When announcement exists, push the fixed header down */
body.has-announcement .site-header {
  top: var(--announcement-height);
}

/* other */

.fau-breadcrumb {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    font-size: 14px;
    display:flex;
    color: rgba(var(--fau-blue-rgb), 1);
}
.fau-breadcrumb>li+li:before {
    content: " / ";
    padding: 0 5px;
	color: rgba(var(--fau-blue-rgb), 0.6);
}

.fau-breadcrumb a {
    color: rgba(var(--fau-blue-rgb), 0.6);
    text-decoration: none;
}


blockquote {
    padding: 2.5rem 2.313rem;
    border-left: 4px solid var(--fau-red);
	position:relative;
}
blockquote:before {
    content: "";
    display: block;
    width: 35px;
    height: 31px;
    margin-bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='31' viewBox='0 0 35 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.83337 1.33337C3.90512 1.33337 3.01488 1.65822 2.3585 2.23646C1.70212 2.8147 1.33337 3.59896 1.33337 4.41671V13.6667C1.33337 14.4845 1.70212 15.2687 2.3585 15.847C3.01488 16.4252 3.90512 16.75 4.83337 16.75C5.2975 16.75 5.74262 16.9125 6.07081 17.2016C6.399 17.4907 6.58337 17.8828 6.58337 18.2917V19.8334C6.58337 20.6511 6.21463 21.4354 5.55825 22.0136C4.90187 22.5919 4.01163 22.9167 3.08337 22.9167C2.61925 22.9167 2.17413 23.0791 1.84594 23.3682C1.51775 23.6574 1.33337 24.0495 1.33337 24.4584V27.5417C1.33337 27.9506 1.51775 28.3427 1.84594 28.6318C2.17413 28.9209 2.61925 29.0834 3.08337 29.0834C5.86815 29.0834 8.53886 28.1088 10.508 26.3741C12.4771 24.6394 13.5834 22.2866 13.5834 19.8334V4.41671C13.5834 3.59896 13.2146 2.8147 12.5582 2.23646C11.9019 1.65822 11.0116 1.33337 10.0834 1.33337H4.83337Z' stroke='%23CC0000' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.0834 1.33337C23.1551 1.33337 22.2649 1.65822 21.6085 2.23646C20.9521 2.8147 20.5834 3.59896 20.5834 4.41671V13.6667C20.5834 14.4845 20.9521 15.2687 21.6085 15.847C22.2649 16.4252 23.1551 16.75 24.0834 16.75C24.5475 16.75 24.9926 16.9125 25.3208 17.2016C25.649 17.4907 25.8334 17.8828 25.8334 18.2917V19.8334C25.8334 20.6511 25.4646 21.4354 24.8082 22.0136C24.1519 22.5919 23.2616 22.9167 22.3334 22.9167C21.8692 22.9167 21.4241 23.0791 21.0959 23.3682C20.7677 23.6574 20.5834 24.0495 20.5834 24.4584V27.5417C20.5834 27.9506 20.7677 28.3427 21.0959 28.6318C21.4241 28.9209 21.8692 29.0834 22.3334 29.0834C25.1181 29.0834 27.7889 28.1088 29.758 26.3741C31.7271 24.6394 32.8334 22.2866 32.8334 19.8334V4.41671C32.8334 3.59896 32.4646 2.8147 31.8082 2.23646C31.1519 1.65822 30.2616 1.33337 29.3334 1.33337H24.0834Z' stroke='%23CC0000' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
}
blockquote p {
    font-size: var(--font-size-2xl);
    line-height: calc(var(--font-size-2xl) * 1.2);
    color: var(--fau-blue);
}
blockquote cite {
    color: var(--fau-red);
    font-size: var(--font-size-md);
    line-height: calc(var(--font-size-md) * 1.2);
}
blockquote cite:before {
    content: "\2014";
    margin-right: 0.5em;
}


ul.checklist li, li.checklist {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
	line-height: 1.5;
	margin-left: -3rem;
	display: flex;
	list-style: none;
}
ul.checklist li:before, li.checklist:before {
    content: "\e2e6";
    font-family: 'Material Symbols Rounded';
    font-size: 1.25rem;
    line-height: 1;
    margin-right: .25rem;
    margin-top: 3px;
}

.blog-content {
    color: rgba(var(--fau-blue-rgb), 0.8);
}

.blog-content:has(.profile) {
    color: var(--dark-gray);
}

.blog-content :is(h1, h2, h3, h4, h5, h6) {
  color: rgba(var(--fau-blue-rgb), 1);
}

img.card-img-top {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}


.hero-immersive-container {
    height: auto;
	min-height: 400px;
    overflow: hidden;
    position: relative;
}
.hero-immersive-container.carousel{
	padding:0 !important;
}
/* page hero (non-homepage) */
/* @media screen and (min-width: 1200px) {
	.nav-overlay .hero-immersive-container {
    min-height: 600px;
	}
	
} */
	.nav-overlay .hero-immersive-container {
    min-height: 600px;
	}

/* Media (video/img) */
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;                /* bottom layer */
}
.hero-video,
.hero-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay (under text, over media) */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;                /* middle layer */
  pointer-events: none;
}

/* Utilities */

/* Custom 3:4 Ratio Utility */
.ratio-3x4 {
    --bs-aspect-ratio: 133.33%; /* 4 divided by 3 */
}

 .text-truncate-line2{
	 display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits text to 2 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .text-truncate-line3{
	 display: -webkit-box;
    -webkit-line-clamp: 3; /* Limits text to 2 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .text-truncate-line4{
	 display: -webkit-box;
    -webkit-line-clamp: 4; /* Limits text to 2 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
 }
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.col-8 .full-bleed, .col-md-8 .full-bleed, .col-lg-8 .full-bleed  {
    width: auto;
    position: static;
    left: auto;
    right: auto;
    /* This negates the padding/gutters of the parent col-8 */
    margin-left: -15px; 
    margin-right: -15px;
}


/* Content */
.hero-content{
  position: relative;
  z-index: 2;                /* top layer */
  height: 100%;
  display: grid;
  align-content: center;
}

.hero-title{
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  color: #fff;
  line-height: 1.2;
}
.hero-title .line-1{
  display: block;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 80px);   /* target 80px */
}
.hero-title .line-2{
  display: block;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 56px); /* target 56px */
  text-transform: capitalize;
}

/* template tweaks */
#main-content > .content{overflow: hidden;}



/* subnav (side) */


.side-menu {
    background: var(--fau-blue);
    border-radius: .5rem;
    padding: 1.5rem;
	margin-bottom: 2.5rem;
	 width: 100%;
	
}
/* @media screen and (min-width: 991px) {
	.side-menu {
		margin-bottom:0;
	}
} */

.side-menu .links > ul > li > .link {
    font-size: 20px;
}


.side-menu .heading {
    display: none;
	color: #fff;
	padding: 10px 15px;
	cursor: pointer;
}

@media screen and (max-width: 991px) {
    .side-menu .heading {
        display:block
    }
}

.side-menu .heading:after {
    content: "+";
    float: right;
    font-size: 26px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #efefef;
    background: #036;
    border-radius: 50%;
    text-align: center;
    font-family: var(--bold-font)
}

.side-menu .heading.open:after {
    content: "-";
    float: right;
    font-size: 26px;
    width: 25px;
    height: 25px;
    line-height: 22px;
    color: #efefef;
    background: #036;
    border-radius: 50%;
    text-align: center;
    font-family: var(--bold-font)
}

.side-menu .heading.open+.links {
    display: block
}

.side-menu a {
    text-decoration: none !important;
}

.side-menu .links {
    margin-right: 0;
}

@media screen and (max-width: 991px) {
    .side-menu .links {
        display:none;
        margin-right: 0;
        border-bottom: none;
        padding: 0 15px
    }
}

.side-menu .links a,.side-menu .links .icon {
    line-height: 1.25;
}

.side-menu .links ul,.side-menu .links ol {
    list-style: none;
    padding: 0;
    margin: 0
}


.side-menu> .links > ul > li ul >li {
    border-bottom: 1px solid #fff;
}
.side-menu.filter-menu> .links > ul > li ul >li{
	border-bottom: none;
}


.side-menu> .links > ul > li {
    border-bottom: 1px solid var(--fau-blue);
}

.side-menu> .links > ul > li > ul >li:last-child {
    border-bottom: 1px solid var(--fau-blue);
}



.side-menu .links ul li, .side-menu .links ol li {
/*     border-bottom: 1px solid #fff; */
}

.side-menu .links ul li ul li a,.side-menu .links ul li ol li a,.side-menu .links ol li ul li a,.side-menu .links ol li ol li a {
    padding-left: 1rem !important;
}

.side-menu .links ul li ul li ul li .link,
.side-menu .links ul li ul li ol li .link,
.side-menu .links ul li ol li ul li .link,
.side-menu .links ul li ol li ol li .link,
.side-menu .links ol li ul li ul li .link,
.side-menu .links ol li ul li ol li .link,
.side-menu .links ol li ol li ul li .link,
.side-menu .links ol li ol li ol li .link {
    padding-left: 1rem;
}


.side-menu .links ul li ul li ul li .link

.side-menu .links ul li[data-type=root2]>ol,.side-menu .links ol li[data-type=root2]>ol {
    border-left: none !important
}

/* .side-menu .links li.active>.link>a {
    color: #c00
} */

.side-menu .links li.active>ul,.side-menu .links li.active>ol {
    display: block
}

.side-menu .links li ul li ul,.side-menu .links li ul li ol,.side-menu .links li ol li ul,.side-menu .links li ol li ol {
    display: none
}

.side-menu .links>ul>li,.side-menu .links>ol>li {
    border-top: none;
/*     border-bottom: 1px solid var(--fau-blue) */
}

/* .side-menu .links>ul>li>.link>a,.side-menu .links>ol>li>.link>a {
    color: #fff !important;
} */



.side-menu .links>ul>li>.link>a, .side-menu .links>ol>li>.link>a {
    color: #fff !important;
/*     background: var(--fau-blue) !important; */
}

.side-menu .links li.active>.link>a{
background: var(--dark-blue);
	border-radius: 4px;

}
.side-menu > .links > ul > li.active>.link>a {
    background: none;
}


.side-menu .links>ul>li>.link .icon span,.side-menu .links>ol>li>.link .icon span {
    background: var(--fau-blue)
}

.side-menu .links .link {
    display: flex
}

.side-menu .links .link a {
    padding: 1rem 0;
    color: #fff;
}

.side-menu .links .link .icon {
    width: 28px;
	position: relative;
	cursor: pointer;
	margin-right: 0.438rem;
}



.side-menu .links .link .icon .arrow {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff;
}

.side-menu .links .link .icon .arrow.open span.left {
    transform: rotate(-45deg)
}

.side-menu .links .link .icon .arrow.open span.right {
    transform: rotate(-135deg)
}

.side-menu .links .link .icon .arrow span {
    transition: all .2s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    display: inline-block
}

.side-menu .links .link .icon .arrow span:first-child {
}

.side-menu .links .link .icon .arrow span.left {
    background: #0073e6;
    transform: rotate(-135deg)
}

.side-menu .links .link .icon .arrow span.right {
    background: #0073e6;
    transform: rotate(-45deg);
    margin-left: 10px
}

.side-menu .links .link:has(.arrow) {
    background-color: var(--dark-blue);
    border-radius: 4px;
}
.side-menu .links .link:has(.arrow.open) {
    background-color: var(--fau-blue);
    border-radius: 4px;
}


.side-menu .material-symbols-rounded {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(0deg); /* Facing Down */
}


.side-menu .arrow:not(.open) .material-symbols-rounded {
    transform: rotate(180deg);
}
.side-menu .links li:has(.link .arrow:not(.open)) {
    border-bottom: none;
}

.card-body p {
    margin-bottom: .5rem;
}


/* let the main last section touch the footer */
/* main#main-content > .content section:last-child {
    padding-bottom: 0;
} */

/*scroll fix*/
.ds-component[id], 
section[id] {
scroll-margin-top: calc(var(--dynamic-header-height) + 40px);}

/* Smooth scrolling makes the jump feel less jarring */
html {
    scroll-behavior: smooth;
}








/* Reset browser default focus rings */
:focus,
:focus-visible {
  outline: none !important;
  box-shadow: none;
}

/* Global brand focus: Links, Buttons, Form Inputs, and Cards */
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.card:focus-within:has(.stretched-link) {
  outline: 0 !important;
  box-shadow: var(--fau-focus-shadow) !important;
}

/* Card override: Maintain 16px Design System radius */
.card:focus-within:has(.stretched-link) {
  border-radius: 1rem; 
}

/* Cleanup: Prevent double rings on cards with stretched links */
.card:focus-within a.stretched-link:focus-visible {
  box-shadow: none !important;
}

/* directory index */
/* Directory card subgrid layout */
.directory-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991px) {
  .directory-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .directory-card-grid {
    grid-template-columns: 1fr;
  }
}
.directory-card {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
}
.directory-card-info {
  padding-bottom: 1rem;
}
.directory-card-contact {
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
      display: flex;
    flex-direction: column;
 justify-content: flex-start;
}