/* These styles are generated from project.scss. */

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

/* ── Solarized Light ───────────────────────────────────────────────────────── */
[data-theme="light"] {
  --theme-bg:          #fdf6e3;
  --theme-bg-bis:      #eee8d5;
  --theme-bg-ter:      #ddd8c3;
  --theme-text:        #586e75;
  --theme-text-strong: #073642;
  --theme-text-weak:   #93a1a1;
  --theme-border:      #c3bba0;
  --theme-primary:     #268bd2;
  --theme-link:        #268bd2;
  --theme-info:        #2aa198;
  --theme-success:     #859900;
  --theme-warning:     #b58900;
  --theme-danger:      #dc322f;

  --bulma-scheme-main:     var(--theme-bg);
  --bulma-scheme-main-bis: var(--theme-bg-bis);
  --bulma-scheme-main-ter: var(--theme-bg-ter);
  --bulma-background:      var(--theme-bg-bis);
  --bulma-text:            var(--theme-text);
  --bulma-text-strong:     var(--theme-text-strong);
  --bulma-text-weak:       var(--theme-text-weak);
  --bulma-border:          var(--theme-border);
  --bulma-border-hover:    var(--theme-text-weak);
  --bulma-primary:         var(--theme-primary);
  --bulma-link:            var(--theme-link);
}

/* ── Dracula ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --theme-bg:          #282a36;
  --theme-bg-bis:      #21222c;
  --theme-bg-ter:      #44475a;
  --theme-text:        #f8f8f2;
  --theme-text-strong: #ffffff;
  --theme-text-weak:   #6272a4;
  --theme-border:      #44475a;
  --theme-primary:     #bd93f9;
  --theme-link:        #8be9fd;
  --theme-info:        #8be9fd;
  --theme-success:     #50fa7b;
  --theme-warning:     #f1fa8c;
  --theme-danger:      #ff5555;
  --theme-orange:      #ffb86c;
  --theme-pink:        #ff79c6;

  --bulma-scheme-main:     var(--theme-bg);
  --bulma-scheme-main-bis: var(--theme-bg-bis);
  --bulma-scheme-main-ter: var(--theme-bg-ter);
  --bulma-background:      var(--theme-bg-bis);
  --bulma-text:            var(--theme-text);
  --bulma-text-strong:     var(--theme-text-strong);
  --bulma-text-weak:       var(--theme-text-weak);
  --bulma-border:          var(--theme-border);
  --bulma-border-hover:    var(--theme-text-weak);
  --bulma-primary:         var(--theme-primary);
  --bulma-link:            var(--theme-link);
}

/* ── Component overrides: both themes ─────────────────────────────────────── */

/* Navbar */
[data-theme="light"] .navbar,
[data-theme="dark"] .navbar {
  background-color: var(--theme-bg-bis);
}

