* {
   box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body{
    background-color: #333;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .applynowbtn, .pillar-link-btn, .sl-cta-btn, .admin-btn-primary, .admin-btn-secondary, .admin-btn-danger, .notice-filter-btn {
    font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(40, 40, 40, 0.92);
  border-bottom: 1rem solid #F57C00;
  z-index: 1000;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-bottom-width 0.4s ease, box-shadow 0.4s ease;
}

.navbar.scrolled {
   padding: 0.5rem 0;
   border-bottom: 0.4rem solid #F57C00;
   background-color: rgba(26, 26, 26, 0.85);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

/* The header row: logo + school name on the left, hamburger button (mobile
   only) on the right. Replaces the old fixed-size inline styles that made
   the mobile header oversized and unresponsive. */
.navbar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 2rem;
   gap: 1rem;
}

.navbar-brand {
   display: flex;
   align-items: center;
   gap: 1rem;
   min-width: 0; /* allows the title to truncate instead of forcing overflow */
}

.logo {
   height: 4.5rem;
   width: 4.5rem;
   object-fit: contain;
   flex-shrink: 0;
   transition: height 0.3s ease, width 0.3s ease;
}

.navbar-title {
   color: #ddd;
   font-size: clamp(1rem, 2.4vw, 1.5rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
}

.navbar a {
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   position: relative;
   transition: color 0.25s ease, background-color 0.25s ease;
}
.navbar a:hover {
   background: #F57C00;
   color: black;
}

#schoolNameTrigger {
   transition: opacity 0.2s ease;
   user-select: none;
}

/* Hamburger icon (built by index.js, styled here) */
.mobile-menu-btn {
  display: none;
}
.hamburger-line {
   display: block;
   width: 24px;
   height: 3px;
   background: black;
   margin: 5px auto;
   border-radius: 2px;
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,0.6);
   z-index: 900;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.35s ease;
}
.nav-backdrop.active { opacity: 1; pointer-events: auto; }

/* Close button shown at the top of the slide-in mobile panel — added so
   closing the menu is an obvious, labelled action rather than something
   the user has to guess (tap the hamburger again, or tap the backdrop). */
.nav-close-btn {
   display: none;
}

/* Group labels and the panel header are mobile-slide-in-panel concepts
   only (see their real styling inside the mobile media query below) —
   hidden here by default so they never render as stray visible text in the
   desktop horizontal nav. The JS that inserts both runs on every page load
   regardless of screen width, same as the close button above. */
.nav-group-label,
.nav-panel-header {
   display: none;
}

@media (max-width: 768px) {

  .navbar-header {
    padding: 0.6rem 1rem;
  }

  .logo {
    height: 3rem;
    width: 3rem;
  }

  /* `body .main` (rather than plain `.main`) exists purely to raise this
     rule's specificity above the unguarded `.main { margin: 7rem 0 0 0; }`
     base rule later in this file, which otherwise wins the tie (same
     specificity, later in source) and leaves the header-height gap wrong
     on every phone-width screen. */
  body .main {
    margin-top: 5.5rem;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh; /* accounts for mobile browser chrome so the panel doesn't get cut off */
    width: min(85vw, 320px);
    text-align: left;
    overflow-y: auto;
    background: #1f1f1f;
    padding: 4.5rem 0 max(2rem, env(safe-area-inset-bottom)) 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.4);
    z-index: 950;
  }

  .nav-links a {
    padding: 1rem 1.5rem;
    border-top: 1px solid #2f2f2f;
    text-align: left;
    float: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: #e2e2e2;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  }

  /* A quiet press/hover state instead of relying on the browser's default
     tap highlight, which can render as a jarring solid block on some
     devices. */
  .nav-links a:hover,
  .nav-links a:active {
    background-color: rgba(245, 124, 0, 0.1);
    color: #ffffff;
    padding-left: 1.75rem;
  }

  /* The current page keeps its established orange text treatment — this is
     the only accent colour used for "where you are," so it doesn't compete
     with a second, different active-state colour. */
  .nav-links a#active {
    color: #F57C00;
    font-weight: 700;
    border-left: 3px solid #F57C00;
    padding-left: calc(1.5rem - 3px);
  }
  .nav-links a#active:hover,
  .nav-links a#active:active {
    padding-left: calc(1.5rem - 3px);
  }

  .nav-links.active {
    transform: translateX(0);
  }

  /* Small branded header inside the slide-in panel — gives the list a
     visual anchor at the top instead of links starting immediately under
     the close button, and matches the header bar's own logo/name pairing. */
  .nav-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #2f2f2f;
    margin-bottom: 0.25rem;
  }
  .nav-panel-header img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
  }
  .nav-panel-header span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f0f0f0;
    letter-spacing: 0.2px;
  }

  /* Small uppercase labels that break the long link list into a few
     readable groups instead of one undifferentiated column of 13 rows.
     display:block explicitly overrides the display:none default set
     outside this mobile query (that default is what keeps these labels
     from ever appearing in the desktop horizontal nav). */
  .nav-group-label {
    display: block;
    padding: 1.1rem 1.5rem 0.4rem 1.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #757575;
  }
  .nav-links a + .nav-group-label {
    border-top: 1px solid #2f2f2f;
  }

  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background-color: #F57C00;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, transform 0.2s ease;
  }
  .mobile-menu-btn:active { transform: scale(0.94); }

  /* A clearly-labelled close action inside the open panel itself, so
     dismissing the menu doesn't rely on the person noticing the hamburger
     icon changed to an X, or knowing to tap the darkened backdrop. */
  .nav-close-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
  }
  .nav-close-btn:hover,
  .nav-close-btn:active {
    border-color: #F57C00;
    color: #F57C00;
  }

   .dropdown {
      width: 100%;
   }

   /* The Pillars trigger reads as a section header (bold) rather than a
      plain link, since tapping it doesn't navigate anywhere itself — the
      chevron icon itself is defined once, shared with desktop, above. */
   .dropdown .dropbtn {
      font-weight: 600;
      width: 100%;
      justify-content: space-between;
   }
   .dropdown.active .dropbtn {
      background-color: rgba(245, 124, 0, 0.1);
      color: #F57C00;
   }

   .dropdown .dropdown-content {
      position: relative;
      width: 100%;
      border: none;
      border-radius: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      background-color: #17171a;
      transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.35s;
   }

   .dropdown .dropdown-content a {
      text-align: left;
      padding-left: 2.4rem;
      font-size: 0.92rem;
      color: #cfcfcf;
      position: relative;
   }

   /* A short connecting tick before each submenu item, so it visibly reads
      as nested under Pillars rather than another flat top-level row. */
   .dropdown .dropdown-content a::before {
      content: "";
      position: absolute;
      left: 1.6rem;
      top: 50%;
      width: 10px;
      height: 1px;
      background: #555;
   }

   .dropdown.active .dropdown-content {
      display: block;
      max-height: 400px;
      opacity: 1;
      visibility: visible;
   }
}

