/* Palettes for Linkita. Neutral is the default; Burton is the branded option. */

:root,
html[data-brand="neutral"] {
  --rsites-bg: #fafafa;
  --rsites-surface: #f4f4f5;
  --rsites-fg: #18181b;
  --rsites-muted: #52525b;
  --rsites-border: #e4e4e7;
  --rsites-accent: #3f3f46;
  --bg: #fafafa;
  --header: #f4f4f5;
}

html[data-brand="neutral"].dark,
html[data-brand="neutral"][data-theme="dark"] {
  --rsites-bg: #18181b;
  --rsites-surface: #27272a;
  --rsites-fg: #fafafa;
  --rsites-muted: #a1a1aa;
  --rsites-border: #3f3f46;
  --rsites-accent: #d4d4d8;
  --bg: #18181b;
  --header: #27272a;
}

html[data-brand="burton"] {
  --rsites-bg: #fbfcfd;
  --rsites-surface: #f4f8fb;
  --rsites-fg: #14283a;
  --rsites-muted: #4f6778;
  --rsites-border: #d7e8f2;
  --rsites-accent: #2a5f7d;
  --bg: #fbfcfd;
  --header: #f4f8fb;
}

html[data-brand="burton"].dark,
html[data-brand="burton"][data-theme="dark"] {
  --rsites-bg: #0d1a28;
  --rsites-surface: #16324f;
  --rsites-fg: #e8eef3;
  --rsites-muted: #9eb0bc;
  --rsites-border: #2a4560;
  --rsites-accent: #8ec4e0;
  --bg: #0d1a28;
  --header: #16324f;
}

html body {
  background-color: var(--rsites-bg);
  color: var(--rsites-fg);
}

html a {
  color: var(--rsites-accent);
}

.bf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.65rem 1rem;
}

.bf-header-start {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
}

.bf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--rsites-fg) !important;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.bf-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.bf-header-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.bf-header-nav:not(:has(a)) {
  display: none;
}

.bf-header-nav a {
  color: var(--rsites-muted) !important;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.bf-header-nav a:hover {
  color: var(--rsites-fg) !important;
}

.bf-header-controls {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--rsites-border);
  border-radius: 8px;
  background: var(--rsites-surface);
}

.bf-palette,
.bf-scheme {
  position: relative;
  display: flex;
}

.bf-palette > summary,
.bf-scheme > summary {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rsites-fg);
  background: transparent;
  user-select: none;
}

.bf-palette > summary {
  border-radius: 7px 0 0 7px;
}

.bf-scheme > summary {
  border-left: 1px solid var(--rsites-border);
  border-radius: 0 7px 7px 0;
}

.bf-palette > summary::-webkit-details-marker,
.bf-scheme > summary::-webkit-details-marker {
  display: none;
}

.bf-palette-menu,
.bf-scheme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 50;
  display: none;
  flex-direction: column;
  min-width: 7.5rem;
  padding: 0.25rem 0;
  border: 1px solid var(--rsites-border);
  border-radius: 8px;
  background: var(--rsites-surface);
  color: var(--rsites-fg);
  color-scheme: light;
}

.bf-palette[open] > .bf-palette-menu,
.bf-scheme[open] > .bf-scheme-menu {
  display: flex;
}

html.dark .bf-palette-menu,
html.dark .bf-scheme-menu,
html[data-theme="dark"] .bf-palette-menu,
html[data-theme="dark"] .bf-scheme-menu {
  color-scheme: dark;
}

.bf-palette-menu button,
.bf-scheme-menu button {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 0;
  background: none;
  color: var(--rsites-fg);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.bf-palette-menu button:hover,
.bf-scheme-menu button:hover,
.bf-palette-menu button[aria-pressed="true"],
.bf-scheme-menu button[aria-pressed="true"] {
  background: var(--rsites-bg);
}

.bf-palette > summary:focus-visible,
.bf-scheme > summary:focus-visible,
.bf-palette-menu button:focus-visible,
.bf-scheme-menu button:focus-visible {
  outline: 2px solid var(--rsites-accent);
  outline-offset: -2px;
}

.bf-hero {
  margin-bottom: 2.5rem;
}

.bf-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rsites-muted);
}

.bf-hero h1 {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.bf-lede {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--rsites-muted);
}

.bf-catalog-title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.bf-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.bf-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--rsites-border);
  border-radius: 12px;
  background: var(--rsites-surface);
  color: var(--rsites-fg) !important;
  text-decoration: none !important;
}

.bf-card:hover {
  border-color: var(--rsites-accent);
}

.bf-kind {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rsites-muted);
}

.bf-card-title {
  font-size: 1.05rem;
  font-weight: 650;
}

.bf-card-desc {
  font-size: 0.92rem;
  color: var(--rsites-muted);
}

.bf-empty {
  margin: 0;
  color: var(--rsites-muted);
}

.bf-canvas-lede {
  margin: 0 0 1.25rem;
  color: var(--rsites-muted);
}

main:has(.canvas-root),
main:has(.bf-hero) {
  max-width: 72rem;
}

main:has(.canvas-root) {
  overflow-x: auto;
}