/*
Theme Name: Flekk — Зеркало Золото
Theme URI: https://flekk.ru/
Description: Шаблон лендинга для салона красоты, барбершопа и студии маникюра. Тёмная база, антиква Cormorant Garamond в заголовках, золото акцентом, светлые полосы под цифрами, работами и вопросами. Дочерняя тема Hello Elementor.
Author: Flekk
Template: hello-elementor
Version: 1.0.0
Text Domain: flekk-zerkalo
*/

/* ── Токены ─────────────────────────────────────────────── */
:root{
  --flk-bg:#1C1614;
  --flk-ink:#F6F0EA;
  --flk-dim:rgba(246,240,234,.68);
  --flk-dim2:rgba(246,240,234,.52);
  --flk-gold:#D8A86B;
  --flk-gold-dk:#9C7248;
  --flk-light:#F6F0EA;
  --flk-light-ink:#1C1614;
  --flk-light-dim:#7A6E66;
  --flk-ln:rgba(246,240,234,.16);
  --flk-ln-light:#E2D6CE;

  --flk-band:1720px;
  --flk-pad:clamp(20px,4.4vw,100px);
  --flk-sans:"Inter",system-ui,-apple-system,sans-serif;
  --flk-disp:"Cormorant Garamond",Georgia,serif;

  --flk-h1:clamp(34px,3.9vw,74px);
  --flk-h2:clamp(32px,3.4vw,64px);
  --flk-h3:clamp(24px,1.9vw,38px);
  --flk-body:clamp(16px,1vw,19px);
  --flk-small:clamp(16px,.85vw,17px);
  --flk-sec:clamp(52px,6.2vw,120px);
}

