/* Дополнения темы к дизайн-системе bestiebrief.css: шрифты, тёмная тема, обвязка WordPress */

/* ---------- Шрифты (свои, latin, variable) ---------- */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2"); }

/* ---------- Тёмная тема по системе ----------
   В дизайне блок prefers-color-scheme не переводит оттенки разделов, статусы и тени. */
@media (prefers-color-scheme: dark) {
  body { background: #1c1218; }
  .bb:not([data-theme]) {
    --bb-green: #8fdcb0; --bb-green-bg: #17301f;
    --bb-red: #ff9fae;   --bb-red-bg: #3a1a20;
    --bb-amber: #ffd48a; --bb-amber-bg: #33270f;
    --bb-tint-glow-bg: #3a2219;    --bb-tint-glow-ink: #ffb894;
    --bb-tint-friends-bg: #352c16; --bb-tint-friends-ink: #ffd77a;
    --bb-tint-crush-bg: #3d1a28;   --bb-tint-crush-ink: #ff9ebd;
    --bb-tint-family-bg: #1c2f22;  --bb-tint-family-ink: #9fd8a8;
    --bb-tint-mind-bg: #2a2240;    --bb-tint-mind-ink: #c7b5ff;
    --bb-tint-money-bg: #16302a;   --bb-tint-money-ink: #8fdcc2;
    --bb-tint-become-bg: #182a3d;  --bb-tint-become-ink: #9cc8ff;
    --bb-tint-quizzes-bg: #351c35; --bb-tint-quizzes-ink: #f2a6e8;
    --bb-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --bb-shadow-2: 0 10px 28px rgba(0, 0, 0, .35);
    --bb-shadow-3: 0 20px 48px rgba(0, 0, 0, .5);
  }
}

/* ---------- Каркас ---------- */
.bb .bb-skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--bb-radius-pill);
  background: var(--bb-pink-700); color: var(--bb-on-pink-700); font-weight: 700; text-decoration: none; }
.bb .bb-skip:focus { top: 8px; }
.admin-bar .bb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .bb-header { top: 0; } }
.bb-footer a { color: inherit; }
.bb-footer ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Мобильное меню: выезжающая панель ---------- */
.bb-drawer { position: fixed; inset: 0; z-index: 40; display: none; }
.bb-drawer[data-open] { display: block; }
.bb-drawer__scrim { position: absolute; inset: 0; background: rgba(28, 18, 24, .45); border: 0; width: 100%; cursor: pointer; }
.bb-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); overflow-y: auto;
  background: var(--bb-bg); box-shadow: var(--bb-shadow-3); padding: 12px var(--bb-gutter) 32px;
  display: flex; flex-direction: column; gap: 20px; animation: bb-slide .22s var(--bb-ease); }
@keyframes bb-slide { from { transform: translateX(100%); } }
.bb-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.bb-drawer__sections { display: flex; flex-direction: column; gap: 2px; }
.bb-drawer__sections a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--bb-radius-md);
  color: var(--bb-ink); text-decoration: none; font-weight: 650; }
.bb-drawer__sections a .bb-i { color: var(--bb-tint-ink); }
.bb-drawer__sections a:hover, .bb-drawer__sections a[aria-current="page"] { background: var(--bb-tint); }
.bb-drawer__more { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--bb-line); padding-top: 16px; font-size: var(--bb-text-sm); }
.bb-drawer__more a { color: var(--bb-muted); text-decoration: none; padding: 6px 12px; }
html.bb-locked { overflow: hidden; }

/* ---------- Медиа: картинка заполняет рамку, заглушка без текста ---------- */
.bb-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-media--blank { background: linear-gradient(135deg, var(--bb-tint), var(--bb-pink-wash)); }

