/*
Theme Name: Nutriflow
Theme URI: https://nutriflow.local
Author: Nutriflow
Description: Платформа по питанию и wellbeing Nutriflow. ИИ-подбор проекта, каталог проектов, события, статьи. Дизайн: botanical-compendium (warm bone / clinical-green / clay, гравюрные обложки). RU + EN.
Version: 1.7.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: nutriflow
*/

/* ============================================================
   DESIGN TOKENS  (source: Glinkin International handoff v2)
   ============================================================ */
:root {
  /* surface */
  --nf-paper:      #EFE7D3;   /* page bg (warm bone) */
  --nf-paper-card: #F5EFDE;   /* card / panel bg */
  --nf-paper-soft: #F3E7DA;   /* "who it's not for" panel */
  --nf-paper-input:#FBF7EA;   /* input field bg */
  --nf-ink:        #26332B;   /* primary text */
  --nf-ink-dark:   #1E2A24;   /* footer / darkest tier / bundle */

  /* brand */
  --nf-green:      #0E4A3C;   /* clinical green (authority) */
  --nf-clay:       #B4552F;   /* accent / CTA / hover */
  --nf-gold:       #C79A5E;   /* gold accent on dark bands */
  --nf-paper-lt:   #F1EAD6;   /* light text/button-label on dark */

  /* hairlines (warm brown family — signature) */
  --nf-hair:       #6B5A3E;   /* primary border on cards/sections */
  --nf-hair-2:     #C9BC98;   /* light dividers on light bg */
  --nf-hair-3:     #D2C6A6;   /* card inner divider */
  --nf-hair-4:     #C4B68E;   /* input / chip border */
  --nf-hair-dark:  #3B4A40;   /* dividers on green/dark bands */

  /* text greys */
  --nf-body:       #57615A;   /* paragraph on light */
  --nf-body-2:     #4A5249;
  --nf-body-3:     #3C463F;
  --nf-meta:       #6B5A3E;   /* meta / labels */
  --nf-meta-2:     #9A8C6C;
  --nf-meta-3:     #7A6647;   /* plate label */
  --nf-muted-green:#A9C8BB;   /* labels on dark */

  /* program cover "plate" parchment */
  --nf-plate-1:    #F4EFE1;
  --nf-plate-2:    #E4D9BF;
  --nf-badge:      #2B3A32;   /* dark zone chip on cover */

  /* parameterized */
  --nf-primary: var(--nf-green);
  --nf-accent:  var(--nf-clay);

  /* type */
  --nf-serif: 'Newsreader', Georgia, serif;
  --nf-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --nf-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* radius */
  --nf-r-card: 20px;
  --nf-r-input: 14px;
  --nf-r-pill: 999px;

  /* layout */
  --nf-max: 1280px;
  --nf-max-narrow: 1080px;
  --nf-max-tight: 900px;
  --nf-pad-x: clamp(20px, 4vw, 48px);
  --nf-sec-y: clamp(44px, 6vw, 88px);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--nf-paper);
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
::selection { background: var(--nf-green); color: var(--nf-paper-lt); }
input, button, textarea, select { font-family: inherit; }
a { color: var(--nf-green); text-decoration: none; }
a:hover { color: var(--nf-clay); }
img { max-width: 100%; display: block; }
summary::-webkit-details-marker { display: none; }

