/* =========================================================
   PP STYLE LAYERS v1.29.0 — HEADER LAYER AUTHORITY
   Consolidated Blocksy site-header, desktop navigation, unified mobile
   command bar, sticky-state reading shield, and accessible off-canvas drawer.

   v1.29.0 architecture:
   - only verified site-header roots are targeted; semantic article/page <header>
     elements are deliberately excluded from the stacking contract;
   - one documented header/dropdown/drawer layer scale;
   - one opaque mobile sticky-state authority across all public routes;
   - no Gateway, archive, article, image, or H1 selector participates in
     header stacking;
   - Blocksy open/closed menu behavior and sticky transforms remain native.
========================================================= */

:root {
  /* Header layers stay above site content and Atmosphere (<=1000), below the
     WordPress admin bar (99999), while the viewport drawer remains topmost. */
  --pp-z-header-base: 50;
  --pp-z-header-sticky: 9990;
  --pp-z-header-dropdown: 10000;
  --pp-z-header-drawer: 999999;
  --pp-header-opaque-bg: #030303;
}

/* =========================================================
   10. HEADER POLISH — BLOCKSY SAFE
   Visual only. Does not force menu open/closed states.
========================================================= */

header[data-id="type-1"],
.site-header,
#header,
.ct-header {
  position: relative;
  z-index: var(--pp-z-header-base);
}

.ct-header [data-row],
header[data-id="type-1"] [data-row] {
  position: relative;
  min-height: auto !important;
  background:
    linear-gradient(180deg, rgba(3, 3, 3, 0.88), rgba(3, 3, 3, 0.70)) !important;
  border-bottom: 1px solid rgba(216, 188, 123, 0.20);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    inset 0 -1px 0 rgba(234, 210, 154, 0.06);
}

.ct-header [data-row] [data-column],
header[data-id="type-1"] [data-row] [data-column] {
  min-height: auto !important;
  align-items: center;
}

/* Logo sizing fix: prevents tiny/collapsed logo in Blocksy header */
.ct-header [data-id="logo"],
header[data-id="type-1"] [data-id="logo"],
.ct-header .site-branding,
header[data-id="type-1"] .site-branding {
  min-width: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-header .site-logo-container,
header[data-id="type-1"] .site-logo-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.ct-header .site-logo-container img,
.ct-header .custom-logo,
header[data-id="type-1"] .site-logo-container img,
header[data-id="type-1"] .custom-logo {
  max-height: 96px !important;
  width: auto !important;
  min-width: 110px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(216, 188, 123, 0.26))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38));
  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.ct-header .site-logo-container:hover img,
header[data-id="type-1"] .site-logo-container:hover img {
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 18px rgba(234, 210, 154, 0.32))
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.44));
}

.ct-header [data-row]::after,
header[data-id="type-1"] [data-row]::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(234, 210, 154, 0.42),
    transparent
  );
}


/* =========================================================
   11. PREMIUM NAVIGATION: Blocksy owns typography, positioning and sizing.
   PP Style Layers owns only an accessible, restrained surface treatment.
========================================================= */

:root {
  --pp-nav-text: #EAE1CF;
  --pp-nav-hover: #EAD29A;
  --pp-nav-active: #D8BC7B;
  --pp-nav-surface: #12130F;
  --pp-nav-line: #40351F;
  --pp-nav-focus: #F2D99F;
}

@media (min-width: 1000px) {
  /* Blocksy owns sizes, weights, spacing and dropdown width. The primary
     navigation family alone uses validated local Cinzel (see below). */
  .ct-header [data-id="menu"] {
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .ct-header [data-id="menu"] > ul > li > a {
    /* Narrow local-Cinzel exception: Blocksy may name remote "Cinzel" while
       this plugin suppresses remote fonts and owns "PP Cinzel Local". */
    font-family: var(--pp-nav-font) !important;
    background: transparent;
    border-radius: 3px;
    text-shadow: none;
  }
  .ct-header [data-id="menu"] > ul > li > a:hover,
  .ct-header [data-id="menu"] > ul > li.current-menu-item > a,
  .ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a {
    background: transparent;
    box-shadow: inset 0 -2px var(--pp-nav-active);
  }
  .ct-header .sub-menu,
  #header .sub-menu,
  .site-header .sub-menu {
    z-index: var(--pp-z-header-dropdown);
    background: var(--pp-nav-surface) !important;
    border: 1px solid var(--pp-nav-line);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.38);
  }
  .ct-header .sub-menu a {
    /* A local system stack, not forced Cinzel or a remote Google Font. */
    font-family: var(--pp-sans, system-ui, sans-serif);
    /* Native Blocksy owns child-link size, weight, and line spacing. */
    text-transform: none;
    text-shadow: none;
    background: transparent;
  }
  .ct-header .sub-menu a:hover,
  .ct-header .sub-menu a:focus-visible {
    background: rgba(216,188,123,.085);
  }
  .ct-header .sub-menu li + li { border-top: 1px solid var(--pp-nav-line); }
}
.ct-header [data-id="menu"] a:focus-visible,
.ct-header .sub-menu a:focus-visible {
  outline: 2px solid var(--pp-nav-focus);
  outline-offset: 3px;
}

