@import "tailwindcss";

@theme {
  /* Dominant Neutral Background (~70% visual space) */
  --color-cream-bg: #F3EBDD;
  --color-cream-soft: #FBF8F2;

  /* Primary Brand (UP Maroon - PANTONE 1955C #7B1113) */
  --color-maroon-dark: #4D0A0C;
  --color-maroon-base: #7B1113;
  --color-maroon-hover: #911618;
  --color-maroon-light: #A81B1F;
  --color-red-base: #7B1113;
  --color-red-card: #7B1113;

  /* Secondary Brand (Forest Green - PANTONE 7484C #014421) */
  --color-green-dark: #002B15;
  --color-green-base: #014421;
  --color-green-hover: #0D5D30;
  --color-green-light: #1B733F;

  /* Accent Brand (University Gold - PANTONE 1235C #D4A017 / #F2A900) */
  --color-gold-base: #D4A017;
  --color-gold-hover: #BF8E0F;
  --color-gold-deep: #8E5E0B;
  --color-gold-light: #F4E7C0;

  /* Neutrals & Text (Spot Black & Warm Grays) */
  --color-ink-base: #26231F;
  --color-ink-muted: #5A554D;
  --color-ink-subtle: #4B4640;
  --color-border-card: #DDD2C2;

  /* UP Authorized Typeface System:
     - Titles & Headings: Arsenal / Libertinus Sans
     - Official Body Text: Source Serif 4 / Libre Baskerville
     - Unofficial Body Text & Materials: Source Sans 3 / Open Sans / Roboto
     - Unofficial Headings & Materials: Style Script / MonteCarlo
     - Official Logotype: Padayon / Arsenal
  */
  --font-heading: "Arsenal", "Libertinus Sans", sans-serif;
  --font-title: "Arsenal", "Libertinus Sans", sans-serif;
  --font-serif: "Arsenal", "Libertinus Sans", sans-serif;
  --font-sans: "Source Sans 3", "Open Sans", Roboto, sans-serif;
  --font-official-serif: "Source Serif 4", "Libre Baskerville", Georgia, serif;
  --font-script: "Style Script", "MonteCarlo", cursive;
  --font-logotype: "Padayon", "Arsenal", sans-serif;
}

/* Base resets & utilities */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  overflow-x: clip;
}

/* ============================================================
   SMOOTH SCROLL ANIMATIONS & REVEAL SYSTEM
   ============================================================ */

/* Reading Scroll Progress Bar */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #C99A24, #F4E7C0, #C99A24);
  background-size: 200% 100%;
  z-index: 9999;
  transition: width 0.25s cubic-bezier(0.2, 0.8, 0.4, 1);
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(201, 154, 36, 0.5);
}

/* Smooth Scroll-Triggered Reveal Classes (Gentle, Slower & Silky Smooth) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from left/right variants */
.reveal-slide-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-slide-left.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-slide-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for grid items (smooth, relaxed cascaded reveal) */
.stagger-1 { transition-delay: 0.12s; }
.stagger-2 { transition-delay: 0.22s; }
.stagger-3 { transition-delay: 0.32s; }
.stagger-4 { transition-delay: 0.42s; }
.stagger-5 { transition-delay: 0.52s; }
.stagger-6 { transition-delay: 0.62s; }

/* Sticky Header Elevation & Auto-Hide on Scroll */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.35s ease !important;
  will-change: transform;
}

header.is-scrolled {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.28);
}

header.header-hidden {
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

/* Floating Back to Top Button */
#back-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 9999px;
  background-color: #5A0A0D;
  color: #C99A24;
  border: 1.5px solid #C99A24;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              color 0.25s ease,
              box-shadow 0.25s ease;
  z-index: 90;
}

#back-to-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#back-to-top-btn:hover {
  background-color: #C99A24;
  color: #5A0A0D;
  border-color: #F4E7C0;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 20px rgba(201, 154, 36, 0.4);
}

#back-to-top-btn:active {
  transform: translateY(0) scale(0.95);
}

@media (max-width: 640px) {
  #back-to-top-btn {
    bottom: 1rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  }
  #back-to-top-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll,
  .reveal-slide-left,
  .reveal-slide-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #back-to-top-btn {
    transition: none !important;
  }
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream-bg);
  color: var(--color-ink-base);
  margin: 0;
  overflow-x: clip;
}