/* keyframes */
@keyframes nf-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes nf-pulseDot { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ============================================================
   PRIMITIVES / UTILITIES
   ============================================================ */
.nf-wrap { max-width: var(--nf-max); margin: 0 auto; padding-left: var(--nf-pad-x); padding-right: var(--nf-pad-x); }
.nf-wrap--narrow { max-width: var(--nf-max-narrow); }
.nf-wrap--tight { max-width: var(--nf-max-tight); }
.nf-section { padding-top: var(--nf-sec-y); padding-bottom: var(--nf-sec-y); }

/* eyebrows: sans uppercase (mono clay) OR serif italic */
.nf-eyebrow { font-family: var(--nf-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--nf-clay); }
.nf-eyebrow--muted { color: var(--nf-meta); }
.nf-eyebrow--gold { color: var(--nf-gold); }
.nf-eyebrow-it { font-family: var(--nf-serif); font-style: italic; font-size: 15px; color: var(--nf-clay); }

/* headings */
.nf-h1 { font-family: var(--nf-serif); font-weight: 400; font-size: clamp(34px,6vw,72px); line-height: 1.04; letter-spacing: -0.01em; }
.nf-h2 { font-family: var(--nf-serif); font-weight: 400; font-size: clamp(28px,3.6vw,46px); letter-spacing: -0.01em; line-height: 1.08; }
.nf-h3 { font-family: var(--nf-serif); font-weight: 500; font-size: 23px; letter-spacing: -0.01em; }
/* solid display headings (signature) */
.nf-hl  { color: var(--nf-green); -webkit-text-stroke: 0; }
.nf-hlx { color: var(--nf-paper); -webkit-text-stroke: 0; }
.nf-lead { font-family: var(--nf-serif); font-weight: 300; font-size: clamp(17px,1.7vw,21px); line-height: 1.6; color: var(--nf-body-2); }
.nf-body { font-family: var(--nf-serif); font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--nf-body); }

/* fleuron divider (❦ between hairlines) */
.nf-fleuron { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--nf-clay); }
.nf-fleuron span.r { height: 1px; width: clamp(40px,8vw,90px); background: currentColor; opacity: .5; }
.nf-fleuron--sm span.r { width: 56px; }

/* buttons — pill, hover→clay */
.nf-btn { display: inline-block; border-radius: var(--nf-r-pill); padding: 12px 24px; font-family: var(--nf-sans); font-size: 13px; letter-spacing: 0.02em; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; border: 1px solid transparent; }
.nf-btn--primary { background: var(--nf-green); color: var(--nf-paper-lt); border-color: var(--nf-green); }
.nf-btn--accent  { background: var(--nf-clay); color: var(--nf-paper-lt); border-color: var(--nf-clay); }
.nf-btn--paper   { background: var(--nf-paper); color: var(--nf-green); border-color: var(--nf-paper); }
.nf-btn--outline { background: transparent; color: var(--nf-ink); border-color: var(--nf-ink); }
.nf-btn--outline-green { background: transparent; color: var(--nf-ink); border-color: var(--nf-green); }
.nf-btn:hover { background: var(--nf-clay); color: var(--nf-paper-lt); border-color: var(--nf-clay); }
.nf-btn--paper:hover { background: var(--nf-clay); color: var(--nf-paper-lt); border-color: var(--nf-clay); }

/* text link with underline */
.nf-link { cursor: pointer; font-family: var(--nf-sans); font-size: 13px; letter-spacing: 0.04em; font-weight: 600; color: var(--nf-green); border-bottom: 1px solid var(--nf-green); padding-bottom: 3px; text-decoration: none; }
.nf-link:hover { color: var(--nf-clay); border-color: var(--nf-clay); }
.nf-viewlink { font-family: var(--nf-sans); font-size: 12px; letter-spacing: 0.04em; font-weight: 600; color: var(--nf-clay); }

/* filter / symptom pills */
.nf-pill { border-radius: var(--nf-r-pill); padding: 8px 16px; font-family: var(--nf-sans); font-size: 13px; cursor: pointer; border: 1px solid var(--nf-hair-4); background: transparent; color: var(--nf-ink); transition: background .15s, color .15s, border-color .15s; text-decoration: none; display: inline-block; }
.nf-pill:hover { background: var(--nf-clay); color: var(--nf-paper-lt); border-color: var(--nf-clay); }
.nf-pill.is-active { background: var(--nf-green); color: var(--nf-paper-lt); border-color: var(--nf-green); }

