/*
Theme Name:  Kojata
Version:     2.39.0
Description: GeneratePress child theme за kojata.com
Text Domain: kojata
*/

/* ══════════════════════════════════════════
   FONTS
══════════════════════════════════════════ */
/* Self-hosted fonts — виж assets/fonts/fonts.css и assets/fonts/INSTALL.md */

/* ══════════════════════════════════════════
   BRAND TOKENS
══════════════════════════════════════════ */
:root {
  /* ══ ШИРИНИ НА КОНТЕЙНЕРИТЕ ══
     --kj-w е единственото, което трябва да пипаш, за да разшириш
     или стесниш сайта. То управлява хедъра, футъра, архивите,
     продуктовите и съставковите страници и началната.

     Останалите НЕ следват --kj-w нарочно: те се диктуват от
     дължината на реда при четене, не от ширината на екрана.
     Ако ги вържеш за --kj-w, при широк монитор редовете стават
     твърде дълги и текстът се чете по-трудно. */
  --kj-w:            1180px;  /* хедър, футър, архиви, продукти, съставки, начална */
  --kj-w-article:    1080px;  /* теми — статия със сайдбар */
  --kj-w-app:         900px;  /* рутина билдър */
  --kj-w-text:        860px;  /* за нас, поверителност, методология */
  --kj-w-measure:     760px;  /* дълга проза (.kj-container-narrow) */
  --kj-w-cta:         560px;  /* тесни CTA блокове */

  --kj-plum:          #6b2d5e;
  --kj-plum-dark:     #4e1f45;
  --kj-plum-light:    #8b3d7a;
  --kj-gold:          #c9956a;
  --kj-gold-dark:     #a8774f;
  --kj-gold-light:    #e0b48a;

  --kj-good:          #2d7a4f;
  --kj-good-bg:       #edf7f2;
  --kj-good-border:   #9fd4b8;
  --kj-caution:       #7a5a00;
  --kj-caution-bg:    #fdf8e8;
  --kj-caution-border:#e8d070;
  --kj-avoid:         #8f1a2d;
  --kj-avoid-bg:      #fdf0f3;
  --kj-avoid-border:  #f0aabc;
  --kj-neutral:       #666;
  --kj-neutral-bg:    #f5f4f2;

  --kj-ink:           #1a0f18;
  --kj-ink-mid:       #5c4458;
  --kj-ink-soft:      #9e7b8a;
  --kj-surface:       #fdfafc;
  --kj-surface-2:     #f5eef8;
  --kj-white:         #ffffff;
  --kj-border:        #ede0ea;
  --kj-border-soft:   #f5eef3;

  --kj-dark-bg:       #0d0610;
  --kj-dark-bg-2:     #160c14;

  --kj-font-serif: 'Playfair Display', Georgia, serif;
  --kj-font-sans:  'Inter', system-ui, sans-serif;

  --kj-r-sm: 6px;
  --kj-r:    10px;
  --kj-r-lg: 16px;
  --kj-r-xl: 24px;

  /* Legacy aliases for templates */
  --kj-primary:       var(--kj-plum);
  --kj-primary-dark:  var(--kj-plum-dark);
  --kj-primary-light: var(--kj-plum-light);
  --kj-accent:        var(--kj-gold);
  --kj-accent-dark:   var(--kj-gold-dark);
  --kj-accent-light:  var(--kj-gold-light);
  --kj-dark:          var(--kj-ink);
  --kj-mid:           var(--kj-ink-mid);
  --kj-light:         var(--kj-surface);
  --kj-radius:        var(--kj-r);
  --kj-radius-sm:     var(--kj-r-sm);
  --kj-radius-lg:     var(--kj-r-lg);
  --kj-font-display:  var(--kj-font-serif);
  --kj-font-body:     var(--kj-font-sans);
  --kj-hero-gradient: linear-gradient(160deg, #0d0610 0%, #1e0a1c 60%, #0d0610 100%);
  --kj-hero-light: linear-gradient(160deg, #fdfafc 0%, #f5eef8 50%, #fdf8fc 100%);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--kj-font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--kj-ink);
  background: var(--kj-surface);
  -webkit-font-smoothing: antialiased;
}



a { color: var(--kj-plum); text-decoration: none; transition: color .18s; }
a:hover { color: var(--kj-plum-dark); }

/* ══════════════════════════════════════════
   LOGO SVG INLINE — в PHP
══════════════════════════════════════════ */
.kj-logo-wordmark {
  font-family: var(--kj-font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  font-style: italic;
  color: var(--kj-plum);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.kj-logo-wordmark span { color: var(--kj-gold); font-weight: 300; font-style: normal; font-family: var(--kj-font-sans); font-size: .95rem; margin-left: 1px; }
.kj-logo-dot { color: var(--kj-gold); }

/* ══════════════════════════════════════════
   FAVICON SVG (inline в head)
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   HERO — всички варианти
══════════════════════════════════════════ */
.kj-hero,
.kj-single-hero,
.kj-about-hero,
.kj-rutina-hero,
.kj-ing-page-hero,
.kj-prod-hero {
  background: var(--kj-hero-gradient);
  position: relative;
  overflow: hidden;
}

.kj-hero::after,
.kj-single-hero::after,
.kj-about-hero::after,
.kj-rutina-hero::after,
.kj-ing-page-hero::after,
.kj-prod-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 10% 20%, rgba(201,149,106,.1), transparent),
    radial-gradient(ellipse 45% 60% at 90% 80%, rgba(107,45,94,.22), transparent);
  pointer-events: none;
}

/* Декоративна молекула фонова в hero */
.kj-hero::before,
.kj-single-hero::before,
.kj-ing-page-hero::before,
.kj-prod-hero::before {
  content: '';
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(201,149,106,.08);
  box-shadow:
    0 0 0 40px rgba(201,149,106,.04),
    0 0 0 80px rgba(201,149,106,.025),
    0 0 0 120px rgba(201,149,106,.012);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   АНАЛИЗАТОР HERO — специален
══════════════════════════════════════════ */
.kj-analyzer-hero {
  background: var(--kj-hero-gradient);
  padding: 72px 20px 60px;
  text-align: center;
  border-radius: var(--kj-r-xl);
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}
.kj-analyzer-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(201,149,106,.06);
  box-shadow:
    0 0 0 60px rgba(201,149,106,.035),
    0 0 0 120px rgba(201,149,106,.02),
    0 0 0 180px rgba(107,45,94,.015);
  pointer-events: none;
}
.kj-analyzer-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201,149,106,.12), transparent),
    radial-gradient(ellipse 45% 55% at 80% 70%, rgba(107,45,94,.2), transparent);
  pointer-events: none;
}
.kj-analyzer-hero h1 {
  font-family: var(--kj-font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .65rem;
  position: relative;
  z-index: 1;
  letter-spacing: -.02em;
}
.kj-analyzer-hero h1 em {
  color: var(--kj-gold);
  font-style: normal;
}
.kj-analyzer-hero p {
  color: rgba(255,255,255,.68);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.kj-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.kj-badges span {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  font-weight: 500;
  padding: .3rem .9rem;
  border-radius: 50px;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.kj-block,
.kj-card {
  background: var(--kj-white);
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-r-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: box-shadow .2s, border-color .2s;
}
.kj-block:hover,
.kj-card:hover {
  border-color: rgba(107,45,94,.2);
  box-shadow: 0 2px 16px rgba(107,45,94,.06);
}
.kj-block { padding: 24px; }
.kj-card-head {
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--kj-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kj-card-title { font-size: .88rem; font-weight: 600; color: var(--kj-ink); }
.kj-card-body { padding: 1.25rem; }

.kj-block h3,
.kj-sidebar-card h4,
.kj-info-card h4 {
  font-family: var(--kj-font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--kj-ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--kj-plum);
}
.kj-info-card h4 { border-color: var(--kj-gold); }

/* ══════════════════════════════════════════
   BADGES & PILLS
══════════════════════════════════════════ */
.kj-badge-good    { background: var(--kj-good-bg);    color: var(--kj-good);    border: 1px solid var(--kj-good-border); }
.kj-badge-caution { background: var(--kj-caution-bg); color: var(--kj-caution); border: 1px solid var(--kj-caution-border); }
.kj-badge-avoid   { background: var(--kj-avoid-bg);   color: var(--kj-avoid);   border: 1px solid var(--kj-avoid-border); }
.kj-badge-neutral { background: var(--kj-neutral-bg); color: var(--kj-neutral); border: 1px solid var(--kj-border); }

.kj-rating-pill {
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.kj-tax-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(201,149,106,.3);
  border: 1px solid rgba(201,149,106,.4);
}
.kj-tax-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

/* ══════════════════════════════════════════
   RATING STRIP
══════════════════════════════════════════ */
.kj-rating-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50px;
  padding: 7px 16px;
}
.kj-rating-dot { width: 10px; height: 10px; border-radius: 50%; }
.kj-rating-label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); }

/* ══════════════════════════════════════════
   INGREDIENT DOTS
══════════════════════════════════════════ */
.kj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.kj-dot-good    { background: var(--kj-good); }
.kj-dot-neutral { background: #aaa; }
.kj-dot-caution { background: var(--kj-caution); }
.kj-dot-avoid   { background: var(--kj-avoid); }

/* ══════════════════════════════════════════
   SCORE RING
══════════════════════════════════════════ */
.kj-verdict-ring {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0; border: 2.5px solid;
}
.kj-verdict-ring.good { background: var(--kj-good-bg);    border-color: var(--kj-good-border);    color: var(--kj-good); }
.kj-verdict-ring.warn { background: var(--kj-caution-bg); border-color: var(--kj-caution-border); color: var(--kj-caution); }
.kj-verdict-ring.bad  { background: var(--kj-avoid-bg);   border-color: var(--kj-avoid-border);   color: var(--kj-avoid); }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.kj-btn-primary {
  display: block; width: 100%;
  padding: .9rem 1.5rem;
  background: var(--kj-plum);
  color: #fff; border: none;
  border-radius: var(--kj-r-sm);
  font-family: var(--kj-font-sans);
  font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: background .18s;
  letter-spacing: .01em;
}
.kj-btn-primary:hover { background: var(--kj-plum-dark); }
.kj-btn-primary:disabled { opacity: .5; cursor: wait; }

.kj-btn-gold {
  display: block; width: 100%;
  padding: .85rem 1.5rem;
  background: var(--kj-gold);
  color: var(--kj-ink); border: none;
  border-radius: var(--kj-r-sm);
  font-family: var(--kj-font-sans);
  font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: background .18s;
}
.kj-btn-gold:hover { background: var(--kj-gold-dark); color: var(--kj-ink); }

.kj-btn-outline {
  display: block; width: 100%;
  padding: .8rem 1.25rem;
  background: transparent;
  color: var(--kj-plum);
  border: 1.5px solid var(--kj-plum);
  border-radius: var(--kj-r-sm);
  font-family: var(--kj-font-sans);
  font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: all .18s; text-align: center;
  text-decoration: none;
}
.kj-btn-outline:hover { background: var(--kj-plum); color: #fff; }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.kj-tabs {
  display: flex;
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-r-sm);
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--kj-white);
}
.kj-tab {
  flex: 1; padding: .62rem .5rem;
  text-align: center; font-size: .78rem; font-weight: 600;
  background: transparent; border: none; cursor: pointer;
  color: var(--kj-ink-mid); border-right: 1px solid var(--kj-border);
  transition: all .15s; font-family: var(--kj-font-sans);
  letter-spacing: .02em;
}
.kj-tab:last-child { border-right: none; }
.kj-tab.active { background: var(--kj-plum); color: #fff; }
.kj-tab:hover:not(.active) { background: var(--kj-surface-2); color: var(--kj-plum); }

/* ══════════════════════════════════════════
   SIDEBAR CARDS
══════════════════════════════════════════ */
.kj-sidebar { display: flex; flex-direction: column; gap: 14px; }
.kj-sidebar-card,
.kj-info-card {
  background: var(--kj-white);
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-r);
  padding: 18px;
}
.kj-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--kj-border-soft);
  font-size: .8rem;
}
.kj-stat-row:last-child { border-bottom: none; }
.kj-stat-label { color: var(--kj-ink-mid); }
.kj-stat-val { font-weight: 700; color: var(--kj-ink); }

