/* ===============================
   Morze FM — общий стиль темы
   =============================== */

:root{
  /* Глобал */
  --site-bg:#F5EAD8;

  /* ДЕСКТОП, шапка */
  --morze-bg:#018783;
  --bar-w:1200px;
  --header-h:72px;
  --badge:52px;
  --badge-pad:3px;

  /* Мобильная шапка */
  --m-header-h:64px;
  --m-bg:#018783;
  --m-fg:#ffffff;
  --drawer-w:86vw;
  --drawer-bg:#018783;
  --drawer-fg:#ffffff;
}

/* Бежевый фон сайта */
html, body{ background:var(--site-bg) !important; }

/* Скрываем стандартный хедер темы */
.wp-site-blocks>header,
header.wp-block-template-part,
.wp-site-header,
header.site-header,
header[role="banner"]{ display:none !important; }

/* ===== ДЕСКТОП ХЕДЕР ===== */
.morze-topbar{ position:fixed; top:0; left:0; right:0; z-index:10000; }
body.admin-bar .morze-topbar{ top:32px; }
@media (max-width:782px){ body.admin-bar .morze-topbar{ top:46px; } }

.morze-bar{
  width:min(var(--bar-w), calc(100% - 32px));
  height:var(--header-h);
  margin:0 auto;
  background:var(--morze-bg);
  position:relative;
}
.morze-inner{
  position:relative; height:100%;
  display:flex; align-items:center; gap:22px; padding:0 20px;
}

.morze-nav.left{ display:flex; align-items:center; gap:26px; }
.morze-nav.left a{
  color:#fff; text-decoration:none; font-weight:800; font-size:18px; line-height:1;
  opacity:.95; transition:opacity .2s;
}
.morze-nav.left a:hover{ opacity:1; }

.morze-logo-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:var(--badge); height:var(--badge); border-radius:9999px; background:#fff; padding:var(--badge-pad);
  display:grid; place-items:center; box-shadow:0 0 0 2px rgba(255,255,255,.18) inset;
}
.morze-logo-badge img{ width:100%; height:100%; border-radius:50%; display:block; }

.morze-nav.right{ margin-left:auto; display:flex; align-items:center; gap:12px; }

.d-search-btn{
  width:40px; height:40px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center;
  transition:background .15s ease, transform .15s ease; box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
}
.d-search-btn:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.d-search-btn svg{ width:20px; height:20px; }

.morze-social{ display:inline-flex; gap:12px; align-items:center; }
.morze-social a{
  width:40px; height:40px; border-radius:9999px; background:rgba(255,255,255,.18); color:#fff;
  display:grid; place-items:center; text-decoration:none; transition:background .15s, transform .15s;
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
}
.morze-social a:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.morze-social svg{ width:20px; height:20px; fill:currentColor; }

/* ===== ДЕСКТОП: компактный поиск ===== */
.d-searchbar{ display:none; position:fixed; left:0; right:0; z-index:9999; }
.d-searchbar-inner{
  width:min(var(--bar-w), calc(100% - 32px));
  margin:0 auto; padding:8px 0; background:transparent;
}
.d-searchbar form{
  width:min(420px, calc(100% - 24px));
  margin:0 12px 0 auto;
  position:relative;
  background:#fff; border-radius:12px; padding:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);
}
.d-searchbar input{
  width:100%; height:40px; box-sizing:border-box;
  border-radius:9999px; border:1px solid rgba(0,0,0,.12);
  padding:0 44px 0 14px; font-size:14px; outline:none; background:#fff; color:#111;
}
.d-searchbar button{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:none; background:transparent; color:#111; display:grid; place-items:center;
}
.d-searchbar svg{ width:18px; height:18px; }
.d-search-open .d-searchbar{ display:block; }

/* отступ под фикс-шапку */
.morze-topbar-spacer{ height:var(--header-h); }
body.admin-bar .morze-topbar-spacer{ height:calc(var(--header-h) + 32px); }
@media (max-width:782px){ body.admin-bar .morze-topbar-spacer{ height:calc(var(--header-h) + 46px); } }

/* ===== МОБИЛЬНАЯ ЧАСТЬ ===== */
.m-header, .m-drawer, .m-drawer-backdrop, .m-searchbar, .m-search-spacer{ display:none; }

