/* =========================================================
  brand-core.css
  Purpose:
   - Brand mode foundation (bg layers, stacking, header/nav shell, wrappers, glass plates)
  Scope:
   - body.hk-brand (canonical)
   - body.page-template-page-brand-php (compat)
   - driver archive/single (legacy body classes)
========================================================= */

/* =========================================================
  0) Scope + Variables
========================================================= */
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver){
  color:#fff;
  background:#000;
  position: relative;
  isolation: isolate;

  /* theme vars */
  --pcb-line: rgba(255,255,255,.75);
  --pcb-pad:  rgba(255,255,255,.85);
  --pcb-ink:  rgba(255,255,255,.10);
  --pcb-glass: rgba(0,0,0,.55);

  --h-ink: rgba(255,255,255,.96);
  --h-muted: rgba(255,255,255,.72);

  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.72);
  --link: rgba(255,255,255,.88);
  --linkHover: rgba(255,255,255,1);

  /* z-index scale */
  --z-bg: 0;
  --z-bg2: 1;
  --z-page: 2;
  --z-header: 10;
  --z-menu: 100;
}

/* glint */
@keyframes pcbGlint{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* =========================================================
  1) Background layers (fixed)
========================================================= */
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver)::before{
  content:"";
  position: fixed !important;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background:#000 url("/wp-content/themes/welcart_basic-child/images/brand/pcb-bg.webp")
    center center / cover no-repeat;
}

body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver)::after{
  content:"";
  position: fixed !important;
  inset: 0;
  z-index: var(--z-bg2);
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M20 30 H90 V70 H140'/%3E%3Cpath d='M60 210 V140 H120 V100 H200'/%3E%3Cpath d='M210 40 H160 V120 H100 V160 H30'/%3E%3Cpath d='M30 120 H70 V30'/%3E%3Cpath d='M120 210 V190 H190'/%3E%3Cpath d='M40 60 H120 V30 H180'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='0.06'%3E%3Ccircle cx='20' cy='30' r='2'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='90' cy='70' r='2'/%3E%3Ccircle cx='140' cy='70' r='2'/%3E%3Ccircle cx='60' cy='210' r='2'/%3E%3Ccircle cx='60' cy='140' r='2'/%3E%3Ccircle cx='120' cy='140' r='2'/%3E%3Ccircle cx='120' cy='100' r='2'/%3E%3Ccircle cx='200' cy='100' r='2'/%3E%3Ccircle cx='210' cy='40' r='2'/%3E%3Ccircle cx='160' cy='40' r='2'/%3E%3Ccircle cx='160' cy='120' r='2'/%3E%3Ccircle cx='100' cy='120' r='2'/%3E%3Ccircle cx='100' cy='160' r='2'/%3E%3Ccircle cx='30' cy='160' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 260px;
}

/* Foreground stacking */
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #page,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #masthead,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #main,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #main.wrapper,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #colophon,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) footer{
  position: relative;
  z-index: var(--z-page);
}

/* =========================================================
  2) Header / Global Nav
  NOTE: keep scope strict to brand-template pages by default
========================================================= */
body:is(.hk-brand, .page-template-page-brand-php) #masthead.site-header{
  background: var(--pcb-glass);
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
  z-index: var(--z-header);
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead .inner{ padding:18px 0; }
body:is(.hk-brand, .page-template-page-brand-php) #masthead .site-description{ display:none; }
body:is(.hk-brand, .page-template-page-brand-php) #masthead a{ color:#fff; }

body:is(.hk-brand, .page-template-page-brand-php) #site-navigation{ margin-top:10px; }
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container{ width:100%; }

/* disable parent theme separators */
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li{
  border-left: 0 !important;
  border-right: 0 !important;
}
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li::before,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li::after{
  content: none !important;
}

/* BRAND NAV (PC/Tablet base) */
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  row-gap:10px;
  padding:6px 0 0;
  margin:0 auto;
  width:100%;
  list-style:none;
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li{
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 14px;
  border:1px solid var(--pcb-ink);
  border-radius:10px;
  background: rgba(255,255,255,.06);

  color:#fff;
  text-decoration:none !important;
  border-bottom:0 !important;

  font-size:13px;
  letter-spacing:.08em;
  text-transform: uppercase;
  white-space:nowrap;

  opacity:.92;
  overflow:hidden;
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a:hover,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a:hover,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a:hover{
  opacity:1;
  background: rgba(255,255,255,.10);
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a::after,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a::after,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.10) 60%,
    rgba(255,255,255,.10) 100%
  );
  background-size:240% 100%;
  background-position:0% 50%;
  opacity:.65;
  pointer-events:none;
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a::before,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a::before,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a::before{
  content:"";
  position:absolute;
  right:10px;
  bottom:7px;
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,255,255,.75);
  opacity:.55;
  pointer-events:none;
}

