/* site.css - Alpine Public School immersive theme (Royal Blue Version) */

/* --- palette --- */
:root{
  --blue-1: #1d4ed8;     /* royal blue base */
  --blue-2: #2563eb;     /* lighter royal blue accent */
  --gold: #f5c542;
  --nav-dark: #0b2540;
  --muted: #6b7280;
  --white: #ffffff;
}

/* Reset base */
*{box-sizing:border-box}
body{
  font-family:Inter, system-ui, Arial, sans-serif;
  background:linear-gradient(180deg,#fffaf6 0%, #f7fbff 100%);
  color:#10243b;
  margin:0;
  -webkit-font-smoothing:antialiased
}
a{color:inherit; text-decoration:none}

/* 3D School Name Animation */
.header-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px #000, 0 0 25px gold, 0 0 10px #ff9900;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 2px 2px 4px #000, 0 0 10px gold, 0 0 20px #ffcc00;
  }
  to {
    text-shadow: 2px 2px 6px #000, 0 0 20px #ff9900, 0 0 40px #fff;
  }
}

/* Topbar */
.site-topbar{
  background:linear-gradient(90deg,var(--blue-1),var(--blue-2));
  color:#0a1f63
}
.site-topbar .logo-img{
  height:56px; width:56px; border-radius:10px; object-fit:cover
}
.school-small-title{
  font-weight:800; letter-spacing:1px; color:#fff;
  font-family:'Playfair Display', serif; font-size:14px
}
.school-sub{font-size:12px; opacity:0.95}

/* === Navbar link styling fix === */
.navbar-dark .navbar-nav .nav-link {
  color: #002b7a; /* golden text */
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
  background-color: #002b7a;
  border-color: #b58500; /* visible gold border */
  box-shadow: 0 0 10px rgba(245, 197, 66, 0.5);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  background-color: #002b7a;
  border-color: #b58500;
  box-shadow: 0 0 10px rgba(212, 160, 25, 0.4);
  
}
/* ===== Hero Section Styling ===== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* make full screen height */
  overflow: hidden;
}

.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item {
  height: 100%;
}

.hero-section .carousel-item img.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.45);
}

/* Hero content overlay */
.hero-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  color: white;
}

/* Logo and text styling */
.hero-logo {
  width: 120px;      /* adjust logo size here */
  height: 120px;
  border-radius: 12px;
  object-fit: contain;
  margin-bottom: 12px;
}

.hero-title {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: 60px;    /* make it big */
  font-weight: 900;   /* bold */
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
/* subtle shimmer */
.hero-title::after{
  content:''; display:block; width:100%; height:6px; margin-top:8px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 3s linear infinite; opacity:0.8;
}
@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes floatTitle{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.hero-sub{color:var(--gold); margin-top:6px; font-weight:600}

/* intro card */
.intro-card{background:linear-gradient(180deg,#fff 0%, #fffdfa 100%); border-radius:12px}
/* contact box */
.contact-box{border-radius:12px; background:linear-gradient(180deg,#fff,#fffef6)}

/* 3D glossy button */
.btn-3d{
  position:relative; display:inline-block;
  padding:10px 18px; border-radius:12px; font-weight:700; color:#081427;
  background:linear-gradient(180deg,var(--blue-2),#1e40af);
  box-shadow: 0 8px 20px rgba(37,99,235,0.28), 0 2px 6px rgba(0,0,0,0.2) inset;
  transform-style:preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-3d:before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0.32), rgba(255,255,255,0.06));
  mix-blend-mode:screen; pointer-events:none;
}
.btn-3d:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 30px rgba(37,99,235,0.28)
}
.btn-3d.btn-lg{padding:13px 24px; font-size:1.05rem}

/* small 3D buttons (quick links) */
.btn-3d-small{
  display:inline-block; padding:8px 14px; border-radius:10px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,#1d4ed8,#60a5fa);
  box-shadow:0 8px 18px rgba(0,0,0,0.12); transition:transform .2s ease
}
.btn-3d-small:hover{transform:translateY(-6px); filter:brightness(1.05)}

/* ghost button */
.btn-ghost{
  color:#fff; border:1px solid rgba(255,255,255,0.15);
  padding:8px 14px; border-radius:8px
}

/* store badges */
.store-btn img, .app-link img{
  height:44px; object-fit:contain; border-radius:8px;
  box-shadow:0 6px 22px rgba(0,0,0,0.18)
}
.store-btn img:hover, .app-link img:hover{transform:translateY(-4px)}

/* section heads */
.section-head{font-weight:800; color:var(--nav-dark); margin-bottom:6px}

/* gallery */
.gallery-grid img{
  width:100%; height:220px; object-fit:cover; border-radius:10px; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease
}
.gallery-grid img:hover{
  transform:scale(1.03); box-shadow:0 8px 24px rgba(9,20,40,0.14)
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(3,8,18,0.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9999;
}
.lightbox.open{opacity:1; pointer-events:auto}
.lb-content img{
  max-width:92vw; max-height:88vh; border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6)
}
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:transparent; border:0; color:#fff;
  font-size:34px; cursor:pointer; padding:10px 14px; transition: transform .15s ease;
}
.lb-close{top:18px; right:22px}
.lb-prev{left:8px}
.lb-next{right:8px}
.lb-prev:hover, .lb-next:hover, .lb-close:hover{transform:scale(1.05)}

/* footer */
.site-footer{
  background:linear-gradient(90deg,var(--blue-1),var(--blue-2)); color:#fff
}
.site-footer img{height:46px; margin-left:8px}

/* floating to-top */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:999;
  background:linear-gradient(90deg,#60a5fa,#93c5fd); color:#081427; border:0;
  width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,0.2); cursor:pointer; opacity:0;
  transform:translateY(8px); transition:all .3s ease
}
.to-top.visible{opacity:1; transform:translateY(0)}

/* small screens */
@media(max-width:900px){
  .hero-title{font-size:34px}
  .hero-logo{height:72px; width:72px}
  .hero-inner{padding:12px}
  .carousel-control-prev, .carousel-control-next{display:none}
}