/**
 * ============================================================
 * K-SECTION GLOBAL STYLES
 *
 * Attribute-based styling for the k-section component
 * - data-scheme: color variable schemes
 * - data-layout: content width constraints
 * - section-height: padding/height sizing
 * - justify-content: vertical alignment
 * - content-align: horizontal alignment
 *
 * ============================================================
 */

/* ── Base k-section styles ────────────────────────────────── */
k-section {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding-block: var(--section-p);
  --section-p: 2rem;
  min-height: 40dvh;
}

/* ── K-layer elements ────────────────────────────────────── */
.k-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.background-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.background-media img,
.background-media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.k-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

/* Only show overlay when background media is present */
k-section[data-has-background="true"] .k-overlay {
  display: block;
  background: rgba(11, 37, 49, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.k-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ── Data-layout: Content width constraints ─────────────── */
[data-layout="page-width"] {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

[data-layout="full-width"] {
  width: 100%;
}

/* ── Section-height: Padding/min-height sizing ─────────── */
[section-height="none"] {
  --section-p: 0;
}

[section-height="tiny"] {
  --section-p: 1rem;
}

[section-height="small"] {
  --section-p: 2rem;
  min-height: 40dvh;
}

[section-height="medium"] {
  --section-p: 2rem;
  min-height: 60dvh;
}

[section-height="large"] {
  --section-p: 2rem;
  min-height: 80dvh;
}

[section-height="full"] {
  --section-p: 2rem;
  min-height: 100dvh;
}

/* ── Justify-content: Vertical alignment ────────────────── */
[justify-content="top"] {
  justify-content: flex-start;
}

[justify-content="middle"] {
  justify-content: center;
}

[justify-content="bottom"] {
  justify-content: flex-end;
}

/* Default if no justify-content specified */
k-section:not([justify-content]) {
  justify-content: center;
}

/* ── Content-align: Horizontal alignment ────────────────── */
[content-align="left"] {
  text-align: left;
}

[content-align="center"] {
  text-align: center;
  align-items: center;
}

/* Default if no content-align specified */
.k-content:not([content-align]) {
  text-align: left;
}

/* ── Data-scheme: Color variable schemes ──────────────────── */
k-section,
[data-scheme] {
  background-color: var(--scheme--background);
  color: var(--scheme--text);
  --scheme--background: inherit;
  --scheme--text: inherit;
  --scheme--heading: inherit;
  --scheme--eyebrow: inherit;
  --scheme--text--muted: inherit;
  --scheme--border--color: inherit;
  --scheme--link--color: inherit;
  --scheme--link--color--hover: inherit;
  --scheme--button-primary--background: inherit;
  --scheme--button-primary--background--hover: inherit;
  --scheme--button-primary--text: inherit;
  --scheme--button-secondary--background: inherit;
  --scheme--button-secondary--background--hover: inherit;
  --scheme--button-secondary--border: inherit;
  --scheme--button-secondary--border--hover: inherit;
  --scheme--button-secondary--text: inherit;
  --scheme--button-tertiary--background: inherit;
  --scheme--button-tertiary--background--hover: inherit;
  --scheme--button-tertiary--text: inherit;
  --scheme--input--background: inherit;
  --scheme--input--border: inherit;
  --scheme--input--border--focus: inherit;
  --scheme--label: inherit;
}

/* Apply scheme background to k-background element */
.k-background {
  background-color: var(--scheme--background);
}

/* Scheme: White & Light (shared base, light overrides specific properties) */
[data-scheme="white"],
[data-scheme="light"] {
  --scheme--background: var(--surface);
  --scheme--text: var(--ink);
  --scheme--heading: var(--navy);
  --scheme--eyebrow: var(--ink-soft);
  --scheme--text--muted: var(--ink-faint);
  --scheme--border--color: var(--line);
  --scheme--link--color: var(--seafoam);
  --scheme--link--color--hover: var(--blue);
  --scheme--button-primary--background: var(--navy);
  --scheme--button-primary--background--hover: var(--blue);
  --scheme--button-primary--text: var(--offwhite);
  --scheme--button-primary--text--hover: var(--offwhite);
  --scheme--button-secondary--background: transparent;
  --scheme--button-secondary--background--hover: var(--blue-tint);
  --scheme--button-secondary--border: var(--navy);
  --scheme--button-secondary--border--hover: var(--blue);
  --scheme--button-secondary--text: var(--navy);
  --scheme--button-tertiary--background: transparent;
  --scheme--button-tertiary--background--hover: var(--line-cool);
  --scheme--button-tertiary--text: var(--navy);
  --scheme--input--background: var(--offwhite);
  --scheme--input--border: var(--line);
  --scheme--input--border--focus: var(--seafoam);
  --scheme--label: var(--navy-90);
}

/* Light scheme: override text shades and button secondary/tertiary text */
[data-scheme="light"] {
  --scheme--background: var(--offwhite);
  --scheme--text: var(--ink-soft);
  --scheme--heading: var(--navy-90);
  --scheme--button-secondary--border: var(--navy-90);
  --scheme--button-secondary--border--hover: var(--navy);
  --scheme--button-secondary--text: var(--navy-90);
  --scheme--button-tertiary--text: var(--navy-90);
  --scheme--label: var(--ink-soft);
}

/* Scheme: Brand */
[data-scheme="brand"] {
  --scheme--background: var(--seafoam);
  --scheme--text: var(--on-dark);
  --scheme--heading: var(--offwhite);
  --scheme--eyebrow: var(--offwhite);
  --scheme--text--muted: var(--seafoam-tint);
  --scheme--border--color: rgba(246, 237, 227, 0.3);
  --scheme--link--color: var(--offwhite);
  --scheme--link--color--hover: var(--seafoam-tint);
  --scheme--button-primary--background: var(--navy);
  --scheme--button-primary--background--hover: var(--ink);
  --scheme--button-primary--text: var(--offwhite);
  --scheme--button-primary--text--hover: var(--offwhite);
  --scheme--button-secondary--background: transparent;
  --scheme--button-secondary--background--hover: rgba(246, 237, 227, 0.1);
  --scheme--button-secondary--border: rgba(246, 237, 227, 0.4);
  --scheme--button-secondary--border--hover: var(--on-dark);
  --scheme--button-secondary--text: var(--on-dark);
  --scheme--button-tertiary--background: transparent;
  --scheme--button-tertiary--background--hover: rgba(246, 237, 227, 0.08);
  --scheme--button-tertiary--text: var(--on-dark-soft);
  --scheme--input--background: rgba(0, 0, 0, 0.15);
  --scheme--input--border: rgba(246, 237, 227, 0.3);
  --scheme--input--border--focus: var(--offwhite);
  --scheme--label: var(--on-dark-soft);
}

/* Scheme: Brand Alt */
[data-scheme="brand-alt"] {
  --scheme--background: var(--navy-90);
  --scheme--text: var(--on-dark);
  --scheme--heading: var(--seafoam);
  --scheme--eyebrow: var(--gold);
  --scheme--text--muted: var(--on-dark-soft);
  --scheme--border--color: rgba(246, 237, 227, 0.3);
  --scheme--link--color: var(--gold);
  --scheme--link--color--hover: var(--gold-tint);
  --scheme--button-primary--background: var(--seafoam);
  --scheme--button-primary--background--hover: var(--seafoam-tint);
  --scheme--button-primary--text: var(--offwhite);
  --scheme--button-primary--text--hover: var(--blue);
  --scheme--button-secondary--background: transparent;
  --scheme--button-secondary--background--hover: rgba(246, 237, 227, 0.1);
  --scheme--button-secondary--border: rgba(246, 237, 227, 0.4);
  --scheme--button-secondary--border--hover: var(--on-dark);
  --scheme--button-secondary--text: var(--on-dark);
  --scheme--button-tertiary--background: transparent;
  --scheme--button-tertiary--background--hover: rgba(246, 237, 227, 0.08);
  --scheme--button-tertiary--text: var(--on-dark-soft);
  --scheme--input--background: rgba(0, 0, 0, 0.2);
  --scheme--input--border: var(--ink-soft);
  --scheme--input--border--focus: var(--gold);
  --scheme--label: var(--on-dark-soft);
}

/* Scheme: Dark & Black (shared dark base, black overrides specific properties) */
[data-scheme="dark"],
[data-scheme="black"] {
  --scheme--background: var(--navy);
  --scheme--text: var(--on-dark);
  --scheme--heading: var(--offwhite);
  --scheme--eyebrow: var(--gold);
  --scheme--text--muted: var(--on-dark-soft);
  --scheme--border--color: rgba(246, 237, 227, 0.25);
  --scheme--link--color: var(--seafoam);
  --scheme--link--color--hover: var(--seafoam);
  --scheme--button-primary--background: var(--gold);
  --scheme--button-primary--background--hover: var(--gold-tint);
  --scheme--button-primary--text: var(--navy);
  --scheme--button-primary--text--hover: var(--navy);
  --scheme--button-secondary--background: transparent;
  --scheme--button-secondary--background--hover: rgba(246, 237, 227, 0.1);
  --scheme--button-secondary--border: rgba(246, 237, 227, 0.4);
  --scheme--button-secondary--border--hover: var(--on-dark);
  --scheme--button-secondary--text: var(--on-dark);
  --scheme--button-tertiary--background: transparent;
  --scheme--button-tertiary--background--hover: rgba(246, 237, 227, 0.08);
  --scheme--button-tertiary--text: var(--on-dark-soft);
  --scheme--input--background: rgba(0, 0, 0, 0.3);
  --scheme--input--border: var(--ink-soft);
  --scheme--input--border--focus: var(--seafoam);
  --scheme--label: var(--on-dark-soft);
}

/* Black scheme: override background, eyebrow, buttons, input, and link-hover */
[data-scheme="black"] {
  --scheme--background: var(--ink);
  --scheme--eyebrow: var(--on-dark-soft);
  --scheme--border--color: rgba(246, 237, 227, 0.2);
  --scheme--link--color--hover: var(--seafoam-tint);
  --scheme--button-primary--background: var(--blue);
  --scheme--button-primary--background--hover: var(--seafoam);
  --scheme--button-primary--text: var(--offwhite);
  --scheme--button-primary--text--hover: var(--offwhite);
  --scheme--input--background: rgba(0, 0, 0, 0.5);
}

/* ── Selection styles per scheme ────────────────────────── */
[data-scheme="white"] ::selection     { background: var(--navy);    color: var(--offwhite); }
[data-scheme="light"] ::selection     { background: var(--navy);    color: var(--offwhite); }
[data-scheme="brand"] ::selection     { background: var(--gold);    color: var(--navy); }
[data-scheme="brand-alt"] ::selection { background: var(--gold);    color: var(--navy); }
[data-scheme="dark"] ::selection      { background: var(--seafoam); color: var(--navy); }
[data-scheme="black"] ::selection     { background: var(--seafoam); color: var(--navy); }

/* ── First k-section on page: offset content below fixed nav ─ */
/* Add nav-height to section's padding to offset fixed header */
k-section:first-of-type {
  padding-top: calc(var(--nav-height) + var(--section-p));
}