/* ==========================================================================
   PAHANG 1ST — SHARED SITE THEME
   Cobalt / navy / cyan palette matching the home hero.
   Loaded on every page after the Webflow stylesheet.
   ========================================================================== */

:root {
  --color--lime: #1f6fff !important;
  --color--lime-off: #38bdf8 !important;
  --color--dark-green: #00165a !important;
  --color--dark-green-tint-1: #0a2a80 !important;
  --color--dark-green-tint-2: #0284c7 !important;
  --color--green-off-white-1: #0052cc !important;
  --color--green-off-white-2: #e0f2fe !important;
  --color--grey-off-track: #0284c7 !important;
  --color--white: #f3f6fc !important;
  --color--black: #000f40 !important;

  --c-pahang-navy: #00165a;
  --c-pahang-blue: #0052cc;
  --c-pahang-royal: #0038b8;
  --c-pahang-cyan: #00e5ff;
  --c-pahang-sky: #38bdf8;
  --c-pahang-gold: #fbbf24;
  --c-pahang-paper: #f3f6fc;
}

html,
body {
  background-color: var(--c-pahang-paper);
}

::selection {
  background-color: var(--c-pahang-blue);
  color: #ffffff;
}


/* --------------------------------------------------------------------------
   ADAPTIVE NAVBAR COLORING (REACT TO BACKGROUND IN REAL-TIME)
   -------------------------------------------------------------------------- */
