/* =============================================================================


/* -----------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------------------------------------------------- */

:root {
  /* Brand colours */
  --pride-primary-color: #e81010;
  --pride-secondary-color: #e9effa;
  --dark-color: #222222;
  --text-color: #222222;
  --black-color: #000;
  --white-color: #fff;

  /* Layout */
  --header-height: 85px;
  --header-height-sm: 63px;

  /* Typography */
  --font-primary: "Inter", "sans-serif";
  --font-secondary: "Stack Sans Text", sans-serif;
}

/* -----------------------------------------------------------------------------
   2. BASE / RESET
   ----------------------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  background: #fff;
}

a {
  text-decoration: none;
}

/* Offset page content below fixed header (mobile-first default) */
body.top-header-padding {
  padding-top: var(--header-height-sm);
}

/* -----------------------------------------------------------------------------
   3. MAIN HEADER — Base Layout
   ----------------------------------------------------------------------------- */

.main-header {
  position: fixed;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  left: 0;
  top: 0;
  z-index: 1049;
  transition:
    0.4s ease background-color,
    0.4s ease top,
    0.4s ease padding;
  padding: 20px;
  max-height: 85px;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Tablet: strip horizontal padding */
@media (max-width: 1200px) {
  .main-header {
    padding: 20px 0 !important;
  }
}

/* Mobile: tighten height and padding */
@media (max-width: 768px) {
  .main-header {
    max-height: 65px;
    padding: 16px 0 !important;
  }

  /* Scale down logo text on small screens */
  .main-header .main-header-in .header-left .logo .logo-wrap {
    font-size: 26px !important;
  }
  .main-header .main-header-in .header-left {
    width: fit-content !important;
  }
}

/* Centred inner container (width controlled per breakpoint in Section 12) */
.main-header .header-container {
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

/* Flex row: logo | nav */
.main-header .main-header-in {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* -----------------------------------------------------------------------------
   4. HEADER — Logo (Left Side)
   ----------------------------------------------------------------------------- */

.main-header .main-header-in .header-left {
  width: 100%;
  max-width: 347px;
  display: flex;
  align-items: center;
  transition: 0.4s ease max-width;
}

.main-header .main-header-in .header-left .logo {
  width: 100%;
}

/* Logo text / wordmark wrapper */
.main-header .main-header-in .header-left .logo .logo-wrap {
  font-size: 45px;
  font-weight: normal;
  line-height: 45px;
  color: var(--white-color);
  text-decoration: none;
  position: relative;
  display: block;
  font-family: "Koh Santepheap", serif !important;
}

.main-header .main-header-in .header-left .logo .logo-wrap h1 {
  font-family: "Koh Santepheap", serif !important;
}

/* Default state: show white logo, hide dark logo */
.main-header .main-header-in .header-left .logo a .black-logo {
  display: none;
}

.main-header .main-header-in .header-left .logo a .white-logo {
  display: block;
  color: var(--white-color);
  font-family: "Koh Santepheap", serif !important;
}
.main-header.transparent-header.sticky .white-logo{
  color: #000 !important;
}
/* -----------------------------------------------------------------------------
   5. HEADER — Right Side (Navigation Wrapper)
   ----------------------------------------------------------------------------- */

/* Nav link font family (top-level only) */
.main-nav > ul > li > a {
  font-family: "Inter Tight", sans-serif;
}

/* Right-aligned nav container */
.main-header .main-header-in .header-right {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: flex-end;
}

/* -----------------------------------------------------------------------------
   6. HEADER — Sticky & Black-Header State
   Applies when page is scrolled (.sticky) or on dark-bg pages (.black-header)
   ----------------------------------------------------------------------------- */

/* Sticky: collapse padding */
.main-header.sticky {
  padding: 20px 0;
}

/* Both states: white background + shadow */
.main-header.sticky,
.main-header.black-header {
  background-color: var(--white-color);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
}

/* Lock logo max-width so it doesn't grow on scroll */
.main-header.sticky .main-header-in .header-left {
  max-width: 347px !important;
}

/* Logo link colour */
.main-header.sticky .main-header-in .header-left .logo a,
.main-header.black-header .main-header-in .header-left .logo a {
  color: var(--dark-color);
}

/* Swap logo variant: show dark logo, hide white logo */
.main-header.sticky .main-header-in .header-left .logo a .black-logo,
.main-header.black-header .main-header-in .header-left .logo a .black-logo {
  display: block;
  font-family: "Koh Santepheap", serif !important;
}

/* .main-header.sticky .main-header-in .header-left .logo a .white-logo,
.main-header.black-header .main-header-in .header-left .logo a .white-logo {
  display: none;
} */

/* Nav link colour becomes dark */
.main-header.sticky .main-header-in .header-right .main-nav > ul > li > a,
.main-header.black-header
  .main-header-in
  .header-right
  .main-nav
  > ul
  > li
  > a {
  color: var(--dark-color);
}

/* Underline indicator colour becomes dark */
.main-header.sticky
  .main-header-in
  .header-right
  .main-nav
  > ul
  > li
  > a::before,
.main-header.black-header
  .main-header-in
  .header-right
  .main-nav
  > ul
  > li
  > a::before {
  background-color: var(--dark-color);
}

/* Chevron icon: revert invert so it shows dark on white bg */
.main-header.sticky .main-header-in .header-right .main-nav > ul > li > a:after,
.main-header.black-header
  .main-header-in
  .header-right
  .main-nav
  > ul
  > li
  > a:after {
  filter: invert(0);
}

/* CTA button tokens */
.main-header.sticky
  .main-header-in
  .header-right
  .main-nav
  > .header-btns
  .btn-secondary,
.main-header.black-header
  .main-header-in
  .header-right
  .main-nav
  > .header-btns
  .btn-secondary {
  --pr-btn-bg: var(--dark-color);
  --pr-btn-color: var(--white-color);
}

.main-header.sticky
  .main-header-in
  .header-right
  .main-nav
  > .header-btns
  .btn-secondary:hover,
.main-header.black-header
  .main-header-in
  .header-right
  .main-nav
  > .header-btns
  .btn-secondary:hover {
  --pr-btn-hover-bg: var(--dark-color);
}

/* Hamburger bars become dark */
.main-header.sticky .mob-btn span,
.main-header.black-header .mob-btn span {
  background: var(--dark-color);
}
.mob-btn:hover {
  transform: translateY(-50%) scale(1.1) !important;
}
/* -----------------------------------------------------------------------------
   7. DESKTOP NAVIGATION  (>= 1200px)
   ----------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) {
  /* Increase body offset for taller desktop header */
  body.top-header-padding {
    padding-top: var(--header-height);
  }

  /* Black-header variant: cap logo width */
  .main-header.black-header .main-header-in .header-left {
    max-width: 347px;
  }

  /* Black-header: padding reset at desktop */
  .main-header.black-header {
    padding: 20px 0;
  }

  /* Horizontal padding for inner container */
  .main-header .header-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ---- Nav container ---- */
  .main-nav {
    display: flex;
    align-items: center;
  }

  /* ---- Top-level list ---- */
  .main-nav > ul {
    margin: 0;
    padding: 0;
    text-align: left;
    float: right;
  }

  /* ---- Top-level list items ---- */
  .main-nav > ul > li {
    display: inline-block;
    position: relative;
    text-align: left;
    transition: all ease 0.3s;
    padding: 0 15px;
    line-height: 1.75rem;
  }

  /* No right padding on last item to stay flush */
  .main-nav > ul > li:last-child {
    padding-right: 0;
  }

  /* ---- Top-level links ---- */
  .main-nav > ul > li > a {
    display: block;
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
    position: relative;
    color: var(--white-color);
    width: max-content;
    max-width: 160px;
    font-size: clamp(0.875rem, 0.8173rem + 0.2564vw, 1.125rem);
    font-weight: 500;
    letter-spacing: 0.16px;
    font-family: "Inter Tight", sans-serif !important;
  }

  /* ---- Hover underline (scale animation) ---- */
  .main-nav > ul > li > a:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 0.125rem;
    background: var(--white-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
    will-change: transform;
  }

  /* Animate link colour on hover */
  .main-nav > ul > li:hover > a {
    transition: all ease 0.5s;
  }

  /* Show underline on hover and on active/current page items */
  .main-nav > ul > li:hover > a:before,
  .main-nav > ul > li.current-menu-item > a::before,
  .main-nav > ul > li.current_page_item > a::before {
    transform: scaleX(1);
  }

  /* Active page item transition */
  .main-nav > ul > li.current-menu-item > a,
  .main-nav > ul > li.current_page_ancestor > a {
    transition: all ease 0.5s;
  }

  /* Active page: full-width underline */
  .main-nav > ul > li.current-menu-item > a:before,
  .main-nav > ul > li.current_page_ancestor > a:before {
    width: 100%;
    left: 0;
  }

  /* Active page with children: underline stops before chevron */
  .main-nav > ul > li.current-menu-item.menu-item-has-children > a,
  .main-nav > ul > li.current_page_ancestor.menu-item-has-children > a {
    transition: all ease 0.5s;
  }

  .main-nav > ul > li.current-menu-item.menu-item-has-children > a:before,
  .main-nav > ul > li.current_page_ancestor.menu-item-has-children > a:before {
    width: calc(100% - 20px);
    left: 0;
  }

  /* ---- Items with dropdown children ---- */

  /* Extra right padding for chevron icon */
  .main-nav > ul > li.menu-item-has-children > a {
    padding-right: 25px;
  }

  /* Chevron arrow (inline SVG via data URI) */
  .main-nav > ul > li.menu-item-has-children > a:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 57%;
    right: 0px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.581' height='9.113' viewBox='0 0 13.581 9.113'%3E%3Cpath id='Path_2' data-name='Path 2' d='M12.8,0,6.4,8,0,0' transform='translate(0.391 0.312)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 11px 11px;
    filter: invert(1); /* White chevron on dark header */
  }

  /* Shorten underline when hovering a parent item (leave room for chevron) */
  .main-nav > ul > li.menu-item-has-children:hover > a::before {
    width: calc(100% - 20px);
    left: 0px;
  }

  /* ---- Dropdown submenu alignment overrides ---- */
  .main-nav > ul > li[submenu-align="left"] ul .sub-menu {
    right: unset;
    left: 0;
    transform: translateX(-100%);
  }

  .main-nav > ul > li[submenu-align="right"] ul .sub-menu {
    left: unset;
    right: 0;
    transform: translateX(100%);
  }

  /* ---- Reveal dropdown on hover ---- */
  .main-nav > ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
  }

  /* ---- Dropdown panel ---- */
  .main-nav > ul > li ul {
    background: var(--white-color);
    position: absolute;
    margin: 0;
    padding: 20px 0;
    min-width: 150px;
    width: max-content;
    visibility: hidden;
    opacity: 0;
    list-style: none;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
  }

  /* ---- Dropdown list items ---- */
  .main-nav > ul > li ul > li {
    padding: 0;
    margin: 0;
    transition: all ease 0.3s;
    background: var(--white-color);
    position: relative;
  }

  /* Nested second-level chevron */
  .main-nav > ul > li ul > li.menu-item-has-children > a:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    top: 52%;
    right: 10px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.581' height='9.113' viewBox='0 0 13.581 9.113'%3E%3Cpath id='Path_2' data-name='Path 2' d='M12.8,0,6.4,8,0,0' transform='translate(0.391 0.312)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 8px 8px;
    filter: invert(0);
  }

  /* Dropdown link */
  .main-nav > ul > li ul > li a {
    padding: 0.75rem 1.875rem 0.75rem 1.25rem;
    position: relative;
    color: #212529;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    font-size: 0.875rem;
    line-height: 1.3125rem;
    transition: all ease 0.3s;
  }

  /* Dropdown item: hover + active states share the same dark background */
  .main-nav > ul > li ul > li:hover,
  .main-nav > ul > li ul > li.current-menu-item,
  .main-nav > ul > li ul > li.current-menu-ancestor {
    background: var(--dark-color);
  }

  /* White text on dark background */
  .main-nav > ul > li ul > li:hover > a,
  .main-nav > ul > li ul > li.current-menu-item > a,
  .main-nav > ul > li ul > li.current-menu-ancestor > a {
    color: var(--white-color);
  }

  /* Invert nested chevron to white on dark background */
  .main-nav > ul > li ul > li:hover > a:after,
  .main-nav > ul > li ul > li.current-menu-item > a:after,
  .main-nav > ul > li ul > li.current-menu-ancestor > a:after {
    filter: invert(1);
  }

  /* Reveal third-level submenu on hover */
  .main-nav > ul > li ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
    left: 100%;
    top: 22px;
  }

  /* ---- Header CTA buttons (desktop) ---- */
  .main-nav .header-btns {
    display: flex;
    column-gap: 15px;
    align-items: center;
    margin-left: 30px;
  }

  .main-nav .header-btns .btn {
    min-height: 41px;
    --pr-btn-padding-y: 13px;
  }

  /* Hide hamburger on desktop */
  .mob-btn {
    display: none;
  }
} /* end @media >=1200px */