.kj-info-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; padding: 7px 0;
  border-bottom: 1px solid var(--kj-border-soft); font-size: .8rem; gap: 8px;
}
.kj-info-row:last-child { border-bottom: none; }
.kj-info-label { color: var(--kj-ink-mid); }
.kj-info-val { font-weight: 700; color: var(--kj-ink); text-align: right; }

/* ══════════════════════════════════════════
   EWG SCORE
══════════════════════════════════════════ */
.kj-ewg-display {
  text-align: center; padding: 12px;
  margin-bottom: 12px; border-bottom: 1px solid var(--kj-border-soft);
}
.kj-ewg-num {
  font-family: var(--kj-font-serif);
  font-size: 2.6rem; font-weight: 800; line-height: 1;
}
.kj-ewg-sub { font-size: .68rem; color: var(--kj-ink-soft); margin-top: 2px; }

/* ══════════════════════════════════════════
   TLDR BOX
══════════════════════════════════════════ */
.kj-tldr-box {
  background: linear-gradient(135deg, rgba(107,45,94,.05), rgba(201,149,106,.03));
  border-left: 3px solid var(--kj-plum);
  border-radius: 0 var(--kj-r) var(--kj-r) 0;
  padding: 16px 20px; margin-bottom: 22px;
}
.kj-tldr-label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--kj-plum); margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   INGREDIENT ARCHIVE GRID
══════════════════════════════════════════ */
.kj-archive-wrap { max-width: var(--kj-w); margin: 0 auto; padding: 40px 20px; }
.kj-ing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: 16px;
}
.kj-ing-card {
  background: var(--kj-white);
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-r);
  padding: 18px; text-decoration: none;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.kj-ing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(107,45,94,.1);
  border-color: var(--kj-plum);
}
.kj-ing-card-name {
  font-family: var(--kj-font-serif);
  font-size: .98rem; font-weight: 700;
  color: var(--kj-ink); margin-bottom: 3px;
}
.kj-ing-card-inci {
  font-size: .7rem; color: var(--kj-ink-soft);
  font-family: monospace; margin-bottom: 10px;
}
.kj-ing-card-desc {
  font-size: .8rem; color: var(--kj-ink-mid);
  line-height: 1.55; flex: 1; margin-bottom: 12px;
}
.kj-ing-card-footer { display: flex; align-items: center; justify-content: space-between; }