.nav-brand-link {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.pahang-nav-logo-svg text,
.pahang-nav-logo-svg tspan,
.nav-brand-link svg text,
.nav-brand-link svg tspan {
  transition: fill 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- LIGHT BACKGROUND (DEFAULT: Hero, Tok Wan, Gallery) --- */
/* Nav text is DARK so it is legible on white/light gray backgrounds */
.logo-txt-pahang,
.nav:not(.is-on-dark-bg) .logo-txt-pahang,
[data-nav-theme="dark"] .logo-txt-pahang,
[data-nav-theme="dark"] .nav-brand [nav-brand-path="1"],
.nav-brand [nav-brand-path="1"] {
  fill: #00165a !important; /* Deep Navy */
}

.logo-txt-1,
.logo-txt-st,
.nav:not(.is-on-dark-bg) .logo-txt-1,
.nav:not(.is-on-dark-bg) .logo-txt-st,
[data-nav-theme="dark"] .logo-txt-1,
[data-nav-theme="dark"] .logo-txt-st,
[data-nav-theme="dark"] .nav-brand [nav-brand-path="2"],
.nav-brand [nav-brand-path="2"] {
  fill: #0052cc !important; /* Royal Blue */
}

.logo-txt-sub,
.nav:not(.is-on-dark-bg) .logo-txt-sub,
[data-nav-theme="dark"] .logo-txt-sub {
  fill: #0284c7 !important; /* Cerulean Blue */
}

/* Nav center icon & buttons on light bg */
[data-nav-theme="dark"] .nav-middle,
.nav:not(.is-on-dark-bg) .nav-middle {
  color: #0052cc !important;
}

/* --- DARK BACKGROUND (Konsep Section, Dark Blue Footer, Open Menu) --- */
/* Nav text flips to BRIGHT WHITE & ELECTRIC CYAN on navy backgrounds */
.nav.is-on-dark-bg .logo-txt-pahang,
[data-nav-theme="light"] .logo-txt-pahang,
body:has([data-nav-ham][aria-expanded="true"]) .logo-txt-pahang,
[data-nav-theme="light"] .nav-brand [nav-brand-path="1"],
body:has([data-nav-ham][aria-expanded="true"]) .nav-brand [nav-brand-path="1"] {
  fill: #ffffff !important; /* Pure White */
}

.nav.is-on-dark-bg .logo-txt-1,
.nav.is-on-dark-bg .logo-txt-st,
[data-nav-theme="light"] .logo-txt-1,
[data-nav-theme="light"] .logo-txt-st,
body:has([data-nav-ham][aria-expanded="true"]) .logo-txt-1,
body:has([data-nav-ham][aria-expanded="true"]) .logo-txt-st,
[data-nav-theme="light"] .nav-brand [nav-brand-path="2"],
body:has([data-nav-ham][aria-expanded="true"]) .nav-brand [nav-brand-path="2"] {
  fill: #00e5ff !important; /* Electric Cyan */
}

.nav.is-on-dark-bg .logo-txt-sub,
[data-nav-theme="light"] .logo-txt-sub,
body:has([data-nav-ham][aria-expanded="true"]) .logo-txt-sub {
  fill: #bae6fd !important; /* Glowing Sky Blue */
}

/* Menu Button and Middle Icon on dark bg */
.nav.is-on-dark-bg .btn-w.is-nav,
[data-nav-theme="light"] .btn-w.is-nav {
  background-color: rgba(0, 82, 204, 0.5) !important;
  border: 1px solid #00e5ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 229, 255, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.nav.is-on-dark-bg .btn-w.is-nav:hover,
[data-nav-theme="light"] .btn-w.is-nav:hover {
  background-color: #0052cc !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 26px rgba(0, 229, 255, 0.5) !important;
}

[data-nav-theme="light"] .nav-middle,
.nav.is-on-dark-bg .nav-middle {
  color: #00e5ff !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
[data-theme="lime"],
[data-theme="blue"],
.btn-w[data-theme="lime"],
.btn-w[data-theme="blue"],
.btn-w.is-nav {
  background-color: #0038b8 !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 229, 255, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 56, 184, 0.28) !important;
}
[data-theme="lime"]:hover,
[data-theme="blue"]:hover,
.btn-w[data-theme="lime"]:hover,
.btn-w[data-theme="blue"]:hover,
.btn-w.is-nav:hover {
  background-color: #001f78 !important;
  color: #00e5ff !important;
  border-color: #00e5ff !important;
  box-shadow: 0 6px 24px rgba(0, 229, 255, 0.35) !important;
}
.btn-w.is-nav .btn-icon-svg line { stroke: #ffffff !important; }
.btn-w.is-nav .btn-text { color: #ffffff !important; }
.btn-w.is-nav:hover .btn-icon-svg line { stroke: #00e5ff !important; }
.btn-w.is-nav:hover .btn-text { color: #00e5ff !important; }

/* --------------------------------------------------------------------------
   Text accents
   -------------------------------------------------------------------------- */
.text-impact-lg-mona strong,
.text-impact-sm-brier.c-lime-off,
[data-anim-high*="lime"],
.span-green-off-white-1 {
  color: #1f6fff !important;
}

/* Dark (navy) sections: lift accents to cyan for contrast */
[data-theme="dark"] .text-impact-lg-mona strong,
[data-theme="dark"] [data-anim-high*="lime"],
[data-theme="dark"] .span-green-off-white-1 {
  color: #38bdf8 !important;
}

/* Scroll progress indicator */
.scroll-indicator-bar {
  background-color: #0052cc !important;
}

/* Footer */
[data-footer-theme="green"],
[data-footer-theme="black"],
[data-footer-theme="black"] .footer-layout-clip {
  background-color: #00165a !important;
}

/* --------------------------------------------------------------------------
   Remote template SVG artwork that is baked in lime (LN mark, signature,
   lime icons). Shift lime (~70deg hue) to cobalt/cyan.
   -------------------------------------------------------------------------- */
img[src*="LN-logo"],
img[src*="signature"],
img[src*="lime"],
img[alt*="lime color"],
.is-home-marquee-sig-img,
.horizontal-rive-placeholder img {
  filter: hue-rotate(140deg) saturate(1.6) brightness(0.85);
}


/* --------------------------------------------------------------------------
   PAHANG PHOTOGRAPHY GALLERY WORDINGS & BADGES (CRISP CONTRAST ON WHITE)
   -------------------------------------------------------------------------- */
.pahang-gallery-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(0, 82, 204, 0.08) !important;
  border: 1px solid rgba(0, 82, 204, 0.22) !important;
  padding: 0.38rem 0.95rem !important;
  border-radius: 100px !important;
  margin-bottom: 0.85rem !important;
  box-shadow: 0 3px 10px rgba(0, 22, 90, 0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  width: fit-content !important;
}

.pahang-gallery-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0052cc;
  box-shadow: 0 0 6px rgba(0, 82, 204, 0.6);
  flex-shrink: 0;
}

.is-horizontal-track .text-eyebrow,
.is-horizontal-track .text-eyebrow *,
.pahang-gallery-badge .text-eyebrow,
.pahang-gallery-badge .text-eyebrow * {
  color: #00165a !important; /* Bold deep navy */
  font-family: 'Mona Sans', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}


.horizontal-track {
  padding-top: clamp(2.8rem, 5.5vh, 4.8rem) !important;
}

/* ==========================================================================
   MOBILE / TABLET FIXES (<= 991px)
   The base Webflow layout hid the brand logo on mobile and showed a centre
   logo + helmet swipe widgets instead; those were removed, so restore the
   Pahang 1st brand and keep the hero centred.
   ========================================================================== */
@media screen and (max-width: 991px) {
  .nav-brand-link { display: block !important; }
  .nav-brand { width: clamp(150px, 42vw, 200px); }
  .nav-brand svg { width: 100%; height: auto; }
  .btn-layout.is-nav { width: auto !important; justify-content: flex-end !important; }

  .home-hero-tablet-hero-text,
  .home-hero-touch-controls-w { display: none !important; }
  .c.home-hero { align-items: center !important; }
  .pahang-hero-content { flex: 0 0 100%; max-width: 100%; }
}

@media screen and (max-width: 767px) {
  .pahang-hero-stage { width: min(100%, calc(70vh * 1024 / 832)); }
}