/* =========================================================
   BetBurger — header & footer
   Скопированы с https://www.betburger.com/ (разметка, стили, поведение):
   components/header.css, components/footer.css + нужные правила application.css
   (.w-center, .btn, .green-btn, .red-btn-reverse) и базовые стили Bootstrap 3,
   от которых зависит вид. Всё ограничено .header / .footer, чтобы не задевать страницу.
   ========================================================= */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300.woff2) format('woff2'); }

/* ---------- База (body betburger.com + Bootstrap 3) ---------- */
.header, .footer {
  font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 1.4; color: #223e4c;
  text-align: left; letter-spacing: normal;
}
.header *, .header *::before, .header *::after,
.footer *, .footer *::before, .footer *::after { box-sizing: border-box; }
/* специфичность как у Bootstrap (через :where), чтобы классы компонентов побеждали */
:where(.header, .footer) img { display: inline; vertical-align: middle; max-width: none; border: 0; }
:where(.header) .img-responsive { display: block; max-width: 100%; height: auto; }
:where(.header, .footer) a { color: #459ce7; text-decoration: none; background-color: transparent; }
:where(.header, .footer) a:focus, :where(.header, .footer) a:hover { color: #23527c; text-decoration: underline; }
:where(.header, .footer) ul { margin-top: 0; margin-bottom: 10px; }
:where(.header) label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
.header button { font: inherit; letter-spacing: normal; }

.w-center { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; padding: 0 15px; }
@media only screen and (min-width: 768px) and (max-width: 1023px) { .w-center { padding: 0 45px; } }
@media only screen and (min-width: 1024px) and (max-width: 1624px) { .w-center { padding: 0 50px; } }

/* ---------- Кнопки ---------- */
.header .btn {
  display: inline-block; height: auto; gap: 0; margin-bottom: 0;
  padding: 15px; font-size: 14px; font-weight: 600; line-height: 1.42857143; letter-spacing: .06em;
  text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer;
  user-select: none; background-image: none; border: 1px solid transparent; border-radius: 3px; transition: none;
}
@media only screen and (min-width: 1200px) { .header .btn { padding: 15px 34px 13px; } }
@media only screen and (max-width: 767px) { .header .btn { padding: 9px 10px; } }
.header .btn:focus, .header .btn:hover { color: #333; text-decoration: none; }
.header .btn.green-btn { color: #223e4c; border: 2px solid #4ec2a5; }
.header .btn.green-btn:hover { text-decoration: none; background: #4ec2a5; }
.header .btn.red-btn-reverse { border: 2px solid #ef4059; color: #223e4c; }
.header .btn.red-btn-reverse:hover { text-decoration: none; background: #ef4059; }

/* =========================================================
   HEADER  (components/header.css)
   ========================================================= */
.header { box-shadow: 0 0 30px 15px rgba(75, 76, 76, .06); background: #fff; width: 100%; z-index: 99999999; top: 0; }
.header.sticky { position: sticky; z-index: 9999; }
.header_inner { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 20px 0; transition: all .35s ease-in-out; }
.header_logo { order: 2; width: 160px; }
.header_logo img { width: 100%; }
.header_navbar { order: 1; }
.header_nav {
  position: fixed; border-top: 1px solid rgba(0, 0, 0, .15); left: 0; right: 0; top: var(--header-bottom, 74px);
  z-index: 90; bottom: 0; padding-bottom: 40px; max-width: 680px; background: #fff; opacity: 0; visibility: hidden; overflow-x: auto;
}
.header_navbar-btn { width: 26px; height: 26px; background: none; display: flex; align-items: center; border: none; }
.header_navbar-label {
  position: relative; display: block; width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.header_navbar-label:focus-visible { outline: 2px solid #223e4c; outline-offset: 6px; }
.header_navbar-label::before { content: ""; position: absolute; inset: -12px; }
.header_navbar-icon { display: block; background: #000; width: 16px; height: 2px; position: absolute; transition: all .25s ease-in-out; top: calc(50% - 1px); }
.header_navbar-icon:first-child, .header_navbar-icon:last-child { width: 20px; }
.header_navbar-icon:first-child { top: 3px; }
.header_navbar-icon:last-child { top: auto; bottom: 3px; }
.header_nav-list { list-style-type: none; padding: 0; margin: 0; text-align: left; }
.header_nav-list li a {
  width: 100%; text-transform: uppercase; display: block; color: #223e4c; font-size: 16px; font-weight: 600;
  letter-spacing: .04em; line-height: 1.2; text-decoration: none; transition: all .35s ease-in-out;
  border-bottom: .5px solid rgba(0, 0, 0, .15); padding: 20px;
}
.header_nav-list li a:hover { color: #4ec2a5; text-decoration: none; }
.header_actions { order: 3; display: flex; align-items: center; gap: 0 12px; }
.header_actions-mob { margin-top: 10px; display: flex; align-items: center; padding: 0 0 0 15px; gap: 0 15px; }
.header_actions-mob .drop { display: none; }
.header_actions-mob .btn { font-size: 12px; }
@media (max-width: 1243px) {
  .header_navbar, .header_actions { flex: 1 1 0; min-width: max-content; }
  .header_navbar { text-align: left; }
  .header_actions { justify-content: flex-end; }
}

/* выпадающие пункты меню (Events, Education) */
.header .header-drop { position: relative; transition: all .35s ease-in-out; }
.header .header-drop:after {
  content: ""; position: absolute; top: 25px; right: 8px; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 4px solid #223e4c; transform: rotate(180deg); transition: all .35s ease-in-out;
}
.header .header-drop_menu-wrap { visibility: hidden; opacity: 0; z-index: 999; height: 0; transition: all .35s ease-in-out; }
.header .header-drop_menu-wrap a { display: none; }
.header .header-drop_menu { list-style-type: none; padding: 4px 0 8px; }
.header .header-drop_item { margin: 0 !important; }
.header .header-drop_item a { white-space: nowrap; color: #223e4c; font-size: 16px; text-transform: unset; line-height: 1.2; padding-left: 30px; position: relative; }
.header .header-drop_item a:hover { color: #4ec2a5; text-decoration: none; }
.header .header-drop.open .header-drop_btn { color: #4ec2a5; background: #f7f7f7; border-bottom: none; }
.header .header-drop.open:after { transform: rotate(0deg); }
.header .header-drop.open .header-drop_menu-wrap { visibility: visible; opacity: 1; height: auto; }
.header .header-drop.open .header-drop_menu-wrap a { display: block; }
@media (min-width: 1244px) {
  .header .header-drop:after { display: none; }
  .header .header-drop_menu-wrap { position: absolute; background: transparent; padding-top: 10px; left: auto; }
  .header .header-drop_menu { text-align: left; background: #fff; padding: 2px 0; border: 1px solid rgba(0, 0, 0, .15); box-shadow: 0 0 15px 7px rgba(75, 76, 76, .03); border-radius: 4px; }
  .header .header-drop_menu a { color: #223e4c; padding: 13px 20px; border-bottom: none; }
  .header .header-drop_menu a:hover { background: #f7f7f7; }
  .header .header-drop_menu a:hover:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #4ec2a5; }
}

/* адаптив: бургер-меню до 1243 px */
@media only screen and (min-width: 768px) {
  .header_logo { width: 190px; }
  .header_nav { top: var(--header-bottom, 81px); }
}
@media (min-width: 1244px) {
  .header_inner { padding: 30px 0; }
  .header_logo { order: unset; width: 160px; }
  .header_navbar { order: unset; margin: 0 0 0 10px; width: calc(100% - 190px); }
  .header_navbar-label { display: none; }
  .header_nav {
    position: static; border: none; box-shadow: none; padding: 0; opacity: 1; visibility: visible; justify-self: flex-end;
    display: flex; align-items: center; justify-content: center; min-width: 100%; max-width: unset; overflow-x: unset;
  }
  .header_nav-list { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0 10px; }
  .header_nav-list li { margin: 0; }
  .header_nav-list li a { padding: 0; text-transform: inherit; border: none; }
  .header_actions { display: none; }
  .header_actions .drop { display: none; }
  .header_actions-mob { margin: 0; display: flex; align-items: center; }
  .header_actions-mob .drop { display: block; min-width: 44px; }
  .header_actions-mob .btn { padding: 13px 20px 13px; }
  .header .header-drop_menu-wrap.open { visibility: hidden; opacity: 0; height: 0; }
  .header .header-drop:hover .header-drop_menu-wrap { visibility: visible; opacity: 1; height: auto; }
  .header .header-drop_menu { list-style-type: none; }
  .header .header-drop_menu a {
    white-space: nowrap; color: #223e4c; font-size: 16px; font-weight: 600; line-height: 1.2; display: block;
    border: none; position: relative; padding: 10px 14px;
  }
  .header .header-drop_menu a:hover { color: #4ec2a5; text-decoration: none; }
  .header .header-drop_item { margin: 0 !important; }
  .header.sticky .header_inner { padding: 10px 0; }
}
@media only screen and (min-width: 1266px) { .header_nav-list { gap: 0 18px; } }

.header_navbar-input:checked ~ .header_nav { opacity: 1; visibility: visible; transition: all .35s ease-in-out; }
@media (min-width: 681px) and (max-width: 1243px) {
  .header_navbar-label::after {
    content: ""; position: fixed; top: var(--header-bottom, 81px); right: 0; bottom: 0; left: 0; z-index: 89;
    background: rgba(0, 0, 0, .45); cursor: default; opacity: 0; visibility: hidden;
    transition: opacity .35s ease-in-out, visibility 0s linear .35s;
  }
  .header_navbar-input:checked ~ .header_navbar-label::after { opacity: 1; visibility: visible; transition-delay: 0s; }
}
.header_navbar-input:checked ~ .header_navbar-label .header_navbar-icon { opacity: 0; }
.header_navbar-input:checked ~ .header_navbar-label .header_navbar-icon:first-child { transform: rotate(45deg); top: 9px; opacity: 1; }
.header_navbar-input:checked ~ .header_navbar-label .header_navbar-icon:last-child { transform: rotate(-45deg); top: 9px; opacity: 1; }

/* выбор языка */
.drop { display: inline-block; position: relative; z-index: 98; }
.drop_btn { margin-bottom: 0; cursor: pointer; }
.header label.drop_btn { margin-bottom: 0; }
.drop_btn__flag img { border-radius: 50%; width: 24px; height: 24px; overflow: hidden; }
.drop_btn:after {
  display: inline-block; content: ''; width: 4px; height: 4px; border-top: 5px solid #000;
  border-left: 4px solid transparent; border-right: 4px solid transparent; margin: 0 0 2px 5px;
}
.drop_inner {
  background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 3px; position: absolute; padding: 5px 0;
  opacity: 0; transition: all .35s ease-in-out; visibility: hidden; z-index: 2; margin-top: 21px; right: 0;
  max-height: calc(100vh - 100px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.drop_menu, .header .drop_menu { margin: 0; padding: 0; }
.drop_menu li { list-style-type: none; margin: 0; text-align: left; }
.header .drop_menu li a { display: block; padding: 3px 20px; font-size: 14px; font-weight: 400; color: #333; white-space: nowrap; text-decoration: none; }
.header .drop_menu li a:hover { text-decoration: none; background-color: #f5f5f5; color: #333; }
.drop_menu li .drop_flag img { border-radius: 50%; width: 24px; height: 24px; overflow: hidden; }
@media (min-width: 1244px) { .drop_inner { left: 0; right: auto; text-align: left; } }
.drop_open:checked ~ .drop_inner { opacity: 1; visibility: visible; }

@media (max-width: 1243px) {
  .header_nav a:focus-visible, .header_nav [role="button"]:focus-visible { outline: 2px solid #223e4c; outline-offset: -2px; }
}
@media (forced-colors: active) { .header_navbar-icon { background: CanvasText; } }
@media (prefers-reduced-motion: reduce) {
  .header_navbar-icon, .header_navbar-label::after, .header_navbar-input:checked ~ .header_nav { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1243px) {
  .header .header-drop, .header .header-drop:after, .header .header-drop_menu-wrap { transition: none; }
}

/* =========================================================
   FOOTER  (components/footer.css)
   ========================================================= */
.footer { padding-bottom: 20px; font-weight: 300; }
.footer .logo { display: block; max-width: 160px; }
.footer .logo img { width: 100%; }
.footer_top-wrap { background: #f7fafe; }
.footer_top { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
@media (max-width: 767px) { .footer_top { padding: 20px 50px 20px 32px; } }
.footer_social { display: flex; gap: 5px; margin: 0; padding: 0; }
.footer .footer_social { margin: 0; }
.footer_social li { list-style-type: none; }
.footer_menu-wrap { padding: 20px 0; }
.footer_menu { margin-bottom: 20px; text-align: left; }
.footer_menu-title { font-size: 14px; font-weight: 600; }
.footer_menu-columns { display: flex; gap: 0 24px; }
@media (max-width: 767px) { .footer_menu-columns { flex-direction: column; } }
.footer_menu-list, .footer .footer_menu-list { padding: 0; margin: 0; }
.footer_menu-list li { list-style-type: none; }
.footer .footer_menu-list li a { color: #42a5ff; font-size: 14px; cursor: pointer; }
.footer .footer_menu-list li a:hover { color: #42a5ff; text-decoration: underline; }
.footer_bottom { display: flex; flex-direction: column; gap: 10px 0; align-items: center; }
.footer_bottom-left { order: 2; font-size: 12px; max-width: 246px; text-align: center; }
.footer_bottom-center { order: 1; }
.footer_bottom-center ul, .footer .footer_bottom-center ul { display: flex; justify-content: center; gap: 5px; padding: 0; margin: 0; }
.footer_bottom-center ul li { list-style-type: none; }
.footer .footer_bottom-center ul li a { color: #7a8691; text-decoration: underline; cursor: pointer; font-size: 12px; }
.footer .footer_bottom-center ul li a:hover { color: #7a8691; text-decoration: none; }
.footer_bottom-right { order: 3; }
.footer_bottom-right a { display: inline-block; }
@media only screen and (min-width: 768px) {
  .footer_top { flex-direction: row; justify-content: space-between; }
  .footer_social { gap: 0 24px; }
  .footer_menu-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 20px 0; }
  .footer_menu-title { margin-bottom: 12px; }
  .footer_bottom { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 0 12px; }
  .footer_bottom-left { order: 1; text-align: left; }
  .footer_bottom-center { order: 2; }
  .footer .footer_bottom-center ul li a { font-size: 12px; }
  .footer_menu-list { display: flex; flex-direction: column; gap: 4px 0; }
}
@media only screen and (min-width: 1024px) {
  .footer_bottom-center ul, .footer .footer_bottom-center ul { gap: 0 16px; }
  .footer_bottom-right { display: flex; gap: 0 32px; }
}

/* отступ подвала от последнего блока страницы (по макету) */
.footer { margin-top: 142px; }

/* мобильный отступ подвала от последнего блока (макет «Homepage mobile») */
@media (max-width: 1023px) { .footer { margin-top: 80px; } }