/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
File: shared.css
Purpose: Shared design system, navigation, footer, reusable controls, responsive helpers, and global component styles.
Maintenance note: Related rules and logic are grouped and documented by feature.
=============================================================
*/

/*
STYLE ORGANIZATION
- Base/component rules define the default desktop presentation.
- State classes such as .active, .show, and :hover control interactions.
- Media queries near the relevant rules adapt the layout for tablet and mobile screens.
*/

:root{
  --site-max-width:80rem;
  --site-gutter-mobile:1.25rem;
  --site-gutter-desktop:2rem;
  --brand-blue-deep:#0a2a78;
  --brand-blue:#2176ff;
  --brand-cyan:#45d4ff;
}
.container-page{
  width:100%;
  max-width:var(--site-max-width);
  margin-inline:auto;
  padding-inline:var(--site-gutter-mobile);
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width:768px){
  .container-page{padding-inline:var(--site-gutter-desktop)}
}
/* Shared header */
.site-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1030!important;
  width:100%;
  background:rgba(255,255,255,.90)!important;
  border-bottom:1px solid rgba(20,85,217,.10)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.84)!important;
  border-color:rgba(20,85,217,.14)!important;
  box-shadow:0 12px 36px rgba(6,30,90,.10)!important;
}
.site-header .header-inner{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:.625rem!important;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.brand-icon{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,var(--brand-blue-deep),var(--brand-blue))!important;
  box-shadow:0 10px 28px rgba(20,85,217,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.brand-icon::before,.brand-icon::after{
  content:none!important;
  display:none!important;
}
.brand-icon img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:none!important;
}
.brand-shine{
  position:absolute;
  top:-75%;
  left:-135%;
  z-index:4;
  width:64%;
  height:250%;
  display:block;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 28%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.18) 72%,transparent);
  transform:rotate(28deg) translateX(0);
  animation:trilogixBrandShine 4.6s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform;
}

