/* Reduce top bar height */
.t4-topbar {
  background-color: #1a1a1a !important;
  color: #fff !important;
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  position: sticky;
  top: 0;
  z-index: 6;
  
}


/* =============================================
     RESPONSIVE TOPBAR (MOBILE & TABLET FIXES)
     ============================================= */
  
  /* Tablet adjustments */
  @media (max-width: 1024px) {
    .topbar {
      padding: 0 12px;
    }
    .topbar-link, .login-btn {
      padding: 6px 10px;
      font-size: 12px;
    }
    .btn-apply {
      padding: 6px 14px;
      font-size: 12px;
    }
  }

  /* Ultimate Mobile Optimization */
 /* =============================================
     ULTIMATE MOBILE TOPBAR SCROLL FIX (<= 768px)
     ============================================= */
  @media (max-width: 768px) {
    
    /* 1. Override Joomla's default container padding specifically for the topbar */
    #t4-topbar .container, 
    #t4-topbar .container-fluid,
    .topbar {
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100vw !important;
      overflow: hidden !important; 
    }
    
    /* Hide the left tagline on mobile */
    .topbar > :not(.topbar__right) {
      display: none !important;
    }

    /* 2. Force items into a single row and enable horizontal scrolling */
    .topbar__right {
      display: flex !important;
      flex-wrap: nowrap !important; /* CRITICAL: Stops wrapping/squishing */
      overflow-x: auto !important;  /* CRITICAL: Enables swipe scrolling */
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; 
      width: 100vw !important;
      padding: 0 10px !important; /* Adds safe space on the left edge */
      gap: 5px !important; 
      align-items: center;
      justify-content: flex-start;
    }
    
    /* Hide the ugly scrollbar */
    .topbar__right::-webkit-scrollbar {
      display: none;
    }

    /* 3. Stop buttons from shrinking and scale down font size */
    .topbar-link, 
    .login-btn, 
    .btn-apply,
    .topbar-divider {
      flex-shrink: 0 !important; /* CRITICAL: Preserves button shapes */
      white-space: nowrap !important;
    }

    .topbar-link, .login-btn {
      font-size: 11px !important;
      padding: 6px 8px !important;
    }

    .btn-apply {
      font-size: 11px !important;
      padding: 6px 12px !important;
      margin-left: 4px !important;
      margin-right: 15px !important; /* Gives breathing room at the end of the scroll */
    }

    /* 4. Pop the login menu out over the screen */
    .login-menu {
      position: fixed !important;
      top: 44px !important;
      left: 10px !important;
      right: 10px !important;
      width: calc(100vw - 20px) !important;
    }
    
    .login-menu__inner {
      box-shadow: 0 15px 40px rgba(0,0,0,0.4);
      border: 1px solid #eaeaea;
    }
  }

  /*-----------------------------------------------------------------------------------*/

.t4-header {
    z-index: 5 !important;
}

/* ========================================================================
   EXTREME SQUEEZE FOR MEDIUM SCREENS (992px - 1150px)
   Prevents menu from dropping down below the logo
   ======================================================================== */
@media (min-width: 992px) and (max-width: 1150px) {
  
  /* 1. Stretch the header container to the absolute edges of the screen */
  .t4-header .container {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 2. Aggressively shrink menu padding, font size, and letter spacing */
  .t4-header .navbar-nav .nav-link,
  .t4-header .t4-megamenu .nav-item .nav-link {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important; 
    letter-spacing: -0.2px !important;
  }

  /* 3. Shrink the logo a bit more to make room for the links */
  .t4-header .navbar-brand img {
    max-width: 140px !important;
    height: auto !important;
  }
  
  /* 4. Force the navbar to stay on one line (prevents wrapping) */
  .t4-header .navbar, 
  .t4-header .t4-navbar {
    flex-wrap: nowrap !important;
  }
}

/* ===== LOGIN DROPDOWN ===== */

.login-dropdown {
    display: inline-block;
    position: relative;
    /*margin-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.3);*/
    vertical-align: top;
    
}

/* Button */
.login-btn {
    cursor: pointer;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    opacity: 0.9;
}

/* Dropdown box */
.login-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #333333;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 5px 0;
    z-index: 9999;
}

/* Links */
.login-menu a {
    display: block;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
   
}

.login-menu a:last-child {
    border-bottom: none;
    
}

.login-menu a:hover {
    background: rgba(255,255,255,0.08);
    
}

/* Show on hover */
.login-dropdown:hover .login-menu {
    display: block;
    
}

/* IMPORTANT – Joomla header fix */
.header,
.topbar,
.navbar {
    overflow: visible !important;
}


/* Default (top of page) — translucent */
.t4-header,
.t4-header-wrap {
  position: sticky;
  top: 37px;
  z-index: 1;
  background: #7B1B1B;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}




/* After scroll — solid */
.t4-header.scrolled,
.t4-header-wrap.scrolled {
  background: rgba(123, 27, 27, 0.95);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}




/* Reduce main header (logo section) height */
.t4-header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Reduce menu bar height */
.t4-mainnav,
.t4-navbar {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  min-height: 40px !important;  /* adjust as needed */
}

/* Reduce menu item spacing */
.t4-navbar .navbar-nav > li > a {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 18px !important;  /* makes the menu more compact */
}

/* Reduce height caused by logo container */
.t4-header .logo {
  padding: 0 !important;
  margin: 0 !important;
}

.t4-navbar .navbar-nav > li > a {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.menu-item-title {
    
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}



/* CURRENT PAGE (active menu item) */
.nav-item.current .menu-item-title,
.nav-item.active .menu-item-title {
  color: linear-gradient(135deg, #e8dfd8 0%, #d9cfc4 100%) !important;
}

/* Dropdown background */
.t4-navbar .dropdown-menu {
 background-color: #7B1B1B !important;   /* Change this color */
  border: none;
}


/* Color Pallete */
:root {
  --primary: #7B1B1B !important;
  --primary-dark: #5E1111 !important;
  --primary-light: #A33B3B !important;

  --gold: #C8A046 !important;
  --gold-light: #E5CA84 !important;

  --bg-light: #F8F8F8 !important;
  --bg-white: #FFFFFF !important;

  --text-dark: #333333 !important;
  --text-main: #444444 !important;
  --text-muted: #666666 !important;

  --border-light: #DDDDDD !important;

  --royal-blue: #1E3A8A !important;
  --sky-blue: #60A5FA !important;
  --olive: #768A56 !important;
  --olive-light: #C8D5A3 !important;
}

/* Footer */

.t4-footer .container {
    padding-top: 0% !important;
    padding-bottom: 0% !important;
}

body {
    overflow-x: hidden !important;
}


/* Component Read Next Link disable From Article */
.siderbar-article {
    display: none;
}

/*.full-width-content .article-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.full-width-content .article-body {
  max-width: 100% !important;
  margin: 0 auto;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.full-width-content .item-page,
.full-width-content .article-inner,
.full-width-content .article-body {
  text-align: left !important;
}

.full-width-content .full-image img {
  width: 100% !important;
  height: auto;
  display: block;
}*/

.t4-main-body {
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .t4-main-body {
        padding-top: 0;
        padding-bottom: 0;
    }
    

}