/* Header visibility: ensure header is shown on all pages (temporary hide removed) */
/*
  Custom transparent header for Kadence child theme
  - Transparent, ~60px height
  - Flex/grid layout with logo left (desktop) and centered (mobile)
  - Nav links left of the right-aligned Configurator button
  - Mobile (<768px): hide nav links
*/

:root {
  --mys-header-height: 60px;
  --mys-header-text: #ffffff;
  --mys-header-hover-bg: rgba(255,255,255,0.2);
  --mys-header-top-gap: 12px; /* vertical gap from top of page to header */
  --mys-logo-offset-y: 3px; /* nudge logo slightly lower on desktop */
  --mys-header-scrolled-bg: rgba(255, 255, 255, 0.85); /* slightly more transparent when scrolled */
  --mys-header-bottom-gap: var(--mys-header-top-gap); /* extend same margin below header */
}

/* Make space so content doesn't sit under fixed header */
body.mys-has-header {
  padding-top: calc(var(--mys-header-height) + var(--mys-header-top-gap) + var(--mys-header-bottom-gap)); /* unchanged visual space; header now at top with padding */
}

/* Header container */
.mys-header {
  position: fixed; /* stays on top */
  top: 0; /* header covers the top gap with padding */
  left: 0;
  right: 0;
  z-index: 9999;
  background: transparent; /* transparent by requirement */
  color: var(--mys-header-text);
  display: block;
  padding-top: var(--mys-header-top-gap);
  padding-bottom: var(--mys-header-bottom-gap);
  transition: background-color .25s ease, box-shadow .25s ease; /* fade in/out */
}

/* Faded white background when page is scrolled */
.mys-header.mys-header--scrolled {
  background: var(--mys-header-scrolled-bg);
  /* subtle elevation when scrolled */
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  /* optional blur on supported browsers */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Pseudo extensions no longer needed; header padding carries the blur/background */

/* Inner layout wrapper */
.mys-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: var(--mys-header-height); /* fixed content height inside padded header */
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* desktop: logo | nav | cta */
  align-items: center;
  gap: 12px;
}

/* Logo */
.mys-logo img {
  display: block;
  height: 34px; /* slightly smaller logo again */
  width: auto;
}

/* Slightly lower the logo relative to buttons on desktop */
@media (min-width: 768px) {
  .mys-logo img {
    transform: translateY(var(--mys-logo-offset-y));
  }
}

.mys-logo-link {
  display: inline-flex;
  align-items: center;
}

/* Nav links */
.mys-nav {
  display: flex;
  justify-content: flex-end; /* keep links near the CTA */
  gap: 6px;
  align-items: center; /* vertically center links and dropdown trigger */
}

.mys-nav a {
  display: inline-flex; /* ensure consistent vertical centering for text */
  align-items: center;
  color: #006278; /* default teal */
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600; /* semi-bold */
  transition: color .2s ease; /* color-only hover per request */
}

.mys-nav a:hover,
.mys-nav a:focus-visible {
  color: #008EAB; /* slightly lighter teal on hover */
  background: transparent; /* no highlight background */
}

/* Account dropdown */
.mys-account-dropdown {
  position: relative;
  display: inline-flex; /* behave like a link in the row */
  align-items: center; /* center the trigger text */
}
.mys-account-dropdown .mys-account-link {
  color: #006278;
}
/* Click-only: visibility toggled via .is-open set by JS */
.mys-account-dropdown.is-open .mys-account-menu {
  opacity: 1;
  transform: translate(-50%, 0); /* keep centered when visible */
  pointer-events: auto;
}

/* Keep header account menu opening on hover/focus */
header.mys-header .mys-account-dropdown:hover .mys-account-menu,
header.mys-header .mys-account-dropdown:focus-within .mys-account-menu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.mys-account-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 0;
  width: max-content; /* shrink to fit content width */
  background: rgba(255, 255, 255, 0.85); /* semi-transparent for blur */
  border-radius: 7px;
  padding: 5px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translate(-50%, -6px); /* center under trigger */
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 10000;
  /* subtle backdrop blur like header */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.mys-account-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mys-account-menu li { margin: 0; padding: 0; }
.mys-account-menu a {
  display: block;
  padding: 6px 10px; /* a bit more horizontal space next to the text */
  border-radius: 5px;
  text-decoration: none;
  font-weight: 400; /* regular weight, not bold */
  font-size: 15px; /* slightly larger text */
  white-space: nowrap; /* avoid wrapping, keep compact */
  color: #006278; /* brand teal */
}
.mys-account-menu a:hover,
.mys-account-menu a:focus-visible {
  background: #006278; /* teal bar */
  color: #fff; /* white text */
}
.mys-account-menu a.logout { color: #C62828; }
.mys-account-menu a.logout:hover,
.mys-account-menu a.logout:focus-visible {
  background: #C62828;
  color: #fff;
}

/* Keep dropdown usable with header scroll background */
.mys-header.mys-header--scrolled .mys-account-menu {
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px); /* keep blur when header is scrolled */
}

