/* Kürsli Rafeldt — Brand overlay
 * Applies the Seminar direction (tokens from design/brand/tokens.css and the
 * type scale / chrome from design/produktion/web.css) to the live site.
 * Loaded AFTER the React bundle's own stylesheet so these rules win.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f2efe4;
  --bg-2: #ebe7d7;
  --paper: #fbf9f2;
  --ink: #111813;
  --ink-soft: #2c332d;
  --ink-mute: #6a6355;
  --rule: #d9d3c3;
  --rule-2: #c8c1ac;
  --forest: #1a3a2e;
  --forest-2: #2c5a45;
  --forest-dk: #0f2a20;
  --tan: #b08a57;
  --gold: #c9a961;
  --gold-dk: #a8872c;
  --claret: #6e2a2a;
}

/* Palette + base typography ------------------------------------------------ */
html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Source Serif 4", Georgia, serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Default body copy (p, li, dd, blockquote, etc.) */
#root p, #root li, #root dd, #root blockquote,
#root .text-base, #root .text-sm, #root .text-lg, #root .text-xl,
#root .text-muted-foreground, #root .text-foreground {
  font-family: "Source Serif 4", Georgia, serif !important;
  color: var(--ink-soft);
}

/* Display / headings */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6,
#root .font-heading, #root .font-display {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

#root h1 { font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .96; letter-spacing: -.035em; }
#root h2 { font-weight: 500; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.04; letter-spacing: -.025em; }
#root h3 { font-weight: 500; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.1; letter-spacing: -.015em; }
#root h4 { font-weight: 500; font-size: 1.25rem; line-height: 1.25; }

/* Forest highlight for emphasis inside headings (picks up <em> and gradient spans) */
#root h1 em, #root h2 em, #root h3 em, #root h4 em,
#root .gradient-text {
  font-style: italic;
  color: var(--forest) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Mono UI chrome: eyebrows, labels, buttons, dates, prices */
#root button, #root a.btn, #root .btn,
#root [class*="button-"], #root [role="button"],
#root label, #root input, #root textarea, #root select,
#root th, #root .badge, #root small, #root .tag, #root .eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em;
}

#root button, #root a.btn, #root .btn,
#root [role="button"] {
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500;
}

/* Primary button style */
#root button[type="submit"],
#root .bg-primary, #root [class*="bg-primary"] {
  background: var(--forest) !important;
  color: var(--paper) !important;
  border-color: var(--forest) !important;
  border-radius: 0 !important;
}
#root button[type="submit"]:hover,
#root .bg-primary:hover, #root [class*="bg-primary"]:hover {
  background: var(--forest-2) !important;
  border-color: var(--forest-2) !important;
}

/* Course-card icon tiles: forest-filled square with a paper-coloured glyph
 * (matches the brand .kr-mark / .pillar .ic look). The React bundle renders
 * them as `<div class="bg-primary/10 p-X rounded-full text-primary"><svg …/></div>`.
 */
#root [class*="bg-primary/10"],
#root [class*="bg-accent/10"] {
  background: var(--forest) !important;
  color: var(--paper) !important;
  border-radius: 0 !important;
}
#root [class*="bg-primary/10"] svg,
#root [class*="bg-accent/10"] svg,
#root [class*="bg-primary/10"] [class*="text-primary"] svg {
  color: var(--paper) !important;
  stroke: var(--paper) !important;
  fill: none;
}

/* Cards / surfaces: paper tone instead of default white / cards */
#root .bg-card, #root .bg-background, #root .bg-white,
#root [class*="bg-card"] {
  background: var(--paper) !important;
}
#root .bg-muted, #root [class*="bg-muted"],
#root .bg-secondary {
  background: var(--bg-2) !important;
}

/* Border rules */
#root .border, #root .border-t, #root .border-b,
#root .border-l, #root .border-r, #root .divide-y > * + *,
#root [class*="border-"] {
  border-color: var(--rule) !important;
  border-radius: 0 !important;
}

#root .rounded, #root .rounded-lg, #root .rounded-xl, #root .rounded-2xl,
#root [class*="rounded-"] {
  border-radius: 0 !important;
}

