/* =========================
   Header (scoped to .sp-*)
   ========================= */
.sp-header {
  position: relative;
  box-shadow: var(--sp-shadow);
}

/* Language pill */
.sp-lang{
  position:absolute; left:10px; top:10px;
  background:#ffe7a7; color:#7a4e0f;
  border:2px solid var(--sp-gold-500);
  padding:6px 10px; border-radius:8px;
  font-weight:700; cursor:pointer;
}

/* Brand band */
.sp-header__brand{
  background:linear-gradient(180deg,var(--sp-red-700),var(--sp-red-800));
  color:var(--sp-white);
}
.sp-header__brand-row{
  display:flex; align-items:center; gap:16px; padding:18px 0;
}
.sp-header__logo{
  width:64px; height:64px; background:#fff; border-radius:8px;
  border:3px solid var(--sp-gold-500);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.sp-header__logo img{ width:100%; height:100%; object-fit:cover; }
.sp-header__titles{ display:flex; flex-direction:column; }
.sp-header__title-kn{
  font-family:"Noto Serif Kannada",serif; font-weight:700; letter-spacing:.5px;
  font-size:clamp(1.2rem,3.4vw,1.6rem);
}
.sp-header__title-en{
  font-family:"Marcellus",serif; font-style:italic; font-weight:700;
  font-size:clamp(1.3rem,4vw,2rem);
}

/* Banner */
.sp-header__banner img{ width:100%; height:auto; display:block; }

/* =========================
   Desktop/Tablet top nav
   ========================= */
.sp-nav{
  background:var(--sp-cream-100);
  border-top:3px solid var(--sp-gold-500);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.sp-nav__toggle{
  display:none; background:none; border:none; font-size:24px;
  padding:10px; cursor:pointer;
}
.sp-nav__links{
  display:flex; gap:28px; padding:14px 0; flex-wrap:wrap; justify-content:center;
}
.sp-nav__links a{
  color:var(--sp-brown-600); font-weight:700; text-decoration:none; font-size:1.05rem;
}
.sp-nav__links a:hover{ color:var(--sp-brown-800); text-decoration:underline; }

/* Show desktop nav ≥787px */
@media (min-width:787px){
  .sp-nav__links{ display:flex; }
  .sp-nav__toggle{ display:none; }
}

/* Hide inline nav on small screens */
@media (max-width:786px){
  .sp-nav__links{ display:none; }
  .sp-nav__toggle{ display:none; } /* we use FAB instead */
}

/* =========================
   Floating mobile menu (FAB)
   ========================= */
/* Default hidden; popup hidden unless opened */
.sp-menu-fab { display:none; }
.sp-menu { display:none; }

/* Mobile only (≤786px): show FAB, allow popup */
@media (max-width:786px){
  .sp-menu-fab{
    position:fixed; top:10px; right:10px; z-index:1100;
    width:44px; height:44px; border-radius:999px;
    background:var(--sp-white); color:var(--sp-red-800);
    border:2px solid var(--sp-gold-500);
    box-shadow:0 6px 16px rgba(0,0,0,.15);
    font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .sp-menu-fab:active{ transform:translateY(1px); }
}

/* Desktop only: force-hide mobile menu UI */
@media (min-width:787px){
  .sp-menu-fab{ display:none !important; }
  .sp-menu{ display:none !important; }
}

/* Popup container */
.sp-menu{
  position:fixed; inset:0; z-index:1090;
}
.sp-menu.is-open{ display:block; }

/* Backdrop */
.sp-menu__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
}

/* Panel (premium card) */
.sp-menu__panel{
  position:relative;
  margin:64px 14px 20px;  /* space from top + sides */
  margin-left:auto;       /* right-aligned */
  max-width:320px;
  background:var(--sp-cream-50);
  border:2px solid var(--sp-gold-500);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  outline:none;           /* focus handled below */
}

/* Head */
.sp-menu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px dashed rgba(0,0,0,.08);
  font-weight:800; color:var(--sp-brown-800);
}
.sp-menu__close{
  background:none; border:none; font-size:24px; line-height:1;
  cursor:pointer; color:var(--sp-brown-800);
}

/* Links: light-red premium buttons with gold border */
.sp-menu__links{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
}
.sp-menu__links a{
  display:block; text-decoration:none; text-align:center;
  font-weight:800;
  padding:12px 14px;
  border-radius:10px;
  background:#fde7e7;                 /* light red */
  color:#7a1f1f;                       /* deep red text */
  border:2px solid var(--sp-gold-500); /* gold border */
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.sp-menu__links a:hover{
  background:#fbd3d3;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.sp-menu__links a:active{ transform:translateY(1px); }

/* Focus ring for accessibility */
.sp-menu__panel:focus-visible,
.sp-menu__links a:focus-visible,
.sp-menu__close:focus-visible,
.sp-menu-fab:focus-visible{
  outline:3px solid var(--sp-gold-500);
  outline-offset:2px;
}
/* Hide floating lang pill on small screens (we move it into menu) */
@media (max-width: 786px){
  .sp-lang{ display:none; }
}

/* Container inside the mobile panel */
.sp-menu__extra{
  padding: 10px 14px 0;
}

/* Re-style the lang button when it's inside the menu panel */
.sp-menu__panel .sp-lang{
  display:block;
  position: static;     /* lose absolute positioning */
  width: 100%;
  text-align: center;
  background: #fde7e7;
  color: #7a1f1f;
  border: 2px solid var(--sp-gold-500);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.sp-menu__panel .sp-lang:hover{
  background:#fbd3d3;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.sp-menu__panel .sp-lang:active{
  transform: translateY(1px);
}