/* ---------- Содержимое записи из редактора ---------- */
.bb-prose > * { margin: 0; }
.bb-prose img, .bb-prose figure { max-width: 100%; height: auto; }
.bb-prose figure { display: flex; flex-direction: column; gap: 8px; }
.bb-prose figure img { border-radius: var(--bb-radius-lg); }
.bb-prose figcaption, .bb-prose .wp-caption-text { font-size: var(--bb-text-xs); color: var(--bb-muted); }
.bb-prose blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--bb-pink); font-family: var(--bb-font-display); font-style: italic; font-size: 1.3em; line-height: 1.35; }
.bb-prose .bb-compare { margin: 0; }
.bb-prose iframe { max-width: 100%; }
.bb-prose .alignleft, .bb-prose .alignright, .bb-prose .aligncenter { float: none; margin-inline: auto; }

/* ---------- Простые страницы ---------- */
.bb-page-header { display: flex; flex-direction: column; gap: 12px; padding-block: var(--bb-space-7) var(--bb-space-5); }
.bb-page-header__dek { font-size: var(--bb-text-lg); color: var(--bb-muted); max-width: var(--bb-measure); }
.bb-empty { padding: var(--bb-space-6); text-align: center; color: var(--bb-muted); border: 1px dashed var(--bb-line-strong); border-radius: var(--bb-radius-lg); }

/* Кнопка Pinterest ссылкой: общий цвет ссылок .bb a перекрывал белый текст */
.bb a.bb-share-bar__pin, .bb a.bb-share-bar__pin:hover { color: var(--bb-on-pink-700); }

/* Навигация: общий цвет ссылок .bb a перекрывал цвет пунктов */
.bb a.bb-nav__link { color: var(--bb-ink); }
.bb a.bb-nav__link[aria-current="page"] { color: var(--bb-tint-ink); }
.admin-bar .bb-drawer__panel { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-drawer__panel { top: 46px; } }

