section.relative.h-screen {
    margin-top: -60px !important; 
    height: calc(100vh - 100px);  /* 100px = sticky header height */
    padding-top: 0;  /* optional if using height calc */
}


/* Split hero left side */
.hero-left {
    color: #ffffff;
}

.hero-left h1,
.hero-left h2,
.hero-left p {
    color: inherit;
}

/* Right side images */
.hero-swiper img {
    object-position: center right; /* bias toward right if needed */
    object-fit: contain;
    transform: scale(1.05);
}

/* Pagination – bottom-left on the hero image */
.hero-swiper-desktop {
  position: relative; /* parent for absolute pagination */
  overflow: visible;  /* allow bullets to appear outside slides */
}



/* Scroll down indicator style */
.scroll-indicator span {
    font-weight: 700; /* bold */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6); /* dropdown-style shadow */
}



/* Enable smooth scrolling (optional but recommended) */
html {
  scroll-behavior: smooth;
}

/*Enable fade to look better on text transition */
#hero-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    font-weight: 600;
    transition: opacity 0.2s ease;
}

/* Offset scroll position so target starts BELOW the sticky header */
section[id],
div[id],
[id] {                     /* catches any element with id */
  scroll-margin-top: 130px; /* ← Adjust this value! */
}

/* Bright white changing subtitles – no darkening shadow */
/* Smaller, readable changing subtitle text */
.slide-subtitle {
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    line-height: 1.4;
    font-size: 1.125rem;          /* ~18px base – smaller & mobile-friendly */
}

.swiper-slide-active .slide-subtitle {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .slide-subtitle {
        font-size: 1.375rem;      /* ~22px on tablet/desktop */
        font-weight: 700;
    }
}

@media (min-width: 1024px) {
    .slide-subtitle {
        font-size: 1.5rem;        /* ~24px max on large screens */
    }
}


#favorites .favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.2rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

#favorites .favorites-grid a {
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease;
}

#favorites .favorites-grid a:hover {
  transform: scale(1.08);
}

#favorites .favorites-grid img {
  width: 100%;
  max-width: 90px;   /* 🔥 controls icon size */
  height: auto;
  margin: 0 auto;
}

#content .calculator-page {
  color: white;
}


/* Default: all text inside index-body is black */
#index-body {
  color: #1f2937;
}

/* Exclude the changing text (assuming it has class 'changing-text') */
#index-body .changing-text {
  color: #eeeeee !important; /* or whatever gray you want */
}

#index-body .main-name {
  color: #ffffff !important;  /* makes the main name white */
}


/* Keep university names red */
#index-body .text-[#CC0000] {
  color: #CC0000 !important;
}

/* Dates gray but readable */
#index-body .text-gray-500 {
  color: #666666 !important;
}

#index-body h2,
#index-body h3,
#index-body h4 {
  color: #000000;
}


/* Override gray-500 (Tailwind class) if needed */
#index-body .text-gray-500 {
  color: #666666; /* medium gray for dates, still visible on white */
}
/* Dark sections (calculator, favorites, past semesters) */
.calculator-page, .favorites-page, .past-semesters-page {
  color: #ffffff;  /* White text for dark backgrounds */
}


footer {
    color: #6b7280 !important;
}


/* ==================== STUDY ABROAD SECTION FIX ==================== */
#study-abroad,
#study-abroad * {
    color: #ffffff !important;
}

#study-abroad h2,
#study-abroad h3,
#study-abroad p {
    color: #ffffff;
}

/* Keep the program info box readable (white background + black text) */
#study-abroad .inline-flex {
    color: #000000 !important;
}

/* Optional: make links pop */
#study-abroad a {
    color: #60a5fa !important;
}


/* ==================== ABOUT SECTION FIX ==================== */
#about,
#about * {
    color: #2c2c2c !important;
}




/* ==================== EDUCATION SECTION FIX ==================== */
#education,
#education * {
    color: #2c2c2c !important;
}

#education h5 {
    color: #CC0000 !important;
}

/* ==================== AWARDS SECTION FIX ==================== */
#awards,
#awards * {
    color: #2c2c2c !important;
}

#awards h5 {
    color: #CC0000 !important;
}


