/*
 * Optional theme layer.
 * The existing stylesheets remain the complete light theme; this file only
 * contains the theme control and dark-mode overrides.
 */

/* Theme control shared by the homepage and every detail page. */
.theme-control {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  color: var(--text, #181614);
}

.theme-control > summary {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42, 34, 28, .16);
  border-radius: 8px;
  background: var(--surface, #fbfaf7);
  color: #24211e;
  cursor: pointer;
  list-style: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.theme-control > summary::-webkit-details-marker { display: none; }
.theme-control > summary::marker { content: ""; }

.theme-control > summary:focus-visible,
.theme-control__menu button:focus-visible {
  outline: 2px solid var(--accent, #ad6b42);
  outline-offset: 3px;
}

.theme-icon,
.theme-control__menu svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon--moon { display: none; }

[data-theme="dark"] .theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--moon { display: block; }

.theme-control__menu {
  width: 138px;
  padding: 5px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border, rgba(42, 34, 28, .10));
  border-radius: 9px;
  background: var(--surface, #fbfaf7);
  box-shadow: var(--shadow, 0 8px 28px rgba(36, 28, 20, .065));
}

.theme-control:not([open]) .theme-control__menu { display: none; }

.theme-control__menu button {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft, #716a63);
  font: 600 .7rem/1.2 var(--sans, "Avenir Next", Avenir, sans-serif);
  text-align: left;
  cursor: pointer;
}

.theme-control__menu button svg { width: 15px; height: 15px; }

.theme-control__menu button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent, #ad6b42) 11%, transparent);
  color: var(--accent, #ad6b42);
}

.theme-control--mobile { display: none; }

@media (hover: hover) and (pointer: fine) {
  .theme-control > summary:hover {
    border-color: var(--accent, #ad6b42);
    background: #f8f1eb;
  }

  .theme-control__menu button:hover {
    background: color-mix(in srgb, var(--accent, #ad6b42) 9%, transparent);
    color: var(--text, #181614);
  }
}

@media (max-width: 800px) {
  .theme-control--desktop { display: none; }

  .theme-control--mobile {
    display: block;
    position: absolute;
    top: 14px;
    right: 66px;
  }

  body.detail-page .site-header > .theme-control--mobile {
    top: 30px;
    right: 82px;
  }

  .theme-control > summary {
    width: 44px;
    height: 44px;
  }
}

/* Warm premium dark palette. */
html[data-theme="dark"] {
  --bg: #171513;
  --surface: #211e1b;
  --surface-alt: #26221f;
  --text: #f7f5f1;
  --text-soft: #b9b0a8;
  --accent: #c68157;
  --accent-hover: #d29269;
  --border: rgba(255, 255, 255, .10);
  --shadow: 0 8px 28px rgba(0, 0, 0, .22);
  --paper: var(--bg);
  --paper-deep: var(--surface);
  --ink: var(--text);
  --muted: var(--text-soft);
  --copper: var(--accent);
  --line: var(--border);
  background: var(--bg);
}

html[data-theme="dark"] body {
  color: var(--text);
  background: var(--bg);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .home-page,
html[data-theme="dark"] .home-shell,
html[data-theme="dark"] .menu-card,
html[data-theme="dark"] .reference-entry,
html[data-theme="dark"] .skill-group,
html[data-theme="dark"] .language-entry,
html[data-theme="dark"] .theme-control > summary,
html[data-theme="dark"] .theme-control__menu {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Keep the official LG. mark, while making its letters readable on dark. */
html[data-theme="dark"] .brand {
  position: relative;
}

html[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(94%) sepia(6%) saturate(162%) hue-rotate(337deg) brightness(108%) contrast(94%);
}

html[data-theme="dark"] .page-header > .brand::after {
  content: "";
  width: 12.7%;
  height: auto;
  aspect-ratio: 1;
  position: absolute;
  top: 66%;
  left: 72.8%;
  display: block;
  margin: 0;
  border-radius: 50%;
  background: var(--accent);
}

/* Header and controls. */
html[data-theme="dark"] .utility-links,
html[data-theme="dark"] .utility-links .placeholder-link {
  color: var(--text);
}

html[data-theme="dark"] .utility-links .utility-social,
html[data-theme="dark"] .theme-control > summary {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .theme-control__menu {
  border-color: var(--border);
  background: var(--surface-alt);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .theme-control__menu button {
  color: var(--text-soft);
}

html[data-theme="dark"] .mobile-menu::before,
html[data-theme="dark"] .mobile-menu::after,
html[data-theme="dark"] .mobile-menu span {
  background: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .utility-links .utility-social:hover,
  html[data-theme="dark"] .theme-control > summary:hover {
    border-color: var(--accent);
    background: var(--surface-alt);
  }

  html[data-theme="dark"] .theme-control__menu button:hover {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: var(--text);
  }
}

/* Homepage. */
html[data-theme="dark"] .home-page {
  --bg: #171513;
  --surface: #211e1b;
  --text: #f7f5f1;
  --text-soft: #b9b0a8;
  --accent: #c68157;
  --accent-hover: #d29269;
  --border: rgba(255, 255, 255, .10);
  --shadow: 0 8px 28px rgba(0, 0, 0, .22);
  background: var(--bg);
}

html[data-theme="dark"] .home-shell {
  background: radial-gradient(circle at 12% 22%, rgba(47, 41, 36, .58) 0, rgba(32, 28, 25, .26) 27%, transparent 55%);
}

html[data-theme="dark"] .traits li,
html[data-theme="dark"] .intro-role {
  color: var(--text-soft);
}

html[data-theme="dark"] .download-cv,
html[data-theme="dark"] .mobile-contact,
html[data-theme="dark"] .utility-links a.utility-contact {
  background: var(--accent);
  color: #171513;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .hero-photo-layer {
  opacity: .72;
  filter: brightness(.74) contrast(1.05) saturate(.78) sepia(.05);
}

html[data-theme="dark"] .hero-photo-layer::after {
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 97%, transparent) 18%,
    color-mix(in srgb, var(--bg) 85%, transparent) 34%,
    color-mix(in srgb, var(--bg) 58%, transparent) 49%,
    color-mix(in srgb, var(--bg) 24%, transparent) 63%,
    transparent 76%
  );
}

@media (min-width: 801px) {
  html[data-theme="dark"] .menu-card {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
  }

  html[data-theme="dark"] .menu-card img {
    filter: brightness(.72) contrast(1.08) saturate(.80) sepia(.035);
  }

  html[data-theme="dark"] .card-personalia img {
    filter: none;
  }

  html[data-theme="dark"] .menu-card::after {
    background: linear-gradient(
      90deg,
      #211e1b 0%,
      #211e1b 25%,
      rgba(33, 30, 27, .995) 31%,
      rgba(33, 30, 27, .97) 36%,
      rgba(33, 30, 27, .91) 42%,
      rgba(33, 30, 27, .78) 48%,
      rgba(33, 30, 27, .61) 54%,
      rgba(33, 30, 27, .42) 60%,
      rgba(33, 30, 27, .23) 66%,
      rgba(33, 30, 27, .09) 72%,
      transparent var(--fade-end)
    );
  }

  html[data-theme="dark"] .card-personalia::after {
    background: linear-gradient(
      90deg,
      #211e1b 0%,
      #211e1b 38%,
      rgba(33, 30, 27, .985) 43%,
      rgba(33, 30, 27, .91) 49%,
      rgba(33, 30, 27, .74) 55%,
      rgba(33, 30, 27, .49) 60%,
      rgba(33, 30, 27, .24) 65%,
      rgba(33, 30, 27, .07) 69%,
      transparent 71%
    );
  }

  html[data-theme="dark"] .card-copy strong { color: var(--text); }
  html[data-theme="dark"] .card-copy small { color: var(--text-soft); }
}

@media (max-width: 800px) {
  html[data-theme="dark"] .home-intro { border-color: var(--border); }

  html[data-theme="dark"] .menu-card,
  html[data-theme="dark"] .menu-card:nth-child(even) {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .20);
    color: var(--text);
  }

  html[data-theme="dark"] .menu-card img,
  html[data-theme="dark"] .menu-card:nth-child(even) img {
    filter: brightness(.76) contrast(1.06) saturate(.82);
  }

  html[data-theme="dark"] .card-personalia img {
    filter: none;
  }

  html[data-theme="dark"] .card-copy strong { color: var(--text); }
  html[data-theme="dark"] .card-copy small { color: var(--text-soft); }
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="dark"] .download-cv:hover,
  html[data-theme="dark"] .mobile-contact:hover,
  html[data-theme="dark"] .utility-links a.utility-contact:hover {
    background: var(--accent-hover);
  }

  html[data-theme="dark"] .menu-card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
  }
}

/* Detail pages. */
html[data-theme="dark"] body.detail-page {
  --detail-bg: #171513;
  --detail-surface: rgba(33, 30, 27, .88);
  --detail-text: #f7f5f1;
  --detail-soft: #b9b0a8;
  --detail-accent: #c68157;
  --detail-accent-hover: #d29269;
  --detail-border: rgba(255, 255, 255, .10);
  --detail-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  --bg: var(--detail-bg);
  --surface: #211e1b;
  --text: var(--detail-text);
  --text-soft: var(--detail-soft);
  --accent: var(--detail-accent);
  --accent-hover: var(--detail-accent-hover);
  --border: var(--detail-border);
  --shadow: var(--detail-shadow);
  background: var(--detail-bg);
  color: var(--detail-text);
}

html[data-theme="dark"] .detail-statement,
html[data-theme="dark"] .detail-lead,
html[data-theme="dark"] .personal-data dd,
html[data-theme="dark"] .work-values li,
html[data-theme="dark"] .study-qualification,
html[data-theme="dark"] .experience-meta strong,
html[data-theme="dark"] .career-meta strong,
html[data-theme="dark"] .interest-list-modern li {
  color: var(--detail-text);
}

html[data-theme="dark"] .detail-content a {
  text-decoration-color: color-mix(in srgb, var(--detail-accent) 62%, transparent);
}

html[data-theme="dark"] .reference-entry,
html[data-theme="dark"] .skill-group,
html[data-theme="dark"] .language-entry,
html[data-theme="dark"] .detail-skills .skill-group,
html[data-theme="dark"] .detail-languages .language-entry {
  border-color: var(--detail-border);
  background: var(--detail-surface);
  box-shadow: var(--detail-shadow);
}

html[data-theme="dark"] .tag-list li,
html[data-theme="dark"] .detail-skills .tag-list li {
  border-color: var(--detail-border);
  background: var(--surface-alt);
  color: var(--detail-text);
}

html[data-theme="dark"] .experience-entry::before {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--detail-accent) 14%, transparent);
}

html[data-theme="dark"] .ambition-quote {
  color: #d2a184;
}

html[data-theme="dark"] .detail-background img {
  opacity: .18;
  filter: brightness(.66) contrast(1.08) saturate(.75) sepia(.06);
}

html[data-theme="dark"] .detail-personalia .detail-background img {
  opacity: .21;
  filter: none;
}

html[data-theme="dark"] .detail-background::after,
html[data-theme="dark"] .detail-personalia .detail-background::after {
  background:
    linear-gradient(90deg, var(--detail-bg) 0%, rgba(23, 21, 19, .995) 36%, rgba(23, 21, 19, .91) 52%, rgba(23, 21, 19, .54) 70%, rgba(23, 21, 19, .18) 86%, transparent 100%),
    linear-gradient(180deg, var(--detail-bg) 0%, rgba(23, 21, 19, .84) 18%, transparent 42%, transparent 72%, rgba(23, 21, 19, .95) 100%);
}

html[data-theme="dark"] .detail-cta {
  color: #171513;
}

@media (max-width: 800px) {
  html[data-theme="dark"] .detail-background img {
    opacity: .07;
  }

  html[data-theme="dark"] .detail-personalia .detail-background img {
    opacity: .085;
  }

  html[data-theme="dark"] .detail-background::after,
  html[data-theme="dark"] .detail-personalia .detail-background::after {
    background: linear-gradient(180deg, var(--detail-bg) 0%, rgba(23, 21, 19, .86) 24%, rgba(23, 21, 19, .50) 60%, var(--detail-bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-control > summary,
  .theme-control__menu button,
  html[data-theme="dark"] body,
  html[data-theme="dark"] .home-page,
  html[data-theme="dark"] .home-shell,
  html[data-theme="dark"] .menu-card,
  html[data-theme="dark"] .reference-entry,
  html[data-theme="dark"] .skill-group,
  html[data-theme="dark"] .language-entry {
    transition: none;
  }
}

/* Keep the mobile theme control aligned with the shared compact header. */
@media (max-width: 800px), (min-width: 801px) and (max-width: 1000px) and (any-pointer: coarse), (min-width: 801px) and (max-width: 1000px) and (orientation: landscape) and (max-height: 600px), (min-width: 768px) and (max-width: 1100px) and (min-height: 700px) {
  .theme-control--desktop {
    display: none;
  }

  .theme-control--mobile,
  body.detail-page .site-header > .theme-control--mobile {
    display: block;
    position: absolute;
    top: 16px;
    right: calc(max(18px, env(safe-area-inset-right)) + 52px);
  }

  .theme-control > summary {
    width: 44px;
    height: 44px;
  }

  .theme-control__menu button {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .theme-control--mobile,
  body.detail-page .site-header > .theme-control--mobile {
    right: calc(max(14px, env(safe-area-inset-right)) + 50px);
  }
}