/* CTA area (Configurator button wrapper) */
.mys-cta {
  display: flex;
  align-items: center;
  gap: 16px; /* more space between Configurator and Account button */
}

/* CTA text link (Offerte aanvragen) placed left of the Configurator */
.mys-cta .mys-cta-link {
  color: #006278;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.mys-cta .mys-cta-link:hover,
.mys-cta .mys-cta-link:focus-visible {
  color: #008EAB;
  background: transparent;
  outline: none;
}

/* Provided Configurator button styles (no external frameworks) */
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 15px; /* slightly reduced to fit ~60px header */
  border: none; /* rely on box-shadow ring only */
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: #E94E1B;
  box-shadow: 0 0 0 2px #E94E1B;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  font-family: 'Outfit', sans-serif; /* as provided */
}

/* Orange variant (Configurator) */
.animated-button--orange {
  color: #E94E1B;
  box-shadow: 0 0 0 2px #E94E1B;
}
.animated-button--orange .circle { background-color: #E94E1B; }
.animated-button--orange svg { fill: #E94E1B; }
.animated-button--orange:focus-visible {
  box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.35), 0 0 0 2px #E94E1B;
}

.animated-button svg {
  position: absolute;
  width: 20px;
  fill: #E94E1B;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 { right: 10px; } /* moderate space by default */
.animated-button .arr-2 { left: -25%; }

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #E94E1B;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 10; /* ensure text is above arrows */
  padding-right: 22px; /* a bit more space to the right for the arrow */
  transform: translateX(0); /* no idle left shift to avoid collision */
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: white;
  border-radius: 12px;
}

.animated-button:hover .arr-1 { right: -25%; }
.animated-button:hover .arr-2 { left: 5px; } /* a bit further left on hover to reduce closeness to text */
.animated-button:hover .text { transform: translateX(12px); }
.animated-button:hover svg { fill: white; }

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #E94E1B;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

/* Accessibility: remove default blue outline and use brand focus ring */
.animated-button { outline: none; }
.animated-button:focus { outline: none; }
.animated-button:focus-visible {
  outline: none;
  /* ensure focus ring is visible even when hover sets box-shadow transparent */
  box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.35), 0 0 0 2px #E94E1B;
}

/* Prevent theme link focus outline around CTA wrapper and set consistent focus ring
  Do NOT strip the ring from our animated-button anchors */
.mys-cta a:not(.animated-button),
.mys-cta a:not(.animated-button):hover,
.mys-cta a:not(.animated-button):focus,
.mys-cta a:not(.animated-button):focus-visible,
.mys-cta a:not(.animated-button):active {
  outline: none;
  box-shadow: none;
}

/* Apply brand focus ring whether focus lands on the link or the button */
.mys-cta a:focus-visible,
.mys-cta a:focus-visible .animated-button,
.animated-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.35), 0 0 0 2px #E94E1B;
}

/* Remove tap highlight on mobile for cleaner feel */
.animated-button,
.mys-cta a {
  -webkit-tap-highlight-color: transparent;
}

/* Strong overrides to beat theme hover/active outlines on CTA button */
.mys-cta .animated-button--orange:hover,
.mys-cta .animated-button--orange:active {
  outline: none !important;
  border-color: transparent !important;
  /* keep brand ring instead of theme teal */
  box-shadow: 0 0 0 2px #E94E1B !important;
}

/* Ensure branded focus ring wins over theme */
.mys-cta .animated-button--orange:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.35), 0 0 0 2px #E94E1B !important;
}

/* Firefox inner focus fix */
.animated-button::-moz-focus-inner { border: 0; }

/* Extra safety: override theme button selectors with higher specificity */
header.mys-header .mys-cta button.animated-button,
header.mys-header .mys-cta button.animated-button:hover,
header.mys-header .mys-cta button.animated-button:focus,
header.mys-header .mys-cta button.animated-button:active,
header.mys-header .mys-cta button.animated-button:focus-visible {
  outline: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  border: none !important;
}

