/* ============================================================
   SEF v1.0.26 — segmented theme tabs
   Plain WordPress adaptation of the React/shadcn tabs-style theme switcher.
============================================================ */
.sef-theme-tabs {
  --sef-theme-tabs-bg: rgba(255,255,255,0.10);
  --sef-theme-tabs-border: rgba(255,255,255,0.22);
  --sef-theme-tabs-fg: rgba(255,255,255,0.82);
  --sef-theme-tabs-active-bg: rgba(255,255,255,0.18);
  --sef-theme-tabs-active-fg: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--sef-theme-tabs-border);
  border-radius: 14px;
  background: var(--sef-theme-tabs-bg);
  color: var(--sef-theme-tabs-fg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.sef-theme-tab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: var(--font-primary, inherit);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.sef-theme-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sef-theme-tabs-active-bg);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}

.sef-theme-tab:hover {
  color: var(--sef-theme-tabs-active-fg);
  transform: translateY(-1px);
}

.sef-theme-tab.is-active,
.sef-theme-tab[aria-pressed="true"] {
  color: var(--sef-theme-tabs-active-fg);
}

.sef-theme-tab.is-active::before,
.sef-theme-tab[aria-pressed="true"]::before {
  opacity: 1;
  transform: scale(1);
}

.sef-theme-tab svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sef-theme-tab[data-theme-choice="dark"] svg path {
  fill: currentColor;
  stroke: currentColor;
}

/* Header context: white treatment over purple/dark hero, purple treatment over light surfaces. */
html.light-mode #site-header.scrolled:not(.sef-over-dark-section) .sef-theme-tabs,
html.light-mode #site-header.sef-over-light-section .sef-theme-tabs {
  --sef-theme-tabs-bg: rgba(76,22,90,0.08);
  --sef-theme-tabs-border: rgba(76,22,90,0.20);
  --sef-theme-tabs-fg: rgba(76,22,90,0.72);
  --sef-theme-tabs-active-bg: #FFFFFF;
  --sef-theme-tabs-active-fg: #4C165A;
  box-shadow: 0 8px 22px rgba(76,22,90,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
}

html.light-mode #site-header:not(.scrolled) .sef-theme-tabs,
html.light-mode #site-header.sef-over-dark-section .sef-theme-tabs {
  --sef-theme-tabs-bg: rgba(255,255,255,0.10);
  --sef-theme-tabs-border: rgba(255,255,255,0.26);
  --sef-theme-tabs-fg: rgba(255,255,255,0.78);
  --sef-theme-tabs-active-bg: rgba(255,255,255,0.18);
  --sef-theme-tabs-active-fg: #FFFFFF;
}

html:not(.light-mode) #site-header.scrolled .sef-theme-tabs {
  --sef-theme-tabs-bg: rgba(255,255,255,0.08);
  --sef-theme-tabs-border: rgba(207,202,195,0.16);
  --sef-theme-tabs-fg: rgba(207,202,195,0.78);
  --sef-theme-tabs-active-bg: rgba(255,255,255,0.15);
  --sef-theme-tabs-active-fg: #FFFFFF;
}

@media (max-width: 900px) {
  .sef-theme-tabs {
    gap: 2px;
    padding: 4px;
    border-radius: 13px;
  }

  .sef-theme-tab {
    width: 34px;
    min-width: 34px;
    height: 30px;
    padding: 0;
  }

  .sef-theme-tab span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .sef-theme-tab svg {
    width: 15px;
    height: 15px;
  }

  html.light-mode #site-header .sef-theme-tabs {
    --sef-theme-tabs-bg: rgba(76,22,90,0.08);
    --sef-theme-tabs-border: rgba(76,22,90,0.18);
    --sef-theme-tabs-fg: rgba(76,22,90,0.72);
    --sef-theme-tabs-active-bg: #FFFFFF;
    --sef-theme-tabs-active-fg: #4C165A;
  }
}

@media (max-width: 370px) {
  .sef-theme-tab {
    width: 31px;
    min-width: 31px;
  }

  #site-header .header-logo img {
    width: 116px !important;
  }
}


/* v1.0.29 - mobile light header contrast fix
   On mobile the header surface is white even while it overlaps the hero.
   Keep the segmented theme icons purple over that white surface. */
@media (max-width: 900px) {
  html.light-mode #site-header:not(.scrolled) .sef-theme-tabs,
  html.light-mode #site-header.scrolled .sef-theme-tabs,
  html.light-mode #site-header.sef-over-dark-section .sef-theme-tabs,
  html.light-mode #site-header.sef-over-light-section .sef-theme-tabs,
  html.light-mode body.home #site-header:not(.scrolled) .sef-theme-tabs {
    --sef-theme-tabs-bg: rgba(76,22,90,0.08);
    --sef-theme-tabs-border: rgba(76,22,90,0.18);
    --sef-theme-tabs-fg: rgba(76,22,90,0.76);
    --sef-theme-tabs-active-bg: #FFFFFF;
    --sef-theme-tabs-active-fg: #4C165A;
    box-shadow: 0 8px 22px rgba(76,22,90,0.08), inset 0 1px 0 rgba(255,255,255,0.70);
  }

  html.light-mode #site-header .sef-theme-tab:hover,
  html.light-mode #site-header .sef-theme-tab.is-active,
  html.light-mode #site-header .sef-theme-tab[aria-pressed="true"] {
    color: #4C165A;
  }
}