/* ============================================================
   VISUAL ARTS CORE — Navigation System v1.0
   Seed.com-inspired dark frosted glass mega-nav
   Child theme layer over Kadence
   ============================================================ */

:root {
  --nav-height:         68px;
  --nav-height-tablet:  60px;
  --nav-height-mobile:  56px;
  --nav-bg-clear:       transparent;
  --nav-bg-frosted:     rgba(0, 0, 0, 0.82);
  --nav-backdrop:       blur(14px) saturate(160%);
  --nav-border-bottom:  1px solid rgba(255, 255, 255, 0.06);
  --nav-shadow:         0 2px 24px rgba(0, 0, 0, 0.45);
  --nav-bg-transition:  background-color 0.35s ease,
                        border-color     0.35s ease,
                        box-shadow       0.35s ease;
                        /* backdrop-filter intentionally excluded —
                           transitioning it breaks tap events on iOS Safari
                           (compositor absorbs touches during the transition).
                           backdrop-filter is applied instantly via is-scrolled. */
  --nav-link-color:     rgba(255, 255, 255, 0.60);
  --nav-link-hover:     rgba(255, 255, 255, 1.00);
  --nav-link-size:      0.8125rem;
  --nav-link-weight:    500;
  --nav-link-spacing:   0.03em;
  --nav-pill-bg:        rgba(255, 255, 255, 0.07);
  --nav-pill-radius:    999px;
  --nav-pill-transition: background 0.15s ease, color 0.15s ease;
  --dd-bg:              rgba(8, 8, 8, 0.97);
  --dd-backdrop:        blur(24px) saturate(180%);
  --dd-border:          1px solid rgba(255, 255, 255, 0.07);
  --dd-radius:          20px;
  --dd-shadow:          0 8px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.40);
  --dd-padding:         10px;
  --dd-anim-dur:        620ms;
  --dd-anim-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --dd-item-radius:     10px;
  --dd-item-hover-bg:   rgba(255, 255, 255, 0.055);
  --dd-icon-size:       36px;
  --dd-icon-bg:         rgba(255, 255, 255, 0.07);
  --dd-icon-radius:     8px;
  --mobile-bg:          rgba(3, 3, 3, 0.97);
  --mobile-backdrop:    blur(20px) saturate(140%);
  --mobile-sub-bg:      rgba(255, 255, 255, 0.030);
  --primary-500:        #FF3366;
  --primary-400:        #FF6B8C;
  --primary-600:        #E6004F;
  --font-heading:       'Rajdhani', sans-serif;
  --font-body:          'Montserrat', sans-serif;
  --z-header:           10000;
  --z-mobile-nav:       9999;
}

/* ---- RESET (scoped) ---------------------------------------- */
.vac-header *, .vac-header *::before, .vac-header *::after,
.vac-mobile-nav *, .vac-mobile-nav *::before, .vac-mobile-nav *::after {
  box-sizing: border-box;
}
.vac-header ul, .vac-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.vac-header a, .vac-mobile-nav a { text-decoration: none; }
.vac-header button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

/* ---- KADENCE CONTENT OFFSET -------------------------------- */
/* NO padding-top on the wrapper. The fixed header is transparent
   and the hero extends behind it (Seed.com pattern).
   Interior pages handle their own top spacing per section. */

/* ---- HEADER SHELL ------------------------------------------ */
.vac-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-header);
  background: var(--nav-bg-clear);
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: var(--nav-bg-transition);
}
.vac-header.is-scrolled {
  background: var(--nav-bg-frosted);
  backdrop-filter: var(--nav-backdrop);
  -webkit-backdrop-filter: var(--nav-backdrop);
  border-bottom: var(--nav-border-bottom);
  box-shadow: var(--nav-shadow);
}
.vac-header.dropdown-open {
  background: var(--nav-bg-frosted);
  backdrop-filter: var(--nav-backdrop);
  -webkit-backdrop-filter: var(--nav-backdrop);
  border-bottom: var(--nav-border-bottom);
}

/* Admin bar offset for the fixed header itself */
.admin-bar .vac-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vac-header { top: 46px; } }

/* ---- HEADER INNER LAYOUT ----------------------------------- */
.vac-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- LOGO -------------------------------------------------- */
.vac-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #fff;
  transition: opacity 0.15s ease;
}
.vac-header__logo:hover { opacity: 0.80; }
.vac-logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

/* ---- DESKTOP NAV ------------------------------------------- */
.vac-nav { display: flex; justify-content: center; height: 100%; }
.vac-nav__list { display: flex; align-items: center; gap: 2px; padding: 0; height: 100%; }
/* Full header height on item so top:100% aligns with header bottom */
.vac-nav__item { position: relative; height: 100%; display: flex; align-items: center; }

