@import url("mobile-base.css");

/* =========================================================
   FINAL HOMEPAGE HERO — RESPONSIVE / PROFESSIONAL COMPOSITION
   Banner first. Search stays closed until the header control is tapped.
   IMPORTANT: Hero rules are scoped to the homepage hero only.
   ========================================================= */

.mobile-menu{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  place-items:center !important;
  gap:0 !important;
  width:88px !important;
  height:42px !important;
  padding:0 !important;
  border:1px solid rgba(7,26,51,.18) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#071a33 !important;
  box-shadow:0 3px 12px rgba(7,26,51,.08) !important;
  font-size:0 !important;
}
.mobile-menu::before,.mobile-menu::after{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  font-size:21px !important;
  line-height:1 !important;
}
.mobile-menu::before{content:"☰" !important;color:#17304f !important}
.mobile-menu::after{content:"⌕" !important;color:#b58a35 !important}

@media(max-width:850px){
  .nav-inner{gap:8px !important}
  .mobile-menu{display:grid !important}
}

body:has(.hero-grid) .hero{
  padding:0 !important;
  margin:0 !important;
  background:#fff !important;
  overflow:visible !important;
}
body:has(.hero-grid) .hero::before{display:none !important}
body:has(.hero-grid) .hero .container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
body:has(.hero-grid) .hero-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
}
body:has(.hero-grid) .hero-grid > div:first-child{display:contents !important}
body:has(.hero-grid) .hero-badge,
body:has(.hero-grid) .hero h1,
body:has(.hero-grid) .hero-text,
body:has(.hero-grid) .quick-searches,
body:has(.hero-grid) .hero-highlights,
body:has(.hero-grid) .hero-highlight-tag{display:none !important}

body:has(.hero-grid) .hero-visual{
  grid-row:1 !important;
  grid-column:1 !important;
  width:100% !important;
  max-width:none !important;
  height:clamp(240px,55vw,620px) !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  box-shadow:none !important;
  background:#f4f6f8 !important;
  position:relative !important;
}
body:has(.hero-grid) .hero-visual #heroCarousel{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body:has(.hero-grid) .hero-visual .carousel-card{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}
body:has(.hero-grid) .hero-visual .carousel-card > *:not(img){display:none !important}
body:has(.hero-grid) .hero-visual .carousel-card img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:#f4f6f8 !important;
  filter:none !important;
}