[data-theme="light"] .navbar-item,
[data-theme="light"] .navbar-link,
[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-link {
  color: var(--theme-text);
}

[data-theme="dark"] .navbar-dropdown {
  background-color: var(--theme-bg-bis);
  border-color: var(--theme-border);
}

/* Footer */
[data-theme="light"] .footer,
[data-theme="dark"] .footer {
  background-color: var(--theme-bg-bis);
  color: var(--theme-text);
}

/* Cards & Boxes */
[data-theme="light"] .card,
[data-theme="light"] .box,
[data-theme="dark"] .card,
[data-theme="dark"] .box {
  background-color: var(--theme-bg-bis);
  color: var(--theme-text);
}

[data-theme="light"] .card-content .title,
[data-theme="light"] .card-content .subtitle,
[data-theme="light"] .box .title,
[data-theme="light"] .box .subtitle,
[data-theme="dark"] .card-content .title,
[data-theme="dark"] .card-content .subtitle,
[data-theme="dark"] .box .title,
[data-theme="dark"] .box .subtitle {
  color: var(--theme-text-strong);
}

/* Forms */
[data-theme="light"] .input,
[data-theme="light"] .textarea,
[data-theme="light"] .select select,
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select select {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

[data-theme="light"] .input::placeholder,
[data-theme="light"] .textarea::placeholder,
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder {
  color: var(--theme-text-weak);
}

[data-theme="light"] .label,
[data-theme="dark"] .label {
  color: var(--theme-text-strong);
}

[data-theme="light"] .help,
[data-theme="dark"] .help {
  color: var(--theme-text-weak);
}

[data-theme="light"] .checkbox,
[data-theme="light"] .radio,
[data-theme="dark"] .checkbox,
[data-theme="dark"] .radio {
  color: var(--theme-text);
}

/* Tables */
[data-theme="light"] .table,
[data-theme="dark"] .table {
  background-color: var(--theme-bg-bis);
  color: var(--theme-text);
}

[data-theme="light"] .table th,
[data-theme="dark"] .table th {
  color: var(--theme-text-strong);
}

[data-theme="light"] .table td,
[data-theme="light"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--theme-border);
}

[data-theme="light"] .table.is-striped tbody tr:nth-child(even),
[data-theme="dark"] .table.is-striped tbody tr:nth-child(even),
[data-theme="light"] .table.is-hoverable tbody tr:hover,
[data-theme="dark"] .table.is-hoverable tbody tr:hover {
  background-color: var(--theme-bg-ter);
}

/* Tags */
[data-theme="light"] .tag.is-light,
[data-theme="dark"] .tag.is-light {
  background-color: var(--theme-bg-ter);
  color: var(--theme-text);
}

/* Misc text helpers */
[data-theme="light"] .has-text-grey,
[data-theme="dark"] .has-text-grey {
  color: var(--theme-text-weak) !important;
}

[data-theme="light"] .heading,
[data-theme="dark"] .heading {
  color: var(--theme-text-weak);
}

/* Notifications */
[data-theme="light"] .notification,
[data-theme="dark"] .notification {
  color: var(--theme-text);
}

[data-theme="dark"] .notification.is-info {
  background-color: #1a3a3a;
  color: var(--theme-info);
}

[data-theme="dark"] .notification.is-success {
  background-color: #1a3a1a;
  color: var(--theme-success);
}

[data-theme="dark"] .notification.is-warning {
  background-color: #3a3a1a;
  color: var(--theme-warning);
}

[data-theme="dark"] .notification.is-danger {
  background-color: #3a1a1a;
  color: var(--theme-danger);
}

/* Primary-light backgrounds (used in stats/hero sections) */
[data-theme="light"] .has-background-primary-light {
  background-color: #d4e9f7 !important;
  color: #073642;
}

[data-theme="dark"] .has-background-primary-light {
  background-color: #2d2b45 !important;
  color: var(--theme-primary);
}

[data-theme="light"] .has-background-primary-light .title,
[data-theme="light"] .has-background-primary-light .subtitle,
[data-theme="dark"] .has-background-primary-light .title,
[data-theme="dark"] .has-background-primary-light .subtitle {
  color: var(--theme-text-strong) !important;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero-cta {
  position: relative;
  overflow: hidden;
}

/* Light mode: warm Solarized gradient with faint code watermark */
[data-theme="light"] .hero-cta {
  background:
    linear-gradient(135deg, #073642 0%, #124d60 50%, #268bd2 100%);
}

/* Dark mode: Dracula gradient */
[data-theme="dark"] .hero-cta {
  background:
    linear-gradient(135deg, #1e1f29 0%, #282a36 50%, #3a3554 100%);
}

[data-theme="dark"] .hero-cta::before {
  opacity: 0.18;
  color: rgba(255, 255, 255, 0.4);
}

/* Subtle code-symbol watermark */
.hero-cta::before {
  content: "</>";
  position: absolute;
  left: 2%;
  top: 0;
  font-family: monospace;
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 900;
  opacity: 0.06;
  color: #ffffff;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-title {
  color: #ffffff !important;
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  letter-spacing: -0.02em;
}

[data-theme="dark"] .hero-title {
  color: #bd93f9 !important;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .hero-subtitle {
  color: #8be9fd !important;
}

.hero-body-text {
  color: rgba(255, 255, 255, 0.65);
}

.hero-btn-primary {
  background-color: #50fa7b;
  border-color: transparent;
  color: #282a36 !important;
  font-weight: 700;
}

.hero-btn-primary:hover {
  background-color: #6ffb8e;
  border-color: transparent;
}

[data-theme="light"] .hero-btn-primary {
  background-color: #2aa198;
  color: #ffffff !important;
}

[data-theme="light"] .hero-btn-primary:hover {
  background-color: #33bbb1;
}

.hero-btn-secondary {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85) !important;
}

.hero-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: #ffffff !important;
}

/* ── Theme switcher animation ──────────────────────────────────────────────── */
#theme-switcher .icon i {
  transition: transform 0.5s ease, opacity 0.3s ease;
}

#theme-switcher:active .icon i {
  transform: scale(0.8) rotate(45deg);
}