/* =========================================================
   12. HEADER SOCIALS / SEARCH ICONS
========================================================= */

.ct-header .ct-social-box,
.ct-header [data-id="socials"],
header[data-id="type-1"] .ct-social-box,
header[data-id="type-1"] [data-id="socials"] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-header .ct-social-box a,
.ct-header [data-id="socials"] a,
header[data-id="type-1"] .ct-social-box a,
header[data-id="type-1"] [data-id="socials"] a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-nav-active) !important;
  -webkit-text-fill-color: var(--pp-nav-active) !important;
  background: linear-gradient(
    180deg,
    rgba(11, 10, 7, 0.76),
    rgba(3, 3, 3, 0.52)
  );
  border: 1px solid rgba(216, 188, 123, 0.28);
  border-radius: 10px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(234, 210, 154, 0.08);
}

.ct-header .ct-social-box a:hover,
.ct-header [data-id="socials"] a:hover,
header[data-id="type-1"] .ct-social-box a:hover,
header[data-id="type-1"] [data-id="socials"] a:hover {
  color: var(--pp-nav-hover) !important;
  -webkit-text-fill-color: var(--pp-nav-hover) !important;
  transform: translateY(-2px);
  border-color: rgba(234, 210, 154, 0.55);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(234, 210, 154, 0.18);
}

.ct-header [data-id="search"],
header[data-id="type-1"] [data-id="search"] {
  color: var(--pp-nav-active) !important;
}

.ct-header [data-id="search"] svg,
header[data-id="type-1"] [data-id="search"] svg,
.ct-social-box svg,
[data-id="socials"] svg,
.ct-social-box svg *,
[data-id="socials"] svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.ct-header [data-id="search"]:hover,
header[data-id="type-1"] [data-id="search"]:hover {
  color: var(--pp-nav-hover) !important;
}

/* =========================================================
   12B. MID-WIDTH DESKTOP FIT CONTRACT
   Preserves the full desktop navigation between the 999px mobile breakpoint
   and wide desktop while preventing the wordmark from colliding with the menu.
========================================================= */