/* ── Основа ─────────────────────────────────────────────── */
body{
  background:var(--flk-bg);
  color:var(--flk-ink);
  font-family:var(--flk-sans);
  font-size:var(--flk-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body h1,body h2,body h3,body h4{
  font-family:var(--flk-disp);
  font-weight:500;
  letter-spacing:-.01em;
  margin:0;
  color:inherit;
}
body h1{font-size:var(--flk-h1);line-height:1.08}
body h2{font-size:var(--flk-h2);line-height:1.06;text-wrap:balance}
body h3{font-size:var(--flk-h3);line-height:1.2}
body p{margin:0}
body a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
body em{font-style:italic;color:var(--flk-gold)}
body .flk-light em{color:var(--flk-gold-dk)}

/* Набор Elementor красит, кеглит и утолщает виджеты по-своему — забираем
   обратно. Размер НЕ трогаем: font-size:inherit схлопнет заголовки. */
body .elementor-widget-heading .elementor-heading-title{color:inherit;font-family:var(--flk-disp);font-weight:500}
body .elementor-widget-text-editor{color:inherit}
body .elementor-widget-text-editor p:first-child{margin-top:0}
body .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor-widget:not(:last-child){margin-bottom:0}
body .elementor-column > .elementor-widget-wrap{padding:0;align-items:stretch}
body .elementor-section[class*="flk-"] > .elementor-container > .elementor-column{width:100%}

/* Полоса контента: в режиме full_width Elementor свой content_width не применяет */
body .elementor-section > .elementor-container{
  max-width:var(--flk-band);
  margin-inline:auto;
  padding-inline:var(--flk-pad);
}

/* ── Шапка ──────────────────────────────────────────────── */
.flk-header{background:var(--flk-bg);position:relative;z-index:5}
.flk-band{
  max-width:var(--flk-band);
  margin-inline:auto;
  padding:20px var(--flk-pad);
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,56px);
}
.flk-header .flk-mark{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--flk-disp);
  font-weight:600;
  font-size:clamp(20px,1.7vw,32px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--flk-ink);
}
.flk-nav ul{display:flex;gap:clamp(16px,1.9vw,36px);list-style:none;margin:0;padding:0}
.flk-nav a{color:var(--flk-dim);font-size:var(--flk-small);display:inline-flex;align-items:center;min-height:44px}
.flk-nav a:hover{color:var(--flk-ink)}
.flk-header .flk-tel{
  margin-left:auto;
  font-weight:600;
  font-size:var(--flk-small);
  color:var(--flk-ink);
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
/* Шапка ложится поверх первого экрана: полотно уходит под неё.
   🔴 Не отрицательным margin с фиксированной высотой — на телефоне полоса
   шапки выше этого числа, и пункты меню уезжают ЗА верх экрана. */
body.home .flk-header{position:absolute;top:0;left:0;right:0;background:transparent}
.flk-burger{position:relative}
.flk-burger > summary{display:none}

/* ── Кнопки ─────────────────────────────────────────────── */
body .elementor-widget-button .elementor-button{
  background-color:var(--flk-gold);
  color:var(--flk-light-ink);
  border-radius:0;
  font-family:var(--flk-sans);
  font-weight:700;
  font-size:var(--flk-small);
  padding:21px 44px;
  min-height:44px;
  transition:background-color .15s;
}
body .elementor-widget-button .elementor-button:hover{background-color:#C4925A}
body .flk-btn-line .elementor-button{background-color:transparent;color:var(--flk-ink);box-shadow:inset 0 0 0 1px rgba(246,240,234,.35)}
body .flk-btn-line .elementor-button:hover{background-color:rgba(246,240,234,.08)}
body .flk-btn-wide .elementor-button{width:100%;justify-content:center;padding-inline:20px}

/* ── Секции ─────────────────────────────────────────────── */
body .flk-sec > .elementor-container{padding-block:var(--flk-sec)}
body .flk-light{background:var(--flk-light);color:var(--flk-light-ink)}
body .flk-light .flk-lede,body .flk-light .flk-note,body .flk-light .flk-fl,body .flk-light .flk-desc{color:var(--flk-light-dim)}
body .flk-lede{color:var(--flk-dim);max-width:46ch}
body .flk-note{color:var(--flk-dim2);font-size:var(--flk-small)}
body .flk-kicker{
  font-size:clamp(13px,.8vw,15px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--flk-gold);
  margin-bottom:clamp(12px,1.1vw,22px);
}
body .flk-light .flk-kicker{color:var(--flk-gold-dk)}

/* Шапка блока: заголовок слева, пояснение справа */
body .flk-shead > .elementor-container{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,4vw,80px);
  align-items:end;
  padding-bottom:clamp(28px,3vw,56px);
}
body .flk-shead-solo > .elementor-container{grid-template-columns:minmax(0,1fr)}

/* Фотография блока */
.flk-photo{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(155deg,#C9AE9C 0%,#9C7D6C 52%,#5E4438 100%);
}
.flk-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── 1. Первый экран ────────────────────────────────────── */
body .flk-hero{position:relative;overflow:hidden;background:var(--flk-bg)}
body .flk-hero > .elementor-container{
  padding-block:clamp(150px,13vw,250px) clamp(56px,6vw,120px);
  min-height:clamp(560px,52vw,1000px);
  display:flex;
  align-items:flex-start;
}
.flk-hero-back{position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,#C9AE9C 0%,#9C7D6C 52%,#5E4438 100%)}
.flk-hero-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flk-hero-back::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(28,22,20,.92) 0%,rgba(28,22,20,.58) 46%,rgba(28,22,20,.22) 100%);
}
/* Колонка полотна выведена из потока: иначе она заняла бы ячейку сетки,
   а слой внутри неё обрезался бы по её краям. */
body .flk-bg-col{position:absolute;inset:0;padding:0;width:auto;z-index:0}
/* 🔴 Elementor держит .elementor-container позиционированным — слой полотна
   считал бы края от полосы контента и не доставал до краёв экрана. */
body .flk-hero > .elementor-container,
body .flk-cta > .elementor-container{position:static}
body .flk-bg-col .elementor-widget-wrap{display:block}
body .flk-hero .elementor-widget-shortcode{position:static}
body .flk-hero-card{
  position:relative;
  z-index:2;
  max-width:800px;
  background:rgba(28,22,20,.82);
  padding:clamp(28px,3vw,56px);
}
body .flk-hero-card h1{color:#fff}
body .flk-hero-card .flk-sub{color:var(--flk-dim);margin-top:clamp(18px,1.7vw,32px);max-width:44ch}
body .flk-hero-card .elementor-widget-button{margin-top:clamp(22px,2.1vw,40px)}
body .flk-hero-card .flk-note{margin-top:clamp(12px,1vw,18px)}

/* ── 2. Цифры ───────────────────────────────────────────── */
body .flk-nums > .elementor-container{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,4vw,120px);
  padding-block:clamp(44px,5vw,96px);
}
body .flk-fact .flk-fn{
  display:block;
  font-family:var(--flk-disp);
  font-weight:500;
  font-size:clamp(40px,4vw,76px);
  line-height:1;
  color:var(--flk-light-ink);
}
body .flk-fact .flk-fl{display:block;margin-top:clamp(6px,.7vw,14px);font-size:var(--flk-small)}

/* ── 3. Прайс ───────────────────────────────────────────── */
/* 🔴 Трек суммы фиксированный: у каждой строки свой грид, и трек auto
   считался бы по её содержимому — «1 800 ₽» и «от 9 000 ₽» разъехались бы. */
body .flk-prow > .elementor-container{
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(0,1fr) 220px;
  gap:clamp(16px,2.2vw,40px);
  align-items:baseline;
  padding-block:clamp(20px,1.9vw,34px);
  border-top:1px solid var(--flk-ln);
}
body .flk-prow-last > .elementor-container{border-bottom:1px solid var(--flk-ln)}
body .flk-pname{font-family:var(--flk-disp);font-weight:500;font-size:var(--flk-h3);line-height:1.15}
body .flk-desc{color:var(--flk-dim);font-size:var(--flk-small);line-height:1.55}
body .flk-price{
  font-family:var(--flk-disp);
  font-weight:500;
  font-size:var(--flk-h3);
  color:var(--flk-gold);
  white-space:nowrap;
  text-align:right;
}
/* Кнопка под прайсом: снизу — полный шаг секции, иначе она прилипает
   к светлой полосе работ и читается как её часть. */
body .flk-price-tail > .elementor-container{padding-block:clamp(32px,3vw,56px) var(--flk-sec)}

/* ── 4. Работы ──────────────────────────────────────────── */
body .flk-cases > .elementor-container{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.4vw,40px);
  padding-bottom:var(--flk-sec);
}
body .flk-case h3{margin-top:clamp(14px,1.4vw,26px)}
body .flk-case .flk-desc{margin-top:clamp(8px,.7vw,12px)}

