/*
Theme Name: Reboot Melonpanda
Theme URI: https://melonpanda.com/
Description: Child-theme на основе Reboot (WPShop) под нужды melonpanda.com/blog. Все брендовые правки и override-шаблоны живут здесь; parent-тема остаётся нетронутой.
Author: Melonpanda
Version: 0.8.8
Template: reboot
Text Domain: reboot-melonpanda
*/

/* ==========================================================================
   @font-face — Jost self-hosted (5 весов × 3 subsets = 15 блоков).
   WOFF2 файлы содержат weights 400/500/600/700/900 в одном subset-файле,
   каждый вес декларируется отдельно чтобы браузер правильно мапил.
   ========================================================================== */

/* Jost 400 — cyrillic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jost/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Jost 400 — latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 400 — latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 500 — cyrillic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jost/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Jost 500 — latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 500 — latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 600 — cyrillic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/jost/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Jost 600 — latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 600 — latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 700 — cyrillic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/jost/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Jost 700 — latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 700 — latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost 900 — cyrillic */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/jost/jost-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Jost 900 — latin-ext */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost 900 — latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/jost/jost-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --mln-accent: hsl(327, 70%, 60%);
  --mln-accent-hover: hsl(327, 59%, 53%);
  --mln-link: hsl(216, 61%, 42%);
  --mln-text-primary: hsl(217, 23%, 29%);
  --mln-text-muted: hsl(168, 4%, 49%);
  --mln-border: hsl(0, 0%, 88%);
  --mln-bg: #fff;
  --mln-bg-subtle: hsl(0, 0%, 98%);

  --mln-font-heading: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mln-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --mln-container-max: 1440px;
  --mln-gutter: 60px;
}

/* Gutters сжимаются на планшете/мобилке — как в основном сайте.
   See ref/src/styles/elements/container.scss ($padding-inline-medium/small). */
@media (max-width: 1024px) {
  :root {
    --mln-gutter: 16px;
  }
}

@media (max-width: 640px) {
  :root {
    --mln-gutter: 10px;
  }
}

/* Общий контейнер шапки, подвала и главного контента.
   Reboot-дефолт (1190px) для .fixed.site-content расширяется до 1440px,
   gutter'ы берутся из --mln-gutter, чтобы внутренние края совпадали. */
.mln-container,
.fixed.site-content {
  max-width: var(--mln-container-max);
  margin-inline: auto;
  padding-inline: var(--mln-gutter);
}

/* Убираем горизонтальный auto-margin у карточек записей — они больше
   не центрируются относительно контейнера, а занимают всю ширину/колонку. */
.hentry,
article.post,
.post-card,
.blog-post {
  margin-inline: 0;
}

/* ==========================================================================
   Base overrides — ТОЛЬКО шрифты.
   Цвета, кнопки, ссылки в основном контенте остаются на Reboot-дефолтах
   и настраиваются из админки. Бренд применён только к шапке (.mln-header*)
   и подвалу (.mln-footer*) ниже.
   ========================================================================== */

body {
  font-family: var(--mln-font-body);
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.entry-title {
  font-family: var(--mln-font-heading);
  font-weight: 600;
}

/* ==========================================================================
   Header
   ========================================================================== */

.mln-header {
  background: var(--mln-bg);
  border-bottom: 1px solid var(--mln-border);
}

.mln-header__top {
  font-size: 12px;
  padding-top: 16px;
}

.mln-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.mln-top-nav a,
.mln-top-nav a:visited {
  color: var(--mln-text-primary);
  font-weight: 500;
  text-decoration: underline;
}

.mln-top-nav a:hover,
.mln-top-nav a:focus-visible {
  color: #000;
}

/* Вертикальный разделитель «|» между пунктами top-nav (как в ref'е). */
.mln-top-nav a + a::before {
  content: "|";
  display: inline-block;
  margin-inline: 12px;
  color: var(--mln-text-primary);
  font-weight: 400;
  text-decoration: none;
}

.mln-header__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--mln-gutter);
  gap: 24px;
}

.mln-logo {
  display: inline-flex;
  align-items: center;
}

.mln-logo img {
  display: block;
  width: 294px;
  height: auto;
  max-width: 100%;
}