/* Nuke any pseudo-element outlines/shadows some themes add */
header.mys-header .mys-cta button.animated-button::before,
header.mys-header .mys-cta button.animated-button::after {
  content: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Aggregate state override to crush theme ring completely */
header.mys-header .mys-cta button.animated-button--orange:where(:hover, :focus, :active, :focus-visible) {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  border: none !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 2px #E94E1B !important;
}

/* UA inner focus cleanups */
header.mys-header .mys-cta button.animated-button::-webkit-focus-inner { border: 0 !important; }
header.mys-header .mys-cta button.animated-button::-moz-focus-inner { border: 0 !important; }

/* Deep reset inside CTA: prevent inner elements (svg/span) from drawing rings */
header.mys-header .mys-cta .animated-button *,
header.mys-header .mys-cta .animated-button *:where(:hover, :focus, :active, :focus-visible) {
  outline: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Blue variant for Account CTA (same animation, brand blue, no arrows/text motion) */
.animated-button--blue {
  color: #006278;
  box-shadow: 0 0 0 2px #006278;
}
.animated-button--blue .circle { background-color: #006278; }
.animated-button--blue svg { fill: #006278; }
.animated-button--blue:hover {
  color: #fff; /* white text over blue circle */
}
.animated-button--blue:active {
  box-shadow: 0 0 0 4px #006278;
}
.animated-button--blue:focus-visible,
.mys-cta .animated-button--blue:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 98, 120, 0.35), 0 0 0 2px #006278 !important;
}
/* Override generic CTA hover/active ring color for the blue variant */
header.mys-header .mys-cta .animated-button--blue:where(:hover, :focus, :active) {
  box-shadow: 0 0 0 2px #006278 !important;
}

/* Static variant: disable arrow/text slide, keep circle grow */
.animated-button--static .text { transform: none !important; padding-right: 0; }
.animated-button--static:hover .text { transform: none !important; }

/* Ensure dropdown trigger looks/acts like a button but keeps menu hover behavior */
.mys-account-cta { position: relative; }
.mys-account-cta .animated-button { padding: 3px 15px; }

/* Mobile: hide menu, center logo */
  /* Header-wide safety: strip theme hover/focus rings on header links/buttons */
  header.mys-header a:hover,
  header.mys-header a:focus,
  header.mys-header a:active,
  header.mys-header a:focus-visible,
  header.mys-header button:hover,
  header.mys-header button:focus,
  header.mys-header button:active,
  header.mys-header button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  /* Restore ring/border for our animated-button anchor (account CTA) */
  header.mys-header .mys-cta a.animated-button--blue {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 2px #006278 !important;
  }
  header.mys-header .mys-cta a.animated-button--blue:where(:hover, :focus, :active) {
    box-shadow: 0 0 0 2px #006278 !important;
  }
  header.mys-header .mys-cta a.animated-button--blue:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 98, 120, 0.35), 0 0 0 2px #006278 !important;
  }

  /* Keep accessible ring only on our CTA button when keyboard focusing */
  header.mys-header .mys-cta .animated-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(233, 78, 27, 0.35), 0 0 0 2px #E94E1B !important;
  }

  /* Remove any container-level focus or focus-within rings */
  header.mys-header .mys-cta:focus,
  header.mys-header .mys-cta:focus-within {
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Normalize native appearance to avoid UA outlines */
  header.mys-header .mys-cta .animated-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
@media (max-width: 767.98px) {
  .mys-header-inner {
    grid-template-columns: 1fr auto 1fr; /* empty | logo | cta */
  }
  .mys-nav { display: none; }
  .mys-logo { grid-column: 2; justify-self: center; }
  .mys-cta { grid-column: 3; justify-self: end; }
}

/* Header cart icon button */
header.mys-header .icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px; /* smaller to match CTA height */
  border-radius: 12px;
  background: none;
  border: 2px solid #006278;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
header.mys-header .icon-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 98, 120, 0.4);
  transform: translateY(-2px) scale(1.05);
  border-color: #004f5f;
}
header.mys-header .icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 98, 120, 0.35);
}
header.mys-header .icon-btn svg {
  width: 20px;  /* align with CTA arrow size */
  height: 20px; /* align with CTA arrow size */
  stroke: #006278;
  transition: transform 0.3s ease;
}
header.mys-header .icon-btn:hover svg {
  transform: rotate(-5deg) scale(1.1);
}
/* Badge */
header.mys-header .cart-badge {
  position: absolute;
  top: -4px;   /* tighter to top-right corner */
  right: -4px; /* slight overhang for corner placement */
  background: #E94E1B;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  animation: mys-cart-pop 0.3s ease;
  line-height: 1;
}
@keyframes mys-cart-pop {
  0% { transform: scale(0.6); opacity: 0; }
  80% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}