/* sax.css — calm "teaching" skin (replaces purple.css) */

/* ===== Base colors ===== */
:root{
  --bg: #ffffff;
  --bg-soft: #f6f6f6;
  --text: #1f1f1f;
  --muted: #555555;

  /* Accent: warm brass (sax vibe) */
  --accent: #b08d57;
  --accent-dark: #8f6f3f;

  --border: rgba(0,0,0,0.12);
}

/* ===== Typography ===== */
body {
  color: var(--text);
  background-color: var(--bg);
  font-family: "Manrope", "Raleway", sans-serif;
}

h1, h2, h3 {
  font-family: "Unbounded", "Manrope", "Raleway", sans-serif;
  letter-spacing: 1px;
}

/* ===== Links ===== */
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ===== Helpers that main.css expects ===== */
.color_element { color: var(--accent); }
.color_bg { background-color: var(--accent); }
.color_border { border-color: var(--accent); }

.bg_light { background-color: var(--bg-soft) !important; }
.bg_dark {
  background-color: #161616;
  color: #dddddd;
}

/* ===== Section subtitle line ===== */
.s_descr { letter-spacing: 3px; color: var(--muted); }
.s_descr::after { background-color: rgba(0,0,0,0.2); }
.bg_dark .s_descr::after { background-color: #dddddd; }

/* ===== Menu overlay ===== */
.top_mnu a { letter-spacing: 3px; }
.top_mnu a:hover { color: var(--accent); }

/* ===== Hero tweaks (remove "event poster" look) ===== */
.top_text p {
  color: #ffffff;
  letter-spacing: 3px;
}

.top_wrapper .top_text h1 {
  border: 0; /* main.css has a big white frame — remove it */
  background-color: rgba(0,0,0,0.25);
  padding: 12px 28px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.toggle_mnu { background-color: rgba(0,0,0,0.65); }

/* ===== About section ===== */
section h3 {
  letter-spacing: 2px;
  color: var(--muted);
}

/* ===== Resume titles ===== */
.resume_title {
  color: var(--text);
}

/* ===== Form / contact ===== */
.contacts_icon { color: var(--accent); }

form input:focus,
form textarea:focus {
  border: 1px solid var(--accent);
}

form input,
form textarea {
  letter-spacing: 1px;
  color: var(--text);
}

.main_form button,
form button {
  background-color: var(--accent);
  letter-spacing: 2px;
}

.main_form button:hover,
form button:hover {
  background-color: var(--accent-dark);
}

/* ===== Cookie banner button accent ===== */
#cookie-banner button {
  background-color: var(--accent);
}
#cookie-banner button:hover {
  background-color: var(--accent-dark);
}

/* ===== Footer links ===== */
.main_footer a { color: var(--accent); }
.main_footer a:hover { color: var(--accent-dark); }

/* ===== Compact + warm + minimal motion ===== */

/* Warm background instead of pure white */
:root{
  --bg: #fbf7f0;
  --bg-soft: #f5efe6;
  --text: #1f1f1f;
  --muted: #4e4e4e;
  --border: rgba(0,0,0,0.10);

  --accent: #b08d57;
  --accent-dark: #8f6f3f;
}

body{ background-color: var(--bg); }

/* Tighter sections */
section{
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}
.section_header{
  padding-bottom: 18px !important;
}

/* аккуратная линия-разделитель под заголовком */
.section_header{
  position: relative;
}
.section_header::after{
  content:"";
  display:block;
  width: 120px;
  height: 1px;
  background: rgba(0,0,0,0.18);
  margin: 18px auto 0;
}
/* Reduce the “shouty” look */
.top_text p{ letter-spacing: 2px; }
.top_wrapper .top_text h1{
  letter-spacing: 1px;
  background-color: rgba(0,0,0,0.18);
}



/* Softer form look */
form input,
form textarea{
  background: #fff;
  border: 1px solid var(--border);
}

/* ===== Typography polish (teacher vibe) ===== */

/* Use Manrope everywhere (soft + modern). Keep Unbounded only if you want later */
h1, h2, h3 {
  font-family: "Manrope", "Raleway", sans-serif !important;
  letter-spacing: 0.5px !important;
}

/* Make hero less "poster" */
.top_wrapper .top_text h1{
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 10px 22px !important;
}

/* Tighten section headings */
.section_header h2{
  text-transform: none !important;
  font-weight: 700 !important;
}

