/*--------------------------------------------------------------
# Color Theme Previews
# Activated by <html data-theme="a|b|c"> (set from the ?theme= URL parameter).
# Without data-theme, the default colors in main.css apply.
#
# Each theme sets the base color variables plus a highlight set (--hl-*):
#   --hl-color         highlight on dark backgrounds (nav, hero date, footer)
#   --hl-line-color    highlight lines on light backgrounds
#   --hl-rgb           highlight as an RGB triplet, for glows
#   --hl-btn-*         primary button colors
#   --hl-cell-bg       active registration period cells
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Theme A - NCU Purple & Gold
--------------------------------------------------------------*/
:root[data-theme="a"] {
  --logo-mark: url("../img/logo-a-header.png?v=3");
  --logo-size: contain;
  --logo-ratio: 1.157;
  --heading-color: #56008d;
  --accent-color: #56008d;
  --accent-rgb: 86, 0, 141;
  --accent-hover-color: #3f0068;
  --accent-strong-color: #3f0068;
  --accent-dark-rgb: 242, 212, 58; /* Gold timeline flow */
  --surface-color: #f7f2fb;
  --dark-section-bg: #3a005e;
  --dark-section-surface: #56008d;
  --header-scrolled-bg: #2e004b;
  --hero-overlay: linear-gradient(180deg, rgba(58, 0, 94, 0.55) 0%, rgba(86, 0, 141, 0.18) 45%, rgba(86, 0, 141, 0.18) 70%, rgba(58, 0, 94, 0.35) 100%);
  --hero-text-shadow: rgba(30, 0, 50, 0.55);
  --soft-tint-start: #f3e8fb;
  --soft-tint-end: #e6d3f5;
  --nav-hover-color: #ffec5c;
  --nav-dropdown-hover-color: #56008d;
  --table-header-bg: #3a005e;
  --table-day-bg: #e6d3f5;
  --table-title-color: #56008d;
  --table-highlight-bg: #f3e8fb;
  --light-section-bg: #f6f1fa;

  /* Gold: on dark backgrounds only (fails contrast on white) */
  --hl-color: #ffec5c;
  --hl-line-color: #f2d43a;
  --hl-rgb: 242, 212, 58;
  --hl-btn-bg: #ffec5c;
  --hl-btn-hover-bg: #ffe22e;
  --hl-btn-border: #f2d43a;
  --hl-btn-text: #3a005e;
  --hl-cell-bg: #fff8d1;
}

/*--------------------------------------------------------------
# Theme B - IM Department Flag Navy
--------------------------------------------------------------*/
:root[data-theme="b"] {
  --logo-mark: url("../img/logo-b-header.png?v=3");
  --logo-size: contain;
  --logo-ratio: 1.16;
  --default-color: #000000;
  --heading-color: #17348a;
  --accent-color: #1e6fd9;
  --accent-rgb: 30, 111, 217;
  --accent-hover-color: #17348a;
  --accent-strong-color: #17348a;
  --accent-dark-rgb: 30, 111, 217;
  --surface-color: #eef2fa;
  --dark-section-bg: #0f2360;
  --dark-section-surface: #17348a;
  --header-scrolled-bg: #0c1c4d;
  --hero-overlay: linear-gradient(180deg, rgba(15, 35, 96, 0.75) 0%, rgba(23, 52, 138, 0.28) 45%, rgba(23, 52, 138, 0.28) 70%, rgba(15, 35, 96, 0.55) 100%);
  --hero-text-shadow: rgba(5, 15, 45, 0.55);
  --soft-tint-start: #eef4fd;
  --soft-tint-end: #dbe7fb;
  --nav-hover-color: #7fb2ff;
  --nav-dropdown-hover-color: #1e6fd9;
  --table-header-bg: #0f2360;
  --table-day-bg: #dbe7fb;
  --table-title-color: #17348a;
  --table-highlight-bg: #eef4fd;
  --light-section-bg: #f2f5fb;

  /* Bright tech blue */
  --hl-color: #7fb2ff;
  --hl-line-color: #1e6fd9;
  --hl-rgb: 30, 111, 217;
  --hl-btn-bg: #1e6fd9;
  --hl-btn-hover-bg: #17348a;
  --hl-btn-border: #1e6fd9;
  --hl-btn-text: #ffffff;
  --hl-cell-bg: #e8f0fc;
}