/* -----------------------------------------------------------------------------
   8. MOBILE NAVIGATION  (< 1200px)
   Off-canvas slide-in panel + hamburger button
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 1199.98px) {
  /* ---- Off-canvas nav panel ---- */
  .main-nav {
    display: block;
    position: fixed;
    max-width: 470px;
    top: 0 !important;
    padding: 40px 20px 20px 20px;
    right: 0;
    height: 100vh;
    transition: all ease 0.5s;
    z-index: 50;
    width: calc(100% - 40px);
    overflow: auto;
    opacity: 0;
    background: var(--white-color);
    transform: translateX(100%); /* Hidden off-screen to the right */
  }

  /* ---- Nav list container ---- */
  .main-nav ul {
    margin: 0;
    padding: 0;
    display: block;
    margin-top: 0px;
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Bottom spacing on primary menu list */
  .main-nav ul.mnav {
    margin-bottom: 1.875rem;
  }

  /* Individual list items stacked vertically */
  .main-nav ul li {
    display: block;
    position: relative;
  }

  /* Hide any inline <span> decorators inside items */
  .main-nav ul li span {
    display: none;
  }

  /* Nav links */
  .main-nav ul li a {
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    display: block;
    padding: 11px 0;
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--pride-secondary-color);
  }

  /* ---- Submenu toggle icon (<i> element acting as +/- toggle) ---- */
  .main-nav ul li.submenu i {
    position: absolute;
    width: 1.875rem;
    height: 1.875rem;
    top: 10px;
    right: 0;
    cursor: pointer;
    transition: all ease 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Both pseudo-elements form the + icon cross */
  .main-nav ul li.submenu i:before,
  .main-nav ul li.submenu i:after {
    content: "";
    height: 0.09375rem;
    width: 1.875rem;
    background: black;
    z-index: 10;
    position: relative;
    transition: all ease 0.3s;
  }

  /* Vertical bar of the + sign */
  .main-nav ul li.submenu i:after {
    transform: rotate(90deg);
    right: 0.9375rem;
  }

  /* Second-level link text slightly smaller */
  .main-nav ul li.submenu ul li a {
    font-size: 0.8rem;
  }

  /* Rotate vertical bar to 0 (collapses + to -) when open */
  .main-nav ul li.open > i:after {
    transform: rotate(0);
  }

  /* ---- Submenu accordion (collapsed by default) ---- */
  .main-nav ul ul {
    margin: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height 0.3s ease,
      visibility 0s linear 0.3s;
  }

  /* Remove border on last nested item */
  .main-nav ul ul li:last-child {
    border-bottom: 0;
  }

  /* Indent second-level links */
  .main-nav ul ul li a {
    padding-left: 1.25rem;
  }

  /* Indent third-level links further */
  .main-nav ul ul li ul a {
    padding-left: 1.875rem;
  }

  /* Expand submenu when parent has .open class */
  .main-nav ul .submenu.open > ul {
    visibility: visible;
    max-height: 800px; /* Tall enough for any realistic submenu */
    transition: max-height 0.3s ease;
  }

  /* ---- CTA buttons inside mobile nav ---- */
  .main-nav .header-btns {
    margin-top: 15px;
  }

  .main-nav .header-btns .btn {
    width: 100%;
  }

  .main-nav .header-btns .btn.btn-secondary {
    background-color: var(--dark-color);
    color: var(--white-color);
  }

  /* ---- Active state: slide panel into view ---- */
  .show-menu .main-nav {
    opacity: 1;
    right: 0;
    transform: none;
  }

  /* ---- Dark overlay behind the open panel ---- */
  .show-menu .overlay {
    position: fixed;
    top: 0 !important;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.7 !important;
    transition: opacity 0.3s linear;
  }

  /* ---- Hamburger toggle button ---- */
  .mob-btn {
    position: absolute;
    margin: 0;
    background-color: transparent;
    cursor: pointer;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Close (x) variant of the button */
  .mob-close-btn {
    width: 3rem;
    height: 3rem;
    background: #000;
    top: 1.5rem;
    right: 0;
    padding: 10px;
  }

  .mob-close-btn span {
    background: #fff !important;
  }

  /* Highlight active menu item in mobile nav */
  .main-header .main-nav ul#menu-header-menu > li.current-menu-item > a {
    /* background-color: #fbfbfb !important; */
    font-weight: 600 !important;
    color: #00338d;
    /* padding-left: 16px !important; */
  }

  /* ---- Hamburger bar lines ---- */
  .mob-btn span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--white-color);
    transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);
  }

  /* Hide any legacy left-icon element */
  .mob-btn .icon-left-1 {
    display: none;
    background: none;
    height: 0;
    width: 0;
  }

  /* Gap between burger lines */
  .mob-btn span + span {
    margin-top: 5px;
  }
} /* end @media <1200px */

