/*
 * Light mode and the switch in the header.
 * The dark palette stays the default. When a visitor picks light mode,
 * <html data-theme="light"> is set (see assets/js/theme-switch.js) and the
 * palette below takes over. Everything that uses the theme.json presets or
 * the --dx-* variables follows automatically.
 */

/* ---------- Switch ---------- */

.dockside-theme-switch {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--dockside-radius);
  background: transparent;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.dockside-theme-switch:hover {
  color: var(--wp--preset--color--accent-strong);
  border-color: var(--wp--preset--color--accent-strong);
}

.dockside-theme-switch svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

/* Dark mode shows the sun (switch to light), light mode the moon. */
.dockside-theme-switch .is-moon,
html[data-theme="light"] .dockside-theme-switch .is-sun {
  display: none;
}

html[data-theme="light"] .dockside-theme-switch .is-moon {
  display: block;
}

/* ---------- Light palette ---------- */

html[data-theme="light"] {
  color-scheme: light;
  --wp--preset--color--base: #f5f0e6;
  --wp--preset--color--surface: #fffdf8;
  --wp--preset--color--surface-raised: #eee7d9;
  --wp--preset--color--line: #d8cdb9;
  --wp--preset--color--contrast: #18222f;
  --wp--preset--color--muted: #5a6676;
  --wp--preset--color--accent: #9a6210;
  --wp--preset--color--accent-strong: #7a4c0a;
  --wp--preset--color--signal: #1d7d6d;
  --dockside-sunk: #ebe3d3;
}

/* Forum and Dockside Core use their own variables. */
html[data-theme="light"],
html[data-theme="light"] #af-wrapper {
  --dx-base: #f5f0e6;
  --dx-surface: #fffdf8;
  --dx-raised: #eee7d9;
  --dx-line: #d8cdb9;
  --dx-text: #18222f;
  --dx-muted: #5a6676;
  --dx-accent: #9a6210;
  --dx-accent-strong: #7a4c0a;
  --dx-signal: #1d7d6d;
  --dx-alert: #b4472b;
}

/* Hero and banners: the same artwork under a light wash instead of a dark one. */
html[data-theme="light"] .dockside-hero {
  background:
    radial-gradient(55% 70% at 82% 100%, rgba(224, 168, 63, 0.22) 0%, rgba(224, 168, 63, 0) 70%),
    linear-gradient(90deg, rgba(245, 240, 230, 0.97) 0%, rgba(245, 240, 230, 0.88) 45%, rgba(245, 240, 230, 0.72) 100%),
    url("../img/banner-bg-v2.jpg") center / cover no-repeat,
    var(--wp--preset--color--base);
}

html[data-theme="light"] .dockside-banner,
html[data-theme="light"] .dockside-section--banner {
  background:
    linear-gradient(90deg, rgba(245, 240, 230, 0.96) 0%, rgba(245, 240, 230, 0.86) 50%, rgba(245, 240, 230, 0.7) 100%),
    url("../img/banner-bg-v2.jpg") center / cover no-repeat,
    var(--wp--preset--color--base);
}

/* ---------- Forum (Asgaros) ----------
 * The forum writes its colour settings into skin/custom.css as fixed values,
 * so they are mapped back onto the palette here.
 */

html[data-theme="light"] #af-wrapper .button-normal,
html[data-theme="light"] #af-wrapper .title-element,
html[data-theme="light"] #af-wrapper #forum-header,
html[data-theme="light"] #af-wrapper #profile-header .background-avatar,
html[data-theme="light"] #af-wrapper #profile-navigation {
  background-color: var(--dx-raised) !important;
}

html[data-theme="light"] #af-wrapper input[type="radio"]:checked::before {
  background-color: var(--dx-accent) !important;
}

html[data-theme="light"] #af-wrapper input[type="checkbox"]:checked::before {
  color: var(--dx-accent) !important;
}