/* Very small screens — compact phones and browsers on smartwatch-class
   devices. Shrinks the header further and switches the nav panel to full
   width so there's no awkward sliver of page peeking out beside it. */
@media (max-width: 400px) {
  .navbar-header {
    padding: 0.5rem 0.75rem;
  }
  .logo {
    height: 2.4rem;
    width: 2.4rem;
  }
  .navbar-title {
    font-size: 0.9rem;
  }
  body .main {
    margin-top: 4.5rem;
  }
  .mobile-menu-btn {
    width: 38px;
    height: 38px;
  }
  .hamburger-line {
    width: 20px;
  }
  .nav-links {
    width: 100vw;
  }
  .nav-links a {
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
  }
}

.main{
   margin: 10.001rem 0 0 0;
   background-color: #ddd;
}

.textherobnr{
   display: block;
   padding: 0 1rem 0 1rem;
}

.block2{
   background-color: black;
}

.video-container {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 aspect ratio */
 height: 0;
 overflow: hidden;
 max-width: 100%;
 background: #000;
}
.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}

.homeblocks{
   background-color: #ddd;
   border-top: solid 0.2rem black;
   width: 100%;
   margin: 0;
}

.applynowbtn{
   background-color: #F57C00;
   border: solid 0.2rem black;
   margin-left: 3%;
   color: black;
   height: 5rem;
   width: 13rem;
   margin: 15%;
   text-align: center;
   font-size: large;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease;
   cursor: pointer;
}

.applynowbtn:hover {
   transform: translateY(-4px) scale(1.04);
   box-shadow: 0 12px 28px rgba(245, 124, 0, 0.45);
   background-color: #ff9633;
}

.applynowbtna{
   text-decoration: underline;
   color: black;
}

.applyspacebtn{
 background-image: url('img/greatghsimgforwebbbbbbb.webp'); /* Image file path */
 background-repeat: no-repeat;            /* Prevent tiling */ 
 background-size: cover;                  /* Scale to cover the element */
 background-position: center;             /* Center the image */
 background-attachment: fixed;
 display: flex;
 justify-content: center;
}

.section-wrapper{
   background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));

   width: 100%;
}