body:has(.hero-grid) .hero-search-wrap{
  grid-row:2 !important;
  grid-column:1 !important;
  display:none !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:22px 28px 26px !important;
  background:#071f3b !important;
  position:relative !important;
  z-index:40 !important;
}
body:has(.hero-grid):has(#navLinks.open) .hero-search-wrap{display:block !important}
body:has(.hero-grid) .hero-search-wrap::before{
  content:"Student Services" !important;
  display:block !important;
  margin:0 0 13px !important;
  color:#fff !important;
  font-size:clamp(20px,2.5vw,28px) !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:-.25px !important;
}
body:has(.hero-grid) .hero-search-wrap .hero-search{
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:58px !important;
  padding:4px !important;
  gap:4px !important;
  border-radius:30px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.04) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
  display:flex !important;
  align-items:center !important;
}
body:has(.hero-grid) .hero-search-wrap .hero-search input{
  min-width:0 !important;
  min-height:48px !important;
  height:48px !important;
  flex:1 1 auto !important;
  padding:0 5px !important;
  font-size:15px !important;
  color:#667085 !important;
}
body:has(.hero-grid) .hero-search-wrap .search-leading{
  width:38px !important;
  min-width:38px !important;
  flex:0 0 38px !important;
  color:#667085 !important;
  font-size:20px !important;
}
body:has(.hero-grid) .hero-search-wrap .search-status{width:18px !important;min-width:18px !important;flex:0 0 18px !important}
body:has(.hero-grid) .hero-search-wrap .search-btn{
  min-height:48px !important;
  height:48px !important;
  flex:0 0 110px !important;
  padding:0 18px !important;
  border-radius:24px !important;
  background:#0b294d !important;
  color:#d9b15c !important;
  font-size:14px !important;
  font-weight:800 !important;
  box-shadow:inset 0 0 0 2px rgba(214,168,79,.75) !important;
}
body:has(.hero-grid) .hero-search-wrap .search-btn:hover{background:#0b294d !important;transform:none !important}
body:has(.hero-grid) .hero-search-wrap .search-helper{display:none !important}

body:has(.hero-grid) .carousel-overlay{inset:auto 18px 18px !important;padding:10px 13px !important;border-radius:12px !important}
body:has(.hero-grid) .carousel-dots{bottom:10px !important;left:10px !important;right:10px !important}
body:has(.hero-grid) .hero + *{position:relative !important;z-index:2 !important}

/* FINAL SPACING PASS: remove the tall blank band above the banner. */
@media(max-width:850px){
  body:has(.hero-grid) .hero,
  body:has(.hero-grid) .hero .container,
  body:has(.hero-grid) .hero-grid,
  body:has(.hero-grid) .hero-visual,
  body:has(.hero-grid) .hero-visual #heroCarousel{margin-top:0 !important;padding-top:0 !important}
  body:has(.hero-grid) .hero-visual{transform:translateY(0) !important}
}

@media(max-width:600px){
  .mobile-menu{width:88px !important;height:40px !important}
  .mobile-menu::before,.mobile-menu::after{font-size:20px !important}
  body:has(.hero-grid) .hero-visual{height:clamp(240px,58vw,410px) !important}
  body:has(.hero-grid) .hero-search-wrap{padding:20px 16px 22px !important}
  body:has(.hero-grid) .hero-search-wrap::before{font-size:22px !important;margin-bottom:12px !important}
  body:has(.hero-grid) .hero-search-wrap .hero-search{height:52px !important;border-radius:27px !important}
  body:has(.hero-grid) .hero-search-wrap .hero-search input{height:44px !important;min-height:44px !important;font-size:13px !important}
  body:has(.hero-grid) .hero-search-wrap .search-leading{width:32px !important;min-width:32px !important;flex-basis:32px !important;font-size:18px !important}
  body:has(.hero-grid) .hero-search-wrap .search-btn{height:44px !important;min-height:44px !important;flex-basis:92px !important;padding:0 13px !important;font-size:13px !important;border-radius:22px !important}
  body:has(.hero-grid) .carousel-overlay{inset:auto 10px 10px !important;padding:8px 10px !important}
}
@media(max-width:380px){
  .mobile-menu{width:84px !important}
  body:has(.hero-grid) .hero-visual{height:clamp(225px,60vw,360px) !important}
  body:has(.hero-grid) .hero-search-wrap{padding-inline:12px !important}
  body:has(.hero-grid) .hero-search-wrap .search-btn{flex-basis:82px !important;padding-inline:10px !important}
}

/* MOBILE HERO: banner should start immediately below the header.
   Keep the banner's natural aspect ratio so there is no white band above/below it. */
@media(max-width:850px){
  body:has(.hero-grid) .hero-visual{
    height:auto !important;
    aspect-ratio:1.96 / 1 !important;
    min-height:0 !important;
    max-height:none !important;
    background:transparent !important;
  }
  body:has(.hero-grid) .hero-visual #heroCarousel,
  body:has(.hero-grid) .hero-visual .carousel-card,
  body:has(.hero-grid) .hero-visual .carousel-card img{
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
  }
}

/* HOMEPAGE HERO: keep the first active banner visible immediately.
   This is a visibility fallback only; size, spacing and carousel timing stay unchanged. */
.hero-upgraded .hero-banner-container .hero-slide:nth-child(1){
  background:url("hostelherobanner.jpg") center / cover no-repeat;
}
.hero-upgraded .hero-banner-container .hero-slide:nth-child(2){
  background:url("tiffinherobanner.jpg") center / cover no-repeat;
}
.hero-upgraded .hero-banner-container .hero-slide:nth-child(3){
  background:url("libraryherobanner.jpg") center / cover no-repeat;
}
.hero-upgraded .hero-banner-container .hero-slide:nth-child(4){
  background:url("cafeherobanner.jpg") center / cover no-repeat;
}
.hero-upgraded .hero-banner-container .hero-slide:nth-child(5){
  background:url("bookstoreherobanner.jpg") center / cover no-repeat;
}
.hero-upgraded .hero-banner-container .hero-slide.active{
  opacity:1 !important;
}
.hero-upgraded .hero-banner-container .hero-slide.active img{
  opacity:1 !important;
  visibility:visible !important;
}


/* StudentHubHelp mobile navbar tap control */
#mobileMenuToggle{display:none;position:relative;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;margin:0;border:1px solid rgba(7,26,51,.16);border-radius:12px;background:#fff;color:#071a33;box-shadow:0 4px 14px rgba(7,26,51,.08);cursor:pointer;z-index:1105;-webkit-tap-highlight-color:transparent}
#mobileMenuToggle span,#mobileMenuToggle span::before,#mobileMenuToggle span::after{content:"";display:block;width:20px;height:2px;border-radius:2px;background:#071a33;transition:transform .2s ease,opacity .2s ease}
#mobileMenuToggle span{position:relative}
#mobileMenuToggle span::before,#mobileMenuToggle span::after{position:absolute;left:0}
#mobileMenuToggle span::before{top:-6px}
#mobileMenuToggle span::after{top:6px}
#mobileMenuToggle[aria-expanded="true"] span{background:transparent}
#mobileMenuToggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
#mobileMenuToggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:767px){
  .nav-inner{position:relative!important}
  #mobileMenuToggle{display:inline-flex!important;margin-left:auto!important;flex:0 0 44px!important}
  .nav-links{position:absolute!important;top:calc(100% + 8px)!important;left:12px!important;right:12px!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:10px!important;background:rgba(255,255,255,.98)!important;border:1px solid #e4e9f0!important;border-radius:16px!important;box-shadow:0 18px 50px rgba(7,26,51,.16)!important;z-index:1100!important}
  .nav-links.open{display:flex!important}
  .nav-links a{display:flex!important;align-items:center!important;min-height:46px!important;padding:10px 14px!important;border-radius:10px!important}
  body.mobile-nav-open{overflow:hidden!important}
}
@media(min-width:768px){#mobileMenuToggle{display:none!important}.nav-links{position:static!important;display:flex!important}}
@media(prefers-reduced-motion:reduce){#mobileMenuToggle span,#mobileMenuToggle span::before,#mobileMenuToggle span::after{transition:none!important}}
/* FINAL MOBILE NAVBAR - HAMBURGER ONLY */
@media (max-width: 767px) {

  .nav-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Mobile navigation dropdown */
  .nav-links {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;

    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;

    padding: 10px !important;
    gap: 4px !important;

    background: rgba(255,255,255,.98) !important;
    border: 1px solid #e4e9f0 !important;
    border-radius: 16px !important;

    box-shadow: 0 18px 50px rgba(7,26,51,.16) !important;
    z-index: 1100 !important;
  }

  .nav-links.open {
    display: flex !important;
  }

  .nav-links a {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  /* Three-line hamburger */
  #mobileMenuToggle {
    display: inline-flex !important;
    position: relative !important;

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    margin-left: auto !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(7,26,51,.16) !important;
    border-radius: 12px !important;

    background: #fff !important;
    box-shadow: 0 4px 14px rgba(7,26,51,.08) !important;

    cursor: pointer !important;
    z-index: 1105 !important;

    -webkit-tap-highlight-color: transparent !important;
  }

  #mobileMenuToggle::before,
  #mobileMenuToggle::after {
    display: none !important;
    content: none !important;
  }

  #mobileMenuToggle span,
  #mobileMenuToggle span::before,
  #mobileMenuToggle span::after {
    content: "";
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 2px;
    background: #071a33;

    position: absolute;

    transition: transform .2s ease, opacity .2s ease;
  }

  #mobileMenuToggle span {
    position: relative !important;
  }

  #mobileMenuToggle span::before,
  #mobileMenuToggle span::after {
    left: 0;
  }

  #mobileMenuToggle span::before {
    top: -6px;
  }

  #mobileMenuToggle span::after {
    top: 6px;
  }

  /* Hamburger → X */
  #mobileMenuToggle[aria-expanded="true"] span {
    background: transparent;
  }

  #mobileMenuToggle[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);
  }

  #mobileMenuToggle[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }
}