@media (max-width:768px){
  .morze-bar, .morze-topbar-spacer, .d-searchbar{ display:none; }

  .m-header{
    display:grid; position:fixed; top:0; left:0; right:0; z-index:10001;
    height:var(--m-header-h); background:var(--m-bg); color:var(--m-fg);
    grid-template-columns:56px 1fr 56px; align-items:center; padding:0 8px;
  }

  .m-btn{ display:grid; place-items:center; width:44px; height:44px; border:none; background:transparent; }
  .m-btn.burger svg path{ stroke:#fff; stroke-width:1.8; fill:none; stroke-linecap:round; }
  .m-btn.search svg{ width:24px; height:24px; }
  .m-btn.search circle, .m-btn.search line{ fill:none !important; stroke:#fff !important; stroke-width:2.4 !important; stroke-linecap:round; }

  .m-center{ display:flex; align-items:center; justify-content:center; gap:12px; pointer-events:none; }
  .m-logo{ width:32px; height:32px; border-radius:9999px; background:#fff; padding:3px; display:grid; place-items:center; }
  .m-logo img{ width:100%; height:100%; border-radius:50%; display:block; }
  .m-title{ font-weight:800; font-size:19px; color:#fff; }

  .m-drawer-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.35);
                      opacity:0; pointer-events:none; transition:opacity .2s; z-index:10002; }
  .m-drawer{
    display:flex; position:fixed; top:0; left:0; height:100dvh; width:var(--drawer-w);
    background:var(--drawer-bg); color:var(--drawer-fg);
    transform:translateX(-100%); transition:transform .25s ease; z-index:10003;
    padding:16px; flex-direction:column; gap:16px; box-sizing:border-box; overflow:auto;
  }
  .m-drawer header{ display:flex; align-items:center; justify-content:space-between; }
  .m-drawer .brand{ font-weight:800; font-size:24px; color:#fff; letter-spacing:.3px; }
  .m-drawer .close svg{ width:26px; height:26px; fill:#fff; }

  .m-drawer .m-search{ position:relative; margin-top:4px; width:100%; box-sizing:border-box; }
  .m-drawer .m-search input{
    width:100%; height:40px; border-radius:12px; border:none; outline:none;
    padding:0 40px 0 12px; background:#ffffff; color:#111; font-size:15px; box-sizing:border-box;
  }
  .m-drawer .m-search button{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border:none; border-radius:9999px;
    background:transparent; color:#111; display:grid; place-items:center; cursor:pointer;
  }
  .m-drawer .m-search svg{ width:18px; height:18px; }

  .m-drawer a.menu-item{ color:#fff; text-decoration:none; padding:12px 6px; border-radius:10px; font-weight:800; font-size:18px; display:block; }
  .m-drawer a.menu-item:active{ background:rgba(255,255,255,.12); }

  .m-social{ display:flex; gap:14px; padding-top:10px; }
  .m-social a{ width:38px; height:38px; border-radius:9999px; background:rgba(255,255,255,.15);
               display:grid; place-items:center; color:#fff; text-decoration:none; }
  .m-social svg{ width:19px; height:19px; fill:currentColor; }

  .m-open .m-drawer{ transform:none; }
  .m-open .m-drawer-backdrop{ opacity:1; pointer-events:auto; }

  /* Мобильный поиск */
  .m-searchbar{
    display:block; position:fixed; top:var(--m-header-h); left:0; right:0; width:100%;
    z-index:10000; overflow-x:hidden;
    padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
    opacity:0; pointer-events:none; transform:translateY(-10px); transition:opacity .15s, transform .15s;
  }
  .m-search-open .m-searchbar{ opacity:1; pointer-events:auto; transform:none; }

  .m-searchbar, .m-searchbar *, .m-searchbar *::before, .m-searchbar *::after{
    box-sizing:border-box; max-width:100%;
  }

  .m-searchbar-inner{ background:#fff; padding:12px; border-bottom:1px solid rgba(0,0,0,.08); }
  .m-searchbar form{
    max-width:720px; width:100%;
    margin:0 auto; position:relative; padding:0 12px;
  }
}

/* ===== Twitch секция ===== */
.mt-wrap{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:8px;
  margin-bottom:48px;
  overflow-x:hidden;
}
.mt-inner{ width:min(var(--bar-w), calc(100% - 32px)); margin:0 auto; }
.mt-title{
  display:inline-block;
  padding:8px 22px;
  border:3px solid var(--morze-bg);
  color:var(--morze-bg);
  background:#fff;
  border-radius:8px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 20px 0;
  box-shadow:0 3px 6px rgba(0,0,0,.08);
}

/* Убираем лишние отступы на главной */
.page .wp-block-post-title,
.page .entry-title{ display:none !important; }

.home .wp-block-post-content{ padding-top:0 !important; }
.home .wp-block-post-content > *:first-child{ margin-top:16px !important; }

.home .wp-site-blocks,
.home .wp-block-post-content { padding-top:0 !important; }

.home .wp-block-post-title,
.home .entry-title { margin-top:0 !important; display:none !important; }

@media (min-width:1024px){
  .home .morze-topbar-spacer{ height:4px; }
  .home .mt-wrap{ margin-top:8px !important; }
  .home .mt-title{ margin-top:0 !important; }

  .home :where(.is-layout-constrained) > :first-child { margin-block-start:0 !important; }
  .home .wp-site-blocks > .wp-block-group:first-child { margin-top:0 !important; }
  .home .wp-block-post-content.alignfull { margin-top:0 !important; padding-top:0 !important; }

  /* ещё ближе можно так:
  .home .morze-topbar-spacer{ height:36px !important; }
  .home .mt-wrap{ margin-top:0 !important; } */
}

/* ===============================
   PODCASTS — Morze FM (исправлено)
   =============================== */

:root{
  --mp-purple:#6e56cf;      /* насыщенный фиолетовый */
  --mp-purple-2:#8a6cf0;    /* светлая граница/акцент */
  --mp-white:#ffffff;
  --mp-ink:#ffffff;
  --mp-shadow:0 10px 25px rgba(110,86,207,.35);
}

/* Заголовок */
.morze-podcasts{ margin:24px 0 60px; }
.morze-podcasts__inner{ width:min(1200px, calc(100% - 32px)); margin:0 auto; }
.morze-podcasts .mt-title{
  background:#fff;
  color:var(--morze-bg);
  border-color:var(--morze-bg);
}

/* Коробка плеера */
.mp-shell{
  background:var(--mp-purple);
  border:2px solid var(--mp-purple-2);
  border-radius:16px;
  box-shadow:var(--mp-shadow);
  padding:16px;
  color:var(--mp-white);
}

/* Шапка: обложка + описание */
.mp-head{ display:grid; grid-template-columns:80px 1fr; gap:14px; align-items:flex-start; }
.mp-cover{ width:80px; height:80px; border-radius:12px; overflow:hidden; flex:0 0 auto; }
.mp-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.mp-about .mp-h{ font-size:18px; font-weight:800; color:#fff; margin:0 0 6px; }
.mp-about .mp-text{
  font-size:13px; line-height:1.45; color:#f5f1ff;
  max-height:64px; overflow:auto; padding-right:6px;
}

/* Кастомные скроллбары */
.mp-list::-webkit-scrollbar,
.mp-about .mp-text::-webkit-scrollbar{ width:8px; height:8px; }
.mp-list::-webkit-scrollbar-track,
.mp-about .mp-text::-webkit-scrollbar-track{ background:transparent; }
.mp-list::-webkit-scrollbar-thumb,
.mp-about .mp-text::-webkit-scrollbar-thumb{
  background:#ffffff99; border-radius:999px;
}
.mp-list, .mp-about .mp-text{ scrollbar-color:#fff #ffffff22; scrollbar-width:thin; }

/* Плеер */
.mp-player{
  display:grid; grid-template-columns:42px 1fr auto;
  gap:12px; align-items:center; margin:14px 0;
}

/* === PLAY/PAUSE ICON — ЧЁТКАЯ === */
.mp-play{
  width:44px; height:44px;
  border-radius:9999px;
  background:#fff;
  border:2px solid var(--mp-purple);
  display:grid; place-items:center;
  cursor:pointer;
  position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .12s ease;
}
.mp-play:active{ transform:scale(.96); }

/* Треугольник PLAY — геометрически по центру */
.mp-play::before{
  content:"";
  width:0; height:0;
  border-left:14px solid var(--mp-purple);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  transform:translateX(1px);     /* лёгкий оптический сдвиг */
  transition:all .15s ease;
}

/* Две полоски PAUSE — без смещений и «каши» */
.mp-play.is-playing::before{
  border:none;
  width:16px; height:18px;
  background:
    linear-gradient(to right,
      var(--mp-purple) 0 40%,
      transparent 40% 60%,
      var(--mp-purple) 60% 100%);
  transform:none;
}

/* Прогресс-бар */
.mp-bar{ height:8px; background:rgba(255,255,255,.2); border-radius:8px; overflow:hidden; cursor:pointer; }
.mp-bar__fill{ height:100%; width:0%; background:#fff; }

/* Тайминг */
.mp-time{ font-size:12px; color:#fff; min-width:84px; text-align:right; opacity:.9; }

/* Список эпизодов */
.mp-list{ max-height:360px; overflow:auto; padding-right:6px; margin-top:10px; }
.mp-row{
  display:grid; grid-template-columns:1fr auto; gap:10px;
  background:#fff; border:2px solid transparent; border-radius:10px;
  padding:14px 12px; margin:10px 0;
  color:#2b1a57; cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.mp-row:hover{ border-color:var(--mp-purple-2); }
.mp-row.is-active{ border-color:var(--mp-purple); box-shadow:0 4px 10px rgba(111,59,211,.15); }

.mp-row__title{ font-weight:800; color:#2b1a57; }
.mp-row__date{ font-size:12px; color:#4c3a7e; opacity:.9; }

/* Адаптив */
@media (max-width:720px){
  .mp-head{ align-items:center; }
  .mp-about .mp-text{ max-height:84px; }
}

/* Плавный скролл по якорям */
html { scroll-behavior: smooth; }

/* Чтобы секции не прятались под фикс-хедером (десктоп) */
#home, #podcasts { scroll-margin-top: calc(var(--header-h) + 12px); }

/* На мобиле учитываем высоту мобильной шапки */
@media (max-width:768px){
  #home, #podcasts { scroll-margin-top: calc(var(--m-header-h) + 12px); }
}

/* Плавный скролл оставляем общий */
html { scroll-behavior: smooth; }

/* Базовая компенсация под фикс-шапку (как было) */
#home, #podcasts { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (max-width:768px){
  #home, #podcasts { scroll-margin-top: calc(var(--m-header-h) + 12px); }
}

/* ДОП. СДВИГ ТОЛЬКО ДЛЯ ПОДКАСТОВ НА ДЕСКТОПЕ,
   чтобы Twitch полностью уехал вверх */
@media (min-width: 1024px){
  #podcasts { scroll-margin-top: calc(var(--header-h) + 140px); } /* подбери 120–180 */
}

/* ===== Morze — YouTube блок ===== */
.morze-youtube {
  margin:48px 0 60px;
  width:min(1200px, calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
}

.morze-youtube .morze-title {
  display:inline-block;
  padding:8px 22px;
  border:3px solid var(--morze-bg);
  color:var(--morze-bg);
  background:#fff;
  border-radius:8px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:0 0 20px 0;
  box-shadow:0 3px 6px rgba(0,0,0,.08);
  font-size:20px;
  line-height:1.2;
}

/* плеер */
.youtube-featured { margin-bottom:20px; }
.yt-aspect {
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.yt-aspect iframe {
  position:absolute; inset:0; width:100%; height:100%;
}
.yt-featured-title {
  font-size:1rem; margin:10px 2px 0; opacity:.85; color:#222;
}

/* сетка */
.youtube-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.yt-card {
  cursor:pointer;
  border:2px solid transparent;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease, border-color .15s ease;
}
.yt-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.yt-card.is-active { border-color: var(--morze-bg); }
.yt-card img { width:100%; display:block; }
.yt-card h4 {
  font-size:.95rem;
  line-height:1.25;
  padding:10px 12px 12px;
  color:#111;
}

#youtube { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (max-width:768px) {
  #youtube { scroll-margin-top: calc(var(--m-header-h) + 12px); }
}