/*
 * Theme toggle — the header's light/dark control.
 *
 * Lifted out of /home/shpper/dark-mode/dark-mode-base.css on 2026-09-23 so that the generated
 * dark-mode.css can be deferred for light-mode visitors. These rules are NOT dark-only: the base
 * button styling and the .shpper-theme-anim cross-fade are needed in light mode too, and without
 * them hello-biz's `button{border:1px solid #c36}` / `button:hover{background:#c36}` paints the
 * control as a pink square.
 *
 * Enqueued unconditionally by shpper_dark_mode_styles(). It lives in the child theme's css
 * directory, which the dark-mode generator deliberately skips, so it is never fed back into
 * dark-mode.css. Keep the html[data-theme="dark"] sun/moon rules here with the rest of the
 * control — they are inert in light mode and cost nothing.
 */

/* --- Theme toggle ----------------------------------------------------------
   The header sits over the navy hero in both themes, so the control is white
   in both — no theme-specific colouring needed for it.                       */
.shpper-theme-toggle{
  --sz:38px;
  appearance:none;-webkit-appearance:none;
  /* Elementor containers paint a background overlay pseudo-element above
     static in-flow content; without a stacking context of its own the control
     is laid out correctly but painted behind the header. */
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:var(--sz);block-size:var(--sz);flex:0 0 auto;
  padding:0;margin:0 4px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;line-height:0;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
html[data-theme] .shpper-theme-toggle,
html[data-theme] .shpper-theme-toggle svg{color:#fff;stroke:currentColor}
html[data-theme] .shpper-theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
html[data-theme] .shpper-theme-toggle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}
.shpper-theme-toggle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}
.shpper-theme-toggle:active{transform:scale(.93)}
.shpper-theme-toggle:focus-visible{outline:3px solid #FFD800;outline-offset:3px}
.shpper-theme-toggle svg{inline-size:19px;block-size:19px;display:block;
  transition:opacity .22s ease,transform .32s cubic-bezier(.4,0,.2,1)}
.shpper-theme-toggle .sti-track{display:grid;place-items:center;inline-size:19px;block-size:19px}
.shpper-theme-toggle .sti-track > svg{grid-area:1/1}
/* light mode shows the moon (the action available); dark mode shows the sun */
.shpper-theme-toggle .sti-sun{opacity:0;transform:rotate(-70deg) scale(.55)}
.shpper-theme-toggle .sti-moon{opacity:1;transform:none}
html[data-theme="dark"] .shpper-theme-toggle .sti-sun{opacity:1;transform:none}
html[data-theme="dark"] .shpper-theme-toggle .sti-moon{opacity:0;transform:rotate(70deg) scale(.55)}

/* The header row is a flex container, which spaces the toggle away from the
   language switcher it belongs with. Pull most of that gap back so the two read
   as one control group.

   The gap is not constant -- Elementor steps it 37/30/25/20px down the
   breakpoints -- so a fixed offset would close it completely at <=1200px. Scale
   off the container's own --column-gap, which the button inherits, and always
   leave ~40% of it. Logical property, so it mirrors on the Arabic (RTL) pages. */
.shpper-theme-toggle:not(.shpper-theme-toggle--mobile){
  margin-inline-end:calc(var(--column-gap, 30px) * -0.6)}

/* floating fallback, used only if no header slot is found */
.shpper-theme-toggle--float{position:fixed;z-index:99998;inset-block-end:18px;inset-inline-end:18px;
  background:#1E3142;border-color:rgba(255,255,255,.28);box-shadow:0 6px 22px rgba(0,0,0,.34)}

/* Cross-fade the whole page on toggle; class is added for ~320ms only, so this
   never costs anything during normal browsing or scrolling. */
html.shpper-theme-anim,
html.shpper-theme-anim *,
html.shpper-theme-anim *::before,
html.shpper-theme-anim *::after{
  transition:background-color .28s ease,color .28s ease,
             border-color .28s ease,fill .28s ease !important}
@media (prefers-reduced-motion:reduce){
  html.shpper-theme-anim,html.shpper-theme-anim *,
  html.shpper-theme-anim *::before,html.shpper-theme-anim *::after{transition:none !important}
  .shpper-theme-toggle,.shpper-theme-toggle svg{transition:none}
}

/* Mobile header layout. These were left behind in dark-mode-base.css outside the "Theme
   toggle" section and are NOT dark-only: without .shpper-burger-group's display:flex the
   toggle and the hamburger stack vertically in light mode. Moved 2026-09-23. */
.shpper-burger-group{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.shpper-theme-toggle--mobile{--sz:42px;margin:0;align-self:center}