/* =====================================================================
   SMAN 1 Halmahera Timur – Solidroad Design System
   Inspired by: https://www.solidroad.com
   - Atmospheric dusk hero: #1b2838 -> #2b2a2c -> #44413e
   - Signature vibrant electric chartreuse / neon lime: #dbf400
   - Primary hover: #f4ff95
   - Deep warm charcoal: #2d2c29, #322f25
   - Warm neutral surfaces: #fbf7eb (warm-gray-5), #ebe5d5 (warm-gray-15), #ffffff
   - Editorial serif headings: Instrument Serif / Arizona aesthetic
   - Clean sans body: Inter
   - Pill geometry: rounded-full (80px), rounded-panel (28px - 32px)
   - Pastel indicator chips: purple, blue, green, orange
   - Zero student data on frontend (privacy compliant)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Solidroad Primary Accent */
  --color-primary: #dbf400;
  --color-primary-hover: #f4ff95;
  --color-primary-inactive: #f8fdcc;

  /* Solidroad Dark & Charcoal */
  --color-dark: #2d2c29;
  --color-dark-deep: #1b2838;
  --color-dark-muted: #4b4a47;
  --color-nightlife: #0e220e;
  --color-neutral-600: #2d2c29;
  --color-neutral-400: #3f3f3c;
  --color-neutral-300: #4b4a47;
  --color-neutral-200: #878683;
  --color-neutral-100: #c3c2bf;
  --color-neutral-50: #e1e0dd;

  /* Solidroad Warm Creams */
  --color-warm-gray-5: #fbf7eb;
  --color-warm-gray-15: #ebe5d5;
  --color-warm-gray-25: #dad5c6;
  --color-warm-gray-200: #544e3f;
  --color-warm-gray-600: #322f25;

  /* Pastel Accent Badges */
  --color-purple-15: #f2eefd;
  --color-purple-600: #8b5cf6;
  --color-blue-15: #e4efff;
  --color-blue-600: #3b82f6;
  --color-green-15: #ceedd1;
  --color-green-600: #0e7017;
  --color-orange-15: #fdecd8;
  --color-orange-600: #ea580c;
  --color-yellow-15: #f8fdcc;
  --color-yellow-600: #b8cd00;

  /* Lines & Borders */
  --color-border-subtle: rgba(45, 44, 41, 0.08);
  --color-border: rgba(45, 44, 41, 0.14);
  --color-border-inverse: rgba(255, 255, 255, 0.16);

  /* Fonts */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-framer: cubic-bezier(0.6, 0, 0.05, 1);
  --ease-out-soft: cubic-bezier(0.44, 0, 0.56, 1);
}

/* Base HTML & Typography */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: var(--color-dark);
  overflow-x: hidden;
}

::selection {
  background: #f4ff95;
  color: #2d2c29;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-warm-gray-5);
}
::-webkit-scrollbar-thumb {
  background: #c3c2bf;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #878683;
}

/* Typography Classes */
.font-serif {
  font-family: var(--font-serif);
}
.font-sans {
  font-family: var(--font-sans);
}
.font-mono {
  font-family: var(--font-mono);
}

/* Solidroad Display Heading Typography */
h1.font-serif, h2.font-serif {
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 1.05;
}
h1.font-serif em, h2.font-serif em {
  font-style: italic;
  font-weight: 400;
}

/* Solidroad Pill Buttons */
.btn-solid-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: var(--color-neutral-600);
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 600;
  padding: 0.75rem 1.65rem;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(219, 244, 0, 0.3);
  transition: all 0.25s var(--ease-framer);
  cursor: pointer;
}
.btn-solid-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(219, 244, 0, 0.45);
}
.btn-solid-primary:active {
  transform: translateY(0);
}

.btn-solid-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 600;
  padding: 0.75rem 1.65rem;
  text-decoration: none;
  border: 1px solid var(--color-border-inverse);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s var(--ease-framer);
  cursor: pointer;
}
.btn-solid-secondary:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}
.btn-solid-secondary:active {
  transform: translateY(0);
}

.btn-solid-warm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-warm-gray-15);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 600;
  padding: 0.75rem 1.65rem;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all 0.25s var(--ease-framer);
  cursor: pointer;
}
.btn-solid-warm:hover {
  background-color: var(--color-warm-gray-25);
  border-color: var(--color-dark);
  transform: translateY(-2px);
}

/* =====================================================================
   NAVBAR & DROPDOWN STYLING
   ===================================================================== */
.nav-pill-wrapper {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  padding: 0.35rem 0.45rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.nav-link {
  color: rgba(251, 247, 235, 0.75);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  transition: all 0.22s var(--ease-framer);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  background-color: var(--color-primary) !important;
  color: var(--color-dark) !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(219, 244, 0, 0.35);
}

/* Dropdown Flyout Panel */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 280px;
  padding-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
}