/* ── 5. Отзыв ───────────────────────────────────────────── */
body .flk-quote > .elementor-container{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(0,1fr);
  gap:0;
  max-width:none;
  padding-inline:0;
  align-items:stretch;
}
body .flk-quote .flk-photo{aspect-ratio:auto;height:100%;min-height:clamp(280px,34vw,640px)}
body .flk-quote-say{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,5vw,120px) var(--flk-pad) clamp(40px,5vw,120px) clamp(24px,3.4vw,110px);
}
body .flk-quote-text{
  font-family:var(--flk-disp);
  font-weight:500;
  font-size:clamp(24px,2.4vw,46px);
  line-height:1.3;
}
body .flk-quote-who{margin-top:clamp(16px,1.7vw,34px);color:var(--flk-dim);font-size:var(--flk-small)}

/* ── 6. Вопросы ─────────────────────────────────────────── */
body .flk-faq > .elementor-container{padding-bottom:var(--flk-sec)}
body .flk-q{border-top:1px solid var(--flk-ln-light);padding-top:clamp(18px,1.7vw,32px);margin-top:clamp(18px,1.7vw,32px)}
body .flk-q:first-child{margin-top:0}
body .flk-a{color:var(--flk-light-dim);margin-top:clamp(8px,.7vw,12px)}
body .flk-a p{max-width:64ch}
body .flk-faq-end{border-bottom:1px solid var(--flk-ln-light);padding-bottom:clamp(18px,1.7vw,32px)}

