/* Mobile-friendly helper styles and theme variables */
:root{
  --header-height:72px;
  --primary:#007965; /* matched to index theme */
  --primary-60:rgba(0,121,101,0.6);
  --primary-30:rgba(0,121,101,0.3);
  --secondary:#475569; /* slate-like secondary from index */
  --bg:#f8fafc;
  --panel:rgba(255,255,255,0.9);
  --text:#0b3d2e;
  --muted:#555555;
}
body{padding-top:0;background:var(--bg);color:var(--text)}
img,video,iframe{max-width:100%;height:auto;display:block}
/* Mobile nav drawer sizing */
.mobile-nav .w-80{width:80vw;max-width:320px}
/* Reduce heavy fixed backgrounds on small screens */
@media (max-width:768px){
  .hero-bg{background-attachment:scroll}
  :root{--header-height:64px}
  body{padding-top:var(--header-height)}
  .floating{display:none}
}
/* Tweak hero typography for small screens */
@media (max-width:640px){
  .text-7xl{font-size:2rem}
  .text-6xl{font-size:1.6rem}
  .max-w-3xl{max-width:30rem}
  .px-6{padding-left:1rem;padding-right:1rem}
}
/* Improve touch targets */
button, .ri-menu-line, .ri-close-line{touch-action:manipulation}

/* Dark-denial color overrides */
:root{--denial:#0b1220;--denial-60:rgba(11,18,32,0.6);--denial-40:rgba(11,18,32,0.4);--accent-red:#007965;--accent-red-30:rgba(0,121,101,0.3);--accent-red-60:rgba(0,121,101,0.6)}

/* Replace lighter accent with red variants for hover/glow */
.nav-item:hover{color:var(--accent-red) !important; transform:translateY(-2px) !important}
.search-glow:focus{box-shadow:0 0 0 3px var(--accent-red-30) !important}
.pulse-glow{animation:pulseGlowRed 2s infinite}
@keyframes pulseGlowRed{0%,100%{box-shadow:0 0 20px var(--accent-red-30)}50%{box-shadow:0 0 30px var(--accent-red-60)}}

/* Mobile nav: darker overlay and panel */
.mobile-nav{background:rgba(2,6,23,0.85) !important}
.mobile-nav .glass-dark{background:linear-gradient(180deg, rgba(0,121,101,0.06), rgba(2,6,23,0.85)) !important; border-color:rgba(255,255,255,0.04) !important}

/* Ensure mobile nav is hidden by default and shows when .active is present */
.mobile-nav{transform:translateX(-100%);transition:transform 300ms ease-in-out}
.mobile-nav.active{transform:translateX(0) !important}

/* Support the #mobile-menu element which uses translate-x-full / translate-x-0 semantics */
#mobile-menu.translate-x-full{transform:translateX(100%)}
#mobile-menu.translate-x-0{transform:translateX(0)}

/* Polished mobile nav overlay + panel */
.mobile-nav{position:fixed;inset:0;display:flex;align-items:stretch}
.mobile-nav::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.6));opacity:0;transition:opacity 220ms ease;pointer-events:none}
.mobile-nav.active::before{opacity:1;pointer-events:auto}
.mobile-nav > .glass-dark{position:relative;z-index:40;width:78vw;max-width:360px;height:100%;box-shadow:0 30px 60px rgba(2,6,23,0.6)}
.mobile-nav nav a{display:block;padding:18px 16px;border-radius:12px;font-weight:700;color:var(--panel) !important}
.mobile-nav nav a:focus{outline:2px solid rgba(0,121,101,0.18);outline-offset:3px}
.mobile-nav .cta{margin-top:18px}

/* Smooth slide in from left with subtle bounce */
.mobile-nav{transform:translateX(-110%)}
.mobile-nav.active{transform:translateX(0);transition:transform 360ms cubic-bezier(.2,.9,.2,1)}