html[data-theme="light"] #af-wrapper .button-neutral {
  background-color: color-mix(in srgb, var(--dx-raised) 69%, transparent) !important;
}

html[data-theme="light"] #af-wrapper .button-normal:hover,
html[data-theme="light"] #af-wrapper #profile-navigation a.active {
  background-color: var(--dx-line) !important;
}

html[data-theme="light"] #af-wrapper .button-neutral:hover {
  background-color: color-mix(in srgb, var(--dx-line) 69%, transparent) !important;
}

html[data-theme="light"] #af-wrapper #forum-navigation a,
html[data-theme="light"] #af-wrapper #forum-navigation-mobile a {
  color: var(--dx-text) !important;
}

html[data-theme="light"] #af-wrapper,
html[data-theme="light"] #af-wrapper #forum-breadcrumbs a:hover,
html[data-theme="light"] #af-wrapper .main-title,
html[data-theme="light"] #af-wrapper #forum-profile .display-name {
  color: var(--dx-text) !important;
}

html[data-theme="light"] #af-wrapper .main-title::before,
html[data-theme="light"] #af-wrapper .editor-row-uploads .upload-hints,
html[data-theme="light"] #af-wrapper .forum-stats,
html[data-theme="light"] #af-wrapper .topic-stats,
html[data-theme="light"] #af-wrapper .action-panel-description,
html[data-theme="light"] #af-wrapper #forum-breadcrumbs,
html[data-theme="light"] #af-wrapper #forum-breadcrumbs a,
html[data-theme="light"] #af-wrapper .forum-post-date,
html[data-theme="light"] #af-wrapper .forum-post-date a,
html[data-theme="light"] #af-wrapper .post-footer,
html[data-theme="light"] #af-wrapper .post-footer a,
html[data-theme="light"] #af-wrapper .signature,
html[data-theme="light"] #af-wrapper span.mention-nice-name,
html[data-theme="light"] #af-wrapper .post-reactions .reaction,
html[data-theme="light"] #af-wrapper #poll-results .poll-result-numbers,
html[data-theme="light"] #af-wrapper #poll-results .poll-result-total,
html[data-theme="light"] #af-wrapper #poll-warning,
html[data-theme="light"] #af-wrapper .topic-icon::before,
html[data-theme="light"] #af-wrapper .report-link,
html[data-theme="light"] #af-wrapper .report-content::before,
html[data-theme="light"] #af-wrapper input::placeholder,
html[data-theme="light"] #af-wrapper .activity-time,
html[data-theme="light"] #af-wrapper .unread-time,
html[data-theme="light"] #af-wrapper .read {
  color: var(--dx-muted) !important;
}

html[data-theme="light"] #af-wrapper a:not(a.button):not(a.highlight-admin):not(a.highlight-moderator),
html[data-theme="light"] #af-wrapper .forum-post-menu a,
html[data-theme="light"] #af-wrapper #bottom-navigation {
  color: var(--dx-accent-strong) !important;
}

html[data-theme="light"] #af-wrapper .post-author .af-usergroup-tag.topic-author {
  color: var(--dx-accent-strong) !important;
}

html[data-theme="light"] #af-wrapper .unread {
  color: var(--dx-accent) !important;
}

html[data-theme="light"] #af-wrapper #read-unread .read {
  background-color: var(--dx-muted) !important;
}

html[data-theme="light"] #af-wrapper #read-unread .unread {
  background-color: var(--dx-accent) !important;
}

