/* ====================== COLOUR SCHEME ====================== */

:root {
  --primary-yellow: #facc15;

  --sky-gradient:
    linear-gradient(135deg,
      #0c4a6e 0%,
      #0891b2 45%,
      #22d3ee 100%);

  --bg-color: #f5f7fb;
  --text-color: #0f172a;

  --soft-text: #64748b;
  --footer-text: #64748b;

  --border-color: #e2e8f0;

  --card-bg: #ffffff;
  --header-bg: rgba(255,255,255,0.88);
}

.dark {
  --bg-color: #020617;
  --text-color: #f1f5f9;

  --soft-text: #94a3b8;
  --footer-text: #94a3b8;

  --border-color: #334155;

  --card-bg: #111827;
  --header-bg: rgba(2,6,23,0.86);
}

/* ====================== GENERAL ====================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-color);
  color: var(--text-color);

  transition:
    background-color 0.3s ease,
    color 0.3s ease;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.soft-text {
  color: var(--soft-text);
}

.footer-text {
  color: var(--footer-text);
}

/* ====================== HEADER ====================== */

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;

  background: var(--header-bg);

  border-bottom: 1px solid var(--border-color);

  backdrop-filter: blur(14px);

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

@media (min-width: 1024px) {
  #site-header {
    transform: none !important;
  }
}

/* ====================== BRAND ====================== */

.brand-link {
  color: inherit;

  text-decoration: none;

  font-weight: 700;

  display: flex;
  align-items: center;

  gap: 0.75rem;

  transition: color 0.2s ease;
}

.brand-link:hover {
  color: var(--primary-yellow);
}

.brand-link.current,
.brand-link.current .brand-text {
  color: var(--primary-yellow) !important;
}

.brand-text {
  position: relative;
  display: inline-block;
}

/* Animated underline ONLY for non-active pages */

.brand-text::after {
  content: '';

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 3px;

  background-color: var(--primary-yellow);

  transform: scaleX(0.15);
  transform-origin: left;

  opacity: 0;

  transition:
    transform 0.22s ease,
    opacity 0.18s ease;
}

.brand-link:hover .brand-text::after {
  transform: scaleX(1);
  opacity: 1;
}

/* No underline when homepage is active */

.brand-link.current .brand-text::after {
  display: none;
}

/* ====================== DESKTOP NAV ====================== */

nav {
  align-items: baseline;
}

nav a {
  position: relative;

  display: inline-flex;
  align-items: baseline;
}

.nav-link {
  line-height: 1.2;
  
  color: inherit;

  text-decoration: none;

  font-weight: 500;

  position: relative;

  padding-bottom: 2px;

  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.nav-link:hover {
  color: var(--primary-yellow);
}

/* Simple underline */

.nav-link::after {
  content: '';

  position: absolute;

  left: 0;
  bottom: -3px;

  width: 100%;
  height: 2px;

  background-color: var(--primary-yellow);

  opacity: 0;

  transition: opacity 0.15s ease;
}

.nav-link:hover::after,
.nav-link.current::after {
  opacity: 1;
}

.nav-link.current {
  color: var(--primary-yellow);
}

/* ====================== MOBILE MENU ====================== */

.mobile-menu {
  position: absolute;

  top: 100%;
  right: 0.75rem;

  width: 280px;

  margin-top: 8px;

  background: var(--card-bg);

  border: 1px solid var(--border-color);

  border-radius: 18px;

  overflow: hidden;

  z-index: 100;

  backdrop-filter: blur(12px);

  box-shadow:
    0 18px 30px -12px rgb(0 0 0 / 0.28),
    0 8px 10px -6px rgb(0 0 0 / 0.12);
}

.mobile-menu a {
  display: block;           /* links stay as block */
  width: 100%;
  padding: 12px 20px;
}

.mobile-menu button {
  display: flex;            /* buttons become flex */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  text-align: left;
  justify-content: flex-start;
}

.mobile-menu a:hover,
.mobile-menu a.current,
.mobile-menu button:hover {
  color: var(--primary-yellow) !important;

  background:
    rgba(250, 204, 21, 0.12);
}

.dark .mobile-menu a:hover,
.dark .mobile-menu a.current,
.dark .mobile-menu button:hover {
  background:
    rgba(250, 204, 21, 0.20);
}

.mobile-menu > div {
  border-top: 1px solid var(--border-color);

  margin-top: 6px;

  padding: 8px 0;
}

/* ====================== HERO ====================== */

.hero {
  position: relative;

  overflow: hidden;

  background: var(--sky-gradient);

  color: white;

  padding-top: 6rem;
  padding-bottom: 6rem;
}

.hero::before {
  content: '';

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255,255,255,0.14) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 75% 65%,
      rgba(255,255,255,0.08) 0%,
      transparent 45%
    );

  pointer-events: none;
}