#root .shadow, #root .shadow-sm, #root .shadow-md, #root .shadow-lg,
#root [class*="shadow-"] {
  box-shadow: 0 1px 0 var(--rule), 0 30px 80px -60px rgba(27,26,22,.28) !important;
}

/* Links */
#root a:not(.btn):not(.cta) { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#root a:not(.btn):not(.cta):hover { color: var(--forest-2); }

/* Hide the bundle's own top chrome; replaced by our injected header/footer.
 *
 * Only structurally top-level nav/footer elements are hidden — i.e. those
 * that are direct children of #root, of #root's first child (the app
 * wrapper), or explicitly inside a top-level <header>. Sub-navigations
 * rendered deep inside the course picker / booking form never match
 * these selectors, so they render normally. */
/* The bundled top nav + footer are tagged by brand-chrome.js at load time
 * and hidden here. Tagging happens exactly once — never on later mutations
 * — so any sub-navigation the course picker / booking form renders can
 * never be accidentally caught. */
body.kr-chrome-ready #root .kr-bundle-nav,
body.kr-chrome-ready #root .kr-bundle-footer,
body.kr-chrome-ready #root > header {
  display: none !important;
}

/* Utility: the KR monogram (copied from tokens.css so it works without the brand stylesheet) */
.kr-mark {
  display: inline-grid; place-items: center;
  background: var(--forest); color: var(--paper);
  font-family: "Fraunces", serif; font-weight: 700;
  line-height: 1; position: relative; letter-spacing: -.02em;
}
.kr-mark::after {
  content: ""; position: absolute; inset: 10%;
  border: 1px solid rgba(255, 255, 255, 0.25); pointer-events: none;
}
.kr-mark.sz-32 { width: 32px; height: 32px; font-size: 20px; }
.kr-mark.sz-44 { width: 44px; height: 44px; font-size: 27px; }

/* === Site header (injected) =============================================== */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 249, 242, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 100;
}
.site-head .brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
}
.site-head .brand .nm {
  font-family: "Fraunces", serif; font-weight: 500;
  font-size: 20px; letter-spacing: -0.01em; line-height: 1;
}
.site-head .brand .nm em { font-style: italic; color: var(--forest); }
.site-head .brand .tg {
  font-family: "JetBrains Mono", monospace; font-size: 9px;
  letter-spacing: 0.22em; color: var(--ink-mute);
  text-transform: uppercase; margin-top: 3px;
}
.site-head nav {
  display: flex; gap: 30px;
  font-family: "Fraunces", serif; font-size: 18px; font-weight: 500;
}
.site-head nav a {
  text-decoration: none; color: var(--ink-soft); position: relative; padding: 4px 0;
}
.site-head nav a:hover { color: var(--forest); }
.site-head nav a.cur { color: var(--forest); }
.site-head nav a.cur::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--forest);
}
.site-head .cta {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 10px 18px; background: var(--forest); color: var(--paper);
  text-decoration: none; border: 0;
}
.site-head .cta:hover { background: var(--forest-2); }