/* Mobile nav list widths at intermediate breakpoints */
@media screen and (max-width: 1199.98px) and (max-width: 997.98px) {
  .main-nav ul {
    max-width: 690px;
  }
}

@media screen and (max-width: 1199.98px) and (max-width: 768px) {
  .main-nav ul {
    max-width: 510px;
  }
}

@media screen and (max-width: 1199.98px) and (max-width: 572px) {
  .main-nav ul {
    max-width: 100%;
  }
}

/* Align hamburger at tablet-landscape */
@media screen and (max-width: 1199.98px) and (min-width: 992px) {
  .mob-btn {
    right: 0px;
  }
}

/* -----------------------------------------------------------------------------
   9. MENU OPEN STATE — Body Scroll Lock & Burger Animation
   ----------------------------------------------------------------------------- */

/* Prevent body scroll when mobile menu is open */
html:has(body.show-menu),
body.show-menu {
  overflow: hidden;
}

/* Ensure burger sits above the overlay */
body.show-menu .mob-btn {
  z-index: 9;
}

/* Animate middle and bottom bars to hint "open" state */
body.show-menu .mob-btn span + span {
  width: 80%;
}
body.show-menu .mob-btn span + span + span {
  width: 50%;
}

/* -----------------------------------------------------------------------------
   10. BACK-TO-SCREEN BUTTON (hidden utility, shown programmatically)
   ----------------------------------------------------------------------------- */