/* ══════════════════════════════════════════
   LAYOUT WRAPS
══════════════════════════════════════════ */
/* ⚠ .kj-content-wrap и .kj-prod-wrap не се използват в нито един шаблон (легаси).
   .kj-ing-page-wrap се прегазва от блока с !important по-долу и реално е var(--kj-w).
   Стойността е оставена като var(--kj-w-article), за да не остане самотно число. */
.kj-content-wrap,
.kj-ing-page-wrap,
.kj-prod-wrap {
  max-width: var(--kj-w-article); margin: 0 auto;
  padding: 36px 20px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px; align-items: start;
}

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */
.kj-breadcrumb {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  margin-bottom: 18px;
  display: flex; align-items: center;
  gap: 5px; flex-wrap: wrap;
}
.kj-breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; }
.kj-breadcrumb a:hover { color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════════
   CTA BUTTONS в sidebar
══════════════════════════════════════════ */
.kj-cta-dark {
  display: block; padding: 12px;
  background: var(--kj-dark-bg);
  color: #fff; border-radius: var(--kj-r-sm);
  text-align: center; font-weight: 600; font-size: .85rem;
  text-decoration: none; margin-bottom: 8px;
  border: 1px solid rgba(201,149,106,.2);
  transition: border-color .18s;
}
.kj-cta-dark:hover { border-color: var(--kj-gold); color: #fff; }
.kj-cta-outline { margin-bottom: 8px; }

/* ══════════════════════════════════════════
   PRODUCT GRID (related)
══════════════════════════════════════════ */
.kj-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 12px;
}
.kj-prod-card {
  background: var(--kj-white); border: 1px solid var(--kj-border);
  border-radius: var(--kj-r); padding: 12px;
  text-decoration: none; display: flex;
  align-items: center; gap: 10px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.kj-prod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(107,45,94,.1);
  border-color: var(--kj-plum);
}
.kj-prod-card-rating {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; flex-shrink: 0;
}
.kj-prod-card-rating.good { background: var(--kj-good-bg); color: var(--kj-good); }
.kj-prod-card-rating.warn { background: var(--kj-caution-bg); color: var(--kj-caution); }
.kj-prod-card-rating.bad  { background: var(--kj-avoid-bg); color: var(--kj-avoid); }
.kj-prod-card-name { font-size: .78rem; font-weight: 600; color: var(--kj-ink); line-height: 1.3; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
  background: var(--kj-dark-bg) !important;
  border-top: 1px solid rgba(201,149,106,.12) !important;
}
.site-footer,
.site-footer p,
.site-footer a {
  color: rgba(255,255,255,.45) !important;
  font-size: .78rem !important;
}
.site-footer a:hover { color: var(--kj-gold) !important; }

.kj-footer-attr {
  text-align: center; padding: 14px 20px;
  font-size: .72rem; color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.06);
}
.kj-footer-attr a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .18s; }
.kj-footer-attr a:hover { color: var(--kj-gold); }