/* ==================== COURSES SECTION FIX ==================== */
#teaching,
#teaching * {
    color: #2c2c2c !important;
}

#teaching h5 {
    color: #CC0000 !important;
}

/* ==================== CONTACT SECTION FIX ==================== */
#contact h6{
    color: #1f1f1f ;
}



/* Pagination – bottom left of image container */
.swiper-pagination {
  position: absolute !important;
  bottom: 30px;
  left: 30px;
  z-index: 50;
  display: flex !important;
  gap: 10px;
  justify-content: flex-start;
}

.swiper-pagination-bullet {
  width: 16px !important;
  height: 16px !important;
  background: #790b0b !important;
  opacity: 0.9 !important;
  margin: 0 8px !important;
  border-radius: 50%;
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  width: 20px !important;
  height: 20px !important;
  background: #ff0000 !important;
  box-shadow: 0 0 12px rgba(204, 0, 0, 0.8);
}


/* ==============================================
   Past Semesters / Class Pictures Page Styles
   ============================================== */

#past-semesters {
  background-color: #000000;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

#past-semesters h1 {
  text-align: center;
  color: #CC0000;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

#past-semesters h2 {
  text-align: center;
  color: #CC0000;
  font-style: italic;
  font-size: 1.25rem;
  margin-top: 0;
}

#past-semesters p {
  margin: 0 0 2rem;
}

#past-semesters img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#past-semesters .auto-style1,
#past-semesters .auto-style2 {
  display: block;
  text-align: center;
}

#past-semesters .auto-style2 {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ffffff;
}

#past-semesters .auto-style1 {
  font-size: 1rem;
  color: #cccccc;
  font-style: italic;
}

#past-semesters footer {
  text-align: center;
  font-size: 0.9rem;
  color: #ffffff;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #444;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  #past-semesters {
    padding: 16px;
  }

  #past-semesters h1 {
    font-size: 2rem;
  }

  #past-semesters h2 {
    font-size: 1.1rem;
  }

  #past-semesters .auto-style2 {
    font-size: 1.1rem;
  }

  #past-semesters .auto-style1 {
    font-size: 0.95rem;
  }
}

/* Enhanced focus indicators for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #CC0000;           /* TTU red */
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.3);
    transition: none;                     /* instant feedback */
}

/* Make sure hover states still work but don't replace focus */
.nav-link:hover {
    color: #CC0000;
}

/* Improve contrast on red text */
.ttu-red,
  a:hover,
  .nav-link:hover {
      color: #b30000;          /* Slightly darker red for better contrast */
      font-weight: 600;        /* Makes it "large" text in WCAG terms */
}

/* Better contrast for small text */
.text-xs, .text-sm {
    font-weight: 500;                     /* slightly bolder for readability */
}

/* Fix chevron rendering + ensure it never turns into envelope */
.fa-chevron-right {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Optional: Slightly larger and smoother arrow */
.nav-link i.fa-chevron-right {
    font-size: 0.75rem;
    margin-left: 4px;
}


/* ============================ */
/* Hover, Active & Focus States */
/* ============================ */

/* Global focus - strong, visible, accessible */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #CC0000;
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.25);
}

/* Navigation links */
.nav-link {
    transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
    color: #CC0000;
    background-color: rgba(204, 0, 0, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
}

/* Dropdown buttons (the ones with chevrons) */
button[aria-haspopup="true"] {
    transition: all 0.2s ease;
}
button[aria-haspopup="true"]:hover,
button[aria-haspopup="true"]:focus-visible {
    color: #CC0000;
    background-color: rgba(204, 0, 0, 0.08);
    border-radius: 4px;
}



/* Hero action buttons */
.hero-btn {
    color:#000000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-btn:hover,
.hero-btn:focus {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15);
    background-color: #f3f4f6;   /* Slightly darker white for white buttons */
    color: #1f2937;
}
.hero-btn:active,
.hero-btn:focus-visible {
    transform: scale(0.97);
    outline: 3px solid #CC0000;
    outline-offset: 4px;
}

/* Social logo links */
.social-link {
    transition: transform 0.25s ease;
}
.social-link:hover,
.social-link:focus-visible {
    transform: scale(1.25);
}

/* Favorites button */
.favorites-btn:hover,
.favorites-btn:focus-visible {
    background-color: #e5e7eb;
    color: #CC0000;
    transform: scale(1.08);
}


/* Safe global contrast improvements */
#about {
    color: #1f2937;
}