/* ---------- Квиз ---------- */
[data-bb-quiz] [hidden], [data-bb-sitter] [hidden] { display: none !important; }
.bb-quiz-card .bb-quiz__q:focus { outline: none; }
.bb-result-hero__title:focus { outline: none; }
.bb-progress__top > span:first-child { flex: none; white-space: nowrap; }
.bb-quiz-option--image .bb-media { box-shadow: inset 0 0 0 1px var(--bb-line); }
.bb-progress__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin-left: 12px; }
.bb-quiz-option--image .bb-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Мини-превью карточек в блоке «Share your result» */
.bb-share-mini { width: 108px; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; box-shadow: var(--bb-shadow-2); }
.bb-share-mini--story { aspect-ratio: 9 / 16; background: #ffd6e2; color: #2b1b24; }
.bb-share-mini--square { aspect-ratio: 1 / 1; background: #2b1b24; color: #fff6f8; }
.bb-share-mini__brand { font-size: 7px; font-weight: 800; position: relative; }
.bb-share-mini__title { font-family: var(--bb-font-display); font-style: italic; font-weight: 600; font-size: 17px; line-height: 1; position: relative; }
.bb-share-mini--square .bb-share-mini__title { font-size: 15px; color: #ff8fb0; }
.bb-share-mini__star { position: absolute; width: 40px; height: 40px; right: 10px; top: 46px; background: #ff5c8a;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* Кнопки-<button>: в дизайне .bb button { font: inherit; color: inherit } сильнее классов .bb-btn*, текст был цветом,
   весом и размером страницы */
.bb button.bb-btn { font-weight: 700; font-size: var(--bb-text-sm); line-height: 1; }
.bb button.bb-btn--lg { font-size: var(--bb-text-base); }
.bb button.bb-btn--sm { font-size: var(--bb-text-xs); }
.bb button.bb-quiz-option { font-size: var(--bb-text-lg); font-weight: 650; line-height: 1.3; }
.bb button.bb-quiz-option--image { font-size: var(--bb-text-base); }
.bb button.bb-chip { font-size: var(--bb-text-sm); font-weight: 600; color: var(--bb-ink); }
.bb .bb-chip[aria-pressed="true"], .bb .bb-chip.is-active { color: var(--bb-bg); } /* и для <a>: .bb a.bb-chip из дизайна перебивал */
.bb button.bb-icon-btn { color: var(--bb-ink); }
.bb button.bb-tot__choice { font-family: var(--bb-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.1; }
.bb button.bb-btn--primary { color: var(--bb-on-pink-700); }
.bb button.bb-btn--pink { color: var(--bb-on-pink); }
.bb button.bb-btn--secondary { color: var(--bb-ink); }
.bb button.bb-btn--ghost { color: var(--bb-link); }
.bb button.bb-btn--success, .bb button.bb-btn.is-copied { color: var(--bb-green); }
.bb button.bb-btn:disabled, .bb button.bb-btn.is-disabled { color: var(--bb-muted); }

/* This or That: карточки без фото, слово крупно внутри цветного блока */
.bb-tot__choice .bb-media:has(.bb-tot__word) { display: grid; place-items: center; padding: 14px; aspect-ratio: 4 / 5; }
.bb-tot__choices:has(.bb-tot__word) { max-width: 760px; width: 100%; margin-inline: auto; }
@media (min-width: 700px) { .bb-tot__choice .bb-media:has(.bb-tot__word) { aspect-ratio: 1; } }
.bb-tot__word { font-family: var(--bb-font-display); font-weight: 600; font-size: clamp(1.4rem, 1rem + 2.4vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.bb-tot__choice.is-picked { border-color: var(--bb-pink-700); transform: scale(.98); }
.bb-tot__choice .bb-media img { width: 100%; height: 100%; object-fit: cover; }
[data-bb-tot] h2:focus { outline: none; }
.bb-tot-score { font-size: 19px; position: relative; }
.bb-tot-score b { color: var(--bb-pink-700); }
.bb-prose .bb-tot-list { columns: 2 260px; column-gap: 32px; }
.bb-prose .bb-tot-list li { break-inside: avoid; }

/* Калькулятор внутри колонки статьи: она уже макета, крупная цифра и «/hour» должны остаться в строку */
.bb-prose .bb-tool-result__big { font-size: clamp(2.5rem, 1.8rem + 2vw, 3.25rem); white-space: nowrap; }

/* Галерея pfp: картинки в круге, скрытые фильтром пары */
.bb-pfp-pair__img .bb-media img { width: 100%; height: 100%; object-fit: cover; }
[data-bb-pfp] [hidden], [data-bb-pfp-filter][hidden], [data-bb-pfp-more][hidden] { display: none !important; }

/* Печатный лист в статье ([bb_printable]): превью листа на подложке раздела, справа заголовок и кнопка */
.bb-printable { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-radius-xl); padding: 18px; box-shadow: var(--bb-shadow-2); }
.bb-printable__art { background: var(--bb-tint); border-radius: var(--bb-radius-lg); padding: 24px 20px 28px; display: grid; place-items: center; }
.bb-printable__art img.bb-printable__img { width: min(220px, 100%); height: auto; border-radius: 6px; box-shadow: var(--bb-shadow-3); transform: rotate(-2deg); }
.bb-printable__body { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bb-prose .bb-printable__title { font-family: var(--bb-font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.bb-prose .bb-printable .bb-btn { align-self: flex-start; text-decoration: none; }
@media (min-width: 700px) { .bb-printable { grid-template-columns: 240px minmax(0, 1fr); padding: 22px; } }

/* Служебные страницы: карточки обещаний на About, крупный адрес на Contact */
.bb-prose .bb-promises { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.bb-prose .bb-promise { background: var(--bb-surface); border: 1px solid var(--bb-line); border-top: 6px solid var(--bb-tint); border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.bb-prose .bb-promise h3 { font-size: 22px; margin: 0; }
.bb-prose .bb-promise p { font-size: 16px; line-height: 1.5; }
.bb-prose .bb-contact-email { font-family: var(--bb-font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }

/* Подвал на телефоне: вторая колонка разделов встаёт под первую, пустой заголовок-распорка и отступ сетки давали дыру */
@media (max-width: 423px) { /* одна колонка: 2 x 180px + 32px отступ + 2 x 16px поля не влезают */
  .bb-footer__title--spacer { display: none; }
  .bb-footer nav[aria-label="More sections"] { margin-top: calc(-1 * var(--bb-space-6)); }
}