/* Never show hamburger on desktop/tablet */
@media (min-width: 768px) {
  #mobileMenuToggle {
    display: none !important;
  }
}


/* FINAL MOBILE NAVBAR: single tappable hamburger */
@media(max-width:767px){
  .nav-inner{position:relative!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding-block:12px!important}
  .nav-links{position:absolute!important;top:calc(100% + 8px)!important;left:12px!important;right:12px!important;width:auto!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:10px!important;background:rgba(255,255,255,.98)!important;border:1px solid #e4e9f0!important;border-radius:16px!important;box-shadow:0 18px 50px rgba(7,26,51,.16)!important;z-index:1100!important;overflow:visible!important;white-space:normal!important}
  .nav-links.open{display:flex!important}
  .nav-links a{display:flex!important;align-items:center!important;min-height:46px!important;padding:10px 14px!important;border-radius:10px!important}
  #mobileMenuToggle{display:inline-flex!important;position:relative!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-width:44px!important;margin-left:auto!important;padding:0!important;border:1px solid rgba(7,26,51,.16)!important;border-radius:12px!important;background:#fff!important;box-shadow:0 4px 14px rgba(7,26,51,.08)!important;cursor:pointer!important;z-index:1105!important;-webkit-tap-highlight-color:transparent!important}
  #mobileMenuToggle::before,#mobileMenuToggle::after{display:none!important;content:none!important}
  #mobileMenuToggle span,#mobileMenuToggle span::before,#mobileMenuToggle span::after{content:"";display:block;width:20px;height:2px;border-radius:2px;background:#071a33;position:absolute;transition:transform .2s ease,opacity .2s ease}
  #mobileMenuToggle span{position:relative!important}
  #mobileMenuToggle span::before,#mobileMenuToggle span::after{left:0}
  #mobileMenuToggle span::before{top:-6px}
  #mobileMenuToggle span::after{top:6px}
  #mobileMenuToggle[aria-expanded="true"] span{background:transparent}
  #mobileMenuToggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  #mobileMenuToggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
  body.mobile-nav-open{overflow:hidden!important}
}
@media(min-width:768px){#mobileMenuToggle{display:none!important}}