/* Make body text a bit denser */
p, li {
  font-size: 15px;
  line-height: 1.65;
}

/* Reduce "wide spacing" subtitles */
.s_descr {
  letter-spacing: 2px !important;
}

/* ===== Simple top menu (no overlay, no burger) ===== */
.top_mnu_simple{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* фиксируем высоту панели */
.top_mnu_simple ul{
  margin: 0;
  padding: 0 18px;
  height: 48px;

  display: flex;
  align-items: center;      /* вертикальный центр */
  justify-content: center;  /* горизонтальный центр */
  gap: 22px;                /* расстояние между пунктами */
}

.top_mnu_simple ul li{
  margin: 0;
  padding: 0;
  display: block;
}

/* Убираем “огромную кнопку” из main.css */
.top_mnu_simple ul li a{
  display: inline-block !important;
  padding: 4px 6px !important;  /* маленькая кликабельная зона вокруг текста */
  line-height: 1.1 !important;  /* чтобы не растягивалось вниз */
  color: var(--text) !important;

  text-transform: none !important;
  letter-spacing: 0.5px !important;
  font-weight: 600;
  font-size: 14px;
}

.top_mnu_simple ul li a:hover{
  color: var(--accent) !important;
}

/* Hide old overlay mechanics just in case */
.toggle_mnu{ display:none !important; }
.top_text{ opacity: 1 !important; }

/* ===== FIX: prevent .top_mnu overlay from covering the page ===== */
.top_mnu.top_mnu_simple{
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;

  background: rgba(251, 247, 240, 0.98) !important; /* почти непрозрачно */
  backdrop-filter: none !important;

  overflow: visible !important;
}

.top_mnu.top_mnu_simple ul{
  position: static !important;
  padding: 12px 18px !important;
}

.top_mnu.top_mnu_simple ul li{
  display: inline-block !important;
}

/* ===== Force simple menu to be visible (override old overlay/JS styles) ===== */
.top_mnu.top_mnu_simple{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.top_mnu.top_mnu_simple ul{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}



/* ===== Make menu text visible ===== */
.top_mnu.top_mnu_simple{
  background: rgba(245, 240, 230, 0.95) !important; /* светлый тёплый фон */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

.top_mnu.top_mnu_simple a{
  color: #1a1a1a !important;
  opacity: 1 !important;
  visibility: visible !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;

  text-indent: 0 !important;
  text-shadow: none !important;
}

.top_mnu.top_mnu_simple a:hover{
  color: #8c6b3f !important;
}

/* menu vertical alignment */
.top_mnu_simple ul li a{
  padding: 18px 14px;
  line-height: 1;
  display: inline-block;
}

/* top menu bar height */
.top_mnu_simple {
  padding-top: 4px;
  padding-bottom: 4px;
}

.top_mnu_simple ul li a {
  padding: 6px 12px;
}

.top_mnu_simple ul li {
  margin: 0 4px;
}

/* ===== FIX: menu overlays hero (no push down) ===== */
body{
  padding-top: 0 !important; /* убираем сдвиг страницы вниз */
}

/* делаем меню поверх фото */
.top_mnu.top_mnu_simple{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* компактнее высота */
.top_mnu.top_mnu_simple ul{
  padding: 8px 16px !important;
}

/* уменьшаем кликабельную зону */
.top_mnu.top_mnu_simple ul li a{
  padding: 6px 10px !important;
  line-height: 1.2 !important;
}

 /* FIX: убираем лишнюю высоту клика у пунктов меню */
.top_mnu.top_mnu_simple ul,
.top_mnu.top_mnu_simple ul li{
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.top_mnu.top_mnu_simple ul li{
  display: inline-block !important;
}

.top_mnu.top_mnu_simple ul li a{
  display: inline-block !important; /* кликабельная зона = размер текста + padding */
  padding: 6px 10px !important;
  line-height: 1.2 !important;
}

/* FIX: menu height + true vertical centering + normal click area */
.top_mnu.top_mnu_simple{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;

  height: auto !important;
  min-height: 0 !important;

  display: flex !important;
  align-items: center !important;

  padding: 10px 0 !important;       /* высота полоски */
}

.top_mnu.top_mnu_simple ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;              /* расстояние между пунктами */
  line-height: 1 !important;
}

.top_mnu.top_mnu_simple ul li{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.top_mnu.top_mnu_simple ul li a{
  display: flex !important;          /* центрирование текста внутри */
  align-items: center !important;

  padding: 6px 10px !important;      /* кликабельная зона — компактно */
  line-height: 1 !important;

  color: #1a1a1a !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/* === NAV: FINAL OVERRIDE (keep at very bottom) === */
.top_mnu.top_mnu_simple{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10000 !important;

  height: 44px !important;          /* высота полоски */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;

  background: rgba(251,247,240,.92) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
}

.top_mnu.top_mnu_simple ul{
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  width: 100% !important;
  display: flex !important;
  align-items: center !important;    /* вертикальный центр */
  justify-content: center !important;
  gap: 18px !important;
}

.top_mnu.top_mnu_simple ul li{
  margin: 0 !important;
  padding: 0 !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.top_mnu.top_mnu_simple ul li a{
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;

  padding: 0 10px !important;        /* кликабельная зона = ровно по высоте полоски */
  line-height: 44px !important;

  color: #1a1a1a !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  font-size: 14px !important;
}

.top_mnu.top_mnu_simple ul li a:hover{
  color: #8c6b3f !important;
}

/* ===== FIX: section spacing + alternating backgrounds ===== */

/* 1) меньше воздуха под заголовками секций */
.section_header{
  padding: 28px 0 10px !important;
  margin: 0 !important;
}
.section_header::after{
  margin: 12px auto 0 !important;
}
.section_content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) чередование фона (чтобы блоки читались) */
body{ background: #F6F2EA !important; }
section{ background: #FBF8F2; }
section.bg_light{ background: #F6F2EA !important; }

/* тонкие разделители между блоками */
section + section{
  border-top: 1px solid rgba(0,0,0,.06);
}

/* =========================
   FINAL OVERRIDES (LAST WINS)
   ========================= */

/* 1) Убираем вторую линию (оставляем только одну) */
.s_descr::after{
  display: none !important;
}

/* 2) Чередование фона по секциям (включая FAQ), принудительно */
main > section:nth-of-type(even),
body > section:nth-of-type(even),
section:nth-of-type(even){
  background-color: var(--bg-soft) !important;
}
main > section:nth-of-type(odd),
body > section:nth-of-type(odd),
section:nth-of-type(odd){
  background-color: var(--bg) !important;
}

/* 3) Уменьшаем “воздух” у заголовков секций */
section{
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
.section_header{
  padding-bottom: 10px !important;
}
.section_header h2, 
.section_header h1{
  margin-bottom: 8px !important;
}
.section_header .s_descr,
.section_header .s_descr_wrap{
  margin-top: 6px !important;
}

/* 4) Меню: вертикально по центру + кликабельная зона ровно по высоте бара */
.top_mnu_simple{
  height: 44px !important;
}
.top_mnu_simple ul{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:44px !important;
  margin:0 !important;
  padding:0 !important;
}
.top_mnu_simple li{
  display:flex !important;
  align-items:center !important;
  margin:0 14px !important;
  padding:0 !important;
}
.top_mnu_simple a{
  display:flex !important;
  align-items:center !important;
  height:44px !important;
  padding:0 6px !important;
  line-height:1 !important;
}

/* tighten section header spacing (big empty space fix) */
.section_header{
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
}

.section_header h2,
.section_header h1{
  margin: 0 0 8px 0 !important;
}

.section_header .s_descr,
.section_header .s_descr_wrap{
  margin: 6px 0 0 0 !important;
}

/* если под заголовком есть "обертка" или блок-разделитель */
.section_header .line,
.section_header .separator,
.section_header hr{
  margin: 14px auto 0 auto !important;
}

/* ===== Resume title icon: hanging left (title text stays aligned) ===== */

/* контейнер, чтобы absolute-иконка привязалась */
.resume_item{
  position: relative;
}

/* заголовок НЕ сдвигаем */
.resume_title{
  position: relative;
  display: block;          /* важно: не flex, иначе текст уедет */
  padding-left: 0;
}

/* иконка “висит” слева и не двигает текст */
.resume_title .item_icon{
  position: absolute;
  left: -54px;             /* подстройка: чем меньше число — тем ближе к тексту */
  top: 0;                /* чтобы попасть по линии заголовка */
  width: 38px;             /* + пару пикселей больше */
  height: auto;
  opacity: 0.9;
}

/* мобильная версия: чтобы не улетало за экран */
@media (max-width: 768px){
  .resume_title{
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .resume_title .item_icon{
    position: static;
    width: 34px;
    opacity: 0.9;
  }
}

/* --- Mobile: icons + titles in resume/faq/preise --- */
@media (max-width: 768px) {
  .resume_title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .resume_title .item_icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .resume_title span {
    display: inline-block;
    line-height: 1.25;
  }
}

.top_text h1 {
  margin-bottom: 14px;
}

.top_text p {
  margin-bottom: 10px;
}

.top_text h1 {
  background: none !important;
  padding: 0 !important;
}

.top_text h1 span {
  background: none !important;
}

.top_text h1,
.top_text p {
  background: none !important;
}

.hero-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  padding: 40px 0;
  z-index: 1;
}

/* ===== MOBILE NAV FIX ===== */
.top_mnu.top_mnu_simple ul{
  flex-wrap: nowrap !important;       /* запрет переносов */
  white-space: nowrap !important;
}

/* чтобы якоря не прятались под фикс-меню */
body{
  padding-top: 44px !important;
}
section{
  scroll-margin-top: 60px;
}

@media (max-width: 768px){
  /* allow 2 lines instead of horizontal scroll */
  .top_mnu.top_mnu_simple{
    height: auto !important;
    padding: 6px 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .top_mnu.top_mnu_simple ul{
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center !important;
    gap: 8px 14px !important;
    height: auto !important;
    padding: 0 10px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .top_mnu.top_mnu_simple ul li,
  .top_mnu.top_mnu_simple ul li a{
    height: auto !important;
    line-height: 1.2 !important;
  }
  .top_mnu.top_mnu_simple ul li a{
    font-size: 12px !important;
    padding: 4px 6px !important;
    letter-spacing: .2px !important;
  }

  /* adjust body offset for taller nav */
  body{
    padding-top: 72px !important;
  }
  section{
    scroll-margin-top: 88px;
  }
}

@media (max-width: 768px){
  .top_wrapper .top_text{
    padding: 22px 12px;
  }
}

/* ===== MOBILE ALIGNMENT ===== */
@media (max-width: 768px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  /* even gutters + clean edges */
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* hero alignment */
  .hero-strip{
    position: relative;
    top: auto;
    transform: none;
    padding: 22px 0;
  }
  .top_wrapper .top_text{
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
    box-sizing: border-box;
    display: block !important;
    max-width: 100% !important;
  }
  .top_wrapper .top_text h1{
    font-size: clamp(18px, 5.4vw, 26px);
    line-height: 1.1;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box;
    letter-spacing: 0 !important;
    word-break: keep-all;
    text-wrap: balance;
  }

  /* Samsung S21 / narrow Android screens */
  @media (max-width: 420px){
    .top_wrapper .top_text h1{
      font-size: 18px !important;
      padding: 6px 8px !important;
      letter-spacing: 0 !important;
    }
  }

  @media (max-width: 360px){
    .top_wrapper .top_text h1{
      font-size: 17px !important;
    }
  }
  .top_wrapper .top_text p{
    font-size: 14px;
    margin-left: 0;
    margin-right: 0;
    letter-spacing: 1px;
    white-space: normal;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* avoid text overflow on narrow screens */
  .top_wrapper .top_text,
  .top_wrapper .top_text h1,
  .top_wrapper .top_text p{
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* extra-small screens: tighten CTA to avoid overflow */
  @media (max-width: 360px){
    .top_wrapper .top_text a{
      font-size: 12px;
      letter-spacing: 0.5px !important;
      padding: 8px 10px !important;
    }
  }

  /* prevent CTA/button from overflowing */
  .top_wrapper .top_text a{
    display: inline-block !important;
    max-width: calc(100vw - 32px);
    white-space: normal !important;
    text-align: center;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  /* images never overflow */
  img{
    max-width: 100%;
    height: auto;
  }

  /* center section headers but keep body text readable */
  .section_header{
    text-align: center;
  }
  .section_content{
    text-align: left;
  }

  /* about/resume blocks */
  .person{
    text-align: center;
  }
  .resume_item{
    text-align: left;
  }
  .resume_title{
    justify-content: flex-start;
  }

  /* footer alignment */
  .main_footer{
    text-align: center;
  }
}