/* ── 7. Призыв и форма ──────────────────────────────────── */
body .flk-cta{position:relative;overflow:hidden}
body .flk-cta > .elementor-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:clamp(28px,4vw,90px);
  align-items:start;
}
body .flk-cta > .elementor-container > .elementor-column:not(.flk-bg-col){position:relative;z-index:2}
body .flk-cta .flk-lede{margin-top:clamp(16px,1.4vw,26px)}
.flk-cta-back{position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,#C9AE9C 0%,#9C7D6C 52%,#5E4438 100%)}
.flk-cta-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flk-cta-back::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,22,20,.94) 0%,rgba(28,22,20,.78) 55%,rgba(28,22,20,.62) 100%)}
body .flk-cta .elementor-widget-shortcode{position:static}

/* Форма стоит на фотографии — ей нужна своя плита, иначе поля тонут в кадре */
body .flk-cta .flk-form-wrap{background:rgba(28,22,20,.8);padding:clamp(20px,2vw,36px)}

/* Форма */
.flk-form-wrap .flk-field{margin-bottom:12px}
.flk-form-wrap br{display:none}
.flk-form-wrap input[type=text],
.flk-form-wrap input[type=tel],
.flk-form-wrap input[type=email],
.flk-form-wrap textarea{
  width:100%;
  background:rgba(28,22,20,.55);
  border:1px solid rgba(246,240,234,.22);
  border-radius:0;
  color:var(--flk-ink);
  font-family:var(--flk-sans);
  font-size:var(--flk-small);
  padding:18px 20px;
  min-height:56px;
}
.flk-form-wrap textarea{min-height:120px;resize:vertical}
.flk-form-wrap ::placeholder{color:var(--flk-dim2)}
.flk-form-wrap input:focus,.flk-form-wrap textarea:focus{outline:none;border-color:var(--flk-gold)}
/* 🔴 CF7 заворачивает строку кнопки в свой <p> — ряд строим на нём. */
.flk-form-wrap .flk-form-foot > p{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0}
.flk-form-wrap input[type=submit]{
  background:var(--flk-gold);
  color:var(--flk-light-ink);
  border:0;
  border-radius:0;
  font-family:var(--flk-sans);
  font-weight:700;
  font-size:var(--flk-small);
  padding:21px 44px;
  min-height:56px;
  cursor:pointer;
}
.flk-form-wrap input[type=submit]:hover{background:#C4925A}
.flk-form-note{color:var(--flk-dim2);font-size:var(--flk-small);margin-top:14px}
.flk-form-wrap .wpcf7-not-valid-tip{color:var(--flk-gold);font-size:var(--flk-small);margin-top:6px}
.flk-form-wrap .wpcf7-response-output{
  border:1px solid rgba(246,240,234,.3);
  color:var(--flk-ink);
  font-size:var(--flk-small);
  margin:18px 0 0;
  padding:16px 18px;
}

/* ── 8. Контакты ────────────────────────────────────────── */
body .flk-contacts > .elementor-container{padding-bottom:var(--flk-sec)}
/* Ссылку красит ссылочный цвет набора (класс + тег) — вес поднимаем секцией */
body .flk-contacts .flk-cv{color:var(--flk-light-ink)}
.flk-cline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}
.flk-cline > div{border-top:1px solid var(--flk-ln-light);padding-top:clamp(16px,1.5vw,28px)}
.flk-cl{font-size:clamp(13px,.8vw,15px);letter-spacing:.12em;text-transform:uppercase;color:var(--flk-light-dim)}
.flk-cv{
  color:var(--flk-light-ink);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:clamp(4px,.5vw,12px);
  font-family:var(--flk-disp);
  font-weight:500;
  font-size:var(--flk-h3);
}