#about h1, #about h2, #about h3,
#about p, #about li {
    color: inherit;
}

.bg-black {
    color: #f1f5f9;
}

/* Ensure links are always visible */
main a:not(.btn):not(.email-btn) {
    color: #1e40af;
}

a:hover, a:focus {
    color: #b30000;
}

/* ============================================= */
/* FINAL HIGH-SPECIFICITY CONTRAST FIXES         */
/* Put this at the VERY BOTTOM of style.css      */
/* ============================================= */

/* Light background sections - FORCE dark text */
#about,
#education,
#awards,
#teaching,
#contact {
    background-color: #ffffff !important;
    color: #1f2937;
}

#about,
#education,
#awards,
#teaching,
#contact {
    background-color: #ffffff;
    color: #1f2937;
}

#about p,
#education p,
#awards li,
#teaching p,
#contact p {
    color: #374151;
}

/* Headings in light sections - extra dark */
#about h1, #about h2, #about h3,
#education h1, #education h2, #education h3,
#awards h1, #awards h2,
#teaching h1, #teaching h2,
#contact h2 {
    color: #111827 !important;
}

/* Degree titles and bold text in Education */
#education h5,
#education .font-semibold,
#education .text-2xl {
    color: #1f2937 !important;
}

/* Red accents - darker for better contrast */
.ttu-red,
#about .ttu-red,
#education .ttu-red,
#awards .ttu-red,
#teaching .ttu-red {
    color: #b30000 !important;
}

/* Paragraphs and lists */
#about p,
#education p,
#awards li,
#teaching p,
#contact p {
    color: #374151 !important;
}

/* Override any remaining dark-mode bleed */
.bg-black *,
.bg-black,
#study-abroad *,
#study-abroad {
    color: #f1f5f9 !important;
}

/* Make sure links in light sections are visible */
#about a,
#education a,
#awards a,
#teaching a,
#contact a {
    color: #1e40af !important;
}
#about a:hover,
#education a:hover,
#awards a:hover,
#teaching a:hover,
#contact a:hover {
    color: #b30000 !important;
}

/* Only dark sections get white text */
.bg-black {
    color: #f1f5f9;
}


/* =========================
   BUTTON SYSTEM (NO CONFLICT)
   ========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    font-weight: 600;
    font-size: 0.875rem;

    padding: 0.6rem 1.25rem;
    border-radius: 0.375rem;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.2s ease;
}

/* Prevent global link styles from interfering */
.btn,
.btn:visited,
.btn:hover,
.btn:focus {
    color: inherit;
    text-decoration: none;
}


.btn-primary {
    background-color: #CC0000;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #b30000;
    color: #ffffff;
}

.btn-primary:active {
    background-color: #990000;
}


.btn-light {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

.btn-light:hover {
    background-color: #f3f4f6;
}


/* ============================================= */
/* FINAL HIGH-SPECIFICITY CONTRAST FIX   */
/* ============================================= */

/* Light sections - FORCE dark text */
#about,
#education,
#awards,
#teaching,
#contact,
#about *,
#education *,
#awards *,
#teaching *,
#contact * {
    color: #1f2937 !important;
}

/* Headings in light sections */
#about h1, #about h2, #about h3,
#education h1, #education h2, #education h3,
#awards h1, #awards h2,
#teaching h1, #teaching h2,
#contact h2 {
    color: #111827 !important;
}

/* Degree titles and bold text */
#education h5,
#education .font-semibold,
#education .text-2xl {
    color: #1f2937 !important;
}

/* The problematic hero button */
.hero-btn,
.hero-btn * {
    color: #1f2937 !important;   /* dark black */
}

.hero-btn:hover,
.hero-btn:focus-visible {
    color: #1f2937 !important;
}

/* Make sure red accents stay red */
.ttu-red,
#about .ttu-red,
#education .ttu-red,
#awards .ttu-red,
#teaching .ttu-red {
    color: #b30000 !important;
}

/* Override any remaining dark-mode bleed */
.bg-black *,
.bg-black,
#study-abroad *,
#study-abroad {
    color: #f1f5f9 !important;
}