/* Animation sequence used by the component states that reference this name. */
@keyframes trilogixBrandShine{
  0%,58%{transform:rotate(28deg) translateX(0)}
  88%,100%{transform:rotate(28deg) translateX(430%)}
}
.brand-name{
  display:block;
  margin:0;
  color:#1f2937;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:1rem!important;
  font-weight:700!important;
  line-height:1.1!important;
  letter-spacing:0!important;
}
.brand-sub{
  display:block;
  margin-top:3px!important;
  color:#667085;
  font-size:10px!important;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.desktop-nav a{
  position:relative;
  overflow:hidden;
  padding:.5rem .75rem;
  border-radius:6px;
  color:#667085;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:4px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue));
  transition:left .25s ease,right .25s ease;
}
.desktop-nav a:hover,
.desktop-nav a.active,
.desktop-nav a[aria-current="page"]{
  color:#101828;
  background:#f1f5f9;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after,
.desktop-nav a[aria-current="page"]::after{
  left:.75rem;
  right:.75rem;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.advisor-link{
  padding:.5rem .75rem;
  color:#101828;
  font-size:.75rem;
  font-weight:600;
}
.enroll-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:32px!important;
  padding:.5rem .75rem!important;
  border-radius:6px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0e48c2,var(--brand-blue))!important;
  box-shadow:0 9px 24px rgba(20,85,217,.24)!important;
  font-size:.75rem!important;
  font-weight:600!important;
  line-height:1!important;
}
.menu-btn{
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid #e2e8f0;
  border-radius:7px;
  background:#fff;
  color:#1f2937;
  font-size:1.25rem;
}
.mobile-menu{
  border-top:1px solid #e2e8f0;
  padding:1rem 0 1.25rem;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 42px rgba(6,30,90,.10);
  backdrop-filter:blur(16px);
}
.mobile-menu .container-page>a{
  display:block;
  margin:.15rem 0;
  padding:.78rem .9rem;
  border-radius:10px;
  color:#334155;
  font-size:.9rem;
  font-weight:600;
}
.mobile-menu .container-page>a:hover,
.mobile-menu .container-page>a.active,
.mobile-menu .container-page>a[aria-current="page"]{
  color:#0752bc;
  background:#eef5ff;
}
/* Shared footer */
.site-footer{
  position:relative;
  overflow:hidden;
  width:100%;
  color:#fff;
  background:linear-gradient(150deg,#050f31,#091f58 55%,#0b347f)!important;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:radial-gradient(circle at center,rgba(69,212,255,.5) 0 1px,transparent 1.5px);
  background-size:72px 72px;
}
.site-footer .footer-main{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--site-max-width);
  margin-inline:auto;
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}
.site-footer .row{--bs-gutter-x:1.5rem;align-items:flex-start}
.site-footer .brand-name{color:#fff}
.site-footer .brand-sub{color:rgba(255,255,255,.6)}
.site-footer .brand-icon{
  background:linear-gradient(145deg,var(--brand-blue-deep),var(--brand-blue))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.site-footer .footer-bottom{width:100%;margin-left:0;margin-right:0}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:991.98px){
  .desktop-nav,.header-actions{display:none!important}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width:992px){
  .menu-btn,.mobile-menu{display:none!important}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:575.98px){
  .brand-icon{width:42px!important;height:42px!important;flex-basis:42px!important}
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (prefers-reduced-motion:reduce){
  .brand-shine{animation:none!important;display:none!important}
}
/* Reserve space for the fixed navigation so page content is never covered. */
body{
  padding-top:var(--site-header-height,64px);
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:991.98px){
  body.mobile-nav-open{
    overflow:hidden;
  }
}
/* Global hero grid alignment and slideshow controls consistency */
.about-hero-content > .hero-v2-layout{
  width:100%;
  margin:0;
}
.about-hero-content > .hero-v2-layout > div{
  width:100%;
  max-width:850px;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:991.98px){
  .about-hero-content > .hero-v2-layout > div{
    max-width:100%;
  }
}
/* CTA button alignment safeguard */
.final-cta-section .final-cta-actions,
.final-cta-section .cta-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.final-cta-section .final-cta-actions > a,
.final-cta-section .cta-actions > a{
  min-width:190px;
  justify-content:center;
  text-align:center;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:575.98px){
  .final-cta-section .final-cta-actions,
  .final-cta-section .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }
.final-cta-section .final-cta-actions > a,
.final-cta-section .cta-actions > a{
  width:100%;
  min-width:0;
}
}
/* Exact shared campus selector component — based on the approved About design */
.trilogix-campus-selector{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:5px !important;
  margin:0 !important;
  border:1px solid #cbdcf4 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 10px 24px rgba(33,87,156,.12) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
}
.trilogix-campus-selector > a,
.trilogix-campus-selector > button{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:42px !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px 17px !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#103a6d !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.01em;
  white-space:nowrap !important;
  text-decoration:none !important;
  cursor:pointer;
  transform:none !important;
  transition:
  color .22s ease,
  background-color .22s ease,
  box-shadow .22s ease,
  transform .22s ease !important;
}
.trilogix-campus-selector > a img,
.trilogix-campus-selector > button img{
  flex:0 0 auto;
  width:23px !important;
  height:15px !important;
  margin:0 !important;
  border-radius:1px !important;
  object-fit:cover !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.07);
}
.trilogix-campus-selector > a:hover,
.trilogix-campus-selector > button:hover{
  color:#0759d6 !important;
  background:#edf5ff !important;
  box-shadow:none !important;
  transform:none !important;
}
.trilogix-campus-selector > a.active,
.trilogix-campus-selector > button.active,
.trilogix-campus-selector > a[aria-selected="true"],
.trilogix-campus-selector > button[aria-selected="true"],
.trilogix-campus-selector > a[aria-current="page"]{
  color:#fff !important;
  background:linear-gradient(135deg,#0876f9 0%,#005bd7 100%) !important;
  box-shadow:0 8px 18px rgba(0,91,215,.23) !important;
  transform:none !important;
}
.trilogix-campus-selector > a.active:hover,
.trilogix-campus-selector > button.active:hover,
.trilogix-campus-selector > a[aria-selected="true"]:hover,
.trilogix-campus-selector > button[aria-selected="true"]:hover{
  color:#fff !important;
  background:linear-gradient(135deg,#0876f9 0%,#005bd7 100%) !important;
}
/* Courses includes an optional “All Programs” tab; keep the same component language. */
.course-campus-tabs.trilogix-campus-selector{
  flex-wrap:wrap !important;
}
/* Preserve the compact pill layout on tablets and phones. */

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:575.98px){
  .trilogix-campus-selector{
    display:flex !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    justify-content:flex-start !important;
    scrollbar-width:none;
  }
.trilogix-campus-selector::-webkit-scrollbar{
  display:none;
}
.trilogix-campus-selector > a,
.trilogix-campus-selector > button{
  flex:0 0 auto !important;
  min-height:40px !important;
  padding:9px 14px !important;
  font-size:13px !important;
}
}
/* FINAL campus selector refinement: rounded rectangle, not oval */
.trilogix-campus-selector{
  border-radius:16px !important;
  padding:5px !important;
  overflow:visible !important;
}
.trilogix-campus-selector > a,
.trilogix-campus-selector > button{
  border-radius:11px !important;
}
/* Exact hover state across every campus selector */
.trilogix-campus-selector > a:hover,
.trilogix-campus-selector > button:hover{
  color:#0759d6 !important;
  background:#edf5ff !important;
  box-shadow:inset 0 0 0 1px rgba(7,89,214,.10) !important;
}
/* Exact active state across every campus selector */
.trilogix-campus-selector > a.active,
.trilogix-campus-selector > button.active,
.trilogix-campus-selector > a[aria-selected="true"],
.trilogix-campus-selector > button[aria-selected="true"],
.trilogix-campus-selector > a[aria-current="page"]{
  color:#fff !important;
  background:linear-gradient(135deg,#0876f9 0%,#005bd7 100%) !important;
  box-shadow:0 7px 16px rgba(0,91,215,.24) !important;
}
/* Ensure text and icons inside active buttons also turn white */
.trilogix-campus-selector > a.active *,
.trilogix-campus-selector > button.active *,
.trilogix-campus-selector > a[aria-selected="true"] *,
.trilogix-campus-selector > button[aria-selected="true"] *{
  color:inherit !important;
}
/* Gallery and News had page-level rules overriding the shared states */
.gallery-campus-switch.trilogix-campus-selector > button:hover,
.news-campus-filter.trilogix-campus-selector > button:hover{
  color:#0759d6 !important;
  background:#edf5ff !important;
  border-color:transparent !important;
}
.gallery-campus-switch.trilogix-campus-selector > button.active,
.news-campus-filter.trilogix-campus-selector > button.active,
.gallery-campus-switch.trilogix-campus-selector > button[aria-selected="true"],
.news-campus-filter.trilogix-campus-selector > button[aria-selected="true"]{
  color:#fff !important;
  background:linear-gradient(135deg,#0876f9 0%,#005bd7 100%) !important;
  border-color:transparent !important;
  box-shadow:0 7px 16px rgba(0,91,215,.24) !important;
}
/* About CTA button layout correction */
.final-cta-section .cta-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.final-cta-section .cta-actions > a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:48px !important;
  min-width:185px !important;
  padding:12px 20px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:767.98px){
  .final-cta-section .cta-actions{
    justify-content:flex-start !important;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:575.98px){
  .trilogix-campus-selector{
    border-radius:14px !important;
  }
.trilogix-campus-selector > a,
.trilogix-campus-selector > button{
  border-radius:9px !important;
}
.final-cta-section .cta-actions{
  width:100% !important;
  flex-direction:column !important;
  align-items:stretch !important;
}
.final-cta-section .cta-actions > a{
  width:100% !important;
  min-width:0 !important;
}
}
/* Uniform Trilogix Institute branding */
.brand-name{
  white-space:nowrap;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width: 420px){
  .site-header .brand-name{
    font-size:.9rem;
  }
.site-header .brand-sub{
  font-size:8px;
  letter-spacing:.12em;
}
}