/* UP Authorized Typography Hierarchy */
h1, h2, h3, h4, h5, h6, .font-heading, .font-title, .font-serif {
  font-family: var(--font-heading);
}

.font-official-body, .official-body, .font-source-serif, .font-libre-baskerville {
  font-family: var(--font-official-serif) !important;
}

.font-script, .font-style-script, .font-montecarlo {
  font-family: var(--font-script) !important;
}

.font-logotype, .official-logotype {
  font-family: var(--font-logotype) !important;
}

/* Ensure crisp white text on buttons and dark elements */
.text-white, a.text-white, a.text-white span, button.text-white {
  color: #ffffff !important;
}

/* Custom brand insignia rings */
.brand-mark-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 154, 36, 0.6);
  border-radius: 9999px;
}

/* ============================================================
   NAVIGATION STYLING (DESKTOP & MOBILE DROPDOWN)
   - White text
   - Gold exclusively for active indicator and active text
   - Clean hover states
============================================================ */

/* Desktop Navigation Links */
.nav-link {
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.nav-link:hover {
  color: #C99A24;
}

.nav-link.active {
  color: #C99A24 !important;
  font-weight: 600;
  white-space: nowrap;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: #C99A24;
}

/* Mobile Dropdown Navigation Links */
.mobile-nav-link {
  color: rgba(255, 255, 255, 0.9);
  background-color: transparent;
  border-left: 3px solid transparent;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s ease;
}

.mobile-nav-link:hover {
  color: #C99A24;
  background-color: rgba(255, 255, 255, 0.05);
}

.mobile-nav-link.active {
  color: #C99A24 !important;
  background-color: rgba(201, 154, 36, 0.12);
  border-left: 3px solid #C99A24;
  font-weight: 700;
}

.mobile-nav-link svg {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}

.mobile-nav-link:hover svg,
.mobile-nav-link.active svg {
  color: #C99A24;
}

/* ============================================================
   DROPDOWN BOX & ITEM HOVER ENHANCEMENTS
============================================================ */

/* Maintain parent nav-link gold hover state while hovering inside its dropdown box */
.group\/dropdown:hover > .nav-link {
  color: #C99A24 !important;
}

.group\/dropdown:hover > .nav-link svg {
  color: #C99A24 !important;
}

/* Dropdown Menu Panel Box Entrance & Hover */
.dropdown-panel-box {
  transform: translateY(6px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.group\/dropdown:hover .dropdown-panel-box {
  transform: translateY(0);
}

.dropdown-link-item {
  position: relative;
  border-left: 2.5px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-link-item:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-left-color: #C99A24;
  padding-left: 0.85rem !important;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-link-item:hover .dropdown-item-title {
  color: #C99A24;
}

.dropdown-link-item:hover .dropdown-item-desc {
  color: rgba(255, 255, 255, 0.95);
}

.dropdown-link-item:hover .dropdown-item-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
  color: #C99A24;
}

/* =========================================================
   ANIMATED SEARCH MODAL STYLES (Smooth & Gentle Transitions)
========================================================= */
#search-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

#search-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#search-modal .search-dialog-card {
  opacity: 0;
  transform: translateY(-26px) scale(0.95);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
  will-change: transform, opacity;
}

#search-modal.is-open .search-dialog-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.search-result-item {
  transition: background-color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.search-result-item:hover,
.search-result-item.is-selected {
  background-color: #F8F3EA;
  border-color: #C99A24;
  transform: translateX(4px);
}

mark.search-highlight {
  background-color: rgba(212, 160, 23, 0.25);
  color: #7B1113;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

/* Office Location Info (Interactive hover effect without map link) */
.office-location-info {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.office-location-info:hover .office-location-title {
  color: var(--color-gold-base) !important;
}

.office-location-info:hover .office-location-text {
  color: var(--color-gold-light) !important;
}

.office-location-info:hover .office-location-icon {
  transform: scale(1.12);
  color: var(--color-gold-light) !important;
}

/* Article Reader Modal Animations */
#article-modal {
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#article-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#article-modal .article-dialog-card {
  opacity: 0;
  transform: translateY(-20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
  will-change: transform, opacity;
}

#article-modal.is-open .article-dialog-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Activity Registration & Booking Modal Animations */
#booking-modal {
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#booking-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#booking-modal .booking-dialog-card {
  opacity: 0;
  transform: translateY(-20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
  will-change: transform, opacity;
}

#booking-modal.is-open .booking-dialog-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}