.back-to-screen {
  display: none;
  font-size: 1.0625rem;
  position: fixed;
  width: 3.125rem;
  height: 3.125rem;
  text-align: center;
  line-height: 3.125rem;
  z-index: 1;
  cursor: pointer;
  right: 0.125rem;
  top: 0.5rem;
  transition: all ease-out 0.5s;
}

/* -----------------------------------------------------------------------------
   11. WORDPRESS ADMIN BAR OFFSETS
   Compensates for the WP admin toolbar when logged in
   ----------------------------------------------------------------------------- */

/* Push mobile nav panel below admin bar */
body.admin-bar .main-nav {
  top: calc(var(--header-height-sm) + 45px);
}

/* Push overlay below admin bar when menu is open */
body.admin-bar.show-menu .overlay {
  top: calc(var(--header-height-sm) + 45px);
}

/* Offset page padding for admin bar (mobile) */
body.admin-bar main.top-header-padding {
  padding-top: calc(var(--header-height-sm) + 45px);
}

/* Tablet: admin bar is shorter (32px), no extra offset needed */
@media screen and (min-width: 781.99px) {
  body.admin-bar main.top-header-padding {
    padding-top: calc(var(--header-height-sm) + 0px);
  }
}

/* Desktop: use full header height */
@media screen and (min-width: 1200px) {
  body.admin-bar main.top-header-padding {
    padding-top: calc(var(--header-height) + 0px);
  }
}

/* Remove WP default margin-top injection on very small screens */
@media screen and (max-width: 782px) {
  html {
    margin-top: 0px !important;
  }
}

/* -----------------------------------------------------------------------------
   12. RESPONSIVE CONTAINER WIDTHS  (.header-container)
   ----------------------------------------------------------------------------- */

/* lg — 1024px */
@media (min-width: 1024px) {
  .main-header .header-container {
    max-width: 960px;
  }
}

/* xl — 1280px */
@media (min-width: 1280px) {
  .main-header .header-container {
    max-width: 1140px;
  }
}

/* 2xl — 1536px */
@media (min-width: 1536px) {
  .main-header .header-container {
    max-width: 1326px;
  }
}


.main-header.black-header .white-logo{
  color: #000 !important;
}