/* Fix hero buttons - ensure dark text in normal state */
.hero-btn,
.hero-btn * {
    color: #1f2937 !important;     /* dark black text */
    font-weight: 600;
}

.hero-btn:hover,
.hero-btn:focus-visible {
    color: #1f2937 !important;
    background-color: #f3f4f6 !important;
}



/* Final Hero Button Fix - Clean & Balanced */
.hero-btn {
    background-color: #ffffff !important;
    color: #1f2937 !important;           /* Dark text for good contrast */
    border: 2px solid #ffffff !important;
    font-weight: 600 !important;
}

.hero-btn:hover,
.hero-btn:focus-visible {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

/* Special handling for the bordered "Study Abroad" button */
.hero-btn.border-2 {
    border-color: #ffffff !important;
    color: #1f2937 !important;
}

.hero-btn.border-2:hover,
.hero-btn.border-2:focus-visible {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
}

/* ============================================= */
/* FINAL EMAIL BUTTON FIX - HIGHEST PRIORITY     */
/* MUST BE THE LAST RULE IN style.css            */
/* ============================================= */

a.email-btn,
.email-btn,
.email-btn:visited,
.email-btn:link,
.email-btn:hover,
.email-btn:focus,
.email-btn:active,
.email-btn * {
    color: #ffffff !important;
    text-decoration: none !important;
}

.email-btn:hover,
.email-btn:focus-visible {
    background-color: #b30000 !important;
    color: #ffffff !important;
}

.email-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}


#contact .email-btn,
#contact a.email-btn,
.email-btn,
.email-btn * {
    color: #ffffff !important;
}

#contact .email-btn:hover,
#contact a.email-btn:hover,
.email-btn:hover,
.email-btn:focus-visible {
    color: #ffffff !important;
    background-color: #b30000 !important;
}


/* Fix arrow inside email button */
.email-btn .fa-arrow-right,
.email-btn i.fa-arrow-right,
.email-btn i,
.email-btn [class*="fa-"] {
    color: #ffffff !important;
}

.email-btn:hover .fa-arrow-right,
.email-btn:focus .fa-arrow-right,
.email-btn:hover i,
.email-btn:focus i {
    color: #ffffff !important;
}


/* ============================================= */
/* FINAL ARROW FIX FOR EMAIL BUTTON              */
/* Must be the LAST rule in style.css            */
/* ============================================= */

.email-btn [class*="fa-arrow-right"] {
    color: #ffffff !important;
}

.email-btn:hover [class*="fa-arrow-right"] {
    color: #ffffff !important;
}


/* Skip to main content - Dark style with red border (same as your other calculators) */
.skip-link {
    position: absolute;
    top: -50px;
    left: 20px;
    background: #000000;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 3px solid #CC0000;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
    z-index: 9999;
}

.skip-link:focus {
    top: 10px;
    outline: 4px solid #ffffff;
    outline-offset: -2px;
}


/* ============================================= */
/* Accessibility Fixes - Focus & Selected States */
/* ============================================= */

/* Strong visible focus indicator for all interactive elements (helps WCAG 2.4.7 & 2.4.13) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #CC0000 !important;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Highlight dropdown button when it is open/selected */
button[aria-expanded="true"] {
    color: #CC0000;
    background-color: #f8f8f8;
    font-weight: 600;
}

/* Rotate and color the chevron when dropdown is open (makes "selected" state very clear) */
button[aria-expanded="true"] i.fa-chevron-right {
    transform: rotate(90deg);
    color: #CC0000;
}

/* Optional: Larger touch target for mobile menu button */
#mobile-menu-button {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
}


/* ============================================= */
/* Next Accessibility Fixes - Target Size + Contrast */
/* ============================================= */

/* Larger touch targets for better mobile usability (helps 2.5.5 / 2.5.8) */
#mobile-menu-button {
    min-width: 48px;
    min-height: 48px;
    padding: 14px;           /* Slightly bigger than before */
}

/* Make social icons in footer easier to tap */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
}

/* Improve footer contrast (helps AAA high-contrast text) */
footer {
    color: #d1d5db;          /* Light gray instead of gray-400 */
}

footer a {
    color: #d1d5db;
}

footer a:hover {
    color: #ffffff;
}