/* ── Подвал ─────────────────────────────────────────────── */
.flk-footer{background:var(--flk-bg);color:var(--flk-ink);border-top:1px solid var(--flk-ln)}
.flk-footer .flk-band{padding-block:clamp(28px,3vw,52px);flex-wrap:wrap;row-gap:14px}
.flk-footer .flk-mark{
  font-family:var(--flk-disp);
  font-weight:600;
  font-size:clamp(18px,1.4vw,26px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.flk-footer span{font-size:var(--flk-small);color:var(--flk-dim)}
/* Касание не меньше 44px: ссылки подвала лежат внутри строки текста */
.flk-footer span a{display:inline-flex;align-items:center;min-height:44px}
.flk-footer .flk-fend{margin-left:auto}
.flk-footer .flk-fend a{color:var(--flk-gold);display:inline-flex;align-items:center;min-height:44px}
.flk-footer a:hover{color:var(--flk-ink)}

/* ── Телефон ────────────────────────────────────────────── */
@media (max-width:1100px){
  body .flk-prow > .elementor-container{grid-template-columns:minmax(0,1fr) 160px;row-gap:8px}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(1){grid-column:1;grid-row:1}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(2){grid-column:1/-1;grid-row:2}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(3){grid-column:2;grid-row:1}
  body .flk-quote > .elementor-container{grid-template-columns:minmax(0,1fr)}
  body .flk-cta > .elementor-container{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .flk-burger > summary{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
    list-style:none;
    box-shadow:inset 0 0 0 1px rgba(246,240,234,.35);
    cursor:pointer;
  }
  .flk-burger > summary::-webkit-details-marker{display:none}
  .flk-burger > summary::after{
    content:"";
    width:18px;
    height:1px;
    background:var(--flk-ink);
    box-shadow:0 -6px 0 var(--flk-ink),0 6px 0 var(--flk-ink);
  }
  .flk-burger{margin-left:auto}
  .flk-burger[open] .flk-nav{
    position:absolute;
    right:0;
    top:52px;
    background:var(--flk-bg);
    box-shadow:0 0 0 1px var(--flk-ln);
    padding:8px 22px;
    z-index:9;
  }
  .flk-burger[open] .flk-nav ul{flex-direction:column;gap:0}
  .flk-header .flk-tel{display:none}

  body .flk-nums > .elementor-container,
  body .flk-cases > .elementor-container,
  .flk-cline{grid-template-columns:minmax(0,1fr)}
  /* 🔴 Ячейки сетки — КОЛОНКИ Elementor, а не виджеты внутри них: раскладку
     задаём колонкам, иначе название и описание лягут друг на друга. */
  body .flk-prow > .elementor-container{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(1){grid-column:1;grid-row:1}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(2){grid-column:1/-1;grid-row:2}
  body .flk-prow > .elementor-container > .elementor-column:nth-child(3){grid-column:2;grid-row:1}
  body .flk-shead > .elementor-container{grid-template-columns:minmax(0,1fr);row-gap:14px}
  body .flk-hero > .elementor-container{padding-block:clamp(120px,30vw,150px) 36px}
  body .flk-hero-card{background:none;padding:0}
  .flk-hero-back::after{background:linear-gradient(180deg,rgba(28,22,20,.86) 0%,rgba(28,22,20,.6) 40%,rgba(28,22,20,.94) 100%)}
  body .flk-quote-say{padding:36px var(--flk-pad) 44px}
  .flk-footer .flk-fend{margin-left:0}
  body .elementor-widget-button .elementor-button{width:100%;justify-content:center}
}