/* =========================================================================
   THEME TOGGLE — widget ALTITUDE (Peak ALTITUDE, M5.2.0)
   Só CONSOME as variáveis --pht-* já declaradas no custom_css do Kit
   (via pht/kit-update) — nunca as redeclara aqui (M5.2.0_PEAK_ALTITUDE.md
   §1). Escopado à mesma guarda da Camada B: @media(max-width:1024px) +
   ancestral .pht-m — fora disso, estas regras não se aplicam a nada.

   M5.2.3 — achado real: o widget renderizava como um quadrado azul
   grande no editor (mesma causa raiz do trilho de chips, M5.2.3): `rem`
   (o Astra reduz a raiz em ≤921px — regra dura desde a M4.2.3) e
   seletores com só 2 classes, perdendo para os estilos nativos de
   `<button>` do tema/Elementor. Fix: tudo em px, e todo filho encadeado
   pela estrutura real do widget (`.pht-m .theme-toggle
   .theme-toggle__knob` etc.) — nunca `.pht-m .theme-toggle__algo`
   pulando o pai.
   ========================================================================= */

@media (max-width: 1024px) {
  .pht-m .theme-toggle.theme-toggle {
    display: block;
    position: relative;
    height: 32px;
    width: 64px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid var(--pht-border);
    background: var(--pht-surface-sunken);
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 200ms;
  }

  .pht-m .theme-toggle .theme-toggle__ridge {
    display: block;
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 4px;
    height: 10px;
    width: auto;
    color: var(--pht-text-3);
    opacity: 0.4;
  }

  .pht-m .theme-toggle .theme-toggle__star {
    display: block;
    position: absolute;
    height: 2px;
    width: 2px;
    border-radius: 9999px;
    background: var(--pht-text-3);
    opacity: 0;
    transition: opacity 300ms;
    box-sizing: border-box;
  }
  .pht-m .theme-toggle .theme-toggle__star.theme-toggle__star--1 {
    top: 6px;
    left: 10px;
  }
  .pht-m .theme-toggle .theme-toggle__star.theme-toggle__star--2 {
    top: 12px;
    left: 20px;
  }

  html[data-theme='dark'] .pht-m .theme-toggle .theme-toggle__star--1 {
    opacity: 0.8;
  }
  html[data-theme='dark'] .pht-m .theme-toggle .theme-toggle__star--2 {
    opacity: 0.6;
  }

  .pht-m .theme-toggle .theme-toggle__knob {
    display: flex;
    position: absolute;
    top: 4px;
    left: 4px;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--pht-surface);
    box-shadow: 0 1px 2px rgb(2 8 23 / 0.06);
    box-sizing: border-box;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html[data-theme='dark'] .pht-m .theme-toggle .theme-toggle__knob {
    transform: translateX(32px);
  }

  .pht-m .theme-toggle .theme-toggle__knob .theme-toggle__icon {
    display: block;
    position: absolute;
    height: 14px;
    width: 14px;
    transition: opacity 200ms;
  }

  .pht-m .theme-toggle .theme-toggle__knob .theme-toggle__icon.theme-toggle__icon--sun {
    color: #ff7a3c;
    opacity: 1;
  }
  .pht-m .theme-toggle .theme-toggle__knob .theme-toggle__icon.theme-toggle__icon--moon {
    color: var(--pht-accent);
    opacity: 0;
  }

  html[data-theme='dark'] .pht-m .theme-toggle .theme-toggle__icon--sun {
    opacity: 0;
  }
  html[data-theme='dark'] .pht-m .theme-toggle .theme-toggle__icon--moon {
    opacity: 1;
  }
}