/*--------------------------------------------------------------
# Theme C - IM Department Website Teal
--------------------------------------------------------------*/
:root[data-theme="c"] {
  --logo-mark: url("../img/logo-c-header.png?v=3");
  --logo-size: contain;
  --logo-ratio: 1.123;
  --heading-color: #3b7d78;
  --accent-color: #3b7d78;
  --accent-rgb: 59, 125, 120;
  --accent-hover-color: #2f6662;
  --accent-strong-color: #2f6662;
  --accent-dark-rgb: 90, 166, 160;
  --surface-color: #eef7f6;
  --dark-section-bg: #24524e;
  --dark-section-surface: #3b7d78;
  --header-scrolled-bg: #1d4441;
  --hero-overlay: linear-gradient(180deg, rgba(29, 68, 65, 0.65) 0%, rgba(59, 125, 120, 0.22) 45%, rgba(59, 125, 120, 0.22) 70%, rgba(29, 68, 65, 0.45) 100%);
  --hero-text-shadow: rgba(10, 35, 33, 0.55);
  --soft-tint-start: #eaf6f6;
  --soft-tint-end: #d3ecec;
  --nav-hover-color: #b1dddd;
  --nav-dropdown-hover-color: #3b7d78;
  --table-header-bg: #24524e;
  --table-day-bg: #d3ecec;
  --table-title-color: #2f6662;
  --table-highlight-bg: #eaf6f6;
  --light-section-bg: #eff7f7;

  /* Light teal: on dark backgrounds only (fails contrast on white) */
  --hl-color: #b1dddd;
  --hl-line-color: #5aa6a0;
  --hl-rgb: 90, 166, 160;
  --hl-btn-bg: #3b7d78;
  --hl-btn-hover-bg: #2f6662;
  --hl-btn-border: #3b7d78;
  --hl-btn-text: #ffffff;
  --hl-cell-bg: #e3f3f3;
}

/*--------------------------------------------------------------
# Shared theme rules (apply to every theme)
--------------------------------------------------------------*/
:root[data-theme] .light-background {
  --background-color: var(--light-section-bg);
  --surface-color: #ffffff;
}

/* Header: full theme logo (symbol + text) replaces the default badge and site name */
.header .logo .logo-mark {
  display: none;
}

:root[data-theme] .header .logo .logo-badge,
:root[data-theme] .header .logo .logo-text {
  display: none;
}

:root[data-theme] .header .logo .logo-mark {
  display: block;
  height: 120px;
  aspect-ratio: var(--logo-ratio);
  flex-shrink: 0;
  background: var(--logo-mark) center / var(--logo-size) no-repeat;
  transition: height 0.3s ease;
}

:root[data-theme] .scrolled .header .logo .logo-mark {
  height: 64px;
}

/* Highlights inside dark sections (hero, footer) */
:root[data-theme] .dark-background {
  --accent-color: var(--hl-color);
}

/* Short highlight line under section titles */
:root[data-theme] .tos-header h2:not(.theme-title)::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--hl-line-color);
}

/* Header: highlight line once scrolled */
:root[data-theme] .scrolled .header {
  box-shadow: inset 0 -3px 0 var(--hl-color), 0 0 18px rgba(0, 0, 0, 0.1);
}

/* Nav: highlight underline under the active/hovered item */
:root[data-theme] .navmenu>ul>li>a:before {
  background-color: var(--nav-hover-color);
}