.theme-animate-in {
  animation: theme-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes theme-in {
  from {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/* ── Toast notifications ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  animation: toast-in 0.35s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.toast-out {
  animation: toast-out 0.4s ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

.alert-debug {
  color: var(--bulma-text);
  background-color: var(--bulma-scheme-main);
  border-color: var(--bulma-border);
}

.alert-error {
  color: var(--bulma-danger);
  background-color: var(--bulma-danger-light);
  border-color: var(--bulma-danger-light);
}

/* ── Accessibility widget ──────────────────────────────────────────────────── */
.a11y-panel {
  position: fixed;
  top: 3.75rem;
  right: 1.5rem;
  z-index: 1001;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  background: var(--theme-bg);
  border: 1px solid var(--theme-border);
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 1.25rem;
  display: none;
  color: var(--theme-text);
}
.a11y-panel.is-open { display: block; }
.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.a11y-panel-title { font-weight: 700; font-size: 1rem; }
.a11y-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--theme-text);
  padding: .25rem;
  border-radius: .25rem;
}
.a11y-close:hover, .a11y-close:focus-visible {
  background: var(--theme-bg-bis);
}
.a11y-description {
  font-size: .8125rem;
  color: var(--theme-text-weak);
  margin-bottom: 1rem;
}
.a11y-group { margin-bottom: 1rem; }
.a11y-group-label {
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .4rem;
  display: block;
}
.a11y-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.a11y-pills input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y-pills label {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1.5px solid var(--theme-border);
  border-radius: 2rem;
  font-size: .8125rem;
  cursor: pointer;
  background: var(--theme-bg);
  color: var(--theme-text);
  transition: border-color .12s, background .12s;
}
.a11y-pills input[type="radio"]:checked + label {
  border-color: var(--theme-primary);
  background: var(--theme-bg-bis);
  color: var(--theme-text-strong);
  font-weight: 600;
}
.a11y-pills label:hover { border-color: var(--theme-text-weak); }
.a11y-pills input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}
.a11y-reset { width: 100%; margin-top: .25rem; }


/* ── Contrast overrides ────────────────────────────────────────────────────── */
html[data-a11y-contrast="high"][data-theme="light"] {
  --theme-text:        #073642;
  --theme-text-strong: #00202a;
  --theme-text-weak:   #3a5560;
  --theme-border:      #586e75;
}
html[data-a11y-contrast="high"][data-theme="dark"] {
  --theme-text:        #ffffff;
  --theme-text-strong: #ffffff;
  --theme-text-weak:   #c4c8d8;
  --theme-border:      #8be9fd;
}
html[data-a11y-contrast="low"][data-theme="light"] {
  --theme-text:        #93a1a1;
  --theme-text-strong: #586e75;
  --theme-text-weak:   #b8c4c4;
  --theme-border:      #ddd8c3;
}
html[data-a11y-contrast="low"][data-theme="dark"] {
  --theme-text:        #6272a4;
  --theme-text-strong: #8892c4;
  --theme-text-weak:   #44475a;
  --theme-border:      #3a3c50;
}

/* ── Text size overrides ───────────────────────────────────────────────────── */
html[data-a11y-text="large"]       { font-size: 112.5%; }
html[data-a11y-text="extra-large"] { font-size: 125%; }

/* ── Motion override ───────────────────────────────────────────────────────── */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* ── Accessible focus indicators ──────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--theme-primary, #485fc7);
  outline-offset: 2px;
}