.group-dropdown:hover .nav-dropdown-menu,
.group-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-panel {
  background: rgba(27, 40, 56, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 0.5rem;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(251, 247, 235, 0.85);
  transition: all 0.2s ease;
}

.nav-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(2px);
}

.nav-dropdown-item:hover .nav-dropdown-icon {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

.nav-dropdown-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* =====================================================================
   HERO: SOLIDROAD ATMOSPHERIC DUSK + EMBEDDED PHOTOS
   ===================================================================== */
.solidroad-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #1b2838 0%, #2b2a2c 55%, #44413e 100%);
  color: var(--color-warm-gray-5);
  isolation: isolate;
}

.solidroad-hero-media {
  position: absolute;
  inset: -6% 0 0 0;
  z-index: -2;
  will-change: transform;
}
.solidroad-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: contrast(1.1) saturate(0.9);
  animation: heroZoom 20s var(--ease-framer) both;
}

@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1.02); }
}

.solidroad-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(27, 40, 56, 0.75) 0%, rgba(43, 42, 44, 0.85) 60%, rgba(68, 65, 62, 0.95) 100%),
    radial-gradient(circle at 80% 20%, rgba(219, 244, 0, 0.08) 0%, transparent 50%);
}

/* Hero Badge Tag */
.solid-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.725rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chip-lime {
  background-color: var(--color-primary);
  color: var(--color-neutral-600);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.chip-glass {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-warm-gray-5);
  border: 1px solid var(--color-border-inverse);
  backdrop-filter: blur(8px);
}

/* Hero Photo Motto Card */
.solid-hero-card {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 35px 80px -20px rgba(0, 0, 0, 0.6);
  background: rgba(43, 42, 44, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--ease-framer), border-color 0.4s ease;
}
.solid-hero-card:hover {
  transform: translateY(-4px);
  border-color: rgba(219, 244, 0, 0.5);
}

.solid-hero-badge {
  background: rgba(27, 40, 56, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-warm-gray-5);
}

/* Hero Stat Metric Tiles */
.solid-stat-tile {
  padding: 1.25rem 1.35rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s var(--ease-framer), border-color 0.3s ease;
}
.solid-stat-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(219, 244, 0, 0.35);
}

.solid-stat-tile .num {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 1;
  color: var(--color-warm-gray-5);
}

.solid-stat-tile .lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 247, 235, 0.65);
}

/* =====================================================================
   SECTIONS & SURFACES (SOLIDROAD CLEAN LIGHT & WARM CREAMS)
   ===================================================================== */
.bg-warm-canvas {
  background-color: var(--color-warm-gray-5);
}
.bg-warm-secondary {
  background-color: var(--color-warm-gray-15);
}

/* Bento & Feature Cards */
.solid-card {
  border-radius: 28px;
  border: 1px solid var(--color-border);
  background-color: #ffffff;
  transition: all 0.3s var(--ease-framer);
}
.solid-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-neutral-400);
  box-shadow: 0 16px 36px -8px rgba(45, 44, 41, 0.08);
}

.solid-card-warm {
  border-radius: 28px;
  border: 1px solid rgba(45, 44, 41, 0.1);
  background-color: var(--color-warm-gray-5);
  transition: all 0.3s var(--ease-framer);
}
.solid-card-warm:hover {
  background-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -8px rgba(45, 44, 41, 0.08);
}

/* Marquee Banner */
@keyframes solidMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.solid-marquee-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  align-items: center;
  gap: 3rem;
  animation: solidMarquee 32s linear infinite;
}
.solid-marquee-track:hover {
  animation-play-state: paused;
}

/* Scroll reveal motion classes */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-framer), transform 0.8s var(--ease-framer);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Tabs */
.profile-tab-btn.active {
  background-color: var(--color-dark) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 14px rgba(45, 44, 41, 0.15);
}

/* Modal Animations */
.modal-enter {
  animation: solidModalIn 0.3s var(--ease-framer) forwards;
}
@keyframes solidModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .btn-solid-primary, .btn-solid-secondary, .btn-solid-warm {
    width: 100%;
    padding: 0.8rem 1.4rem;
    font-size: 0.9rem;
  }
}

/* Article & Announcement Rich Content Styling */
.article-rich-content {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #334155;
}
.article-rich-content p {
  margin-bottom: 1.25rem;
  line-height: 1.85;
  color: #334155;
}
.article-rich-content p:last-child {
  margin-bottom: 0;
}
.article-rich-content blockquote {
  border-left: 4px solid var(--color-dark);
  padding: 0.85rem 1.25rem;
  margin: 1.4rem 0;
  background: var(--color-warm-gray-5);
  font-style: italic;
  color: var(--color-dark);
  border-radius: 0 12px 12px 0;
}
.article-rich-content ul, .article-rich-content ol {
  margin: 1rem 0 1.25rem 1.5rem;
  list-style-type: disc;
}
.article-rich-content li {
  margin-bottom: 0.45rem;
}