.mln-cta,
.mln-cta:visited {
  display: inline-block;
  background: var(--mln-accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: var(--mln-font-heading);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.mln-cta:hover,
.mln-cta:focus {
  background: var(--mln-accent-hover);
  color: #fff;
}

.mln-header__nav {
  border-top: 1px solid var(--mln-border);
  background: var(--mln-bg);
  font-size: 12px;
}

/* Белые fade-тени по краям скролл-вьюпорта. Размещаем на .mln-container
   внутри nav (position: relative), чтобы абсолютные гра­диенты совпадали
   с краями видимого scroll-контейнера на любой ширине экрана.
   mask-image на .mln-header__nav-inner не используем — глючит в Chromium
   на элементах с overflow-x:auto. */
.mln-header__nav > .mln-container {
  position: relative;
}

.mln-header__nav > .mln-container::before,
.mln-header__nav > .mln-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mln-header__nav > .mln-container::before {
  left: var(--mln-gutter);
  background: linear-gradient(to right, var(--mln-bg), rgba(255, 255, 255, 0));
}

.mln-header__nav > .mln-container::after {
  right: var(--mln-gutter);
  background: linear-gradient(to left, var(--mln-bg), rgba(255, 255, 255, 0));
}

.mln-header__nav.has-shade-left > .mln-container::before {
  opacity: 1;
}

.mln-header__nav.has-shade-right > .mln-container::after {
  opacity: 1;
}

.mln-header__nav-inner {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 0 0;
  user-select: none;
}

.mln-header__nav-inner::-webkit-scrollbar {
  display: none;
}

.mln-header__nav a,
.mln-header__nav a:visited {
  color: var(--mln-text-primary);
  text-decoration: none;
  font-family: var(--mln-font-heading);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 12px;
}

/* Hover на категориях — чёрный (как в ref). */
.mln-header__nav a:hover,
.mln-header__nav a:focus-visible {
  color: #000;
}

/* Градиентное подчёркивание, появляющееся на hover/focus (как в ref'е —
   %navigationLink::after с scaleX-анимацией и brand-gradient фоном). */
.mln-header__nav a {
  position: relative;
}

.mln-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, hsl(241, 75%, 76%), hsl(345, 87%, 88%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s ease;
  pointer-events: none;
}

.mln-header__nav a:hover::after,
.mln-header__nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Убираем дефолтный dotted-outline на :focus (появляется после клика/drag).
   Клавиатурный фокус сохраняется через :focus-visible (см. секцию Accessibility). */
.mln-header__nav a:focus {
  outline: none;
}

.mln-header__nav a:focus-visible {
  outline: 2px solid var(--mln-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer — тёмный фон + белый текст + двухколоночный grid с white-разделителями
   между секциями, как в ref (Footer.module.scss .root + .grid). */
.mln-footer {
  background: var(--mln-text-primary);
  color: #fff;
  margin-top: 60px;
  font-size: 14px;
  line-height: 1.28;
  letter-spacing: 0.02em;
}

/* Внешний контейнер: max-width 1440 (ref summarizes 720+720),
   центрирование через margin: 0 auto — grid внутри делится пополам и
   разделители каждой секции заканчиваются на границе колонки. */
.mln-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.mln-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "contacts news"
    "nav nav"
    "info payment";
}

/* Ref footer.scss: left-side блок → padding-left: 78px, right-side →
   padding-left: 20px + padding-right: 40px. Симметричный padding
   растягивает border-bottom за пределы контента в обе стороны. */
.mln-footer__contacts {
  grid-area: contacts;
  display: flex;
  align-items: center;
  padding: 29px 78px 20px 78px;
  border-bottom: 2px solid #fff;
  min-height: 76px;
}

.mln-footer__news {
  grid-area: news;
  display: flex;
  align-items: center;
  padding: 32px 40px 20px 20px;
  border-bottom: 2px solid #fff;
}

.mln-footer__news-link,
.mln-footer__news-link:visited {
  display: block;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-decoration: underline;
}

/* Nav подвала — плоский список пунктов меню (из админки, location=footer),
   выведен в 2-col grid, как в ref MenuList (max-width 360, gap 10px). */
.mln-footer__nav {
  grid-area: nav;
  padding: 30px 78px;
  border-bottom: 2px solid #fff;
}

.mln-footer-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 360px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mln-footer-menu a,
.mln-footer-menu a:visited {
  color: #fff;
  text-decoration: none;
}

/* Социалки + email в одну flex-строку с space-between (как в ref
   SocialList). Email — последний пункт, у него показывается текст. */
.mln-footer-social {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mln-footer-social__link,
.mln-footer-social__link:visited {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

/* Подпись рядом с иконкой — скрыта на десктопе, появляется на мобилке.
   Для email — всегда видна (email показывает свой адрес как label). */
.mln-footer-social__label {
  display: none;
  margin-left: 14px;
  text-decoration: underline;
}

.mln-footer-social__link--email {
  gap: 10px;
  font-weight: 500;
}

.mln-footer-social__link--email .mln-footer-social__label {
  display: inline;
  margin-left: 0;
}

.mln-footer-social svg {
  /* SVG 24×24 нативного размера — как в ref. Хардкод fill="#fff"
       в самих SVG-файлах даёт белую заливку на тёмном footer'е. */
  width: 24px;
  height: 24px;
}

.mln-footer__info {
  grid-area: info;
  padding: 42px 20px 10px 78px;
  color: #fff;
}

/* В ref info additional-link и smile — display: block; year/credit —
   inline на одной строке. Policy-ссылка по умолчанию без подчёркивания
   на десктопе (ref link.base-link). */
.mln-footer__info-link {
  display: block;
  margin-bottom: 8px;
  text-decoration: none;
}

.mln-footer__smile {
  display: block;
  margin-top: 4px;
}

/* Payment-контейнер занимает правую колонку грида (как ref .paymentContainer
   с right-side mixin: max-width 720, padding-right: 40, padding-left: 20).
   Белый gradient-бар внутри (ref .root) — max-width 396, left-aligned. */
.mln-footer__payment {
  grid-area: payment;
  max-width: 720px;
  padding: 26px 40px 28px 20px;
  box-sizing: border-box;
}

.mln-footer-payment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, hsl(30, 14%, 91%), #fff);
  border-radius: 10px;
  padding: 9px 20px;
  max-width: 396px;
  min-height: 53px;
  list-style: none;
  margin: 0;
}

.mln-footer-payment-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mln-footer-payment-list__item img {
  display: block;
  /* Оставляем нативный размер SVG (ref тоже не переопределяет
       размер — каждая иконка своей шириной: visa 50×17, mc 38×30 и т.д.). */
}

.mln-footer__info-link,
.mln-footer__info-link:visited {
  color: #fff;
  text-decoration: none;
}

/* Универсальный hover для всех footer-ссылок (ref link.base-link):
   opacity 0.6, на active 0.3. Цвет форсируется белым на всех состояниях,
   чтобы переопределить :hover-синий из parent Reboot CSS. */
.mln-footer a,
.mln-footer a:visited,
.mln-footer a:hover,
.mln-footer a:focus,
.mln-footer a:focus-visible,
.mln-footer a:active {
  color: #fff;
}

.mln-footer a {
  transition: opacity 0.15s ease;
}

.mln-footer a:hover,
.mln-footer a:focus-visible {
  opacity: 0.6;
}

.mln-footer a:active {
  opacity: 0.3;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .mln-header__top {
    display: none;
  }

  .mln-header__main-inner {
    padding: 14px var(--mln-gutter);
  }

  .mln-logo img {
    width: 220px;
  }

  .mln-cta {
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Ужимаем десктопные 78/40px паддинги футера, иначе контент
       в узкой ячейке 2-col grid'а переполняется и даёт гор-скролл. */
  .mln-footer__contacts,
  .mln-footer__news,
  .mln-footer__nav,
  .mln-footer__info,
  .mln-footer__payment {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Мобильный футер (ref vw-small-down) — одна колонка, перестановка
   секций: news → nav → contacts → info → payment. Padding'и уменьшены,
   news-link легче (400 вместо 800), payment-бар без gradient-фона. */
@media (max-width: 639px) {
  .mln-footer__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "news"
      "nav"
      "contacts"
      "info"
      "payment";
  }

  .mln-footer__contacts {
    padding: 6px 12px 15px;
    min-height: 0;
  }

  .mln-footer-social {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* На мобилке все соцсети показывают подпись рядом с иконкой. */
  .mln-footer-social__label {
    display: inline;
    margin-left: 10px;
  }

  .mln-footer-social__link--email .mln-footer-social__label {
    margin-left: 0;
  }

  .mln-footer__news {
    padding: 10px 12px;
  }

  .mln-footer__news-link,
  .mln-footer__news-link:visited {
    font-weight: 400;
    line-height: 1.71;
  }

  .mln-footer__nav {
    padding: 15px 12px;
  }

  .mln-footer-menu {
    max-width: none;
    grid-template-columns: 1fr;
  }

  .mln-footer__info {
    padding: 20px 12px 30px;
  }

  .mln-footer__payment {
    padding: 20px 12px;
    max-width: none;
  }

  .mln-footer-payment-list {
    background: none;
    padding: 0;
    max-width: none;
    min-height: 0;
    gap: 12px;
  }

  /* Ref link.base-link: on vw-small-down all anchors get underline. */
  .mln-footer a {
    text-decoration: underline;
  }

  .post-card--vertical {
    max-width: unset;
  }

  .post-card--vertical img {
    width: 100%;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link.screen-reader-text:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--mln-accent);
  color: #fff;
  z-index: 100000;
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--mln-font-heading);
  font-weight: 500;
}

a:focus-visible,
.mln-cta:focus-visible {
  outline: 2px solid var(--mln-accent);
  outline-offset: 2px;
}