/* ---------------- HEADER ---------------- */

:root {
  --maroon: #7A0A0A;
  --gold: #D4AF37;
  --white: #ffffff;
  --nav-height: 90px;
}

/* HEADER BASE */
.site-header {
  background: var(--maroon);
  color: var(--white);
  position: relative;
  z-index: 1000;
}

/* HEADER LAYOUT */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-height);
  gap: 40px;
}

/* BRAND */
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;   /* remove blue underline */
}

.brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.brand-full {
  font-family: "Lobster", cursive;
  font-size: 34px;
  color: var(--white);
  white-space: nowrap;  /* keep one line */
}

/* DESKTOP NAV */
.nav-desktop {
  margin-left: auto;
}

.nav-list {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  padding: 10px;
  transition: 0.25s;
}

.nav-link:hover {
  color: var(--gold);
}

/* PREMIUM HAMBURGER */
.premium-hamburger {
  display: none;
  width: 54px;
  height: 46px;
  background: rgba(255,255,255,0.15);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.premium-hamburger span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: var(--gold);
  border-radius: 3px;
  transition: 0.3s ease;
}

/* TURN INTO X */
.premium-hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.premium-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.premium-hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* SCALLOP WAVE */
.wave-wrapper {
  width: 100%;
  overflow: hidden;
}
.wave-wrapper svg {
  width: 100%;
  display: block;
  height: 48px;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
  background: var(--maroon);
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  animation: slideDown 0.35s ease;
}

.mobile-menu.show {
  display: block;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-link {
  display: block;
  padding: 14px 0;
  font-size: 18px;
  color: var(--white);
  transition: .25s;
}

.mobile-link:hover {
  color: #000;
  background: var(--gold);
  border-radius: 8px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .nav-desktop { display: none; }
  .premium-hamburger { display: flex; }
}

/* ---------------- HERO ---------------- */
.hero {position:relative;overflow:hidden}
.carousel-item{
  min-height:520px;height:calc(100vh - var(--nav-height));
  background-size:cover;background-position:center;
  display:flex;align-items:center
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70%)
}
.hero-content{
  position:relative;z-index:5;max-width:56%;
  padding:72px 36px;color:#fff
}
.hero-title{
  font-family:"Lobster",cursive;
  font-size:64px;line-height:0.95;margin:0 0 14px;
  text-shadow:0 10px 30px rgba(0,0,0,0.45)
}
.hero-desc{font-size:18px;max-width:90%;line-height:1.6;text-shadow:0 8px 20px rgba(0,0,0,0.35)}
.carousel-controls{
  position:absolute;right:28px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:6
}
.carousel-btn{
  width:56px;height:56px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,0.18);
  border:2px solid rgba(255,255,255,0.6);color:#fff
}

/* ---------------- SECTIONS ---------------- */
.section{padding:68px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;border-radius:12px;padding:24px;
  box-shadow:0 8px 26px rgba(16,24,40,0.06)
}
.card h4{margin:0 0 8px;color:var(--maroon)}
.card p{color:#555;line-height:1.6}

/* Responsive */
@media (max-width: 991px){
  .hero-content{max-width:86%;padding:48px 20px}
  .hero-title{font-size:46px}
  .cards{grid-template-columns:repeat(2,1fr)}

  /* MOBILE FIXES */
  .mobile-hamburger{display:flex}
  .nav-desktop{display:none}
  .cta-desktop{display:none}
  .mobile-menu{display:none}
  .mobile-menu.show{display:block}

  .header-inner{gap:14px;} /* spacing fix */
}

@media (max-width: 575px){
  .brand-text{flex-direction:column}
  .brand-name{font-size:24px}
  .brand-type{font-size:22px}
  .hero-title{font-size:38px}
  .cards{grid-template-columns:1fr}
}

/* FOOTER */
.site-footer{
  background:var(--footer-navy);
  color:#d7e6f0;
  padding:56px 0 20px
}
.footer-top{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;max-width:1200px;margin:0 auto;padding:0 18px
}
.ft-title{color:#fff;margin-bottom:12px}
.ft-desc{color:#cfe3f2;line-height:1.9}
.ft-links li{list-style:none;margin-bottom:8px}
.ft-links a{color:#cfe3f2}
.ft-links a:hover{color:var(--gold)}
.ft-info a{color:#cfe3f2}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.04);
  padding:18px 0;margin-top:18px;text-align:center;color:#cfe3f2
}

/* small screens footer */
@media (max-width:767px){
  .footer-top{grid-template-columns:1fr}
  .brand-logo{width:64px;height:64px}
}
/* ---- MOBILE HEADER FIXES ---- */

/* Remove blue text & underline on brand */
.brand, .brand:visited, .brand:active, .brand-full {
    color: #fff !important;
    text-decoration: none !important;
}

/* Fix Gauranga School brand to stay in one line */
.brand-full {
    white-space: nowrap;
    font-size: 26px;
    font-weight: 600;
}


/* FORCE HAMBURGER BUTTON STYLE */
.premium-hamburger {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    background: rgba(255,255,255,0.18);
    z-index: 5000 !important;  /* Top layer */
}

/* Hamburger lines */
.premium-hamburger span {
    width: 26px;
    height: 3px;
    background: var(--gold);
    margin: 4px 0;
    border-radius: 3px;
}


/* Ensure wave does not overlap mobile elements */
.wave-wrapper {
    margin-top: -2px;
    position: relative;
    z-index: 1;
}

/* Prevent hero from overlapping menu */
.mobile-menu {
    position: relative;
    z-index: 9999 !important;
}

/* Ensure header is above carousel */
.site-header {
    position: relative;
    z-index: 9999;
}

/* Hamburger -> X animation fix */
.premium-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.premium-hamburger.active span:nth-child(2) {
    opacity: 0;
}
.premium-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* --------------------------------------------------
   PREMIUM SLIDE-DOWN MOBILE MENU (OPTION A)
-------------------------------------------------- */

/* Menu hidden initially (slides from top) */
.slide-menu {
    position: absolute;
    top: 90px; /* matches header height */
    left: 0;
    width: 100%;
    background: var(--maroon);
    overflow: hidden;
    max-height: 0;
    padding: 0;
    transition: max-height 0.45s ease, padding 0.3s ease;
    z-index: 9999;
    border-bottom: 2px solid var(--gold);
}

/* When open */
.slide-menu.show {
    max-height: 500px; /* enough for 7 links */
    padding: 20px 0;
}

/* Links inside slide menu */
.slide-nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 6px;
}

.slide-link {
    color: var(--white);
    font-size: 20px;
    padding: 12px 0;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.slide-link:hover {
    color: var(--gold);
}

/* Fix stacking order */
.site-header {
    position: relative;
    z-index: 10000;
}

.wave-wrapper {
    position: relative;
    z-index: 1;
}