@media (min-width: 1000px) and (max-width: 1365px) {
  .ct-header,
  header[data-id="type-1"],
  #header,
  .site-header {
    --pp-compact-desktop-logo-width: clamp(156px, 15vw, 190px);
    --pp-compact-desktop-logo-height: 64px;
    --pp-compact-desktop-nav-size: clamp(11px, 0.86vw, 12px);
    --pp-compact-desktop-nav-padding: clamp(5px, 0.55vw, 8px);
  }

  .ct-header [data-row="middle"] :is(.ct-container, .ct-header-container),
  header[data-id="type-1"] [data-row="middle"] :is(.ct-container, .ct-header-container) {
    grid-template-columns:
      minmax(var(--pp-compact-desktop-logo-width), var(--pp-compact-desktop-logo-width))
      minmax(0, 1fr)
      auto !important;
    column-gap: clamp(8px, 1vw, 14px) !important;
    padding-inline: clamp(12px, 1.8vw, 24px) !important;
  }

  .ct-header [data-row="middle"] [data-column="start"],
  .ct-header [data-row="middle"] [data-column="middle"],
  .ct-header [data-row="middle"] [data-column="end"],
  header[data-id="type-1"] [data-row="middle"] [data-column="start"],
  header[data-id="type-1"] [data-row="middle"] [data-column="middle"],
  header[data-id="type-1"] [data-row="middle"] [data-column="end"] {
    min-width: 0;
  }

  .ct-header [data-id="logo"],
  header[data-id="type-1"] [data-id="logo"],
  .ct-header .site-branding,
  header[data-id="type-1"] .site-branding {
    width: var(--pp-compact-desktop-logo-width) !important;
    min-width: 0 !important;
    max-width: var(--pp-compact-desktop-logo-width) !important;
    flex: 0 1 auto;
    justify-content: flex-start;
  }

  .ct-header .site-logo-container,
  header[data-id="type-1"] .site-logo-container {
    width: 100%;
    max-width: 100%;
  }

  .ct-header .site-logo-container img,
  .ct-header .custom-logo,
  header[data-id="type-1"] .site-logo-container img,
  header[data-id="type-1"] .custom-logo {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: var(--pp-compact-desktop-logo-height) !important;
    height: auto !important;
  }

  .ct-header [data-id="menu"],
  header[data-id="type-1"] [data-id="menu"] {
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
    padding: 5px clamp(6px, 0.8vw, 10px);
  }

  .ct-header [data-id="menu"] > ul,
  header[data-id="type-1"] [data-id="menu"] > ul {
    gap: 0;
    flex-wrap: nowrap;
  }

  .ct-header [data-id="menu"] > ul > li > a,
  .ct-header nav > ul > li > a,
  header[data-id="type-1"] nav > ul > li > a {
    padding: 7px var(--pp-compact-desktop-nav-padding);
    /* Blocksy may collapse excess items; no forced menu font size. */
    white-space: nowrap;
  }

  .ct-header [data-row="middle"] [data-column="end"],
  header[data-id="type-1"] [data-row="middle"] [data-column="end"],
  .ct-header .ct-social-box,
  .ct-header [data-id="socials"],
  header[data-id="type-1"] .ct-social-box,
  header[data-id="type-1"] [data-id="socials"] {
    gap: 6px !important;
  }

  .ct-header .ct-social-box a,
  .ct-header [data-id="socials"] a,
  header[data-id="type-1"] .ct-social-box a,
  header[data-id="type-1"] [data-id="socials"] a {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1000px) and (max-width: 1180px) {
  .ct-header,
  header[data-id="type-1"],
  #header,
  .site-header {
    --pp-compact-desktop-logo-width: 150px;
    --pp-compact-desktop-logo-height: 58px;
    --pp-compact-desktop-nav-size: 10.75px;
    --pp-compact-desktop-nav-padding: 5px;
  }

  .ct-header [data-row="middle"] :is(.ct-container, .ct-header-container),
  header[data-id="type-1"] [data-row="middle"] :is(.ct-container, .ct-header-container) {
    column-gap: 7px !important;
    padding-inline: 12px !important;
  }

  .ct-header [data-id="menu"],
  header[data-id="type-1"] [data-id="menu"] {
    padding-inline: 5px;
  }

  .ct-header .ct-social-box a,
  .ct-header [data-id="socials"] a,
  header[data-id="type-1"] .ct-social-box a,
  header[data-id="type-1"] [data-id="socials"] a {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   13. MOBILE HEADER + OFF-CANVAS — CONSOLIDATED
========================================================= */

@media (max-width: 999px) {
  .ct-header,
  header[data-id="type-1"],
  #header,
  .site-header {
    --pp-mobile-header-height: 72px;
    --pp-mobile-logo-min-width: 98px;
    --pp-mobile-logo-max-height: 42px;
    --pp-mobile-logo-image-min-width: 82px;
    --pp-mobile-control-size: 44px;
    --pp-mobile-trigger-icon-size: 22px;
    --pp-mobile-search-icon-size: 20px;

    position: relative;
    z-index: var(--pp-z-header-sticky) !important;
    isolation: isolate;
    background: var(--pp-header-opaque-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ct-header [data-row],
  header[data-id="type-1"] [data-row] {
    --height: var(--pp-mobile-header-height) !important;
    --padding: 0px !important;
    min-height: var(--pp-mobile-header-height) !important;
    height: var(--pp-mobile-header-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background:
      linear-gradient(180deg, rgba(3, 3, 3, 1) 0%, rgba(3, 3, 3, 0.996) 100%) !important;
    border-bottom: 1px solid rgba(216, 188, 123, 0.24);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.36),
      inset 0 -1px 0 rgba(234, 210, 154, 0.08);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .ct-header [data-row] :is(.ct-container, .ct-header-container),
  header[data-id="type-1"] [data-row] :is(.ct-container, .ct-header-container) {
    min-height: var(--pp-mobile-header-height) !important;
    height: var(--pp-mobile-header-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ct-header [data-row] [data-column],
  header[data-id="type-1"] [data-row] [data-column] {
    align-items: center !important;
  }

  .ct-header [data-id="logo"],
  header[data-id="type-1"] [data-id="logo"],
  .ct-header .site-branding,
  header[data-id="type-1"] .site-branding {
    min-width: var(--pp-mobile-logo-min-width) !important;
    max-width: calc(100vw - 132px);
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center !important;
  }

  .ct-header .site-logo-container,
  header[data-id="type-1"] .site-logo-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .ct-header .site-logo-container img,
  .ct-header .custom-logo,
  header[data-id="type-1"] .site-logo-container img,
  header[data-id="type-1"] .custom-logo {
    max-height: var(--pp-mobile-logo-max-height) !important;
    min-width: var(--pp-mobile-logo-image-min-width) !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain;
    filter:
      drop-shadow(0 0 8px rgba(216, 188, 123, 0.20))
      drop-shadow(0 5px 10px rgba(0, 0, 0, 0.34));
  }

  .ct-header [data-id="trigger"],
  header[data-id="type-1"] [data-id="trigger"],
  .ct-header [data-id="search"],
  header[data-id="type-1"] [data-id="search"] {
    width: var(--pp-mobile-control-size) !important;
    height: var(--pp-mobile-control-size) !important;
    min-width: var(--pp-mobile-control-size) !important;
    min-height: var(--pp-mobile-control-size) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-nav-active) !important;
    background: linear-gradient(
      180deg,
      rgba(11, 10, 7, 0.74),
      rgba(3, 3, 3, 0.52)
    );
    border: 1px solid rgba(216, 188, 123, 0.28);
    border-radius: 10px !important;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(234, 210, 154, 0.08);
  }

  .ct-header [data-id="trigger"] svg,
  header[data-id="type-1"] [data-id="trigger"] svg,
  .ct-header [data-id="trigger"] .ct-icon,
  header[data-id="type-1"] [data-id="trigger"] .ct-icon {
    width: var(--pp-mobile-trigger-icon-size) !important;
    height: var(--pp-mobile-trigger-icon-size) !important;
    min-width: var(--pp-mobile-trigger-icon-size) !important;
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .ct-header [data-id="search"] svg,
  header[data-id="type-1"] [data-id="search"] svg,
  .ct-header [data-id="search"] .ct-icon,
  header[data-id="type-1"] [data-id="search"] .ct-icon {
    width: var(--pp-mobile-search-icon-size) !important;
    height: var(--pp-mobile-search-icon-size) !important;
    min-width: var(--pp-mobile-search-icon-size) !important;
  }

  .ct-header [data-id="trigger"]:hover,
  header[data-id="type-1"] [data-id="trigger"]:hover,
  .ct-header [data-id="search"]:hover,
  header[data-id="type-1"] [data-id="search"]:hover {
    color: var(--pp-nav-hover) !important;
    border-color: rgba(234, 210, 154, 0.50);
  }

  .ct-header [data-row]::after,
  header[data-id="type-1"] [data-row]::after {
    left: 4% !important;
    right: 4% !important;
    background: linear-gradient(90deg, transparent, rgba(234, 210, 154, 0.36), transparent) !important;
  }

  /* Blocksy may attach sticky positioning to a dedicated holder or to a
     descendant of the real site header. Keep that holder above later page
     content without changing Blocksy's position, transform, or visibility. */
  .ct-sticky-container,
  .ct-sticky-container > div,
  #header [data-sticky],
  .ct-header [data-sticky],
  .site-header [data-sticky],
  header[data-id="type-1"] [data-sticky] {
    z-index: var(--pp-z-header-sticky) !important;
    isolation: isolate;
    background-color: var(--pp-header-opaque-bg) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* The rendered sticky row and its layout containers own the visible paint.
     This prevents H1 text and featured images from ghosting through the bar. */
  .ct-sticky-container [data-row],
  #header [data-sticky] [data-row],
  .ct-header [data-sticky] [data-row],
  .site-header [data-sticky] [data-row],
  header[data-id="type-1"] [data-sticky] [data-row],
  .ct-sticky-container :is(.ct-container, .ct-header-container) {
    background-color: var(--pp-header-opaque-bg) !important;
    background-image: linear-gradient(
      180deg,
      rgba(3, 3, 3, 1) 0%,
      rgba(3, 3, 3, 0.996) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }


  /* Native drawer viewport anchoring. */
  #offcanvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: var(--pp-z-header-drawer) !important;

    /* Blocksy's small-phone default aligns this panel from the bottom.
       The drawer contract is top-origin, full-height, and independently
       scrollable so the opening menu never begins below a blank viewport. */
    --vertical-alignment: flex-start !important;
    --panel-content-height: 100% !important;
  }

  #offcanvas .ct-panel-inner {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #offcanvas .ct-panel-content {
    min-height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }

  #offcanvas .ct-panel-content-inner {
    min-height: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
  }

  /* Keep the actions visible while the menu scrolls; the close button itself
     retains Blocksy's native display and positioning contract. */
  #offcanvas .ct-panel-actions {
    position: sticky !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    z-index: 5 !important;
  }



  /* PREMIUM DRAWER: preserve Blocksy native accordion and structural geometry;
     simplify visual hierarchy and remove individual gold link cards. */
  /* 1.31.8: an opaque full-viewport canvas is necessary for modal and
     side-panel Blocksy layouts. The legacy .88 alpha allowed underlying hero
     headings and CTAs to be visible through the active navigation surface. */
  #offcanvas {
    background-color: #080907 !important;
    background-image: none !important;
  }
  /* Let Blocksy's Modal use the full available viewport. A previous
     side-panel width cap applied even when Reveal As = Modal, contrary to
     the Blocksy layout contract and creating an unnecessarily narrow panel. */
  #offcanvas .ct-panel-inner {
    background: #080907 !important;
  }
  #offcanvas[data-behaviour="modal"] .ct-panel-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Side Panel geometry (width, placement, animation) belongs to Blocksy. */
  #offcanvas[data-behaviour*="side"] .ct-panel-inner {
    border-left: 1px solid var(--pp-nav-line);
    box-shadow: 0 0 40px rgba(0,0,0,.58);
  }
  /* On wide tablets a centered reading column avoids uncomfortably long
     navigation rows, without changing the full-screen Modal surface. */
  #offcanvas[data-behaviour="modal"] .ct-panel-content-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
  #offcanvas .ct-panel-content {
    position: relative;
    padding: max(22px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)) !important;
    /* Paint the actual content surface too, not only an assumed wrapper.
       This is essential when Blocksy uses a full-screen modal layout. */
    background: #080907 !important;
  }
  #offcanvas .ct-panel-content::before,
  #offcanvas .ct-panel-content::after { content: none; }
  #offcanvas .ct-toggle-close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    /* Native Blocksy owns visibility; do not force a second close control
       to display if the active Off Canvas configuration has hidden it. */
    align-items: center;
    justify-content: center;
    color: var(--pp-nav-active) !important;
    background: transparent !important;
    border: 1px solid var(--pp-nav-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  #offcanvas .ct-toggle-close svg,
  #offcanvas .ct-toggle-close .ct-icon {
    width: 19px !important;
    height: 19px !important;
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  #offcanvas [data-id="mobile-menu"],
  #offcanvas .mobile-menu,
  #offcanvas nav { width: 100%; }
  #offcanvas [data-id="mobile-menu"] ul,
  #offcanvas .mobile-menu ul {
    display: grid;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #offcanvas [data-id="mobile-menu"] li,
  #offcanvas .mobile-menu li { margin: 0 !important; padding: 0 !important; }
  #offcanvas [data-id="mobile-menu"] > ul > li > a,
  #offcanvas .mobile-menu > ul > li > a {
    /* Primary nav alone uses the validated local Cinzel; children use sans. */
    font-family: var(--pp-nav-font) !important;
  }
  #offcanvas [data-id="mobile-menu"] li > a,
  #offcanvas .mobile-menu li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 44px 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--pp-nav-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    /* Top level font family/weight/size inherited from Blocksy Customizer. */
  }
  #offcanvas [data-id="mobile-menu"] li > a:hover,
  #offcanvas .mobile-menu li > a:hover {
    color: var(--pp-nav-hover);
    background: rgba(216,188,123,.06);
  }
  #offcanvas .current-menu-item > a,
  #offcanvas .current_page_item > a,
  #offcanvas .current-menu-ancestor > a,
  #offcanvas .menu-item-has-children[class*="open"] > a,
  #offcanvas .menu-item-has-children[class*="active"] > a {
    color: var(--pp-nav-active);
    background: rgba(216,188,123,.06);
    box-shadow: inset 2px 0 var(--pp-nav-active);
  }
  #offcanvas .ct-sub-menu-parent,
  #offcanvas .child-indicator,
  #offcanvas .ct-toggle-dropdown-mobile { color: var(--pp-nav-active); }
  #offcanvas .ct-toggle-dropdown-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--pp-nav-line);
    border-radius: 0;
    box-shadow: none;
  }
  #offcanvas .ct-toggle-dropdown-mobile svg,
  #offcanvas .child-indicator svg { color: currentColor; fill: currentColor; stroke: currentColor; }
  #offcanvas .sub-menu,
  #offcanvas .children {
    margin: 0 0 8px 12px !important;
    padding: 0 0 0 12px !important;
    background: transparent !important;
    border: 0;
    border-left: 1px solid var(--pp-nav-line);
    border-radius: 0;
    box-shadow: none;
  }
  #offcanvas .sub-menu a,
  #offcanvas .children a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
    font-family: var(--pp-sans, system-ui, sans-serif);
    /* Native Blocksy owns child-link size, weight, and line spacing. */
    text-transform: none;
    border: 0;
    border-bottom: 1px solid rgba(64,53,31,.55);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    overflow-wrap: anywhere;
  }
  #offcanvas .sub-menu a:hover,
  #offcanvas .children a:hover { background: rgba(216,188,123,.065); }
  #offcanvas a:focus-visible,
  #offcanvas button:focus-visible,
  #offcanvas .ct-toggle-dropdown-mobile:focus-visible,
  #offcanvas .ct-toggle-close:focus-visible {
    outline: 2px solid var(--pp-nav-focus) !important;
    outline-offset: 3px;
  }

  /* Social/search blocks inside offcanvas if Blocksy outputs them */
  #offcanvas [data-id="socials"],
  #offcanvas .ct-social-box {
    justify-content: center;
    margin-top: 20px;
  }

  #offcanvas [data-id="socials"] a,
  #offcanvas .ct-social-box a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }


  /* Native Blocksy submenu state restoration. */
  /*
    Closed mobile menu groups stay closed.
    When Blocksy adds dropdown-active to a parent item,
    the matching rule stops and the submenu opens normally.
  */
  #offcanvas [data-id="mobile-menu"][data-interaction="click"] [class*="children"]:not(.dropdown-active) > ul,
  #offcanvas .mobile-menu[data-interaction="click"] [class*="children"]:not(.dropdown-active) > ul {
    display: none !important;
  }

  /*
    Keep nested menu lists clean without forcing their display mode.
    Blocksy controls whether each submenu is visible.
  */
  #offcanvas [data-id="mobile-menu"] .sub-menu,
  #offcanvas [data-id="mobile-menu"] .children,
  #offcanvas .mobile-menu .sub-menu,
  #offcanvas .mobile-menu .children {
    list-style: none !important;
  }

  /* Minimum 44px separate dropdown touch target */
  #offcanvas .ct-toggle-dropdown-mobile {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }

  /* Rotate the dropdown arrow when expanded */
  #offcanvas .ct-toggle-dropdown-mobile svg {
    transition: transform 0.2s ease;
  }

  #offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

}

@media (max-width: 480px) {
  .ct-header,
  header[data-id="type-1"],
  #header,
  .site-header {
    --pp-mobile-header-height: 68px;
    --pp-mobile-logo-min-width: 92px;
    --pp-mobile-logo-max-height: 40px;
    --pp-mobile-logo-image-min-width: 78px;
  }
}

/* Smaller phones */
@media (max-width: 420px) {
  /* Do not reduce the Modal to 94vw; Blocksy owns Side Panel widths. */
  #offcanvas .ct-panel-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Blocksy owns responsive menu typography at this breakpoint. */

}

/* Premium accessibility safeguards; header/drawer only. */
@media (prefers-reduced-motion: reduce) {
  .ct-header [data-id="menu"] *, #offcanvas * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .ct-header [data-id="menu"] a:focus-visible, #offcanvas a:focus-visible,
  #offcanvas button:focus-visible { outline: 2px solid Highlight !important; }
  #offcanvas .ct-panel-inner, #offcanvas .sub-menu { border-color: CanvasText !important; }
}