@media (max-width: 860px) {
  .site-head { padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  .site-head nav { order: 3; width: 100%; flex-wrap: wrap; gap: 16px; font-size: 14px; }
}

/* === Site footer (injected) =============================================== */
.site-foot {
  background: var(--forest-dk);
  color: #d8d3bf;
  padding: 56px 48px 32px;
  margin-top: 40px;
  font-family: "Source Serif 4", serif;
}
.site-foot .wrap {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
}
.site-foot h6 {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #8a9a84; margin-bottom: 14px;
}
.site-foot .brand {
  font-family: "Fraunces", serif; font-size: 22px; font-weight: 500;
  color: var(--paper); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.site-foot .brand em { font-style: italic; color: var(--gold); }
.site-foot .brand .kr-mark {
  width: 32px; height: 32px; font-size: 20px;
  background: var(--paper); color: var(--forest-dk);
}
.site-foot ul {
  list-style: none; display: flex; flex-direction: column;
  gap: 8px; font-size: 14px;
  font-family: "Source Serif 4", serif;
  padding: 0; margin: 0;
}
.site-foot ul a { text-decoration: none; color: inherit; }
.site-foot ul a:hover { color: var(--gold); }
.site-foot p { font-size: 14px; line-height: 1.6; color: #b5b7a0; margin: 0; }
.site-foot .end {
  max-width: 1280px; margin: 36px auto 0; padding-top: 22px;
  border-top: 1px solid #2a4438;
  display: flex; justify-content: space-between;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #8a9a84;
}

@media (max-width: 860px) {
  .site-foot { padding: 40px 20px 24px; }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-foot .end { flex-direction: column; gap: 8px; padding: 18px 0 0; }
}

/* === Über Kürsli: hide the portrait image + old Qualifications card =====
 * The team section below (injected) now covers photos + qualifications,
 * so both are redundant here. Also collapse the grid to a single column
 * so the About copy + the "Erfahrung & Erfolg" callout flow as one
 * wider block. */
#root #about [data-testid="img-about"],
#root #about [class*="lg:col-span-5"]:has([data-testid="img-about"]),
#root #about [data-testid="card-qualifications"],
#root #about [data-testid="card-experience"] {
  display: none !important;
}
@media (min-width: 1024px) {
  #root #about [class*="lg:grid-cols-12"] { display: block !important; }
  #root #about [class*="lg:col-span-7"] {
    padding-left: 0 !important;
    max-width: 960px;
    margin: 0 auto !important;
  }
}

/* === Hero: centre the text column after the image was removed ============
 * The bundled React hero lives in a 12-col grid where the left column
 * (with title + lede + CTAs) took 6 cols and the (now removed) Unsplash
 * image took the other 6. We collapse the grid to a single centered column
 * on lg+ so the hero reads as a centred block instead of left-aligned. */
@media (min-width: 1024px) {
  #root #home [class*="lg:grid"][class*="lg:grid-cols-12"] {
    display: block !important;
  }
  #root #home [class*="lg:col-span-6"] {
    max-width: 64ch;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  #root #home [class*="lg:col-span-6"] [class*="lg:text-left"] {
    text-align: center !important;
  }
  #root #home [class*="lg:col-span-6"] .flex.flex-col.sm\:flex-row {
    justify-content: center;
  }
  /* The lede paragraph has mx-auto only below lg — restore it at lg+. */
  #root #home [class*="lg:col-span-6"] p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === Testimonials: visible horizontal scroll ==============================
 * The React bundle renders testimonials as a flex row with
 * `overflow-x-auto scrollbar-hide`. `scrollbar-hide` hides the affordance
 * entirely, so visitors don't realise they can scroll to more reviews.
 * We target the specific container (the flex row that *contains*
 * testimonial cards) and show a slim, brand-styled scrollbar. */
#root div.overflow-x-auto:has(> [data-testid^="testimonial-"]) {
  /* Standard + Firefox */
  scrollbar-width: thin !important;
  scrollbar-color: var(--ink-mute) transparent !important;
  -ms-overflow-style: auto !important;
  scroll-snap-type: x proximity;
  /* Soft fade on the right edge as a visual cue that more content follows. */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
}
#root div.overflow-x-auto:has(> [data-testid^="testimonial-"])::-webkit-scrollbar {
  height: 8px !important;
  display: block !important;
}
#root div.overflow-x-auto:has(> [data-testid^="testimonial-"])::-webkit-scrollbar-track {
  background: transparent !important;
}
#root div.overflow-x-auto:has(> [data-testid^="testimonial-"])::-webkit-scrollbar-thumb {
  background: var(--rule-2) !important;
  border-radius: 4px !important;
}
#root div.overflow-x-auto:has(> [data-testid^="testimonial-"])::-webkit-scrollbar-thumb:hover {
  background: var(--forest) !important;
}
#root [data-testid^="testimonial-"] {
  scroll-snap-align: start;
}

/* Existing injected chrome (KulturLegi badge + toggle): harmonise with the new palette */
.kule-badge { background: var(--paper) !important; border-color: var(--rule) !important; }
.kule-toggle {
  background: var(--paper) !important; border-color: var(--rule) !important;
  font-family: "JetBrains Mono", monospace !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  font-size: 10px !important;
}
.kule-toggle input:checked + .kule-slider { background: var(--claret) !important; }
body.kule-discount .kule-disc { color: var(--claret) !important; font-family: "Fraunces", serif !important; letter-spacing: 0 !important; font-size: 1em !important; }
body.kule-discount .kule-orig { font-family: "Fraunces", serif !important; letter-spacing: 0 !important; }