/*
Theme Name: BeerSocial
Theme URI:  https://example.com
Author:      You
Author URI:  https://example.com
Description: Тема на основе присланного HTML (Beer & Bones — Beer). Статический макет преобразован в WP-шаблон.
Version:     1.0
License:     GNU General Public License v2 or later
Text Domain: beersocial
*/
:root{
  --bg: #0f1116;
  --surface: #151923;
  --text: #e7e9ee;
  --muted: #9aa2af;
  --border: #262c3a;
  --brand: #f5c518;
}
html.light{
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --brand: #d09b00;
}
html { background: var(--bg); color: var(--text); font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
a{ color:inherit; text-decoration:none; }
.surface { background: var(--surface); border:1px solid var(--border); color: var(--text); }
.muted { color: var(--muted); }
.brand { color: #000; }
.focus-ring:focus { outline: 3px solid rgba(59,130,246,0.35); outline-offset: 2px; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.header-row, .footer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; }
    .header-logo {
      font-weight: 900;
      letter-spacing: 0.002em;
      font-size: 1.25rem; /* можно подогнать под макет */
    }
.logo { font-weight:800; font-size:20px; }
.surface.rounded { border-radius:12px; }
.header-surface { position: sticky; top:0; z-index:60; }
.hero { display:grid; grid-template-columns: 1fr 320px; gap:18px; padding:18px; align-items:center; }
.logo-160 {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* картинка заполняет квадрат */
  display: block;
  border-radius: 12px; /* совпадает с контейнером */
}

@media (max-width:880px){ .hero { grid-template-columns: 1fr; } .menu-table{display:none;} .menu-cards{display:grid;} .hide-sm{display:none;} }
.placeholder {
  width:160px; height:160px; background:#8b8f96; border-radius:12px; display:block;
  object-fit:cover;
}
.avatar{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:#ccc; }
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.18rem .5rem; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge.gold{ background:linear-gradient(90deg,#ffd66b,#f3b034); color:#111827; }
.small-muted{ font-size:.85rem; color:var(--muted); }
@media (max-width:480px){ .container{ padding:12px; } .hero { gap:12px; } }

/* === FIX: Admin-bar overlap === */
body.admin-bar #wot-header,
body.admin-bar .header-surface {
  top: 32px; /* высота админ-бара на десктопе */
}

@media screen and (max-width: 782px) {
  body.admin-bar #wot-header,
  body.admin-bar .header-surface {
    top: 46px; /* высота админ-бара на мобильных */
  }
}

body.admin-bar #wot-header-spacer {
  height: calc(72px + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar #wot-header-spacer {
    height: calc(72px + 46px);
  }
}