.container{
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
   background: rgba(0,0,0,0.78);
   padding: clamp(30px, 5vw, 70px);
   border-left: solid 6px #F57C00;
   border-right: solid 6px #F57C00;
   border-top: solid 6px #F57C00;
   box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

.section-header{
   text-align: center;
   padding: clamp(40px, 6vw, 80px);
}

.section-header h2{
   font-size: clamp(26px, 4vw, 46px);
   letter-spacing: 5px;
   text-transform: uppercase;
   color: #F57C00;
}

.section-header p{
   color: #ccc;
   font-size: clamp(14px, 2vw, 18px);
   margin-top: 12px;
}

.grid{
   display: grid;
   gap: clamp(20px, 3vw, 45px);
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card{
   background: rgba(25,25,25,0.95);
   border: solid 2px #F57C00;
   padding: clamp(30px, 4vw, 50px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 220px;
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background-color 0.35s ease, color 0.35s ease;
   cursor: pointer;
}

.card:hover{
   transform: translateY(-8px) scale(1.015);
   box-shadow: 0 16px 34px rgba(0,0,0,0.45);
   background: #F57C00;
   color: black;
}

.card h3{
   font-size: clamp(18px, 2vw, 24px);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 15px;
   color: #F57C00;
}

.card:hover h3{
   color: black;
}

.card p{
   font-size: clamp(13px, 1.5vw, 16px);
   line-height: 1.6;
   color: #ddd;
}

.card:hover p{
   color: black;
}

@media(max-width: 360px){
   .grid{
      grid-template-columns: 1fr;
   }
   .container{
      padding: 15px;
      min-height: auto;
   }
}


.footer {
  background-color: rgba(51, 51, 51, 0.95);
  color: #ccc;
  padding: 3rem 2rem 1rem 2rem;
  border-top: solid 1rem #F57C00;
  font-family: sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section h3 {
  color: #F57C00;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-section p,
.footer-section a {
  color: #ccc;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
}

.footer-section a:hover {
  color: black;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  border-top: solid 1px #444;
  padding-top: 1rem;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-section {
    width: 100%;
  }
}

.contact-grid {
  margin-top: 40px;
}

.contact-card {
  text-align: center;
}

.contact-link {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  background: #F57C00;
  color: black;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid black;
  transition: 0.3s ease;
}

.contact-link:hover {
  background: black;
  color: #F57C00;
  border: 2px solid #F57C00;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.contact-form input,
.contact-form textarea {
  padding: 15px;
  background: #222;
  border: 2px solid #F57C00;
  color: white;
  font-size: 16px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: white;
}

.contact-form button {
  padding: 15px;
  background: #F57C00;
  border: 2px solid black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.contact-form button:hover {
  background: black;
  color: #F57C00;
  border: 2px solid #F57C00;
}

.about-hero {
    width: 100%;
    height: 70vh;
    background: url('about-hero.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 6px solid #ff6a00;
}

.about-hero h1 {
    font-size: clamp(32px, 5vw, 60px);
    color: #ff6a00;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.7);
    padding: 20px 40px;
}


.dropdown {
   position: relative;
   display: inline-block;
}

/* Small chevron so the Pillars link visibly signals it's a dropdown, on
   both desktop (hover-revealed submenu) and mobile (tap-to-expand).
   Specificity note: `.navbar a` elsewhere sets display:block on every nav
   link, so this needs `.dropdown a.dropbtn` (not just `.dropbtn`) to win
   outright rather than relying on source order against a same-specificity
   rule. */
.dropdown a.dropbtn {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}
.dropbtn::after {
   content: "";
   width: 7px;
   height: 7px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.3s ease;
   opacity: 0.75;
}
.dropdown:hover .dropbtn::after,
.dropdown.active .dropbtn::after {
   transform: rotate(-135deg);
}

.dropdown-content {
   display: block;
   position: absolute;
   background-color: rgba(30, 30, 30, 0.98);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   min-width: 200px;
   z-index: 1000;
   border: 2px solid #F57C00;
   border-radius: 0 0 10px 10px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.dropdown-content a {
   display: block;
   padding: 12px;
   color: white;
   text-align: left;
   border-bottom: 1px solid #444;
   transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.dropdown-content a:hover {
   background-color: #F57C00;
   color: black;
   padding-left: 18px;
}


@media (min-width: 769px) {
   .dropdown:hover .dropdown-content,
   .dropdown-content:hover {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }
}

/* Student Life Specific Styles */

.sl-hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/campus-life-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sl-hero-content h1 {
    font-size: clamp(30px, 6vw, 60px);
    color: #F57C00;
    letter-spacing: 8px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.sl-hero-content p {
    color: white;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 20px auto;
}

/* Horizontal Scroll Gallery */
.sl-gallery-section {
    padding: 60px 0;
    background: #ddd;
    overflow: hidden;
}

.horizontal-scroll-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
}

.horizontal-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.sl-card {
    min-width: 300px;
    height: 400px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    scroll-snap-align: start;
    flex-shrink: 0;
    border: 4px solid #333;
}

.sl-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sl-card:hover img {
    transform: scale(1.1);
}

.sl-card-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #F57C00;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Info Boxes */
.sl-academic-life {
    padding-bottom: 60px;
    background: #ddd;
}

.sl-info-box {
    background: #333;
    padding: 40px;
    color: white;
    border-top: 8px solid #F57C00;
}

.orange-box {
    background: #F57C00;
    color: black;
    border-top: 8px solid #333;
}

.sl-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sl-list li::before {
    content: "✓ ";
    color: #F57C00;
    font-weight: bold;
}

.orange-box .sl-list li::before {
    color: #333;
}

.sl-tags {
    margin-top: 20px;
}

.sl-tags span {
    background: rgba(0,0,0,0.1);
    padding: 5px 10px;
    margin-right: 5px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Study Tips Section */
.sl-study-tips {
    background: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.tip-image, .tip-text {
    flex: 1;
    min-width: 350px;
}

.tip-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.tip-text {
    padding: clamp(30px, 8vw, 80px);
}

.sl-cta-btn {
    margin-top: 25px;
    padding: 15px 35px;
    background: #F57C00;
    border: 2px solid #333;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.sl-cta-btn:hover {
    background: #333;
    color: #F57C00;
}

@media (max-width: 768px) {
    .sl-card {
        min-width: 80%;
    }
}

/* TikTok Modal Core */
.tiktok-modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

.tiktok-container {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* This creates the TikTok lock-in effect */
    scrollbar-width: none;
}

.tiktok-container::-webkit-scrollbar {
    display: none;
}

/* Individual Full-Screen Slide */
.tiktok-slide {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.tiktok-slide img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Captions & Branding */
.tiktok-overlay {
    position: absolute;
    bottom: 50px;
    left: 20px;
    right: 20px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.tiktok-overlay h3 {
    color: #F57C00;
    font-size: 2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.tiktok-overlay p {
    font-size: 1.1rem;
    max-width: 80%;
}

/* UI Elements */
.close-tiktok {
    position: fixed;
    top: 20px;
    right: 25px;
    color: #F57C00;
    font-size: 50px;
    font-weight: bold;
    z-index: 3100;
    cursor: pointer;
}

.tiktok-hint {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* Academics Styling */
.acad-hero {
    height: 50vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/classroom-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.curr-overview { padding: 60px 20px; background: white; }

.curr-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.stat-box {
    background: #333;
    color: #F57C00;
    padding: 30px;
    text-align: center;
    width: 200px;
    border-bottom: 5px solid #F57C00;
}

/* Subject Hub Layout */
.subject-hub {
    display: flex;
    max-width: 1400px;
    margin: 40px auto;
    background: #eee;
    min-height: 700px;
    border: 2px solid #333;
}

.subject-sidebar {
    width: 300px;
    background: #333;
    padding: 20px;
}

.subject-sidebar h3 { color: #F57C00; margin-bottom: 20px; }

.sub-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #444;
    transition: 0.3s;
}

.sub-btn:hover, .sub-btn.active {
    background: #F57C00;
    color: black;
    font-weight: bold;
}

.subject-display {
    flex: 1;
    background: white;
    padding: 40px;
}

.subject-header-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}

.subject-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.subject-meta {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px;
    background: #f9f9f9;
    border-left: 5px solid #F57C00;
}

/* Educator Profiles */
.educator-profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ed-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #eee;
    border-radius: 50px 10px 10px 50px;
}

.ed-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F57C00;
}

.ed-card h4 { margin: 0; font-size: 0.9rem; }
.ed-card p { margin: 0; font-size: 0.8rem; color: #666; }

@media (max-width: 900px) {
    .subject-hub { flex-direction: column; }
    .subject-sidebar { width: 100%; }
}

/* Academics Styling */
.acad-hero {
    height: 50vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('img/classroom-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.curr-overview { padding: 60px 20px; background: white; }

.curr-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.stat-box {
    background: #333;
    color: #F57C00;
    padding: 30px;
    text-align: center;
    width: 200px;
    border-bottom: 5px solid #F57C00;
}

/* Subject Hub Layout */
.subject-hub {
    display: flex;
    max-width: 1400px;
    margin: 40px auto;
    background: #eee;
    min-height: 700px;
    border: 2px solid #333;
}

.subject-sidebar {
    width: 300px;
    background: #333;
    padding: 20px;
}

.subject-sidebar h3 { color: #F57C00; margin-bottom: 20px; }

.sub-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: none;
    color: white;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid #444;
    transition: 0.3s;
}

.sub-btn:hover, .sub-btn.active {
    background: #F57C00;
    color: black;
    font-weight: bold;
}

.subject-display {
    flex: 1;
    background: white;
    padding: 40px;
}

.subject-header-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
}

.subject-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.subject-meta {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 15px;
    background: #f9f9f9;
    border-left: 5px solid #F57C00;
}

/* Educator Profiles */
.educator-profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.ed-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #eee;
    border-radius: 50px 10px 10px 50px;
}

.ed-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F57C00;
}

.ed-card h4 { margin: 0; font-size: 0.9rem; }
.ed-card p { margin: 0; font-size: 0.8rem; color: #666; }

@media (max-width: 900px) {
    .subject-hub { flex-direction: column; }
    .subject-sidebar { width: 100%; }
}

/* Academics Core */
.acad-hero {
    height: 40vh;
    background: url('img/acad-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 10px solid #F57C00;
}
.hero-overlay { background: rgba(0,0,0,0.7); padding: 30px; text-align: center; width: 100%; }
.hero-overlay h1 { color: #F57C00; font-size: clamp(2rem, 5vw, 4rem); margin: 0; }
.hero-overlay p { color: white; letter-spacing: 2px; }

.acad-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* Curriculum Cards */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-card { background: #444; color: white; padding: 30px; border-left: 5px solid #F57C00; }
.orange-card { background: #F57C00; color: #333; border-left: 5px solid #333; }

/* Subject Grid */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.sub-card {
    height: 200px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 3px solid #333;
    transition: 0.3s;
}
.sub-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.sub-card:hover img { transform: scale(1.1); }
.sub-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(245, 124, 0, 0.9);
    color: black;
    padding: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

/* THE FULL SCREEN SUBJECT PAGE */
.subject-page-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #f4f4f4;
    z-index: 9999;
    display: none; /* Hidden until clicked */
    overflow-y: auto;
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.close-page {
    position: fixed;
    top: 20px; right: 20px;
    background: #333; color: #F57C00;
    border: none; padding: 10px 20px;
    font-weight: bold; cursor: pointer; z-index: 10001;
}

/* Subject Page Content Styling */
.subject-page-header { height: 400px; width: 100%; overflow: hidden; position: relative; }
.subject-page-header img { width: 100%; height: 100%; object-fit: cover; }

.subject-main-content {
    max-width: 900px;
    margin: -50px auto 50px auto;
    background: white;
    padding: 40px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.subject-main-content h2 { color: #F57C00; border-bottom: 3px solid #333; padding-bottom: 10px; }

/* Educators Section */
.educator-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}
.ed-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #eee;
    padding: 10px 20px;
    border-radius: 50px;
}
.ed-profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F57C00;
}
.ed-info h4 { margin: 0; font-size: 0.9rem; }
.ed-info p { margin: 0; font-size: 0.7rem; color: #666; text-transform: uppercase; }

@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; }
    .subject-main-content { margin: 0; width: 100%; }
}
/* ============================================================
   NOTICES & EVENTS BOARD (notices.html)
   ============================================================ */
.notice-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}
.notice-filter-btn {
    background: transparent;
    border: 2px solid #F57C00;
    color: #F57C00;
    padding: 10px 22px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.25s ease;
}
.notice-filter-btn:hover { background: rgba(245, 124, 0, 0.15); }
.notice-filter-btn.active { background: #F57C00; color: black; }

.notices-grid {
    display: grid;
    gap: clamp(20px, 3vw, 35px);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.notice-card {
    background: rgba(25,25,25,0.95);
    border: solid 2px #F57C00;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notice-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.notice-card-body { padding: 22px; }
.notice-badge {
    display: inline-block;
    background: #F57C00;
    color: black;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    margin-right: 8px;
}
.notice-date { color: #ccc; font-size: 0.85rem; }
.notice-card h3 { color: #F57C00; margin: 12px 0 8px 0; }
.notice-card p { color: #ddd; font-size: 0.95rem; line-height: 1.6; }

/* Exam / Test timetable */
.notice-grade-select {
    padding: 12px 18px;
    background: #222;
    color: white;
    border: 2px solid #F57C00;
    font-size: 1rem;
}
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 15px 0;
    color: #F57C00;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    max-width: 700px;
    margin: 0 auto 30px auto;
}
.cal-weekday {
    text-align: center;
    color: #F57C00;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 6px 0;
}
.cal-cell {
    background: #222;
    color: #ddd;
    text-align: center;
    padding: 12px 0;
    cursor: pointer;
    border: 1px solid #444;
    transition: 0.2s ease;
}
.cal-cell:hover { background: #444; }
.cal-cell-empty { background: transparent; border: none; cursor: default; }
.cal-cell-active {
    background: #F57C00;
    color: black;
    font-weight: bold;
    border-color: #F57C00;
}
.timetable-list { max-width: 700px; margin: 0 auto; }
.timetable-day-card {
    border: 2px solid #F57C00;
    background: rgba(25,25,25,0.95);
    margin: 12px 0;
    padding: 18px 22px;
    color: #ddd;
}
.timetable-day-card h3 { color: #F57C00; margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px; }
.notice-details-box {
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    background: #222;
    color: white;
    padding: 20px;
    border-top: 5px solid #F57C00;
    z-index: 500;
    max-height: 40vh;
    overflow-y: auto;
}

/* ============================================================
   NEW PAGES: Pillars / Production / Directory
   ============================================================ */
.pillar-link-btn {
    display: inline-block;
    background: #F57C00;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 14px 30px;
    border: 2px solid black;
    transition: 0.3s ease;
}
.pillar-link-btn:hover { background: black; color: #F57C00; border-color: #F57C00; }

.directory-grid { margin-top: 20px; }
.directory-card { text-align: center; align-items: center; cursor: default; }
.directory-card:hover { transform: none; box-shadow: none; background: rgba(25,25,25,0.95); color: inherit; }
.directory-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #F57C00;
    margin: 0 auto 15px auto;
}
.directory-card h3 { margin-bottom: 4px; }
.directory-subjects { color: #999 !important; font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================
   ADMIN — SECRET GATE (login/setup modal on public pages)
   ============================================================ */
.admin-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.admin-gate-box {
    position: relative;
    background: #222;
    border: 2px solid #F57C00;
    padding: 40px clamp(24px, 5vw, 50px);
    width: 100%;
    max-width: 420px;
    color: #ddd;
}
.admin-gate-box h2 {
    color: #F57C00;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    text-align: center;
}
.admin-gate-box p { line-height: 1.6; font-size: 0.9rem; }
.admin-gate-close {
    position: absolute;
    top: 10px; right: 14px;
    background: none;
    border: none;
    color: #999;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
}
.admin-gate-close:hover { color: #F57C00; }
.admin-gate-error { color: #ff6a6a; font-size: 0.85rem; min-height: 1.2em; }
#adminGateContent form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
#adminGateContent input {
    padding: 13px;
    background: #111;
    border: 2px solid #F57C00;
    color: white;
    font-size: 15px;
}
#adminGateContent input:focus { outline: none; border-color: white; }

/* ============================================================
   ADMIN PANEL (admin.html)
   ============================================================ */
.admin-body { background: #1a1a1a; font-family: sans-serif; margin: 0; }

.admin-loading-full { color: #ddd; text-align: center; padding: 100px 20px; }

.admin-shell { max-width: 1100px; margin: 0 auto; padding: 30px 20px 80px 20px; }
.admin-shell-narrow { max-width: 440px; margin: 80px auto; padding: 40px clamp(24px, 5vw, 50px); background: #222; border: 2px solid #F57C00; color: #ddd; }
.admin-shell-narrow h1 { color: #F57C00; text-align: center; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 1px; }
.admin-shell-narrow p { line-height: 1.6; font-size: 0.9rem; }
.admin-back-link { color: #999; font-size: 0.85rem; text-decoration: none; }
.admin-back-link:hover { color: #F57C00; }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 3px solid #F57C00;
    padding-bottom: 20px;
    margin-bottom: 25px;
}
.admin-header h1 { color: #F57C00; text-transform: uppercase; letter-spacing: 1px; margin: 0; font-size: 1.6rem; }
.admin-header-actions { display: flex; gap: 10px; }

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}
.admin-tab {
    background: #222;
    color: #ccc;
    border: 2px solid #444;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.2s ease;
}
.admin-tab:hover { border-color: #F57C00; color: white; }
.admin-tab.active { background: #F57C00; color: black; border-color: #F57C00; }

.admin-tab-content { background: #222; border: 2px solid #444; padding: clamp(20px, 3vw, 35px); }

.admin-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}
.admin-section-head h2 { color: #F57C00; margin: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 1.2rem; }

.admin-loading, .admin-empty { color: #999; text-align: center; padding: 30px 0; }

.admin-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.admin-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 14px 18px;
}
.admin-preview-row { display: flex; align-items: center; gap: 15px; color: #ddd; }
.admin-thumb {
    width: 60px; height: 60px;
    flex-shrink: 0;
    background: #333;
    overflow: hidden;
}
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-meta { color: #999; font-size: 0.8rem; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-list-actions { display: flex; gap: 8px; flex-shrink: 0; }

.admin-btn-primary, .admin-btn-secondary, .admin-btn-danger {
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: 0.2s ease;
}
.admin-btn-primary { background: #F57C00; color: black; }
.admin-btn-primary:hover { background: white; }
.admin-btn-primary:disabled { opacity: 0.6; cursor: default; }
.admin-btn-secondary { background: transparent; color: #ddd; border: 2px solid #666; }
.admin-btn-secondary:hover { border-color: #F57C00; color: #F57C00; }
.admin-btn-danger { background: transparent; color: #ff6a6a; border: 2px solid #663333; }
.admin-btn-danger:hover { background: #ff6a6a; color: black; border-color: #ff6a6a; }

.admin-form-wrap { margin-top: 20px; border-top: 2px dashed #444; padding-top: 25px; }
.admin-form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.admin-form h3 { color: #F57C00; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; }
.admin-form label { color: #ccc; font-size: 0.85rem; display: flex; flex-direction: column; gap: 6px; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="date"],
.admin-form select,
.admin-form textarea {
    padding: 12px;
    background: #111;
    border: 2px solid #555;
    color: white;
    font-size: 15px;
    font-family: inherit;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: #F57C00; }
.admin-checkbox-label { flex-direction: row !important; align-items: center; gap: 10px !important; }
.admin-checkbox-label input { width: auto; }
.admin-form-actions { display: flex; gap: 10px; margin-top: 5px; }
.admin-success { color: #6adb8b; font-size: 0.85rem; min-height: 1.2em; }

.admin-image-field { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.admin-image-preview {
    width: 90px; height: 90px;
    background: #111;
    border: 2px solid #555;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 0.7rem; text-align: center;
    flex-shrink: 0; overflow: hidden;
}
.admin-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-controls { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.admin-image-url { padding: 10px; background: #111; border: 2px solid #555; color: white; font-size: 13px; }
.admin-file-btn {
    display: inline-block;
    background: transparent;
    border: 2px solid #666;
    color: #ccc;
    padding: 8px 14px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
}
.admin-file-btn:hover { border-color: #F57C00; color: #F57C00; }
.admin-file-btn input[type="file"] { display: none; }

.admin-educators { display: flex; flex-direction: column; gap: 10px; }
.admin-educator-rows { display: flex; flex-direction: column; gap: 10px; }
.admin-educator-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 10px;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 10px;
}
.admin-educator-row input[type="text"] { padding: 9px; background: #111; border: 1px solid #555; color: white; font-size: 13px; }
.admin-image-field-mini { display: flex; align-items: center; gap: 8px; }
.admin-image-preview-mini {
    width: 40px; height: 40px;
    background: #111; border: 1px solid #555;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 0.55rem; overflow: hidden; flex-shrink: 0;
}
.admin-image-preview-mini img { width: 100%; height: 100%; object-fit: cover; }
.admin-file-btn-mini { padding: 6px 10px; font-size: 0.65rem; }

@media (max-width: 700px) {
    .admin-educator-row { grid-template-columns: 1fr; }
    .admin-list-row { flex-direction: column; align-items: flex-start; }
    .admin-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PER-GRADE STUDENT PASSWORD GATE (notices.html)
   ============================================================ */
.student-gate-box {
    max-width: 420px;
    margin: 20px auto;
    background: #222;
    border: 2px solid #F57C00;
    padding: 30px clamp(20px, 5vw, 40px);
    text-align: center;
}
.student-gate-box h3 { color: #F57C00; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; }
.student-gate-box p { color: #ccc; font-size: 0.9rem; line-height: 1.6; }
.student-gate-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.student-gate-box input {
    padding: 12px;
    background: #111;
    border: 2px solid #555;
    color: white;
    font-size: 15px;
    text-align: center;
}
.student-gate-box input:focus { outline: none; border-color: #F57C00; }

.type-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 15px 0 5px 0;
    font-size: 0.8rem;
    color: #ccc;
}
.type-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dots { display: block; margin-top: 3px; }
.cal-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin: 0 1px;
}
.cal-cell-active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0; }

/* ============================================================
   ADMIN — filter chips (used by the Exam & Test Dates tab) and
   the grade-password fields in Site Settings
   ============================================================ */
.admin-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.admin-filter-btn {
    background: transparent;
    border: 2px solid #555;
    color: #ccc;
    padding: 7px 14px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.admin-filter-btn:hover { border-color: #F57C00; color: #F57C00; }
.admin-filter-btn.active { background: #F57C00; border-color: #F57C00; color: black; }

.admin-form-subhead {
    color: #F57C00;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    border-top: 2px dashed #444;
    padding-top: 20px;
    margin: 5px 0 0 0;
}
.admin-form-hint { color: #999; font-size: 0.8rem; line-height: 1.5; margin: -8px 0 5px 0; }
.admin-grade-password-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

/* ============================================================
   MOTION SYSTEM — scroll-reveal (used site-wide via index.js)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   HOMEPAGE — welcome block, stats bar, announcements, photos
   ============================================================ */
.home-welcome {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 70px) 20px;
    text-align: center;
    color: #222;
}
.home-welcome h2 {
    font-size: clamp(28px, 4vw, 42px);
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.home-welcome p {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.8;
    color: #333;
    white-space: pre-line;
}

.home-youtube-wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px 40px 20px; }

.stats-bar {
    background: #111;
    border-top: 0.4rem solid #F57C00;
    border-bottom: 0.4rem solid #F57C00;
    padding: clamp(40px, 5vw, 60px) 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.stat-item .stat-value {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #F57C00;
    line-height: 1.1;
}
.stat-item .stat-label {
    display: block;
    margin-top: 8px;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
}

.home-widget-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}
@media (max-width: 850px) {
    .home-widget-grid { grid-template-columns: 1fr; }
}
.home-widget-heading {
    color: #F57C00;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2rem;
    margin-bottom: 18px;
    border-bottom: 2px solid #F57C00;
    padding-bottom: 10px;
}
.home-announce-list { display: flex; flex-direction: column; gap: 14px; }
.home-announce-item {
    display: block;
    background: rgba(255,255,255,0.04);
    border-left: 4px solid #F57C00;
    padding: 14px 18px;
    text-decoration: none;
    color: #eee;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.home-announce-item:hover { background: rgba(245,124,0,0.15); transform: translateX(6px); }
.home-announce-item .notice-badge { margin-right: 8px; }
.home-announce-item h4 { margin: 6px 0 2px 0; color: white; font-size: 1rem; }
.home-announce-item span.date { color: #999; font-size: 0.78rem; }

.home-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.home-photo-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px solid #F57C00;
}
.home-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-photo-grid a:hover img { transform: scale(1.12); }

/* ============================================================
   ADMIN — Homepage tab
   ============================================================ */
.admin-form-hint-inline { color: #999; font-size: 0.78rem; margin: -6px 0 0 0; }

/* ============================================================
   ADMIN — page enable/disable toggle buttons + preview banner
   ============================================================ */
.page-toggle-btn {
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.78rem;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.2s ease;
}
.page-toggle-btn.is-on {
    background: transparent;
    border: 2px solid #6adb8b;
    color: #6adb8b;
}
.page-toggle-btn.is-on:hover { background: #6adb8b; color: black; }
.page-toggle-btn.is-off {
    background: #ff6a6a;
    color: black;
    border: 2px solid #ff6a6a;
}
.page-toggle-btn.is-off:hover { background: transparent; color: #ff6a6a; }
.page-toggle-btn:disabled { opacity: 0.5; cursor: default; }

.admin-preview-banner {
    position: relative;
    top: 0;
    width: 100%;
    background: #ff6a6a;
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem;
    padding: 12px 20px;
    z-index: 2000;
}

/* ============================================================
   REVIEWS — public page + homepage widget
   ============================================================ */
.review-average {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 0 10px 0;
}
.review-average-number {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.6rem, 6vw, 3.6rem);
    font-weight: 800;
    color: #F57C00;
    line-height: 1;
}
.review-average-stars { color: #F57C00; font-size: 1.6rem; letter-spacing: 2px; }
.review-average-count { color: #ccc; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}
.review-card {
    background: rgba(25,25,25,0.95);
    border: 2px solid #F57C00;
    padding: 28px;
}
.review-card-stars { color: #F57C00; letter-spacing: 2px; margin-bottom: 10px; }
.review-card-text { color: #eee; font-style: italic; line-height: 1.7; }
.review-card-name { color: #F57C00; font-weight: bold; margin-top: 14px; text-align: right; }

.review-form-label { color: #ccc; font-size: 0.9rem; }
.star-picker {
    display: inline-flex;
    gap: 6px;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
}
.star-picker span { color: #555; transition: color 0.15s ease, transform 0.15s ease; }
.star-picker span:hover, .star-picker span.filled { color: #F57C00; transform: scale(1.12); }

/* Honeypot — visually hidden from real visitors (not display:none, which
   some bots specifically check for and skip) but still present in the DOM
   and reachable by anything filling every field programmatically. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   ADMIN — review moderation
   ============================================================ */
.admin-review-row { align-items: flex-start; }
.review-status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    margin-right: 10px;
}
.review-status-badge.status-pending { background: #F57C00; color: black; }
.review-status-badge.status-approved { background: #6adb8b; color: black; }
.review-status-badge.status-rejected { background: #ff6a6a; color: black; }
.admin-review-stars { color: #F57C00; letter-spacing: 1px; }
.admin-review-text { color: #ddd; font-style: italic; margin: 8px 0 4px 0; max-width: 500px; }

/* ============================================================
   NAV — tighten spacing at medium desktop widths now that there
   are more top-level items, so it doesn't wrap awkwardly before
   the hamburger breakpoint kicks in.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1150px) {
  .navbar a { padding: 14px 10px; font-size: 0.85rem; }
}

/* ============================================================
   VIRTUAL TOUR
   ============================================================ */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}
.tour-card {
    position: relative;
    height: 200px;
    overflow: hidden;
    border: 2px solid #F57C00;
    cursor: pointer;
}
.tour-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-card:hover img { transform: scale(1.1); }
.tour-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #F57C00;
    color: black;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
}
.tour-card-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    padding: 30px 16px 14px 16px;
}
.tour-card-caption h4 { color: white; margin: 6px 0 0 0; font-size: 1rem; }

.tour-viewer-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tour-viewer-stage {
    position: relative;
    width: min(1100px, 90vw);
    height: min(60vh, 600px);
    background: #111;
}
.tour-flat-fallback { width: 100%; height: 100%; object-fit: contain; display: block; }
.tour-fallback-note { color: #ccc; text-align: center; font-size: 0.8rem; margin-top: 8px; }
.tour-viewer-info { width: min(1100px, 90vw); text-align: center; color: #eee; margin-top: 18px; }
.tour-viewer-counter { color: #F57C00; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.tour-viewer-info h3 { margin: 6px 0; }
.tour-viewer-info p { color: #ccc; max-width: 700px; margin: 0 auto; }
.tour-viewer-close {
    position: absolute;
    top: 20px; right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
}
.tour-viewer-close:hover { color: #F57C00; }
.tour-nav-btn {
    background: rgba(245,124,0,0.85);
    border: none;
    color: black;
    font-size: 1.6rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 15px;
    transition: 0.2s ease;
}
.tour-nav-btn:hover { background: white; }
@media (max-width: 700px) {
    .tour-viewer-modal { flex-direction: column; }
    .tour-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; }
    .tour-nav-prev { left: 10px; }
    .tour-nav-next { right: 10px; }
}

/* ============================================================
   PAST PAPERS
   ============================================================ */
.paper-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}
.paper-filters input,
.paper-filters select {
    padding: 12px;
    background: #222;
    border: 2px solid #F57C00;
    color: white;
    font-size: 0.9rem;
}
.papers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.paper-card {
    display: block;
    background: rgba(25,25,25,0.95);
    border: 2px solid #F57C00;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.paper-card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(245, 124, 0, 0.25); }
.paper-type-badge {
    display: inline-block;
    background: #F57C00;
    color: black;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
}
.paper-card h4 { margin: 12px 0 6px 0; }
.paper-download-link { display: inline-block; margin-top: 12px; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }

/* ============================================================
   SPONSORS (About page section)
   ============================================================ */
.sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: center;
}
.sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #ddd;
    width: 160px;
    transition: transform 0.3s ease;
}
.sponsor-card:hover { transform: translateY(-5px); }
.sponsor-card img {
    width: 130px;
    height: 90px;
    object-fit: contain;
    background: white;
    padding: 10px;
    border: 2px solid #F57C00;
}
.sponsor-card span { font-size: 0.85rem; text-align: center; }

/* ============================================================
   ACCESSIBILITY — skip link
   ============================================================ */
.skip-link {
    position: absolute;
    top: -60px;
    left: 10px;
    background: #F57C00;
    color: black;
    font-weight: bold;
    padding: 12px 20px;
    z-index: 5000;
    transition: top 0.2s ease;
    text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* ============================================================
   CARD IMAGES — the original .card rules never constrained <img>
   sizing, which was fine while every image was hand-picked, but
   now that admin-uploaded photos of any dimension can land inside
   a .card (About Content, Houses, Activities & Clubs), give them
   a consistent, well-behaved size.
   ============================================================ */
.card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 16px;
    border: 2px solid #F57C00;
}
.activity-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.activity-card .notice-badge { margin-bottom: 10px; }

/* ============================================================
   ACTIVITIES & CLUBS grid
   ============================================================ */
#activitiesGrid.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ============================================================
   ACADEMICS — subject search bar
   ============================================================ */
.subject-search-wrap { max-width: 480px; margin: 0 auto 35px auto; }
.subject-search-input {
    width: 100%;
    padding: 14px 20px;
    background: #111;
    border: 2px solid #555;
    color: white;
    font-size: 15px;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.2s ease;
}
.subject-search-input:focus { outline: none; border-color: #F57C00; }
.subject-search-input::placeholder { color: #888; }

/* ============================================================
   ADMIN — additions for archive/schedule/featured/multi-image/
   house points/color dot (Initiatives, Partnerships, Productions,
   Houses, House Points, extended Past Papers)
   ============================================================ */
.admin-featured-badge {
    display: inline-block;
    background: #F57C00;
    color: black;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    margin-right: 8px;
}
.admin-schedule-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    margin-right: 8px;
    border: 1px solid #666;
    color: #ccc;
}
.admin-schedule-scheduled { border-color: #4FC3F7; color: #4FC3F7; }
.admin-schedule-expired { border-color: #ff6a6a; color: #ff6a6a; }

.admin-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.admin-form input[type="datetime-local"] {
    padding: 12px;
    background: #111;
    border: 2px solid #555;
    color: white;
    font-size: 15px;
    font-family: inherit;
}
.admin-form input[type="datetime-local"]:focus { outline: none; border-color: #F57C00; }

.admin-multi-image-field { display: flex; flex-direction: column; gap: 12px; }
.admin-multi-image-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-multi-image-thumb { position: relative; width: 70px; height: 70px; flex-shrink: 0; }
.admin-multi-image-thumb img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #555; display: block; }
.admin-multi-image-remove {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px;
    background: #ff6a6a; color: black;
    border: none; border-radius: 50%;
    font-weight: bold; cursor: pointer;
    line-height: 1;
}
.admin-multi-image-remove:hover { background: white; }
.admin-multi-image-empty { color: #666; font-size: 0.8rem; }

.admin-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(255,255,255,0.3); }

.admin-housepoints-passbox {
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 20px;
    margin-bottom: 25px;
}
.admin-housepoints-gate {
    background: #1a1a1a;
    border: 2px solid #F57C00;
    padding: 20px;
    max-width: 420px;
}
.admin-housepoints-gate form { display: flex; flex-direction: column; gap: 12px; }
.admin-housepoints-gate input[type="password"] { padding: 12px; background: #111; border: 2px solid #555; color: white; font-size: 15px; }

.admin-standings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 25px; }
.admin-standing-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    border: 1px solid #444;
    padding: 12px 16px;
}
.admin-standing-rank { color: #F57C00; font-weight: bold; width: 34px; }
.admin-standing-points { margin-left: auto; color: #ddd; font-weight: bold; }

.admin-hp-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-hp-input { width: 80px; padding: 8px; background: #111; border: 2px solid #555; color: white; font-size: 14px; text-align: center; }

@media (max-width: 700px) {
    .admin-hp-controls { width: 100%; justify-content: space-between; }
}

/* ============================================================
   NOTICES — richer cards, featured layout, image gallery
   ============================================================ */
.notice-card { position: relative; }
.notice-card.notice-card-featured {
    border-color: #F57C00;
    box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.25);
}
.notice-featured-flag {
    position: absolute;
    top: 12px; right: 12px;
    background: #F57C00;
    color: black;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    z-index: 2;
}
.notices-grid.notices-grid-with-featured { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.notice-card-featured-large {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 1.3fr;
    gap: 0;
}
.notice-card-featured-large img { width: 100%; height: 100%; min-height: 220px; }
@media (max-width: 700px) {
    .notice-card-featured-large { grid-template-columns: 1fr; }
    .notice-card-featured-large img { min-height: 180px; }
}
.notice-card-gallery {
    display: flex;
    gap: 6px;
    padding: 0 22px 18px 22px;
    overflow-x: auto;
}
.notice-card-gallery img {
    width: 64px; height: 64px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #444;
    cursor: pointer;
}
.notice-card-gallery img:hover { border-color: #F57C00; }

/* Notices nav button — a small distinctive treatment allowed to stand out,
   per the brief, without touching the homepage layout itself. */
.nav-links a[href="notices.html"] {
    position: relative;
}
.nav-links a[href="notices.html"]::after {
    content: "";
    position: absolute;
    bottom: -4px; left: 0;
    width: 100%; height: 2px;
    background: #F57C00;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}
.nav-links a[href="notices.html"]:hover::after,
.nav-links a[href="notices.html"]#active::after { transform: scaleX(1); }

/* ============================================================
   HOMEPAGE — subtle featured-notice strip (opt-in, one line,
   sits inside the existing "What's Happening" widget area; never
   a banner/carousel, never changes the hero or overall layout)
   ============================================================ */
.home-featured-strip {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding: 10px clamp(20px, 5vw, 40px);
    background: rgba(245, 124, 0, 0.08);
    border-left: 3px solid #F57C00;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #ddd;
    text-decoration: none;
}
.home-featured-strip:hover { background: rgba(245, 124, 0, 0.15); }
.home-featured-strip .notice-badge { flex-shrink: 0; }
.home-featured-strip span.hfs-label { color: #F57C00; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem; flex-shrink: 0; }

/* ============================================================
   INITIATIVES & PARTNERSHIPS pages
   ============================================================ */
.initiative-card, .partnership-card {
    background: rgba(25,25,25,0.95);
    border: solid 2px #F57C00;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.initiative-card:hover, .partnership-card:hover { transform: translateY(-6px); }
.initiative-card img, .partnership-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}
.partnership-card img { object-fit: contain; background: white; padding: 14px; height: 130px; }
.initiative-card-body, .partnership-card-body { padding: 20px 22px; }
.initiative-card h3, .partnership-card h3 { color: #F57C00; margin: 10px 0 8px 0; font-size: 1.1rem; }
.initiative-card p, .partnership-card p { color: #ddd; font-size: 0.9rem; line-height: 1.55; }
.initiative-filters, .partnership-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 3000;
    overflow-y: auto;
    padding: 40px 20px;
}
.detail-overlay-content {
    max-width: 800px;
    margin: 0 auto;
    background: #1a1a1a;
    border: 2px solid #F57C00;
    padding: clamp(24px, 4vw, 50px);
}
.detail-overlay-content img.detail-main-img { width: 100%; max-height: 400px; object-fit: cover; border: 2px solid #F57C00; margin-bottom: 20px; }
.detail-overlay-content h2 { color: #F57C00; margin: 0 0 10px 0; }
.detail-overlay-content p { color: #ddd; line-height: 1.7; }
.detail-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.detail-gallery img { width: 110px; height: 110px; object-fit: cover; border: 1px solid #555; cursor: pointer; }
.detail-close-btn {
    display: block;
    margin: 0 0 20px auto;
    background: transparent;
    border: 2px solid #666;
    color: #ccc;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: bold;
}
.detail-close-btn:hover { border-color: #F57C00; color: #F57C00; }

/* ============================================================
   PRODUCTION & EVENTS page — event cards + poster detail view
   ============================================================ */
.event-card {
    background: rgba(25,25,25,0.95);
    border: solid 2px #F57C00;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}
.event-card:hover { transform: translateY(-6px); }
.event-card img { width: 100%; height: 220px; object-fit: cover; }
.event-card-body { padding: 20px 22px; }
.event-card h3 { color: #F57C00; margin: 10px 0 8px 0; }
.event-card p { color: #ddd; font-size: 0.9rem; line-height: 1.6; }
.event-card .event-featured-flag {
    position: absolute;
    top: 12px; left: 12px;
    background: #F57C00;
    color: black;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    z-index: 2;
}
.events-grid { display: grid; gap: clamp(20px, 3vw, 35px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================================
   HOUSES / HOUSE POINTS — public standings widget (password-gated)
   ============================================================ */
.house-standings-box {
    max-width: 500px;
    margin: 30px auto 0 auto;
    background: rgba(25,25,25,0.95);
    border: 2px solid #F57C00;
    padding: clamp(24px, 4vw, 40px);
}
.house-standing-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #333;
    color: #ddd;
}
.house-standing-row:last-child { border-bottom: none; }
.house-standing-rank {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #333;
    color: #F57C00;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}
.house-standing-row:nth-child(1) .house-standing-rank { background: #F57C00; color: black; }
.house-standing-name { font-weight: bold; flex: 1; }
.house-standing-points { color: #F57C00; font-weight: bold; }
.house-color-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 4px; border: 1px solid rgba(255,255,255,0.3); }

.house-card-history { margin-top: 12px; padding-top: 12px; border-top: 1px solid #444; font-size: 0.85rem; color: #ccc; }
.house-card-captains { margin-top: 8px; font-size: 0.8rem; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================
   PAST PAPERS — preview modal for uploaded PDFs/images
   ============================================================ */
.paper-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 3000;
    padding: 30px 20px;
}
.paper-preview-box {
    max-width: 900px;
    height: calc(100% - 60px);
    margin: 0 auto;
    background: #1a1a1a;
    border: 2px solid #F57C00;
    display: flex;
    flex-direction: column;
}
.paper-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 2px solid #F57C00;
}
.paper-preview-header h3 { color: #F57C00; margin: 0; font-size: 1rem; }
.paper-preview-body { flex: 1; overflow: auto; }
.paper-preview-body iframe { width: 100%; height: 100%; border: none; background: white; }
.paper-preview-body img { width: 100%; height: auto; display: block; }
.paper-preview-body .paper-no-preview { color: #ccc; text-align: center; padding: 60px 20px; }
.paper-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.paper-preview-link, .paper-download-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}