/* ══════════════════════════════════════════
   TAXONOMY CLOUD
══════════════════════════════════════════ */
.kj-tax-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.kj-tax-tag {
  font-size: .7rem; padding: .22rem .65rem; border-radius: 50px;
  background: rgba(107,45,94,.07); color: var(--kj-plum);
  border: 1px solid rgba(107,45,94,.15);
  text-decoration: none; transition: all .15s;
}
.kj-tax-tag:hover { background: var(--kj-plum); color: #fff; }

/* ══════════════════════════════════════════
   INGREDIENT TABLE
══════════════════════════════════════════ */
.kj-ing-table { width: 100%; border-collapse: collapse; }
.kj-ing-table th {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--kj-ink-soft);
  padding: 8px 10px; border-bottom: 2px solid var(--kj-border); text-align: left;
}
.kj-ing-row { border-bottom: 1px solid var(--kj-border-soft); cursor: pointer; transition: background .12s; }
.kj-ing-row:hover { background: var(--kj-surface-2); }
.kj-ing-row td { padding: 10px; font-size: .82rem; vertical-align: middle; }
.kj-ing-name-cell { font-weight: 600; color: var(--kj-ink); }
.kj-ing-name-cell a { color: var(--kj-plum); font-weight: 700; }
.kj-ing-bg-name { font-size: .72rem; color: var(--kj-ink-mid); font-weight: 400; display: block; }
.kj-ing-role { font-size: .75rem; color: var(--kj-ink-mid); }
.kj-ing-detail-row { display: none; background: var(--kj-surface-2); }
.kj-ing-detail-row.open { display: table-row; }
.kj-ing-detail-cell { padding: 10px 10px 14px 32px; font-size: .78rem; color: var(--kj-ink-mid); line-height: 1.55; }
.kj-ing-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kj-ing-tag { font-size: .67rem; padding: .15rem .55rem; border-radius: 50px; }
.kj-tag-b { background: var(--kj-good-bg); color: var(--kj-good); }
.kj-tag-c { background: var(--kj-avoid-bg); color: var(--kj-avoid); }

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.kj-alert {
  padding: 10px 14px; border-radius: var(--kj-r-sm);
  margin-bottom: 8px; display: flex; gap: 8px; border-left: 3px solid;
}
.kj-alert.warn { background: var(--kj-caution-bg); border-color: #e0a800; }
.kj-alert.bad  { background: var(--kj-avoid-bg);   border-color: #c84040; }
.kj-alert-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.warn .kj-alert-title { color: var(--kj-caution); }
.bad  .kj-alert-title { color: var(--kj-avoid); }
.kj-alert-text { font-size: .8rem; color: var(--kj-ink); line-height: 1.5; }

/* ══════════════════════════════════════════
   SKIN CHIPS
══════════════════════════════════════════ */
.kj-skin-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.kj-skin-chip { font-size: .72rem; padding: .25rem .7rem; border-radius: 50px; font-weight: 600; }
.kj-skin-yes { background: var(--kj-good-bg); color: var(--kj-good); border: 1px solid var(--kj-good-border); }
.kj-skin-no  { background: var(--kj-neutral-bg); color: #aaa; border: 1px solid var(--kj-border); }

/* ══════════════════════════════════════════
   RUTINA BUILDER
══════════════════════════════════════════ */
.kj-rutina-page { max-width: var(--kj-w-app); margin: 0 auto; padding: 0 1rem 4rem; }
.kj-rut-search-wrap {
  background: var(--kj-white); border: 1px solid var(--kj-border);
  border-radius: var(--kj-r); padding: 1.25rem; margin-bottom: 1.5rem;
}
.kj-rut-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--kj-white);
  border: 1px solid var(--kj-border); border-radius: var(--kj-r-sm); margin-bottom: 8px;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */
.kj-about-page { max-width: var(--kj-w-text); margin: 0 auto; padding: 48px 20px 80px; }
.kj-principles {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 14px; margin-bottom: 36px;
}
.kj-principle {
  background: var(--kj-white); border: 1px solid var(--kj-border);
  border-radius: var(--kj-r); padding: 18px;
}
.kj-principle h3 { font-size: .88rem; font-weight: 700; color: var(--kj-ink); margin-bottom: 5px; border: none; padding: 0; }
.kj-principle p  { font-size: .78rem; color: var(--kj-ink-mid); line-height: 1.55; margin: 0; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Wrapper padding */
  .kj-page-wrap,
  .kj-prod-wrap,
  .kj-archive-wrap,
  .kj-how-inner,
  .kj-ings-inner,
  .kj-rut-inner,
  .kj-arch-hero-inner,
  .kj-arch-filters-inner { padding-left: 16px !important; padding-right: 16px !important; }

  /* Layouts → single column */
  .kj-content-wrap,
  .kj-ing-page-wrap,
  .kj-prod-wrap { grid-template-columns: 1fr; }
  .kj-sidebar { order: -1; }
  .kj-prod-grid { grid-template-columns: 1fr 1fr; }
  .kj-ing-grid { grid-template-columns: 1fr; }
  .kj-analyzer-hero { padding: 40px 16px 32px; border-radius: var(--kj-r); }

  /* Product hero */
  .kj-prod-hero-inner { grid-template-columns: 1fr; }
  .kj-prod-verdict-wrap { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
  .kj-prod-image { width: 80px; height: 80px; }

  /* Archive filters — horizontal scroll */
  .kj-arch-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kj-arch-filters-inner { flex-wrap: nowrap; min-width: max-content; }

  /* Steps */
  .kj-steps { grid-template-columns: 1fr; }
  .kj-ings-grid { grid-template-columns: 1fr 1fr; }

  /* Logo compact */
  .kj-logo-wordmark { font-size: 1.4rem !important; }

  /* Мобилното меню да заема цялата ширина */
  #primary-menu {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 480px) {
  .kj-prod-grid { grid-template-columns: 1fr; }
  .kj-ings-grid { grid-template-columns: 1fr; }
  .kj-prod-verdict-wrap { flex-direction: column; align-items: flex-start; }
  .sk-two-col { grid-template-columns: 1fr !important; }

  /* Hero text smaller */
  .kj-hh-h1 { font-size: 1.8rem; }
  .kj-prod-title { font-size: 1.5rem !important; }

  /* Tables — scroll */
  .kj-ing-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kj-ing-table { min-width: 500px; }

  /* Global overflow fixes за малки екрани */
  .kj-prod-hero-inner,
  .kj-ing-hero-inner { padding: 0 12px !important; }

  /* Prevent text overflow */
  .kj-prod-title,
  .kj-ing-h1 { word-break: break-word; }

  /* Disclaimer */
  .kj-disclaimer { font-size: .68rem !important; padding: 12px 14px !important; }

  /* Breadcrumb */
  .kj-breadcrumb { font-size: .68rem; }
  .kj-breadcrumb span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ══════════════════════════════════════════
   GP FULL WIDTH — ФИНАЛЕН ПРАВИЛЕН FIX
   Работи с GP separate-containers layout
══════════════════════════════════════════ */

/* Стъпка 1: Премахни padding от GP article wrapper */
body.home .inside-article,
body.home article.page {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

/* Стъпка 2: Премахни max-width от GP page container */
body.home #page,
body.home .site {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Стъпка 3: Content area full width */
body.home #content,
body.home .site-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Стъпка 4: Entry content без ограничения */
body.home .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Скрий GP entry header */
body.home .entry-header {
  display: none !important;
}

/* Всички страници — full width content */
body #content,
body .site-content {
  padding: 0 !important;
  max-width: 100% !important;
}

/* CPT + page templates — без GP article padding */
body.single-sastojka .inside-article,
body.single-produkt .inside-article,
body.post-type-archive-sastojka .inside-article,
body.post-type-archive-produkt .inside-article,
body.page .inside-article,
body.page-template-default .inside-article {
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Entry content full width — critical за archive pages */
body.post-type-archive-produkt .entry-content,
body.post-type-archive-produkt .entry-header,
body.post-type-archive-produkt article,
body.post-type-archive-produkt #primary,
body.post-type-archive-produkt .content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
/* grid-container reset само в content зоната, НЕ в хедъра */
body.post-type-archive-produkt #content.grid-container,
body.post-type-archive-produkt .site-content .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════
   КОНСИСТЕНТЕН КОНТЕЙНЕР — 1100px навсякъде
   Секциите сами управляват ширината си
══════════════════════════════════════════ */
.kj-page-wrap,
.kj-prod-wrap,
.kj-archive-wrap,
.kj-how-inner,
.kj-ings-inner,
.kj-rut-inner,
.kj-analyzer-inner,
.kj-rutina-page,
.kj-about-page,
.kj-arch-hero-inner,
.kj-arch-filters-inner,
.kj-arch-grid-wrap,
.kj-ing-page-hero-inner,
.kj-ing-page-wrap,
.sk-page,
.kj-privacy {
  max-width: var(--kj-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* Тесните секции запазват си ширините */
.kj-rutina-page { max-width: var(--kj-w-app) !important; }
.kj-about-page  { max-width: var(--kj-w-text) !important; }
.kj-fcta-inner  { max-width: var(--kj-w-cta) !important; }


/* ══════════════════════════════════════════
   LIGHT HERO VARIANT — за homepage
══════════════════════════════════════════ */
.kj-hero-light {
  background: var(--kj-hero-light);
  border-bottom: 1px solid var(--kj-border);
}
.kj-hero-light h1 { color: var(--kj-ink) !important; }
.kj-hero-light h1 em { color: var(--kj-plum) !important; font-style: italic; }
.kj-hero-light p { color: var(--kj-ink-mid) !important; }

/* ══════════════════════════════════════════
   АКЦЕНТ ЕЛЕМЕНТИ
══════════════════════════════════════════ */
.kj-pill-plum {
  display: inline-block;
  background: var(--kj-surface-2);
  color: var(--kj-plum);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .9rem;
  border-radius: 50px;
  border: 1px solid rgba(107,45,94,.15);
}

/* Sidebar cards — по-топли */
.kj-sidebar-card {
  background: var(--kj-white);
  border: 1px solid var(--kj-border);
  border-radius: var(--kj-r-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.kj-sidebar-card h4 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--kj-ink-soft);
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--kj-border);
}

/* Verdict ring по-голям и по-изразителен */
.kj-prod-verdict-num { font-size: 2rem !important; opacity: 1 !important; font-weight: 800 !important; }
.kj-verdict-ring { opacity: 1 !important; }
.kj-prod-verdict { opacity: 1 !important; }

/* Incompatibility cards */
.kj-incompat-card {
  border-left: 3px solid var(--kj-caution-border);
  border-radius: 0 var(--kj-r) var(--kj-r) 0 !important;
}
.kj-incompat-card.high { border-left-color: var(--kj-avoid-border); }
.kj-incompat-card.low  { border-left-color: var(--kj-good-border); }

/* Анализирай button — по-голям акцент */
.sk-analyze-btn {
  background: var(--kj-plum) !important;
  color: white !important;
  font-size: 1rem !important;
  padding: 1rem 2rem !important;
  border-radius: var(--kj-r) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  transition: background .18s, transform .12s !important;
}
.sk-analyze-btn:hover {
  background: var(--kj-plum-dark) !important;
  transform: translateY(-1px) !important;
}


/* ══════════════════════════════════════════
   СКРИЙ сканирания от потребителски изглед
══════════════════════════════════════════ */
.kj-scans { display: none !important; }

/* ══════════════════════════════════════════
   SIDEBAR HEADINGS — по-деликатни
══════════════════════════════════════════ */
.kj-sidebar-card h4 {
  font-family: var(--kj-font-serif) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--kj-plum) !important;
}

/* ══════════════════════════════════════════
   ОБЩА ОЦЕНКА heading
══════════════════════════════════════════ */
.kj-sidebar-card h4,
.kj-block h3 {
  font-family: var(--kj-font-serif) !important;
  font-style: italic !important;
  color: var(--kj-plum) !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
}

/* ══════════════════════════════════════════
   BREADCRUMB — по-видим
══════════════════════════════════════════ */
.kj-breadcrumb { 
  font-size: .78rem !important;
  color: rgba(255,255,255,.55) !important;
  padding: 12px 0 0 !important;
}
.kj-breadcrumb a { color: rgba(255,255,255,.55) !important; }
.kj-breadcrumb a:hover { color: var(--kj-gold) !important; }
.kj-breadcrumb .sep { color: rgba(255,255,255,.25) !important; }

/* ══════════════════════════════════════════
   КОНСИСТЕНТНА ШИРИНА — всички страници
   --kj-max-w е стар псевдоним; сочи към --kj-w, за да не се
   разминава. Не добавяй нови употреби — ползвай --kj-w.
══════════════════════════════════════════ */
:root { --kj-max-w: var(--kj-w); }



/* ══════════════════════════════════════════
   АКЦЕНТНИ ЛИНИИ — consistent decorations
══════════════════════════════════════════ */
/* Плум подчертаване на section titles */
.kj-sec-label::after,
.kj-pill-plum::after {
  display: none;
}

/* Left border accent на карти */
.kj-step { border-left: 3px solid transparent; transition: border-color .2s, transform .2s, box-shadow .2s; }
.kj-step:hover { border-left-color: var(--kj-plum); }

/* Accent dot before section labels */
.kj-sec-label { display: flex; align-items: center; gap: 8px; }
.kj-sec-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--kj-gold);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   SCORE RING — по-изразителен
══════════════════════════════════════════ */
.kj-verdict-ring {
  width: 90px !important;
  height: 90px !important;
  border-width: 3px !important;
}
.kj-verdict-ring .kj-verdict-num {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   PRODUCT PAGE — sidebar акценти
══════════════════════════════════════════ */
.kj-prod-wrap {
  max-width: var(--kj-max-w);
  margin: 0 auto;
  padding: 0 24px;
}
.kj-sidebar-card {
  border-top: 3px solid var(--kj-plum);
  border-radius: 0 0 var(--kj-r-lg) var(--kj-r-lg) !important;
}


/* ══════════════════════════════════════════
   АНАЛИЗАТОР — ширина
══════════════════════════════════════════ */
.sk-page { max-width: var(--kj-w) !important; margin: 0 auto !important; padding: 0 28px !important; }

/* ══════════════════════════════════════════
   ПОВЕРИТЕЛНОСТ — ширина
══════════════════════════════════════════ */
.kj-privacy { max-width: var(--kj-w-text) !important; margin: 0 auto !important; padding: 48px 28px 80px !important; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.kj-footer {
  background: #0d0610;
  color: rgba(255,255,255,.55);
  margin-top: 0;
}
.kj-footer-inner {
  max-width: var(--kj-w);
  margin: 0 auto;
  padding: 52px 28px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
.kj-footer-logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 14px;
}
.kj-footer-logo-text {
  font-family: var(--kj-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: -.03em;
}
.kj-footer-logo-text span {
  font-size: .85rem;
  font-weight: 300;
  font-style: normal;
  color: var(--kj-gold);
  margin-left: 2px;
}
.kj-footer-tagline {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin-bottom: 14px;
}
.kj-footer-disclaimer {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  border-left: 2px solid rgba(201,149,106,.25);
  padding-left: 12px;
  margin: 0;
}
.kj-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.kj-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kj-footer-col-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--kj-gold);
  margin-bottom: 4px;
}
.kj-footer-col a {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .18s;
}
.kj-footer-col a:hover { color: #fff; }

.kj-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
}
.kj-footer-bottom-inner {
  max-width: var(--kj-w);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .72rem;
  color: rgba(255,255,255,.6);
}
.kj-footer-bottom-inner a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.kj-footer-bottom-inner a:hover { color: var(--kj-gold); }
/* Контраст AA: експлицитно за двата span (copyright + ODbL attr), да не зависи от наследяване */
.kj-footer-bottom-inner span,
.kj-footer-bottom-inner .kj-footer-attr-obf { color: rgba(255,255,255,.65) !important; }
.kj-footer-bottom-inner .kj-footer-attr-obf a { color: rgba(255,255,255,.78) !important; }

/* Скрий стария footer attribution ако остане */
.kj-footer-attr:not(.kj-footer-bottom-inner *) { display: none; }

@media(max-width: 768px) {
  .kj-footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 28px; }
  .kj-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════
   KOJATA v2 — НОВИ КОМПОНЕНТИ
   Добавени към старата дизайн система (plum + gold)
   Използват съществуващите --kj-* токени.
══════════════════════════════════════════════════════════════ */

/* ── Skin type chips (анализатор) ── */
.kj-skin-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.kj-skin-chip {
    padding: 5px 14px;
    border: 1px solid var(--kj-border);
    border-radius: 100px;
    font-size: 13px; font-family: var(--kj-font-sans);
    cursor: pointer; background: transparent;
    color: var(--kj-ink-mid); transition: all .15s;
}
.kj-skin-chip:hover  { border-color: var(--kj-plum); color: var(--kj-plum); }
.kj-skin-chip.active { background: var(--kj-plum); color: #fff; border-color: var(--kj-plum); }

/* ── Персонализирана бележка за тип кожа в резултатите ── */
.kj-skin-note {
    font-size: 12px; color: var(--kj-caution);
    font-style: italic; margin-top: 4px;
    padding: 3px 0;
}

/* ── Function bars (разбивка по функция) ── */
.kj-func-bars { margin: 16px 0; }
.kj-func-bar {
    display: flex; align-items: center;
    gap: 10px; padding: 4px 0; font-size: 13px;
}
.kj-func-bar__name {
    width: 110px; flex-shrink: 0;
    font-family: var(--kj-font-serif); font-style: italic;
    color: var(--kj-ink-mid); font-size: 14px;
}
.kj-func-bar__track {
    flex: 1; height: 3px;
    background: var(--kj-border); border-radius: 2px; overflow: hidden;
}
.kj-func-bar__fill {
    height: 100%; background: var(--kj-gold);
    border-radius: 2px; transition: width .4s ease;
}
.kj-func-bar__fill--warn { background: var(--kj-caution-border); }
.kj-func-bar__fill--bad  { background: var(--kj-avoid-border); }
.kj-func-bar__count {
    width: 20px; text-align: right;
    font-size: 12px; color: var(--kj-ink-soft);
    font-family: monospace;
}

/* ── Split-view анализатор (за template-analyzer.php) ── */
.kj-analyzer-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; max-width: var(--kj-w); margin: 0 auto;
}
.kj-split-sticky { position: sticky; top: 90px; }

@media (max-width: 860px) {
    .kj-analyzer-split { grid-template-columns: 1fr !important; }
    .kj-split-sticky   { position: static !important; }
}

/* ── Routine Builder v2 ── */
.kj-routine-v2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.kj-routine-col-am { border-top: 3px solid var(--kj-gold); }
.kj-routine-col-pm { border-top: 3px solid var(--kj-plum); }
.kj-routine-steps  { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.kj-routine-steps li { display: flex; gap: 8px; align-items: center; }
.kj-routine-steps li input { flex: 1; }
.kj-routine-steps li button { background: transparent; border: 1px solid var(--kj-border); padding: 5px 10px; border-radius: 6px; color: var(--kj-ink-soft); cursor: pointer; }
.kj-conflict-item {
    padding: 14px; margin-bottom: 10px;
    background: var(--kj-avoid-bg); border: 1px solid var(--kj-avoid-border);
    border-radius: 8px; font-size: 14px;
}
.kj-conflict-ok {
    padding: 14px;
    background: var(--kj-good-bg); border: 1px solid var(--kj-good-border);
    border-radius: 8px; font-size: 14px;
    color: var(--kj-good);
}
@media (max-width: 720px) { .kj-routine-v2 { grid-template-columns: 1fr; } }

/* ── Customizer пресети — inline CSS overrides ── */
/* Стойностите се инжектват от inc/customizer.php */
/* Токените в --k-* пространство се mapват към --kj-* */
/* За да не се счупи старата система: */
body.k-preset-sand    { --kj-plum:#b8654a; --kj-plum-dark:#8a4a35; --kj-gold:#d9a87a; }
body.k-preset-olive   { --kj-plum:#5a7048; --kj-plum-dark:#3e5232; --kj-gold:#b8923a; }
body.k-preset-rose    { --kj-plum:#b8657a; --kj-plum-dark:#8a4a5d; --kj-gold:#c89a4a; }
body.k-preset-aqua    { --kj-plum:#3a7a8e; --kj-plum-dark:#235a6e; --kj-gold:#c89a3a; }
body.k-preset-paper   { --kj-plum:#0a0a0a; --kj-plum-dark:#3a3a3a; --kj-gold:#0a0a0a; }
/* midnight остава тъмна — по подразбиране GeneratePress + тъмно */
body.k-preset-midnight {
    background: #0f1419; color: #f5ede0;
    --kj-plum:#c5a572; --kj-plum-dark:#e0c08a;
    --kj-surface: #1a2028; --kj-border: #2a3038;
    --kj-ink: #f5ede0; --kj-ink-mid: #c5bdb0;
}

/* ── Нов README badge (version indicator) ── */
.kj-version-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 100px;
    background: var(--kj-surface-2); border: 1px solid var(--kj-border);
    font-size: 11px; color: var(--kj-ink-soft); font-family: monospace;
}

/* ══════════════════════════════════════════════════════════════
   KOJATA v2 — STANDALONE HEADER / NAV / FOOTER СТИЛОВЕ
   Нужни за header.php и footer.php (не зависят от GeneratePress)
══════════════════════════════════════════════════════════════ */

/* Layout container */
.kj-container {
    max-width: var(--kj-w);
    margin: 0 auto;
    padding: 0 24px;
}
.kj-container-narrow {
    max-width: var(--kj-w-measure);
    margin: 0 auto;
    padding: 0 24px;
}

/* Skip link a11y */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--kj-ink); color: var(--kj-white);
    padding: 10px 20px; z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px; overflow: hidden;
}

/* Header */
/* ── Header — два режима ── */

/* СВЕТЪЛ HEADER (default: За нас, Методология, Анализатор, Рутина и т.н.) */
/* == KJ-CRITICAL-HEADER:START == (зоната се инлайнва в critical CSS — виж inc/critical-css.php) */
.kj-header {
    position: sticky; top: 0; z-index: 50;
    background: #f5ede0;
    border-bottom: 1px solid rgba(107,45,94,.12);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Nav линкове — тъмни за светъл header */
.kj-header .kj-nav a          { color: rgba(61,22,55,.6)  !important; }
.kj-header .kj-nav a:hover    { color: var(--kj-plum)     !important; }
.kj-header .kj-nav .current-menu-item > a { color: var(--kj-plum) !important; }
/* Search за светъл header */
.kj-header .kj-search {
    background: rgba(107,45,94,.07);
    border-color: rgba(107,45,94,.18);
}
.kj-header .kj-search input   { color: var(--kj-ink) !important; }
.kj-header .kj-search input::placeholder { color: rgba(61,22,55,.4) !important; }
.kj-header .kj-search button  { color: rgba(61,22,55,.45); }
/* Nav toggle за светъл header */
.kj-header .kj-nav-toggle {
    background: rgba(107,45,94,.08) !important;
    border-color: rgba(107,45,94,.2) !important;
    color: var(--kj-plum);
}

/* ТЪМЕН HEADER — само на страници с тъмен hero */
.has-dark-hero .kj-header {
    background: rgba(13,6,16,.96);
    border-bottom-color: rgba(201,149,106,.15);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.has-dark-hero .kj-header .kj-nav a       { color: rgba(255,255,255,.55) !important; }
.has-dark-hero .kj-header .kj-nav a:hover { color: var(--kj-gold) !important; }
.has-dark-hero .kj-header .kj-nav .current-menu-item > a { color: var(--kj-gold) !important; }
.has-dark-hero .kj-header .kj-search {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}
.has-dark-hero .kj-header .kj-search input { color: #fff !important; }
.has-dark-hero .kj-header .kj-search input::placeholder { color: rgba(255,255,255,.35) !important; }
.has-dark-hero .kj-header .kj-search button { color: rgba(255,255,255,.4); }
.has-dark-hero .kj-header .kj-nav-toggle {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #fff;
}
.kj-header__inner {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 0; gap: 20px;
}
.kj-header__actions { display: flex; gap: 10px; align-items: center; }

/* Logo */
.kj-logo {
    display: flex; align-items: center;
    gap: 10px; text-decoration: none !important;
    flex-shrink: 0;
}
.kj-logo__mark {
    width: 32px; height: 32px;
    flex-shrink: 0; color: var(--kj-gold);
}
.kj-logo__text {
    display: flex; flex-direction: column;
    line-height: 1; gap: 3px;
}
.kj-logo__name {
    font-family: var(--kj-font-serif);
    font-size: 18px; font-weight: 700;
    font-style: italic; letter-spacing: -.02em;
    color: var(--kj-white) !important;
    line-height: 1;
}
.kj-logo__tag {
    font-family: var(--kj-font-sans);
    font-size: 7px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--kj-gold);
    font-weight: 600; line-height: 1;
}
.kj-footer .kj-logo__name { color: var(--kj-white) !important; }

/* Nav */
.kj-nav {
    display: flex; gap: 22px; align-items: center;
}
.kj-nav-list {
    display: flex; gap: 22px; align-items: center;
    list-style: none; margin: 0; padding: 0;
}
.kj-nav-list li { list-style: none; margin: 0; padding: 0; }
.kj-nav a {
    color: rgba(255,255,255,.55) !important;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none !important;
    transition: color .15s;
}
.kj-nav a:hover,
.kj-nav .current-menu-item > a { color: var(--kj-gold) !important; }

/* Search */
.kj-search {
    position: relative; display: flex; align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--kj-r-sm);
    padding: 6px 10px; min-width: 200px;
}
.kj-search input {
    flex: 1; border: 0 !important; background: transparent !important;
    outline: none !important; font: inherit;
    color: var(--kj-white) !important; font-size: 13px;
    box-shadow: none !important;
}
.kj-search input::placeholder { color: rgba(255,255,255,.35) !important; }
.kj-search button {
    background: transparent !important; border: 0 !important;
    color: rgba(255,255,255,.4); padding: 0 4px; cursor: pointer;
}

/* Мобилната търсачка в панела — невидима по подразбиране,
   показва се само в отвореното мобилно меню (media блока долу). */
.kj-search--mobile { display: none; }

/* Mobile nav toggle */
.kj-nav-toggle {
    display: none;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    padding: 8px 12px; border-radius: var(--kj-r-sm);
    cursor: pointer;
}
@media (max-width: 900px) {
    .kj-nav, .kj-search { display: none; }
    .kj-nav-toggle { display: inline-flex; }

    /* Светъл header — отворено меню */
    .kj-header.is-open .kj-nav {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #f5ede0;
        border-bottom: 1px solid rgba(107,45,94,.15);
        padding: 16px 24px 20px; z-index: 100;
        box-shadow: 0 8px 24px rgba(107,45,94,.12);
    }
    /* Мобилната търсачка живее в панела (десктопната е в actions
       и на ≤900px е скрита — търсенето беше недостъпно на телефон). */
    .kj-header.is-open .kj-nav .kj-search--mobile {
        display: flex;
        margin: 0 0 12px;
    }
    /* Вертикалният списък — липсващото парче, което чупеше менюто:
       панелът ставаше column, но ul-ът си оставаше хоризонтален
       flex ред (gap:22px) и линковете се пренасяха хаотично.
       Селекторът е .kj-nav ul, за да покрие и fallback менюто без клас. */
    .kj-header.is-open .kj-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin: 0; padding: 0;
        list-style: none;
    }
    .kj-header.is-open .kj-nav li { margin: 0; padding: 0; list-style: none; }
    .kj-header.is-open .kj-nav a {
        display: block;
        padding: 12px 2px;
        font-size: 13px;
        border-bottom: 1px solid rgba(107,45,94,.08);
    }
    .kj-header.is-open .kj-nav li:last-child > a { border-bottom: 0; }

    /* Тъмен header — отворено меню */
    .has-dark-hero .kj-header.is-open .kj-nav {
        background: #160c14;
        border-bottom-color: rgba(201,149,106,.15);
        box-shadow: 0 8px 24px rgba(0,0,0,.4);
    }
    .has-dark-hero .kj-header.is-open .kj-nav a { border-bottom-color: rgba(255,255,255,.08); }
}

/* == KJ-CRITICAL-HEADER:END == */
/* Main */
.kj-main { display: block; }

/* kj-btn за footer — вече дефиниран в стария style.css като .kj-fp-btn
   но footer.php ползва kj-btn. Алиасираме. */
.kj-btn {
    display: inline-flex; align-items: center;
    justify-content: center; gap: 8px;
    padding: 10px 20px;
    font-family: var(--kj-font-sans); font-size: 13px;
    font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; border-radius: 999px;
    cursor: pointer; transition: all .18s ease;
    text-decoration: none !important; border: none;
}
.kj-btn--primary {
    background: linear-gradient(135deg, var(--kj-gold-light), var(--kj-gold));
    color: #1a0615 !important;
}
.kj-btn--primary:hover { opacity: .9; transform: translateY(-1px); }
.kj-btn--ghost {
    background: rgba(255,255,255,.06);
    color: var(--kj-white) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
}
.kj-btn--ghost:hover { background: rgba(255,255,255,.1); }
.kj-btn--dark {
    background: var(--kj-ink);
    color: var(--kj-white) !important;
}

/* Footer */
.kj-footer {
    background: var(--kj-dark-bg);
    color: rgba(255,255,255,.55);
    padding: 56px 0 28px;
    margin-top: 64px;
}
.kj-footer h4 {
    color: var(--kj-white);
    font-family: var(--kj-font-sans);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 14px;
}
.kj-footer a { color: rgba(255,255,255,.5) !important; }
.kj-footer a:hover { color: var(--kj-gold) !important; }
.kj-footer__cols {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 48px;
}
.kj-footer__bottom {
    margin-top: 48px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex; justify-content: space-between;
    font-size: 12px; color: rgba(255,255,255,.3);
}
@media (max-width: 720px) {
    .kj-footer__cols { grid-template-columns: 1fr 1fr; }
    .kj-footer__bottom { flex-direction: column; gap: 8px; }
}

/* Mobile responsive */
@media (max-width: 600px) {
    .kj-container { padding: 0 16px; }
}

/* ── Rating badge (замества числов индекс wheel) ── */
.kjpd-rating-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}
.kjpd-rating-badge::before { content: '●'; font-size: 8px; }
.kjpd-rating-badge--good    { background: var(--kj-good-bg);    color: var(--kj-good);    border: 1px solid var(--kj-good-border); }
.kjpd-rating-badge--caution { background: var(--kj-caution-bg); color: var(--kj-caution); border: 1px solid var(--kj-caution-border); }
.kjpd-rating-badge--avoid   { background: var(--kj-avoid-bg);   color: var(--kj-avoid);   border: 1px solid var(--kj-avoid-border); }
.kjpd-rating-badge--neutral { background: var(--kj-neutral-bg); color: var(--kj-neutral); border: 1px solid var(--kj-border); }

/* ── Archive rating badge (kjp-) ── */
.kjp-rating-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; }
.kjp-rating-badge--good    { background:var(--kj-good-bg);   color:var(--kj-good);    border:1px solid var(--kj-good-border); }
.kjp-rating-badge--caution { background:var(--kj-caution-bg);color:var(--kj-caution); border:1px solid var(--kj-caution-border); }
.kjp-rating-badge--avoid   { background:var(--kj-avoid-bg);  color:var(--kj-avoid);   border:1px solid var(--kj-avoid-border); }

/* ── Cross-linking rating badge (kj-cl-) ── */
.kj-cl-rating-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 99px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; margin-top: 4px;
}
.kj-cl-rating-badge--good    { background: var(--kj-good-bg);    color: var(--kj-good);    border: 1px solid var(--kj-good-border); }
.kj-cl-rating-badge--caution { background: var(--kj-caution-bg); color: var(--kj-caution); border: 1px solid var(--kj-caution-border); }
.kj-cl-rating-badge--avoid   { background: var(--kj-avoid-bg);   color: var(--kj-avoid);   border: 1px solid var(--kj-avoid-border); }


/* ── ДОСТЪПНОСТ: уважавай „намалено движение" (WCAG 2.3.3) ───────
   Темата ползва ~46 transition/transform + scroll-behavior:smooth.
   За хора с вестибуларни нарушения плавният скрол и анимациите
   причиняват прилошаване. Този блок ги неутрализира само за тях —
   потребители без предпочитанието не усещат разлика. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
}