/* AZILILA supplies its own two-tone palette in both system themes. Declaring
   dark support lets browsers such as Samsung Internet use the authored theme
   instead of treating the whole page as an unthemed light document. Native
   controls follow their actual surface, not the OS preference. This does not
   disable forced-colors accessibility or override a browser's force-only mode. */
:root { color-scheme: light dark; }
body { color-scheme: dark; }
.light, #projects, #expertise { color-scheme: only light; }
.light .field select { color-scheme: only light; }

/* One active-language cue, without the old tile behind the animated line. */
.header .languages [data-lang] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  line-height: 1;
}
.header .languages [data-lang][aria-current="page"],
.header .languages [data-lang][aria-pressed="true"] {
  color: var(--gold);
  background: transparent;
  border-color: transparent;
  text-decoration: none;
}
/* Progressive enhancement: no motion script still gets an active underline. */
.header .languages:not(.az-languages) [data-lang][aria-current="page"]::after,
.header .languages:not(.az-languages) [data-lang][aria-pressed="true"]::after {
  content: '';
  position: absolute;
  height: 2px;
  left: 8px;
  right: 8px;
  bottom: 3px;
  background: currentColor;
}
@media (hover: hover) {
  .header .languages [data-lang]:hover { color: var(--ivory); }
}

/* Fixed-brand palette, including when the OS requests dark mode. */
.button.gold { background-color: #ccb891; color: #111411; border-color: #ccb891; }
.button.gold:hover { background-color: #e1cda9; color: #111411; border-color: #e1cda9; }

@media (max-width: 1000px) {
  .header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 0 8px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ivory);
    font-size: 13px;
    line-height: 1.4;
  }
  .header .menu-toggle::after {
    content: '';
    flex: 0 0 20px;
    width: 20px;
    height: 12px;
    background: linear-gradient(currentColor,currentColor) left 1px / 20px 1.5px no-repeat,
                linear-gradient(currentColor,currentColor) left 9px / 20px 1.5px no-repeat;
  }
  .header .menu-toggle[aria-expanded="true"]::after {
    background: linear-gradient(45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px),currentColor calc(50% + .75px),transparent calc(50% + .75px)),
                linear-gradient(-45deg,transparent calc(50% - .75px),currentColor calc(50% - .75px),currentColor calc(50% + .75px),transparent calc(50% + .75px));
  }
}
@media (max-width: 600px) {
  .header {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: minmax(44px,auto) minmax(44px,auto);
    column-gap: 12px;
    row-gap: 0;
    min-height: 0;
    padding: 10px var(--space) 6px;
  }
  .header .brand { min-width: 0; }
  .header .languages { gap: 4px; width: max-content; }
  .hero .button.gold { max-width: 100%; padding: 14px 20px; }
  .hero .button.gold > [data-i18n] { min-width: 0; }
  .hero .button.gold::after { flex-shrink: 0; }
}