/* Hero: soft shadow keeps white text readable on the lighter overlay */
:root[data-theme] .hero h2,
:root[data-theme] .hero p,
:root[data-theme] .hero .container div {
  text-shadow: 0 2px 12px var(--hero-text-shadow);
}

/* Hero: highlighted dates */
:root[data-theme] .hero .hero-date {
  color: var(--hl-color);
  font-weight: 600;
}

/* Primary buttons */
:root[data-theme] .btn-accent:not(.disabled),
:root[data-theme] .information .tos-contact .contact-box .contact-content .contact-link {
  background-color: var(--hl-btn-bg);
  border-color: var(--hl-btn-border);
  color: var(--hl-btn-text);
}

:root[data-theme] .btn-accent:not(.disabled):hover,
:root[data-theme] .btn-accent:not(.disabled):focus,
:root[data-theme] .btn-accent.cfp-submit-btn:hover,
:root[data-theme] .btn-accent.cfp-submit-btn:focus-visible,
:root[data-theme] .information .tos-contact .contact-box .contact-content .contact-link:hover {
  background-color: var(--hl-btn-hover-bg);
  border-color: var(--hl-btn-border);
  color: var(--hl-btn-text);
}

/* Accent tiles with highlighted icons */
:root[data-theme] .information .tos-contact .contact-box .contact-icon {
  background-color: var(--heading-color);
}

:root[data-theme] .information .tos-contact .contact-box .contact-icon i,
:root[data-theme] .scroll-top i {
  color: var(--hl-color);
}

:root[data-theme] .scroll-top {
  background-color: var(--heading-color);
}

/* Call for Papers card and parking box: highlight edge */
:root[data-theme] .submission-banner {
  border-top: 4px solid var(--hl-line-color);
}

:root[data-theme] .parking-info {
  border-left-color: var(--hl-line-color);
}

/* Important Dates timeline: accent-to-highlight line, glowing dot on hover */
:root[data-theme] .timeline-background {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), rgba(var(--hl-rgb), 0.9));
}

:root[data-theme] .timeline-item-elegant:hover .timeline-dot {
  background: var(--hl-color);
  box-shadow: 0 0 16px rgba(var(--hl-rgb), 0.8);
}

/* Program & registration tables: highlighted column-header text and active period */
:root[data-theme] .program-schedule .col-header td,
:root[data-theme] .program-schedule .col-header th {
  color: var(--hl-color);
}

:root[data-theme] .reg-fee-table th.reg-active-period {
  background-color: var(--hl-btn-bg);
  color: var(--hl-btn-text);
}

:root[data-theme] .reg-fee-table .reg-active-period {
  background-color: var(--hl-cell-bg);
}

/* Footer: highlighted site name and top edge */
:root[data-theme] .footer {
  border-top: 4px solid var(--hl-color);
}

:root[data-theme] .footer .sitename {
  color: var(--hl-color);
}

/*--------------------------------------------------------------
# Theme Preview Switcher (assets/js/theme-switcher.js)
# Neutral styling so it looks the same under every theme.
--------------------------------------------------------------*/
.theme-switcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 996; /* above page content, below the header (997, which holds the mobile menu) and modals */
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e2e4e8;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--default-font);
  white-space: nowrap;
}

.theme-switcher-title {
  padding: 0 8px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.theme-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.theme-switcher-btn:hover {
  background: #f2f3f5;
}

.theme-switcher-btn[aria-pressed="true"] {
  border-color: var(--swatch-main);
  background: #ffffff;
  font-weight: 700;
}

.theme-switcher-btn:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* Two-tone dot: theme main color + accent color */
.theme-switcher-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--swatch-main) 50%, var(--swatch-accent) 50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.theme-switcher-id {
  font-weight: 700;
}

/* Phones & small tablets: hide the title and long labels, keep swatch + letter */
@media (max-width: 768px) {
  .theme-switcher {
    bottom: 12px;
  }

  .theme-switcher-title,
  .theme-switcher-label {
    display: none;
  }

  .theme-switcher-btn {
    padding: 6px 10px;
  }
}