.vac-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border-radius: var(--nav-pill-radius);
  font-family: var(--font-body) !important;
  font-size: var(--nav-link-size) !important;
  font-weight: var(--nav-link-weight) !important;
  letter-spacing: var(--nav-link-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--nav-link-color);
  background: transparent;
  white-space: nowrap;
  transition: var(--nav-pill-transition);
  line-height: 1;
}
.vac-nav__link:hover, .vac-nav__link:focus-visible {
  color: var(--nav-link-hover);
  background: var(--nav-pill-bg);
  outline: none;
}
.vac-nav__chevron {
  transition: transform var(--dd-anim-dur) var(--dd-anim-ease);
  opacity: 0.45;
  flex-shrink: 0;
}
.vac-nav__item.is-open > .vac-nav__link {
  color: var(--nav-link-hover);
  background: var(--nav-pill-bg);
}
.vac-nav__item.is-open > .vac-nav__link .vac-nav__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- DROPDOWN PANEL ---------------------------------------- */
.vac-dropdown {
  position: absolute;
  top: calc(100% + 7.5px);
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity   var(--dd-anim-dur) var(--dd-anim-ease),
    transform var(--dd-anim-dur) var(--dd-anim-ease),
    visibility 0ms var(--dd-anim-dur);
  z-index: calc(var(--z-header) + 1);
}
.vac-nav__item.is-open > .vac-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity   var(--dd-anim-dur) var(--dd-anim-ease),
    transform var(--dd-anim-dur) var(--dd-anim-ease),
    visibility 0ms;
}
.vac-dropdown__panel {
  background: var(--dd-bg);
  backdrop-filter: var(--dd-backdrop);
  -webkit-backdrop-filter: var(--dd-backdrop);
  border: var(--dd-border);
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-shadow);
  padding: var(--dd-padding);
  overflow: hidden;
  min-width: max-content;
}
.vac-dropdown__grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.vac-dropdown__grid--2col { grid-template-columns: 1fr 1fr; min-width: 400px; }

.vac-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--dd-item-radius);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.vac-dropdown__item:hover, .vac-dropdown__item:focus-visible {
  background: var(--dd-item-hover-bg);
  color: rgba(255, 255, 255, 1);
  outline: none;
}
.vac-dropdown__item:hover .vac-dropdown__icon,
.vac-dropdown__item:focus-visible .vac-dropdown__icon {
  background: rgba(255, 51, 102, 0.14);
  color: var(--primary-500);
}
.vac-dropdown__icon {
  width: var(--dd-icon-size);
  height: var(--dd-icon-size);
  background: var(--dd-icon-bg);
  border-radius: var(--dd-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.60);
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.vac-dropdown__icon svg { display: block; }
.vac-dropdown__item-text { display: flex; flex-direction: column; gap: 2px; }
.vac-dropdown__item-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.2;
}
.vac-dropdown__item-desc {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.35;
}
.vac-dropdown__footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vac-dropdown__footer-link {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--primary-500);
  transition: color 0.12s ease;
}
.vac-dropdown__footer-link:hover { color: var(--primary-400); }

/* ---- HEADER ACTIONS ---------------------------------------- */
.vac-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.vac-header__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.15s ease, background 0.15s ease;
}
.vac-header__whatsapp:hover { color: #25D366; background: rgba(37, 211, 102, 0.10); }

.vac-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary-500);
  border: 1.5px solid var(--primary-500);
  background: transparent;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.vac-header__cta:hover { background: var(--primary-500); color: #fff; }

/* ---- HAMBURGER --------------------------------------------- */
.vac-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
  /* iOS Safari: ensure taps register on button inside a composited layer */
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}
.vac-hamburger:hover { background: rgba(255, 255, 255, 0.07); }
.vac-hamburger:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.vac-hamburger__line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.70);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.20s ease;
}
.vac-hamburger.is-open .vac-hamburger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.vac-hamburger.is-open .vac-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vac-hamburger.is-open .vac-hamburger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- MOBILE NAV -------------------------------------------- */
.vac-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--mobile-bg);
  backdrop-filter: var(--mobile-backdrop);
  -webkit-backdrop-filter: var(--mobile-backdrop);
  z-index: var(--z-mobile-nav);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.30s ease, visibility 0.30s;
}
.vac-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.nav-is-open { overflow: hidden; }

.vac-mobile-nav__inner {
  padding: calc(var(--nav-height-mobile) + 40px) 28px 60px;
  min-height: 100%;
}
.vac-mobile-nav__list { display: flex; flex-direction: column; gap: 0; }
.vac-mobile-nav__item { position: relative; }

