/* VR Parque — применение фирменного стиля (VR-PARQUE-brand-guidelines.md).
   Синий #0066FF — основной акцент, красный #DF0024 — второй, для CTA.
   Красный НЕ убираем: по гайдлайнам акценты идут парно. */

@font-face{font-family:'Tactic Sans';src:url('/wp-content/uploads/2026/07/font/vrp-tactic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Tactic Sans';src:url('/wp-content/uploads/2026/07/font/vrp-tactic-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Tactic Sans';src:url('/wp-content/uploads/2026/07/font/vrp-tactic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Tactic Sans';src:url('/wp-content/uploads/2026/07/font/vrp-tactic-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  --vrp-blue:#0066FF;
  --vrp-red:#DF0024;
  --vrp-bg:#070707;
  --vrp-card:#2B2B2F;
}

/* 2. Шрифт: заголовки — Black/Bold, текст — Regular/Medium */
body,button,input,select,textarea,.fr-btn,.container{
  font-family:'Tactic Sans',Arial,Helvetica,system-ui,sans-serif !important;
}
h1,h2,h3,h4,h5,h6,
.fr-block-title,.fr-fr3-block-title,.fr-game-archive-title,.block-title{
  font-family:'Tactic Sans',Arial,Helvetica,sans-serif !important;
  font-weight:900 !important;
}
.fr-btn,.b-btn a,.block-btn a{font-weight:700 !important}

/* 1. Палитра: точный фирменный красный вместо близких оттенков темы */
.fr-btn.red,.fr-btn-border-gradient,.b-btn .fr-btn.red{background-color:var(--vrp-red) !important}
.fr-btn.red:hover{background-color:#c50020 !important}
/* ВНИМАНИЕ: только заголовки. Раньше здесь был селектор `.red>span` — он попадал
   и в кнопку `<a class="fr-btn red"><span>Reservar</span></a>`, красил подпись
   в красный на красном фоне, и текст пропадал. */
.fr-fr3-block-title.red span,.fr-block-title.red span,
h1.red span,h2.red span,h3.red span{color:var(--vrp-red) !important}

/* подписи на залитых кнопках всегда белые */
.fr-btn.red,.fr-btn.red span,.fr-btn.blue,.fr-btn.blue span,
.fr-btn-border-gradient,.fr-btn-border-gradient span{color:#fff !important}

/* синий — ссылки и вторичные акценты (кнопки CTA остаются красными) */
a:not(.fr-btn):not([class*=btn]):hover{color:var(--vrp-blue) !important}
.fr-btn.blue,.fr-btn-border.blue{background-color:var(--vrp-blue) !important;border-color:var(--vrp-blue) !important}
.fr-btn.fr-btn-border:hover{border-color:var(--vrp-blue) !important;color:var(--vrp-blue) !important}

/* 4. Формы: кнопки-«таблетки» 53–78 px, карточки 10–20 px */
.fr-btn,.fr-btn-border,.fr-btn-border-gradient,button.fr-btn,.b-btn a,.block-btn a{
  border-radius:60px !important;
}
.fr-grid-fr3-games .fr3-games--item,.ct3-grid-cate--item,.fr-arena-price--item,
.brth3-info-list--item,.fr-faq--item,.vrp-rev__card,.fr-single-news{
  border-radius:16px !important;
}

/* 5. Фон по гайдлайнам */
body,.fr-template{background-color:var(--vrp-bg) !important}

/* ── Читаемость и попадание по элементам ──────────────────────────────
   ВАЖНО: эти размеры рассчитаны под ДЕСКТОП, где макет показывается с zoom .75
   (59 px в стилях = 44 px на экране). На мобильном зума нет, поэтому блок
   ограничен min-width:1024px — иначе шапка раздувается, а телефон переносится
   на несколько строк. Мобильные значения — отдельным блоком ниже. */
@media (min-width:1024px){
  /* соцсети в шапке: были 13–14 px в макете (≈10 px на экране) */
  .fr-headbar-social a,.b-social a,.fr-social a{
    width:58px !important;height:58px !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    border-radius:50%;transition:background .15s;
  }
  .fr-headbar-social a img,.fr-headbar-social a svg,
  .b-social a img,.b-social a svg,.fr-social a img,.fr-social a svg{
    width:30px !important;height:30px !important;
  }
  .fr-headbar-social a:hover,.b-social a:hover{background:rgba(255,255,255,.10)}

  /* пункты меню были высотой 11 px */
  .menu-item>a,.lang-item>a,.fr-headbar-row .menu-item>a{
    padding:18px 8px !important;display:inline-block !important;
    font-size:17px !important;line-height:1.2 !important;
  }

  .fr-headbar .fr-btn,.fr-headbar-row .fr-btn{min-height:59px !important;
    display:inline-flex !important;align-items:center;justify-content:center}
  .owl-prev,.owl-next{min-width:59px !important;min-height:59px !important;
    display:inline-flex !important;align-items:center;justify-content:center}
  .b-offcanvas-btn,.js-offcanvas-close{min-width:59px !important;min-height:59px !important;
    display:inline-flex !important;align-items:center;justify-content:center}
  .widget-whatsapp,.widget-phone,.widget-up{min-width:68px !important;min-height:68px !important}

  /* телефон в шапке был высотой 12 px */
  .b-phone,.b-phone a{padding:16px 4px !important;display:inline-block !important;font-size:19px !important}

  /* описания и подписи: 16 px в макете давали 12 px на экране */
  .fr-caption,.desc,.b-content .desc,.fr-arena-price--item .name,
  .ct3-grid-cate--item .desc,.brth3-info-list--item .desc{
    font-size:21px !important;line-height:1.5 !important;
  }
}

/* ── Мобильная шапка ──────────────────────────────────────────────────
   Здесь зума нет, размеры берём натуральные. Телефон держим в одну строку:
   без nowrap он разрывался на «+55 / 48 / 99195 / 1144». */
@media (max-width:1023px){
  .b-phone,.b-phone a{
    padding:6px 2px !important;font-size:15px !important;
    white-space:nowrap !important;display:inline-block !important;
  }
  .menu-item>a,.lang-item>a{padding:12px 8px !important;font-size:16px !important}
  .b-offcanvas-btn,.js-offcanvas-close{min-width:44px !important;min-height:44px !important;
    display:inline-flex !important;align-items:center;justify-content:center}
  .widget-whatsapp,.widget-phone,.widget-up{min-width:46px !important;min-height:46px !important}
  .fr-headbar-social a{width:44px !important;height:44px !important;
    display:inline-flex !important;align-items:center;justify-content:center}
  .fr-headbar-social a img,.fr-headbar-social a svg{width:24px !important;height:24px !important}
}

/* заголовки разделов — крупнее, как просит брендбук («крупные, жирные, белым») */
h2,.fr-fr3-block-title{font-size:68px !important;line-height:1.05 !important}
.fr-fr3-block-title--big{font-size:76px !important}

/* Исключение: H2 внутри ТЕКСТА (страница игры, статья блога). 68 px рассчитаны
   на секции лендинга, где H2 — заголовок целого экрана. В статье H1 равен 35–36 px,
   и подзаголовок вдвое крупнее заголовка переворачивает иерархию.
   Специфичность выше общего правила, поэтому побеждает при равном !important. */
.game-descr h2,.fr-single-post__content h2{
  font-size:30px !important;line-height:1.2 !important;margin:34px 0 12px !important;
}
.fr-single-post__content h3{
  font-size:22px !important;line-height:1.25 !important;margin:24px 0 8px !important;
}
/* На мобильном H1 темы = 34 px. При H2 в 30 px разрыв всего 4 px — уровни
   перестают читаться как уровни. Сжимаем подзаголовки сильнее. */
@media (max-width:1023px){
  .game-descr h2,.fr-single-post__content h2{font-size:24px !important;margin:28px 0 10px !important}
  .fr-single-post__content h3{font-size:19px !important}
}

/* длинные статьи: колонка текста и воздух между абзацами */
.fr-single-post__content p{margin:0 0 16px !important}
.fr-single-post__content ul,.fr-single-post__content ol{margin:0 0 18px 22px !important}
.fr-single-post__content li{margin:0 0 8px !important}
/* На мобильном H1 у темы 30 px. Если оставить h2 крупнее — иерархия переворачивается,
   раздел выглядит важнее страницы. Держим H1 > h2. */
@media (max-width:1023px){
  h1,.fr-block-title{font-size:34px !important;line-height:1.1 !important}
  h2,.fr-fr3-block-title{font-size:27px !important}
  .fr-fr3-block-title--big{font-size:29px !important}
  .fr-caption,.desc,.b-content .desc{font-size:17px !important}
}

/* описания и подписи: 16 px в макете давали 12 px на экране */
.fr-caption,.desc,.b-content .desc,.fr-arena-price--item .name,
.ct3-grid-cate--item .desc,.brth3-info-list--item .desc{
  font-size:21px !important;line-height:1.5 !important;
}