/* Theme "classic" — Farbenmut, pawfect-dogcare edition.
 *
 * Warm coral/cream heir of Julia's watercolor-splash branding,
 * restyled after pawfect-dogcare.de's visual language (per Helmer):
 * desktop header with the nav centered in the middle column, and
 * glassmorphism surfaces — translucent panels with backdrop blur,
 * a white hairline border and layered inset-highlight shadows.
 * Glass needs color behind it to read, so the page carries soft
 * fixed watercolor washes the panels float over. */

.kq-style-classic {
  /* Glass surface tokens, mirroring pawfect's --pf-glass-* set. */
  --kq-glass-1: rgba(255, 251, 245, 0.55);
  --kq-glass-2: rgba(255, 251, 245, 0.72);
  --kq-glass-border: rgba(255, 255, 255, 0.55);
  --kq-glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.04) inset,
    0 8px 32px -8px rgba(84, 46, 51, 0.18),
    0 24px 48px -16px rgba(84, 46, 51, 0.10);
  --kq-glass-shadow-hover:
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.04) inset,
    0 12px 40px -8px rgba(84, 46, 51, 0.24),
    0 32px 60px -16px rgba(84, 46, 51, 0.14);
  --kq-blur: 24px;

  --kq-shadow: var(--kq-glass-shadow);
}

[data-theme="dark"] .kq-style-classic,
.kq-style-classic:where([data-theme="dark"] *) {
  --kq-glass-1: rgba(34, 30, 40, 0.55);
  --kq-glass-2: rgba(34, 30, 40, 0.72);
  --kq-glass-border: rgba(255, 255, 255, 0.14);
  --kq-glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.2) inset,
    0 8px 32px -8px rgba(0, 0, 0, 0.55),
    0 24px 48px -16px rgba(0, 0, 0, 0.35);
  --kq-glass-shadow-hover:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.2) inset,
    0 12px 40px -8px rgba(0, 0, 0, 0.6),
    0 32px 60px -16px rgba(0, 0, 0, 0.4);

  --kq-shadow: var(--kq-glass-shadow);
}

/* Soft fixed watercolor washes the glass panels float over. */
.kq-style-classic {
  background-image:
    radial-gradient(42rem 28rem at 88% -4%, color-mix(in srgb, var(--kq-warm) 28%, transparent), transparent 70%),
    radial-gradient(38rem 26rem at -6% 32%, color-mix(in srgb, var(--kq-primary) 18%, transparent), transparent 70%),
    radial-gradient(44rem 30rem at 70% 78%, color-mix(in srgb, var(--kq-cool) 18%, transparent), transparent 70%),
    radial-gradient(36rem 24rem at 12% 105%, color-mix(in srgb, var(--kq-accent) 18%, transparent), transparent 70%);
  background-attachment: fixed;
}
.kq-style-classic .kq-hero { background: none; }
/* Tinted sections go translucent so the fixed washes shine through. */
.kq-style-classic .kq-section--tint {
  background: color-mix(in srgb, var(--kq-tint) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Header: pawfect's centered-nav grid + strong glass blur ───── */
@media (min-width: 901px) {
  .kq-style-classic .kq-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .kq-style-classic .kq-nav { margin-left: 0; justify-content: center; }
}
.kq-style-classic .kq-header {
  background: color-mix(in srgb, var(--kq-bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.kq-style-classic .kq-brand__mark { box-shadow: var(--kq-glass-shadow); }

/* ── Glass surfaces: cards, courses, channels, dropdown, banner ── */
.kq-style-classic .kq-card,
.kq-style-classic .kq-course,
.kq-style-classic .kq-channel,
.kq-style-classic .kq-nav__drop,
.kq-style-classic .kq-cookies__inner {
  background: var(--kq-glass-1);
  backdrop-filter: blur(var(--kq-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--kq-blur)) saturate(140%);
  border: 1px solid var(--kq-glass-border);
  box-shadow: var(--kq-glass-shadow);
}
.kq-style-classic a.kq-card:hover,
.kq-style-classic .kq-channel:hover {
  border-color: var(--kq-glass-border);
  background: var(--kq-glass-2);
  box-shadow: var(--kq-glass-shadow-hover);
  transform: translateY(-2px);
}
.kq-style-classic .kq-card, .kq-style-classic .kq-channel { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }

/* Ghost buttons as glass pills (pawfect's .pf-btn--glass). */
.kq-style-classic .kq-btn--ghost {
  background: var(--kq-glass-1);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--kq-glass-border);
}
.kq-style-classic .kq-btn--ghost:hover {
  background: var(--kq-glass-2);
  border-color: var(--kq-glass-border);
  color: var(--kq-primary);
}
.kq-style-classic .kq-btn--primary { box-shadow: var(--kq-glass-shadow); }

.kq-style-classic .kq-eyebrow { color: var(--kq-primary); }
.kq-style-classic .kq-card__ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--kq-accent) 15%, transparent);
}
.kq-style-classic .kq-hero__media img {
  border: 1px solid var(--kq-glass-border);
  box-shadow: var(--kq-glass-shadow);
}
.kq-style-classic .kq-footer {
  background: color-mix(in srgb, var(--kq-tint) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}