/* Improve visual of active link (class-based fallback) */
.mobile-nav nav a.active{background:var(--primary);color:#fff !important}

.mobile-nav nav a{color:#ffeef0 !important}
.mobile-nav nav a:hover{background:rgba(255,230,230,0.04) !important; color:var(--accent-red) !important}

/* Ensure icons and close/menu are visible on dark panel */
.mobile-nav .ri-mountain-line, .mobile-nav .ri-close-line{color:#ffeef0}

/* Make search-results darker to match dark mode */
.search-results{background:rgba(3,7,18,0.92) !important; color:#ffeef0}
.search-results .text-gray-600, .search-results .text-gray-500, .search-results .text-gray-800{color:#ffdadb !important}

/* When mobile menu is open, dim/blur the rest of the page and prevent scroll */
body.mobile-open{overflow:hidden}
/* Do not visually blur or darken the page when mobile nav is open — keep content readable.
   Still prevent background interaction while the nav is open. */
body.mobile-open > :not(#mobile-nav){
  /* no visual filter */
  transition: none;
  pointer-events: none;
  user-select: none;
}
/* Ensure mobile-nav stays interactive */
#mobile-nav{pointer-events:auto}

/* Theme toggle button visuals */
#dark-mode-toggle, #mobile-nav-theme {
  transition:transform 150ms ease, background 150ms ease;
}
#dark-mode-toggle:active, #mobile-nav-theme:active { transform: scale(0.96); }
.dark .dark-icon { display: none !important; }
.dark .light-icon { display: inline-block !important; }
.light .light-icon { display: none !important; }
.light .dark-icon { display: inline-block !important; }

/* Mobile nav improvements */
.mobile-nav .glass-dark { border-radius: 0 16px 16px 0; height:100%; }
.mobile-nav nav a{display:block;padding:14px 12px;border-radius:10px;font-weight:600}
.mobile-nav .cta {margin-top:12px;padding:12px;border-radius:12px;background:linear-gradient(90deg,var(--primary),var(--secondary));color:white;text-align:center}

/* Stronger mobile link sizing and spacing for small screens */
@media (max-width: 640px) {
  .mobile-nav nav a{ padding:18px 18px; font-size:1.05rem; text-align:left; display:block; }
  .mobile-nav .cta{ padding:14px; font-size:1rem; }
}

/* About section utilities */
.about-heading{font-size:42px;color:var(--text);font-weight:700;margin-bottom:15px;line-height:1.2}
.about-sub{color:var(--primary);font-weight:600;margin-bottom:25px;font-size:20px}
.about-lead{font-size:17px;line-height:1.9;color:var(--muted)}

/* Dark theme overrides */
.dark{
  --bg:#0f1724;
  --panel:rgba(15,23,36,0.88);
  --text:#e6eef8;
  --muted:#94a3b8;
}

/* Dark mode overrides for common utility classes used in templates */
.dark .bg-white { background: var(--panel) !important; }
.dark .text-gray-900 { color: var(--text) !important; }
.dark .text-gray-500 { color: var(--muted) !important; }
.dark .border-gray-100 { border-color: rgba(255,255,255,0.04) !important; }
.dark .bg-slate-50 { background: rgba(255,255,255,0.02) !important; }

/* Unified footer styling across site */
footer {
  background: var(--panel) !important;
  color: var(--text) !important;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--primary); }
footer .glass { background: transparent !important; }

/* Unified header & navbar styles (used by index, about, c, trip) */
#main-header.header-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 6px 30px rgba(2,6,23,0.06);
}
#main-header.header-scrolled #logo-text { color: #0f172a; }
#main-header.header-scrolled #logo-subtext { color: #64748b; }
#main-header.header-scrolled .nav-link-desktop { color: var(--secondary); }
#main-header.header-scrolled #mobile-menu-toggle {
  background: rgba(0,0,0,0.03);
  color: #0f172a;
  border-color: rgba(0,0,0,0.05);
}

.nav-link-desktop {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.95);
  transition: all 0.28s ease;
  position: relative;
}
.nav-link-desktop:hover { color: #ffffff; }
.nav-link-desktop::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--primary);
  transition: width 0.28s ease;
}
.nav-link-desktop:hover::after { width: 100%; }

/* Mobile sidebar link visuals (consistent with index) */
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  color: #0f172a;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 1rem;
  transition: all 0.28s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
}
.mobile-nav-link i { opacity: 0; transform: translateX(-8px); transition: all 0.28s ease; }
.mobile-nav-link:hover { background: var(--primary-30); color: var(--primary); padding-left: 1.6rem; }
.mobile-nav-link:hover i { opacity: 0.9; transform: translateX(0); }

/* Mobile menu toggle button */
#mobile-menu-toggle { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.06); }
#mobile-menu-toggle:active { transform: scale(0.98); }

/* Small-screen header adjustments */
@media (max-width: 1024px) {
  :root{ --header-height: 64px; }
  body{ padding-top: var(--header-height); }
}

/* Advanced navbar utilities */
.nav-shadow { box-shadow: 0 10px 30px rgba(2,6,23,0.12); }
.nav-glass { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); backdrop-filter: blur(8px); }
.nav-cta { background: linear-gradient(90deg, var(--primary), #3fb395); color: white; border-radius: 999px; padding: .6rem 1.1rem; font-weight:800; box-shadow: 0 8px 30px rgba(0,121,101,0.12); }
.nav-cta:hover { transform: translateY(-2px); }

/* Desktop active link underline (animated) */
.nav-link-desktop.active { color: var(--primary); }
.nav-link-desktop.active::after { width: 100%; }

/* Sidebar staggered animation for premium feel */
.nav-sidebar a { opacity: 0; transform: translateX(24px); }
.nav-sidebar.active a { opacity: 1; transform: translateX(0); }
.nav-sidebar.active a:nth-child(1){ transition-delay: 0.06s }
.nav-sidebar.active a:nth-child(2){ transition-delay: 0.12s }
.nav-sidebar.active a:nth-child(3){ transition-delay: 0.18s }
.nav-sidebar.active a:nth-child(4){ transition-delay: 0.24s }

/* Professional footer bar */
footer.site-footer {
  background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(6,10,18,0.98));
  color: #dfe7ee;
  padding: 48px 0 28px;
}
footer.site-footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; align-items: start; }
footer.site-footer .brand { display:flex; gap:12px; align-items:center }
footer.site-footer .brand img { filter: brightness(10) saturate(0); opacity: .95 }
footer.site-footer h5 { color: #fff; margin-bottom: 12px; font-weight: 800 }
footer.site-footer p, footer.site-footer li, footer.site-footer a { color: #c7d2da; font-size: 0.95rem }
footer.site-footer a:hover { color: var(--primary); }
footer.site-footer .socials a { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background: rgba(255,255,255,0.03); margin-right:8px; color:#c7d2da }

/* Footer bottom bar */
footer.site-footer .bottom { margin-top:24px; border-top: 1px solid rgba(255,255,255,0.04); padding-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px }

@media (max-width: 900px) {
  footer.site-footer .footer-inner { grid-template-columns: 1fr; }
  footer.site-footer .bottom { flex-direction:column; align-items:center; text-align:center }
}

/* Accessibility: visible focus outlines for keyboard users */
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 3px }