/* ====================== BUTTONS ====================== */
.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  border-radius: 9999px;           /* Perfectly rounded (pill shape) */
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Primary Button */
.primary-btn {
  background: white;
  color: #0f172a;
  box-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.25);
  padding: 1.25rem 2.5rem;         /* Consistent height */
}

.primary-btn:hover {
  background: var(--primary-yellow);
  color: #0f172a;
  box-shadow: 0 14px 24px -12px rgb(0 0 0 / 0.30);
  transform: translateY(-2px);     /* Nice lift effect */
}

/* Secondary Button */
.secondary-btn {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.92);
  padding: 1.25rem 2.5rem;         /* Same height as primary */
}

.secondary-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--primary-yellow);
  color: var(--primary-yellow);
  box-shadow: 0 10px 18px -12px rgb(0 0 0 / 0.20);
}

/* ====================== BENEFITS ====================== */

.benefits-grid h3 {
  line-height: 1.2;
}

.benefits-grid p {
  line-height: 1.7;
}

/* ====================== FOOTER ====================== */
footer {
  background: var(--bg-color);
  border-top: 1px solid var(--border-color) !important;
}

.footer-link {
  color: var(--footer-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--primary-yellow);
}

.footer-link.current {
  color: var(--primary-yellow);
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  opacity: 0.6;
}

@media (max-width: 640px) {
  footer .flex {
    gap-x: 10px;
    font-size: 0.97rem;
  }
}


/* ====================== MOBILE ====================== */

@media (max-width: 640px) {

  .hero {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

  .mobile-menu {
    width: calc(100vw - 1.5rem);
    max-width: 320px;
  }
}

/* ====================== BODY LINKS ====================== */

.content-link {
  color: inherit;

  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;

  text-decoration-color:
    rgba(250, 204, 21, 0.72);

  transition:
    color 0.15s ease,
    text-decoration-color 0.15s ease;
}

.content-link:hover {
  color: var(--primary-yellow);

  text-decoration-color:
    var(--primary-yellow);
}

/* ====================== TABLE OF CONTENTS ====================== */

.info-box {
  background-color: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  backdrop-filter: blur(10px);
}

.dark .info-box {
  background:
    rgba(15,23,42,0.45);
}

.toc-link {
  color: inherit;

  text-decoration: none;

  transition:
    color 0.15s ease,
    padding-left 0.15s ease;
}

.toc-link:hover {
  color: var(--primary-yellow);

  padding-left: 4px;
}

/* ====================== ANCHOR OFFSET ====================== */

h2[id],
h3[id] {
  scroll-margin-top: 7rem;
}

@media (max-width: 1023px) {
  h2[id],
  h3[id] {
    scroll-margin-top: 2rem;
  }
}

/* ========================
   Arrow Lists - Site-wide
   ======================== */

.arrow-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.arrow-list li {
    margin-bottom: 16px;        /* nice breathing room */
    padding-left: 34px;
    position: relative;
    line-height: 1.45;
}

.arrow-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 2px;
    color: #00b050;
    font-weight: bold;
    font-size: 1.25em;
    line-height: 1;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .arrow-list li::before {
        color: #34d399;
    }
}

/* ========================
   Desktop images gallery
   ======================== */
   
.gallery-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.gallery-modal.active {
    display: flex;
}

.gallery-content {
    text-align: center;
    max-width: 94%;
}

.gallery-caption {
    color: #fff;
    font-size: 1.35em;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.gallery-image {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    margin-bottom: 12px;
}

.gallery-counter {
    color: #ddd;
    font-size: 1em;
    margin: 8px 0 0 0;
    opacity: 0.85;
}

/* Fixed position buttons */
.close-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 48px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 55px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    border: none;
    width: 70px;
    height: 100px;
    cursor: pointer;
    border-radius: 8px;
    z-index: 10000;
}

.prev-btn { left: 25px; }
.next-btn { right: 25px; }