/* =========================
   Global / Base
   ========================= */
body {
  font-family: sans-serif;
  margin: 0;
  background-color: #f7f7f7;
}

/* Two-column auth layouts */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* =========================
   Forms (Register / Sign-in)
   ========================= */
.form-section {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.logo { text-align: left; margin-bottom: 20px; }
.logo img { width: 150px; height: auto; }

.register-header { margin-bottom: 30px; }
.register-header h2 { color: #777; font-size: 1.2em; margin-bottom: 5px; }
.register-header h1 { color: #333; font-size: 2em; margin: 0; }

.login-header { margin-bottom: 30px; }
.login-header h1 { color: #333; font-size: 2em; margin: 0 0 5px; }
.login-header p { color: #777; font-size: 1.2em; margin: 0; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; color: #555; font-weight: bold; }
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
  box-sizing: border-box;
  background-color: #fff;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 20px;
}

.form-group small { color: #777; display: block; margin-top: 5px; }

.terms-conditions { margin: 15px 0 25px; }
.terms-conditions a { color: #007bff; text-decoration: none; }

.signup-button,
.login-button {
  background-color: #e91e63;
  color: #fff;
  padding: 15px 20px;
  border: 0;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  width: 100%;
  transition: background-color .3s;
}
.signup-button:hover,
.login-button:hover { background-color: #c2185b; }

.login-link,
.forgot-password,
.register-link { text-align: center; margin-top: 20px; }
.login-link a,
.forgot-password a,
.register-link a { color: #007bff; text-decoration: none; font-weight: bold; }
.register-link p { color: #777; }

/* Inputs with icons */
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon i { position: absolute; left: 12px; color: #aaa; pointer-events: none; }
.input-with-icon input { padding-left: 40px; }
.input-with-icon .toggle-password { position: absolute; right: 12px; cursor: pointer; color: #777; }

/* Custom checkbox */
.checkbox-container { display:block; position:relative; padding-left:35px; margin-bottom:12px; cursor:pointer; font-size:16px; user-select:none; }
.checkbox-container input { position:absolute; opacity:0; cursor:pointer; height:0; width:0; }
.checkmark { position:absolute; top:0; left:0; height:25px; width:25px; background:#eee; border-radius:5px; }
.checkbox-container:hover input ~ .checkmark { background:#ccc; }
.checkbox-container input:checked ~ .checkmark { background:#2196F3; }
.checkmark:after { content:""; position:absolute; display:none; }
.checkbox-container input:checked ~ .checkmark:after { display:block; }
.checkbox-container .checkmark:after {
  left:9px; top:5px; width:5px; height:10px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg);
}

/* =========================
   Image section (auth pages)
   ========================= */
.image-section { background:#ccc; position:relative; overflow:hidden; }
.image-section img { width:100%; height:100%; object-fit:cover; display:block; }
.overlay-text { position:absolute; bottom:20px; left:20px; color:#fff; padding:20px; }
.overlay-text h1 { font-size:2.5em; margin-bottom:10px; }
.overlay-text p { font-size:1.2em; font-style:italic; }

/* Responsive for auth */
@media (max-width:768px){
  .container { grid-template-columns: 1fr; }
  .form-section { padding:20px; }
  .image-section { display:none; }
}

/* =========================
   Research Page
   ========================= */
.hero-section {
  background-image: url('../images/research_hero.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 150px 0;
  text-align: center;
  position: relative;
}
.hero-section::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.4);
}
.hero-content{
  position:relative; z-index:1; max-width:800px; margin:0 auto; padding:0 20px;
}
.hero-content h1{ font-size:3em; margin-bottom:20px; }
.hero-content p{ font-size:1.2em; }

.main-content{ max-width:1200px; margin:0 auto; padding:40px 20px; }
.text-section p{ font-size:1.1em; line-height:1.6; margin-bottom:20px; }
.text-section ul{ list-style:disc; padding-left:30px; margin-bottom:20px; }
.text-section li{ font-size:1.1em; line-height:1.6; }

/* Pill buttons block */
.button-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button-link{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 220px; max-width:250px; height:56px; padding:0 16px; border-radius:25px;
  text-decoration:none; background:#A6013B; color:#fff; transition:background-color .3s;
}
.button-link:hover{ background:#82012F; }

/* =========================
   Footer
   ========================= */
footer{ background:#f0f0f0; padding:40px 0; text-align:center; }
.footer-content{ max-width:1200px; margin:0 auto; padding:0 20px; }
.footer-logos{ display:flex; justify-content:center; margin-bottom:20px; }
.footer-logos img{ width:300px; height:auto; margin:0 10px; }
.footer-links{ display:flex; justify-content:space-around; flex-wrap:wrap; margin-bottom:30px; }
.quick-links,.contact-us{ text-align:left; margin:10px; }
.quick-links h3,.contact-us h3{ font-size:1.3em; margin-bottom:10px; color:#333; }
.quick-links ul{ list-style:none; padding:0; margin:0; }
.quick-links li{ margin-bottom:8px; }
.quick-links a{ color:#555; text-decoration:none; }
.quick-links a:hover{ text-decoration:underline; }
.contact-us p{ color:#555; line-height:1.5; margin-bottom:8px; }
.contact-us a{ color:#007bff; text-decoration:none; }
.contact-us a:hover{ text-decoration:underline; }
.footer-social{ display:flex; justify-content:center; margin-bottom:20px; }
.footer-social a{ color:#007bff; font-size:1.5em; margin:0 10px; }
.copyright{ font-size:.9em; color:#777; }

/* Footer / layout responsive */
@media (max-width:768px){
  .main-content,.footer-content{ padding:0 10px; }
  .button-links{ justify-content:center; }
  .footer-links{ flex-direction:column; align-items:center; }
}

/* =========================
   Books (listing) + shared
   ========================= */
.blue-text{ color:#007bff; }

/* Books Hero */
.books-hero-section{
  background-image:url('../images/books_hero.png');
  background-size:cover; background-position:center; color:#fff;
  padding:120px 0; text-align:left; position:relative; margin-bottom:40px;
}
.books-hero-section::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.books-hero-section .hero-content{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 20px; }
.books-hero-section h1{ font-size:3.5em; margin-bottom:10px; font-weight:bold; }
.books-hero-section p{ font-size:1.3em; }

/* Categories + grid */
.book-category{ max-width:1200px; margin:0 auto 40px; padding:0 20px; }
.category-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.category-header h2{ font-size:2em; color:#333; }
.see-all-link{ color:#007bff; text-decoration:none; font-size:1.1em; }
.category-description{ color:#777; font-size:1.1em; margin-bottom:20px; }
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:20px; }
.book-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.book-cover{ width:100%; height:auto; border-radius:8px; margin-bottom:10px; }
.book-rating{ color:#f0ad4e; font-size:1em; margin-bottom:10px; }
.rating-star{ margin-right:5px; }
.download-link{
  background:#e91e63; color:#fff; padding:8px 16px; border-radius:20px; text-decoration:none; transition:.3s; font-size:.9em;
}
.download-link:hover{ background:#c2185b; }

/* Books responsive */
@media (max-width:768px){
  .book-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .books-hero-section{ padding:80px 0; text-align:center; }
  .books-hero-section h1{ font-size:2.5em; }
  .books-hero-section p{ font-size:1em; }
  .category-header{ flex-direction:column; align-items:flex-start; }
  .category-header h2{ margin-bottom:5px; }
}

/* =========================
   My Account
   ========================= */
.my-account-section{ max-width:1200px; margin:0 auto 30px; padding:20px; }
.my-account-section h2{ font-size:2em; margin-bottom:20px; color:#333; }
.account-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; }
.account-form .form-group{ margin-bottom:15px; }

/* =========================
   Legislation
   ========================= */
.legislation-hero-section{
  background-image:url('../images/legislation_hero.png');
  background-size:cover; background-position:center; color:#fff;
  padding:120px 0; text-align:left; position:relative; margin-bottom:30px;
}
.legislation-hero-section::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); }
.legislation-hero-section .hero-content{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 20px; }
.legislation-hero-section h1{ font-size:3.5em; font-weight:bold; margin-bottom:15px; }
.legislation-hero-section p{ font-size:1.3em; }

.legislation-sections{ max-width:1200px; margin:0 auto; padding:0 20px; }
.accordion{ margin-bottom:15px; border:1px solid #ddd; border-radius:5px; overflow:hidden; }
.accordion-button{
  background:#f7f7f7; color:#333; cursor:pointer; padding:18px; width:100%; text-align:left; border:0; outline:0; transition:.4s;
  font-size:1.2em; display:flex; justify-content:space-between; align-items:center;
}
.accordion-button i{ margin-left:10px; }
.accordion-button.active{ background:#ddd; }
.accordion-content{ padding:0 18px; background:#fff; max-height:0; overflow:hidden; transition:max-height .3s ease-out; }

/* =========================
   Index (Home)
   ========================= */
.home-hero-section{
  position:relative; color:#fff; text-align:left; padding:100px 0; min-height:450px;
  display:flex; align-items:center; background:#333;
}
.home-hero-section::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(0,0,0,.8), rgba(0,0,0,.2)), url('../images/Hero_index.png');
  background-size:cover; background-position:center;
}
.home-hero-section .hero-content{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 20px; }
.home-hero-section h1{ font-size:4em; font-weight:300; margin-bottom:30px; line-height:1.2; }
.home-hero-section h1 strong{ font-weight:700; color:#00aaff; }
.home-hero-section .signup-button{
  display:inline-block; padding:15px 15px; font-size:1.5em; background:#e91e63; color:#fff; border-radius:1px; text-decoration:none; transition:.3s;
}
.home-hero-section .signup-button:hover{ background:#c2185b; }

/* Stats band */
.stats-section{
  display:flex; justify-content:space-around; align-items:center;
  background:#1a1a1a; color:#fff; padding:30px 20px;
}
.stats-section .statistic{ text-align:center; }
.stats-section .statistic h2{ font-size:2.5em; margin:0 0 5px; }
.stats-section .statistic p{ font-size:1.1em; color:#ccc; margin:0; }

/* Optional legacy home header button */
.home-login-button a{
  color:#fff; text-decoration:none; background:#e91e63; padding:10px 20px; border-radius:5px; transition:.3s;
}
.home-login-button a:hover{ background:#c2185b; }

/* Next read / slider */
.next-read-section{ max-width:1200px; margin:40px auto; padding:40px 20px; display:flex; align-items:center; gap:40px; }
.next-read-content{ flex:1; text-align:left; }
.next-read-content h2{ font-size:2.5em; margin-bottom:20px; color:#333; }
.next-read-content p{ font-size:1.1em; line-height:1.6; color:#555; margin-bottom:20px; }
.explore-button{ display:inline-block; padding:12px 25px; font-size:1.1em; width:auto; }

.slider-wrapper{ flex:1; position:relative; display:flex; align-items:center; }
.book-slider{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:10px; }
.book-slider::-webkit-scrollbar{ display:none; }
.book-slider{ -ms-overflow-style:none; scrollbar-width:none; }
.book-slider .slide{ flex:0 0 200px; height:300px; margin-right:15px; border-radius:8px; scroll-snap-align:start; overflow:hidden; background:#eee; }
.book-slider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:#fff; border:1px solid #ddd; border-radius:50%;
  width:40px; height:40px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.slide-arrow:hover{ background:#f7f7f7; }
#prev-slide{ left:-20px; } #next-slide{ right:-20px; }

.trending-books-section{ max-width:1200px; margin:40px auto; padding:40px 20px; text-align:center; }
.trending-books-header h2{ font-size:2.5em; color:#333; margin-bottom:10px; }
.trending-books-header .category-description{ font-size:1.1em; color:#555; margin-bottom:30px; }
.trending-books-section .book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:25px; }
.trending-books-section .book-item{
  background:#fff; border-radius:8px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .2s; display:flex; flex-direction:column;
}
.trending-books-section .book-item:hover{ transform:translateY(-5px); }
.trending-books-section .book-cover{ width:100%; height:auto; border-radius:5px; margin-bottom:15px; }
.trending-books-section .book-rating{ font-size:.9em; color:#555; margin-bottom:15px; }
.trending-books-section .rating-star{ color:#f0ad4e; }
.download-button{
  background:#ffeeef; color:#e91e63; padding:10px 16px; border-radius:20px; border:0; cursor:pointer; font-weight:bold; font-size:.9em; transition:.3s; margin-top:auto;
}
.download-button:hover{ background:#fdd8db; }

/* Home responsive tweaks */
@media (max-width:992px){
  .next-read-section{ flex-direction:column; text-align:center; }
  .next-read-content{ text-align:center; }
  .slider-wrapper{ width:100%; }
  #prev-slide{ left:5px; } #next-slide{ right:5px; }
}
@media (max-width:768px){
  .home-hero-section{ padding:80px 20px; text-align:center; }
  .home-hero-section::before{
    background-image: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../images/Hero_index.png');
  }
  .home-hero-section h1{ font-size:2.8em; }
  .stats-section{ flex-direction:column; }
  .stats-section .statistic{ margin-bottom:20px; }
  .stats-section .statistic:last-child{ margin-bottom:0; }
}

/* =========================
   Compendiums
   ========================= */
.compendiums-hero-section{
  background-image:url('../images/compendiums_hero.png');
  background-size:cover; background-position:center; color:#fff;
  padding:120px 0; text-align:left; position:relative; margin-bottom:30px;
}
.compendiums-hero-section::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); }
.compendiums-hero-section .hero-content{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 20px; }
.compendiums-hero-section h1{ font-size:3.5em; font-weight:bold; margin-bottom:15px; }
.compendiums-hero-section p{ font-size:1.3em; }

.compendium-list{ max-width:1200px; margin:0 auto; padding:0 20px; }
.compendium-list ul{ list-style:none; padding:0; margin:0; }
.compendium-list li{
  display:flex; justify-content:space-between; align-items:center; font-size:1.2em; line-height:1.6; border-bottom:1px solid #ddd; padding:15px 0;
}
.compendium-list li:last-child{ border-bottom:0; }

.download-pdf{
  background:#e91e63; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none; transition:.3s; font-size:.9em;
}
.download-pdf:hover{ background:#c2185b; }

/* Clickable sub-list */
.compendium-sublist{ display:none; list-style:none; padding-left:30px; width:100%; }
.compendium-sublist.show{ display:block; }
.parent-title-clickable{
  display:flex; justify-content:space-between; align-items:center; width:100%; cursor:pointer; text-decoration:none; color:inherit; padding:15px 0;
}
.compendium-parent{ padding:0; }
.compendium-parent .parent-title{ font-weight:bold; }
.dropdown-icon{ transition:transform .3s; margin-right:20px; }
.compendium-parent.active .dropdown-icon{ transform:rotate(180deg); }
.compendium-sublist li{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid #eee; }

.compendium-heading{ max-width:1200px; margin:30px auto 20px; padding:0 20px; text-align:center; }
.compendium-heading h1{ font-size:2.5em; font-weight:bold; color:#333; margin-bottom:10px; }
.compendium-heading p{ font-size:1.2em; color:#555; }

/* =========================
   Book Details
   ========================= */
.book-details-section{ max-width:1200px; margin:0 auto; padding:20px; }
.book-details-container{ display:flex; padding:20px 0; }
.book-image{ width:250px; margin-right:30px; }
.book-image img{ width:100%; height:auto; border-radius:8px; }
.book-info h2{ font-size:2em; font-weight:bold; margin-bottom:10px; color:#333; }
.book-info .book-author{ font-size:1.1em; color:#555; margin-bottom:15px; }
.book-info .book-rating{ color:#f0ad4e; font-size:1em; margin-bottom:20px; }
.book-info .book-rating span{ margin-left:5px; }
.book-info .download-pdf{ display:inline-block; padding:12px 25px; background:#e91e63; color:#fff; border-radius:25px; text-decoration:none; transition:.3s; font-size:1.1em; margin-right:10px; }
.book-info .download-pdf:hover{ background:#c2185b; }
.read-book-button{ color:#007bff; border:1px solid #007bff; padding:12px 25px; border-radius:25px; text-decoration:none; transition:.3s; font-size:1.1em; }
.read-book-button:hover{ background:rgba(0,123,255,.1); }
.book-info .share-book{ margin-top:20px; }

/* Share dropdown */
.share-dropdown-container{ position:relative; display:inline-block; }
#share-btn{ text-decoration:none; color:#007bff; cursor:pointer; }
#share-btn i{ margin-right:5px; }
.share-options{
  display:none; position:absolute; background:#f9f9f9; min-width:160px; box-shadow:0 8px 16px rgba(0,0,0,.2); border-radius:5px; z-index:1;
  bottom:125%; left:50%; transform:translateX(-50%);
}
.share-options.show{ display:block; }
.share-options a,.share-options button{
  color:#000; padding:12px 16px; text-decoration:none; display:flex; align-items:center; width:100%; border:0; background:none; text-align:left; cursor:pointer; font-size:14px; font-family:inherit;
}
.share-options i{ margin-right:10px; width:20px; text-align:center; color:#555; }
.share-options a:hover,.share-options button:hover{ background:#f1f1f1; }
.share-options .fa-facebook{ color:#1877F2; }
.share-options .fa-twitter{ color:#1DA1F2; }
.share-options .fa-envelope{ color:#7d7d7d; }
.share-options .fa-copy{ color:#333; }

.book-description{ border-top:1px solid #ddd; padding-top:20px; margin-top:20px; }
.book-description h3{ font-size:1.5em; margin-bottom:10px; color:#333; }
.book-description p{ font-size:1.1em; line-height:1.6; color:#555; margin-bottom:10px; }
.labels,.information{ display:flex; justify-content:space-between; max-width:500px; }
.book-details{ margin-top:20px; border-top:1px solid #ddd; padding-top:20px; }
.book-details h3{ font-size:1.5em; margin-bottom:10px; color:#333; }
.book-details p{ font-size:1.1em; line-height:1.6; color:#555; margin-bottom:10px; }
.reader-reviews{ margin-top:20px; border-top:1px solid #ddd; padding-top:20px; }
.reader-reviews h3{ font-size:1.5em; margin-bottom:10px; color:#333; }
.review-item{ margin-bottom:20px; padding:15px; border:1px solid #eee; border-radius:8px; }
.reviewer-info{ display:flex; align-items:center; margin-bottom:10px; justify-content:space-between; }
.reviewer-avatar{ width:40px; height:40px; border-radius:50%; background:#ccc; color:#fff; text-align:center; line-height:40px; font-size:1.2em; margin-right:10px; }
.reviewer-details{ flex:1; }
.reviewer-name{ font-weight:bold; display:block; }
.reviewer-rating{ color:#f0ad4e; font-size:.9em; }
.review-text{ font-size:1.1em; line-height:1.4; color:#555; margin-bottom:10px; }
.review-tools a{ color:#007bff; text-decoration:none; font-size:.9em; margin-right:10px; }
.review-actions{ color:#aaa; cursor:pointer; font-size:.9em; }

/* =========================
   UNIFIED STICKY HEADER
   (Fixed to prevent auth button overflow)
   ========================= */
:root { --mhsc-blue:#004785; --header-h:64px; }

.site-header{
  position: sticky; top: 0; z-index: 999;
  background: var(--mhsc-blue);
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.site-header__inner{
  max-width: 1200px;
  height: var(--header-h);
  margin: 0 auto; padding: 0 20px;
  display: grid; gap: 14px;
  /* More flexible columns so the auth button never gets pushed off */
  grid-template-columns: auto 1fr auto; /* brand | nav | auth */
  align-items: center;
}

/* Brand / Home */
.site-header__brand{ display:inline-flex; align-items:center; text-decoration:none; }
.site-header__logo{ height:48px; width:auto; max-width:100%; display:block; } /* Use images/logo-index.png on index.php */
.site-header__home{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; color:#fff; border:2px solid #fff;
}
.site-header__home:hover{ background:rgba(255,255,255,.12); }

/* Nav */
.site-nav{ justify-self:center; min-width: 0; } /* allow nav area to shrink */
.site-nav__list{
  display:flex; align-items:center; gap:22px;  /* slightly reduced gap for better fit */
  margin:0; padding:0; list-style:none;
  /* base: no wrap; we’ll enable wrapping at 1200px for narrow viewports */
}
.site-nav__link{
  color:#fff; text-decoration:none; font:600 15px 'Segoe UI', sans-serif;
  padding:6px 10px; border-radius:6px; line-height:1; transition: background .2s;
  white-space: normal;  /* allow wrapping when the list wraps */
}
.site-nav__link:hover{ background:rgba(255,255,255,.12); }
/* supports either .is-active or your older .active-link */
.site-nav__link.is-active,
.site-nav__link.active-link{
  outline:2px solid #fff; border-radius:8px; background:rgba(255,255,255,.2);
}

/* Auth */
.site-header__auth{ justify-self:end; }
.btn-login{
  display:inline-block; background:#e91e63; color:#fff;
  padding:10px 18px; border-radius:8px; font-weight:700; text-decoration:none;
  white-space: nowrap; /* keep button on a single line */
}
.btn-login:hover{ background:#c2185b; }

/* Header responsive */
/* Allow nav to wrap earlier (prevents overflow that used to push Login off) */
@media (max-width:1200px){
  .site-nav__list{ flex-wrap: wrap; justify-content: center; }
}

@media (max-width:980px){
  .site-header__inner{
    height:auto; row-gap:10px; padding:10px 16px;
    grid-template-columns:140px 1fr;
    grid-template-areas:
      "brand auth"
      "nav   nav";
  }
  .site-header__brand{ grid-area:brand; }
  .site-nav{ grid-area:nav; }
  .site-header__auth{ grid-area:auth; justify-self:end; }
  .site-nav__list{ flex-wrap:wrap; gap:14px; justify-content:center; }
}


/* =========================
   Home (index.php) — Bigger Header + Logo Only Here
   ========================= */

/* Make the header bar taller on the home page only */
.home-page {
  /* increase the header height used by .site-header__inner */
  --header-h: 96px;
}

/* Enlarge the logo on the home page only */
.home-page .site-header__logo {
  height: 72px;   /* was 48px */
  width: auto;
}

/* Nudge the search overlay down a bit so it clears the taller header */
.home-page .search-hero {
  top: 140px !important;  /* was 100px inline; ensure it sits below the bigger header */
}

/* Responsive: still bigger than other pages, but a bit smaller on narrow screens */
@media (max-width: 980px) {
  .home-page {
    --header-h: 84px;
  }
  .home-page .site-header__logo {
    height: 60px;
  }
  .home-page .search-hero {
    top: 120px !important;
  }
}

/* ============================================
   HOTFIX: Support legacy header markup on pages
   that don't use .site-header (Header.txt, etc.)
   Also enlarge header ONLY on the home page.
   ============================================ */

/* Re-use the same variables */
:root { --mhsc-blue:#004785; --header-h:64px; }

/* Legacy header container */
header:not(.site-header) {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: var(--mhsc-blue);
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}

/* Center and cap width like the new header */
header:not(.site-header) .header-content {
  max-width: 1200px;
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}

/* Logo size for legacy pages */
header:not(.site-header) .logo img {
  height: 40px;          /* matches visual weight of new header */
  width: auto;
  display: block;
}

/* Legacy nav list (remove bullets, align horizontally, spacing) */
header:not(.site-header) nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;     /* prevent random wrapping */
}

header:not(.site-header) nav a {
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1;
  font: 600 15px 'Segoe UI', sans-serif;
  display: inline-block;
  transition: background .2s ease;
}

header:not(.site-header) nav a:hover { background: rgba(255,255,255,.12); }

/* Active state (support both class names you’ve used) */
header:not(.site-header) nav a.active-link,
header:not(.site-header) nav a.is-active {
  outline: 2px solid #fff;
  background: rgba(255,255,255,.20);
  border-radius: 8px;
}

/* Legacy Login button */
header:not(.site-header) .login-button a,
header:not(.site-header) .btn-login {
  background: #e91e63;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
header:not(.site-header) .login-button a:hover,
header:not(.site-header) .btn-login:hover { background: #c2185b; }

/* Allow gentle wrap on narrower viewports to avoid overflow */
@media (max-width: 1200px) {
  header:not(.site-header) .header-content { height: auto; padding-top: 10px; padding-bottom: 10px; }
  header:not(.site-header) nav ul { flex-wrap: wrap; justify-content: center; gap: 14px; }
}

/* ============================================
   Make the HOME (index.php) header bigger ONLY
   ============================================ */

/* Index/home page already has <body class="home-page"> */
.home-page .site-header__inner { height: 92px; }
.home-page .site-header__logo  { height: 68px; }   /* bigger logo on home */
.home-page .site-nav__link     { font-size: 16px; }

/* If any non-index page still uses the legacy header, keep its size,
   but enlarge ONLY on the home page as requested: */
.home-page header:not(.site-header) .header-content { height: 92px; }
.home-page header:not(.site-header) .logo img       { height: 68px; }

/* Ensure both header types always center content the same way */
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }


/* ──────────────────────────────────────────────
   HOME (index.php) – keep long nav items single-line
   and tighten spacing so nothing wraps.
   ────────────────────────────────────────────── */
@media (min-width: 981px) {
  /* Slightly tighter spacing so long labels fit */
  .home-page .site-nav__list { gap: 18px; }

  /* Keep labels on one line; trim horizontal padding a touch */
  .home-page .site-nav__link {
    white-space: nowrap;        /* prevents "Annual Reports", "Research Compendiums", "Research Projects" from breaking */
    padding: 6px 8px;           /* was 6px 10px */
    font-size: 15px;            /* was 16px on home; this 1px tweak helps fit without looking smaller */
  }
}


/* ===== Final unified header override (scoped) ===== */
:root{ --mhsc-blue:#004785; --header-h:64px; }

.site-header{
  position:sticky; top:0; z-index:999; width:100%;
  background:var(--mhsc-blue);
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}

.site-header__inner{
  max-width:1200px; height:var(--header-h);
  margin:0 auto; padding:0 20px;
  display:grid; gap:16px;
  grid-template-columns:160px 1fr auto; /* brand | nav | auth */
  align-items:center;
}

/* Brand: logo on home, home icon elsewhere */
.site-header__brand{display:inline-flex; align-items:center; text-decoration:none}
.site-header__logo{height:48px; width:auto; display:block}
.site-header__home{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:#fff; border:2px solid #fff; border-radius:8px;
}
.site-header__home:hover{ background:rgba(255,255,255,.12); }

/* Nav */
.site-nav{ justify-self:center }
.site-nav__list{
  display:flex; align-items:center; gap:26px;
  margin:0; padding:0; list-style:none; white-space:nowrap;
}
.site-nav__link{
  color:#fff; text-decoration:none; font:600 15px 'Segoe UI',sans-serif;
  padding:6px 10px; border-radius:6px; line-height:1; transition:background .2s ease;
}
.site-nav__link:hover{ background:rgba(255,255,255,.12); }

/* highlight current page: works with your existing .active-link class */
.site-nav__link.active-link{
  border:2px solid #fff; background:rgba(255,255,255,.20); border-radius:6px; font-weight:700;
}

/* Auth (Login/Logout) — ensure it stays on the blue bar */
.site-header__auth{ justify-self:end }
.btn-login{
  display:inline-block; background:#e91e63; color:#fff;
  padding:10px 18px; border-radius:8px; font-weight:700; text-decoration:none;
}
.btn-login:hover{ background:#c2185b }

/* Responsive */
@media (max-width:980px){
  .site-header__inner{
    height:auto; row-gap:10px; padding:10px 16px;
    grid-template-columns:140px 1fr;
    grid-template-areas:
      "brand auth"
      "nav   nav";
  }
  .site-header__brand{ grid-area:brand }
  .site-nav{ grid-area:nav }
  .site-header__auth{ grid-area:auth; justify-self:end }
  .site-nav__list{ flex-wrap:wrap; gap:14px; justify-content:center }
}

/* === FINAL header fixes (append at the very bottom of style.css) === */

/* 1) Home icon should NOT look "active" */
.site-header__home{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:#fff;
  border:0;               /* remove the white border that made it look active */
  border-radius:8px;
  background:transparent;
}
.site-header__home:hover{ background:rgba(255,255,255,.12); }

/* 2) Keep nav on ONE line, tighten gaps so it fits */
.site-nav__list{
  flex-wrap:nowrap !important;   /* stop the second row */
  gap:20px;                      /* slightly tighter spacing */
  white-space:nowrap;
  min-width:0;                   /* allow flexbox to shrink correctly */
}
.site-nav__link{
  padding:6px 9px;               /* tiny trim helps fit */
  font-weight:600;
}

/* Optional gentle scale-down when viewport is narrow but still desktop */
@media (max-width: 1180px){
  .site-nav__list{ gap:16px; }
  .site-nav__link{ font-size:14px; padding:6px 8px; }
}

/* 3) Ensure the right-side auth button stays inside the blue bar and aligned */
.site-header__inner{
  max-width:1200px;
  height:64px;
  margin:0 auto; padding:0 20px;
  display:grid; gap:16px;
  grid-template-columns:160px 1fr auto;  /* brand | nav | auth */
  align-items:center;
}
.site-header__auth{ justify-self:end; }
.btn-login{
  display:inline-block; background:#e91e63; color:#fff;
  padding:10px 18px; border-radius:8px; font-weight:700; text-decoration:none;
}
.btn-login:hover{ background:#c2185b; }

/* Mobile stacking stays as-is */
@media (max-width:980px){
  .site-header__inner{
    height:auto; row-gap:10px; padding:10px 16px;
    grid-template-columns:140px 1fr;
    grid-template-areas:
      "brand auth"
      "nav   nav";
  }
  .site-header__brand{ grid-area:brand }
  .site-nav{ grid-area:nav }
  .site-header__auth{ grid-area:auth; justify-self:end }
  .site-nav__list{ flex-wrap:wrap !important; gap:14px; justify-content:center }
}

/* Current page highlight (keeps using your .active-link class) */
.site-nav__link.active-link{
  border:2px solid #fff;
  background:rgba(255,255,255,.20);
  border-radius:6px;
  font-weight:700;
}

/* ===== Fix: keep header nav labels on ONE line on desktop (all pages) ===== */

/* Desktop+ : prevent per-link wrapping and keep the list on one line */
@media (min-width: 981px) {
  .site-nav__list { flex-wrap: nowrap; }          /* new header */
  .site-nav__link { white-space: nowrap; }        /* prevent "Annual Reports" etc. from breaking */

  /* legacy header (pages that don't use .site-header) */
  header:not(.site-header) nav ul { flex-wrap: nowrap; }
  header:not(.site-header) nav a  { white-space: nowrap; }
}

/* Mobile/tablet: allow gentle wrapping again so nothing overflows */
@media (max-width: 980px) {
  .site-nav__list { flex-wrap: wrap; justify-content: center; }
  .site-nav__link { white-space: normal; }
}