html[data-theme="light"] #af-wrapper .content-container,
html[data-theme="light"] #af-wrapper .report-element,
html[data-theme="light"] #af-wrapper #statistics,
html[data-theme="light"] #af-wrapper .post-wrapper,
html[data-theme="light"] #af-wrapper #profile-header .background-contrast,
html[data-theme="light"] #af-wrapper #poll-results .poll-result-bar,
html[data-theme="light"] #af-wrapper #memberslist-filter,
html[data-theme="light"] #af-wrapper .content-element:nth-child(2n),
html[data-theme="light"] #af-wrapper .topic-sticky,
html[data-theme="light"] #af-wrapper .topic-sticky .topic-poster,
html[data-theme="light"] #af-wrapper .forum-post-header-container,
html[data-theme="light"] #af-wrapper .editor-element,
html[data-theme="light"] #af-wrapper #statistics-online-users,
html[data-theme="light"] #af-wrapper #profile-layer,
html[data-theme="light"] #af-wrapper .spoiler .spoiler-head,
html[data-theme="light"] #af-wrapper .report-content,
html[data-theme="light"] #af-wrapper #poll-panel,
html[data-theme="light"] #af-wrapper .post-reactions-summary .reaction-names,
html[data-theme="light"] #af-wrapper #profile-content {
  background-color: var(--dx-surface) !important;
}

html[data-theme="light"] #af-wrapper input,
html[data-theme="light"] #af-wrapper input[type="radio"]:focus,
html[data-theme="light"] #af-wrapper input[type="checkbox"]:focus,
html[data-theme="light"] #af-wrapper #profile-header,
html[data-theme="light"] #af-wrapper .title-element,
html[data-theme="light"] #af-wrapper #forum-navigation a,
html[data-theme="light"] #af-wrapper #forum-navigation-mobile a,
html[data-theme="light"] #af-wrapper .forum-post-header-container,
html[data-theme="light"] #af-wrapper .forum-poster,
html[data-theme="light"] #af-wrapper .topic-poster,
html[data-theme="light"] #af-wrapper .member-last-seen,
html[data-theme="light"] #af-wrapper .editor-element,
html[data-theme="light"] #af-wrapper .content-container,
html[data-theme="light"] #af-wrapper .forum-post-header,
html[data-theme="light"] #af-wrapper #statistics-body,
html[data-theme="light"] #af-wrapper .statistics-element,
html[data-theme="light"] #af-wrapper #statistics-online-users,
html[data-theme="light"] #af-wrapper .editor-row,
html[data-theme="light"] #af-wrapper .editor-row-subject,
html[data-theme="light"] #af-wrapper .signature,
html[data-theme="light"] #af-wrapper .forum-subforums,
html[data-theme="light"] #af-wrapper .uploaded-file img,
html[data-theme="light"] #af-wrapper .action-panel-option,
html[data-theme="light"] #af-wrapper #profile-layer,
html[data-theme="light"] #af-wrapper #profile-layer .pages-and-menu:first-of-type,
html[data-theme="light"] #af-wrapper #profile-content,
html[data-theme="light"] #af-wrapper #profile-content .profile-row,
html[data-theme="light"] #af-wrapper .history-element,
html[data-theme="light"] #af-wrapper #memberslist-filter,
html[data-theme="light"] #af-wrapper .content-element,
html[data-theme="light"] #af-wrapper .ad-forum,
html[data-theme="light"] #af-wrapper .ad-topic,
html[data-theme="light"] #af-wrapper .spoiler,
html[data-theme="light"] #af-wrapper .spoiler .spoiler-body,
html[data-theme="light"] #af-wrapper .report-source,
html[data-theme="light"] #af-wrapper .report-content,
html[data-theme="light"] #af-wrapper .report-actions,
html[data-theme="light"] #af-wrapper #profile-content .profile-section-header,
html[data-theme="light"] #af-wrapper #poll-options,
html[data-theme="light"] #af-wrapper #poll-panel,
html[data-theme="light"] #af-wrapper #poll-panel #poll-headline,
html[data-theme="light"] #af-wrapper #poll-results .poll-result-bar,
html[data-theme="light"] #af-wrapper .post-reactions-summary .reaction-names,
html[data-theme="light"] #af-wrapper #usergroups-filter {
  border-color: var(--dx-line) !important;
}

/* The switch takes some room in the header: keep the Discord button on one line. */
.dockside-header__cta .wp-block-button__link {
  white-space: nowrap;
}