.vac-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-heading);
  font-size: clamp(0.91rem, 2.8vw, 1.12rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s ease;
}
.vac-mobile-nav__link:hover { color: #fff; }
.vac-mobile-nav__link--has-sub {
  cursor: pointer;
  /* No background on the trigger — only the chevron signals interactivity */
  background: transparent !important;
}
.vac-mobile-nav__link--has-sub:focus,
.vac-mobile-nav__link--has-sub:active,
.vac-mobile-nav__link--has-sub:focus-visible {
  background: transparent !important;
  outline: none;
}
.vac-mobile-nav__chevron {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.45;
  flex-shrink: 0;
}
.vac-mobile-nav__link--has-sub.is-open { color: #fff; }
.vac-mobile-nav__link--has-sub.is-open .vac-mobile-nav__chevron {
  transform: rotate(180deg); opacity: 1;
}
.vac-mobile-nav__sub {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  margin: 0;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.vac-mobile-nav__sub.is-open { max-height: 500px; }
.vac-mobile-nav__sub-link {
  display: block;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.50);
  transition: color 0.12s ease;
}
.vac-mobile-nav__sub-link:hover { color: rgba(255, 255, 255, 0.90); }
.vac-mobile-nav__item--cta { margin-top: 28px; }
.vac-mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--primary-500);
  color: #fff;
  transition: background 0.2s ease;
}
.vac-mobile-nav__cta:hover { background: var(--primary-600); }

/* ---- RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px) {
  .vac-header { height: var(--nav-height-tablet); }
  /* Switch to flex so logo sits at left edge and actions at right edge,
     both with the same horizontal padding. Grid collapses oddly when
     the centre nav column is hidden. */
  .vac-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    gap: 0;
  }
  .vac-nav { display: none; }
  .vac-header__cta { display: none; }
  .vac-hamburger { display: flex; }
}
@media (max-width: 640px) {
  .vac-header { height: var(--nav-height-mobile); }
  .vac-header__inner { padding: 0 18px; }
  .vac-logo-img { height: 28px; max-width: 110px; }
}
@media (max-width: 380px) {
  .vac-header__inner { padding: 0 14px; }
}
@media (hover: none) {
  .vac-nav__item--has-dropdown .vac-dropdown { pointer-events: none; }
  .vac-nav__item.is-open > .vac-dropdown { pointer-events: auto; }
}
@media print {
  .vac-header { position: static; background: #fff; }
  .vac-dropdown, .vac-mobile-nav, .vac-hamburger, .vac-header__whatsapp { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vac-header, .vac-dropdown, .vac-mobile-nav,
  .vac-nav__link, .vac-nav__chevron, .vac-hamburger__line,
  .vac-mobile-nav__sub, .vac-mobile-nav__chevron {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---- PAGE CONTENT SPACING RESET --------------------------------
   Root cause: Kadence outputs .content-area{margin-top:5rem} as an
   inline <style> block (kadence-global-inline-css) attached to the
   same handle as global.min.css. Although global.min.css contains
   .content-vertical-padding-hide .content-area{margin-top:0} which
   has higher specificity (0,2,0 vs 0,1,0), a Kadence sequencing bug
   causes the flat .content-area rule to win in this version.

   Additionally .entry-content-wrap has padding:2rem on all sides,
   pushing full-width Kadence Blocks hero sections down by 2rem.

   Fix: scope both resets to .has-vac-header (our own body class,
   added in functions.php) so the override is authoritative and
   isolated to VAC pages only. !important guarantees it beats any
   dynamically generated Kadence inline CSS regardless of order.
   --------------------------------------------------------------- */
.has-vac-header .content-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.has-vac-header .entry-content-wrap {
  padding-top: 0 !important;
}


/* ============================================================
   GLOBAL: KADENCE CONTENT-AREA BOTTOM SPACING FIX
   Kadence adds padding-bottom to .site-main and .content-container
   which creates a white gap between the last block and the footer.
   Zeroed here globally — blocks control their own bottom spacing.
   ============================================================ */
#primary.content-area,
.content-container.site-container,
#main.site-main,
.content-wrap,
#inner-wrap,
#inner-wrap.wrap {
  padding-bottom: 0 !important;
  margin-bottom:  0 !important;
}

/* Remove Kadence white content-bg from page article wrappers.
   Pages with dark/custom backgrounds set colour inside their blocks.
   The article shell must be transparent so the page bg shows
   edge-to-edge right up to the footer with no white bleed. */
.page article.entry,
.page article.single-entry,
.page .entry.content-bg,
.page .single-entry.content-bg,
.page .entry-content-wrap {
  background-color: transparent !important;
  box-shadow:       none !important;
  padding-bottom:   0 !important;
  margin-bottom:    0 !important;
}


/* ============================================================
   VAC: SINGLE POST — TITLE ON FEATURED IMAGE
   Title text overlaid on featured image hero, center-aligned.
   ============================================================ */

/* Title hero section — position context for the overlay */
.single-post .entry-hero {
  position: relative;
  overflow: hidden;
}

/* Semi-transparent gradient overlay for text legibility */
.single-post .entry-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.70) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Title text: Rajdhani 700, white, center-aligned, on top of overlay */
.single-post .entry-hero .entry-hero-container,
.single-post .entry-hero .hero-section-title,
.single-post .entry-hero .kadence-breadcrumbs,
.single-post .entry-hero .entry-categories,
.single-post .entry-hero .entry-meta,
.single-post .entry-hero .title-align-center {
  position: relative;
  z-index: 2;
}

.single-post .entry-hero .entry-title,
.single-post .entry-hero .hero-section-title h1 {
  font-family: "Rajdhani", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: #ffffff !important;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
  margin: 0;
}