/* tag chip (bordered, on catalog cards) */
.nf-tag { font-family: var(--nf-sans); font-size: 11px; color: var(--nf-green); border: 1px solid #CFC3A2; padding: 3px 8px; display: inline-block; }

/* card lift */
.nf-lpc { transition: background .15s, border-color .15s; }
.nf-lpc:hover { background: #F7F0DE; border-color: var(--nf-clay); }

/* image slot fallback placeholder */
.nf-slot { display: flex; align-items: center; justify-content: center; color: var(--nf-meta-2); font-family: var(--nf-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 12px; }

.nf-hidden { display: none !important; }

/* ============================================================
   HEADER
   ============================================================ */
.nf-header { position: sticky; top: 0; z-index: 60; background: rgba(239,231,211,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nf-hair); }
.nf-header__inner { max-width: var(--nf-max); margin: 0 auto; padding: 0 var(--nf-pad-x); height: 70px; display: flex; align-items: center; gap: 28px; }
.nf-wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.nf-wordmark__name { font-family: var(--nf-serif); font-size: 26px; font-weight: 500; letter-spacing: 0.01em; color: var(--nf-ink); }
.nf-wordmark__tag { font-family: var(--nf-serif); font-style: italic; font-size: 15px; color: var(--nf-meta); align-self: center; }
.nf-nav { display: flex; align-items: center; gap: clamp(10px,1.6vw,26px); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.nf-nav__link { font-family: var(--nf-sans); font-size: 14px; font-weight: 500; color: var(--nf-ink); text-decoration: none; white-space: nowrap; padding: 4px 2px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nf-nav__link:hover { color: var(--nf-clay); border-bottom-color: var(--nf-clay); }
.nf-nav__link.is-active { color: var(--nf-green); border-bottom-color: var(--nf-green); }
.nf-langtoggle { margin-left: 4px; font-family: var(--nf-sans); font-size: 12px; letter-spacing: 0.06em; font-weight: 600; color: var(--nf-ink); background: transparent; border: 1px solid var(--nf-hair); padding: 6px 11px; cursor: pointer; }
.nf-langtoggle:hover { color: var(--nf-clay); border-color: var(--nf-clay); }

/* ============================================================
   FOOTER
   ============================================================ */
.nf-footer { background: var(--nf-ink-dark); color: #C5CCC6; border-top: 1px solid var(--nf-hair); }
.nf-footer__top { max-width: var(--nf-max); margin: 0 auto; padding: clamp(44px,6vw,72px) var(--nf-pad-x) 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.nf-footer__name { font-family: var(--nf-serif); font-size: 25px; color: var(--nf-paper); }
.nf-footer__it { font-family: var(--nf-serif); font-style: italic; font-size: 15px; color: var(--nf-muted-green); }
.nf-footer__tag { font-family: var(--nf-serif); font-weight: 300; font-size: 15px; line-height: 1.65; margin-top: 14px; max-width: 34ch; color: #8B958E; }
.nf-footer__coltitle { font-family: var(--nf-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--nf-muted-green); }
.nf-footer__links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.nf-footer__links a { font-family: var(--nf-sans); font-size: 14px; color: #C5CCC6; text-decoration: none; }
.nf-footer__links a:hover { color: var(--nf-clay); }
.nf-footer__bottom { max-width: var(--nf-max); margin: 0 auto; padding: 24px var(--nf-pad-x); border-top: 1px solid var(--nf-hair-dark); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--nf-sans); font-size: 12px; color: #6E7872; }
.nf-footer__bottom .it { font-family: var(--nf-serif); font-style: italic; }
.nf-footer__company { font-family: var(--nf-mono, var(--nf-sans)); letter-spacing: .02em; color: #7E8882; }

@media (max-width: 860px) { .nf-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nf-footer__top { grid-template-columns: 1fr; } }

/* language visibility (JS toggles [data-nf-lang] on <html>) */
html[data-nf-lang="ru"] .nf-en { display: none; }
html[data-nf-lang="en"] .nf-ru { display: none; }