body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a:hover::after,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a:hover::after,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a:hover::after{
  animation: pcbGlint 900ms ease-out 1;
  opacity:.95;
}
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a:hover::before,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a:hover::before,
body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a:hover::before{
  opacity:.9;
}

/* =========================================================
  3) Main / Footer (minimal skeleton touch)
========================================================= */
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #main.wrapper{
  background:transparent;
  color:#fff;
  padding:0 !important;
}
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #main.wrapper .content-area,
body:is(.hk-brand, .page-template-page-brand-php, .post-type-archive-driver, .single-driver) #main.wrapper #primary{
  width:100% !important;
  float:none !important;
}

/* =========================================================
  3-1) Brand template: glass plate on main.brand-mode
  (IMPORTANT: blur needs non-transparent bg)
========================================================= */
body:is(.hk-brand, .page-template-page-brand-php) main.brand-mode{
  position: relative;
  padding:56px 20px;
  max-width:1040px;
  margin:0 auto;

  background: rgba(0,0,0,.45) !important;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px;
  overflow: hidden;
}

/* 2) Disable older pseudo layer if any */
body:is(.hk-brand, .page-template-page-brand-php) main.brand-mode::before{
  content: none !important;
}

/* keep content above glass */
body:is(.hk-brand, .page-template-page-brand-php) main.brand-mode > *{
  position: relative;
  z-index: 1;
}

body:is(.hk-brand, .page-template-page-brand-php) #colophon,
body:is(.hk-brand, .page-template-page-brand-php) footer{
  background: rgba(0,0,0,.92);
  color:#fff;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* =========================================================
  Drivers: glass plate (match main.brand-mode)
========================================================= */
body.post-type-archive-driver .drivers-page,
body.single-driver .drivers-page{
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 20px;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px;
  overflow: hidden;
}

/* glass layer */
body.post-type-archive-driver .drivers-page::before,
body.single-driver .drivers-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: rgba(0,0,0,.45) !important;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  pointer-events:none;
}

/* content above glass */
body.post-type-archive-driver .drivers-page > *,
body.single-driver .drivers-page > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
  4) Dropdown (PC)
========================================================= */
@media (min-width: 769px){
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li.menu-item-has-children{
    position: relative;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation .sub-menu{
    background: rgba(0,0,0,.88) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
    z-index: calc(var(--z-header) + 1) !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation .sub-menu li{
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation .sub-menu a{
    display:block;
    color: rgba(255,255,255,.92) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    text-decoration:none !important;
    background: transparent !important;
    white-space: nowrap;
    border-bottom: 0 !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation .sub-menu a:hover,
  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation .sub-menu li:hover > a{
    color:#fff !important;
    background: rgba(255,255,255,.08) !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li.menu-item-has-children > .sub-menu{
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li.menu-item-has-children::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:14px;
    background: transparent;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li.menu-item-has-children:hover > .sub-menu,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation li.menu-item-has-children:focus-within > .sub-menu{
    display:block !important;
  }
}

/* =========================================================
  5) Mobile hamburger
========================================================= */
@media (max-width: 768px){
  body:is(.hk-brand, .page-template-page-brand-php) #masthead.site-header{
    backdrop-filter:none !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #site-navigation label[for="panel"]{
    position: fixed !important;
    top: 16px;
    right: 16px;
    z-index: calc(var(--z-menu) + 2) !important;
    background: rgba(0,0,0,.35) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 12px !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php)
  header #site-navigation input#panel.on-off:checked ~ .nav-menu-open > ul.header-nav-container{
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--z-menu) !important;
    width: 100vw !important;

    height: 100vh !important;
    height: 100dvh !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,.90) !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav{
    display:block !important;
    padding: 12px 14px 18px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li{
    display:block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .header-nav-container > ul > li > a,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .nav-menu-open > ul > li > a,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation ul.brand-nav > li > a{
    width: min(560px, 100%) !important;
    margin: 0 auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 14px !important;
    border-radius: 12px !important;
    white-space: normal;
  }

  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation .sub-menu{
    margin: 8px 0 0 !important;
    padding: 8px 8px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation a::before,
  body:is(.hk-brand, .page-template-page-brand-php) #masthead #site-navigation a::after{
    transition:none !important;
    animation:none !important;
  }
}