/*
Theme Name: Cheers to Good Beers
Theme URI: https://example.com
Author: Chris
Description: A full custom WordPress theme with a live GUI customizer and a complete beer-rating system. Uses the original "Cheers to Good Beers" app's exact stylesheet, colours, fonts and component classes.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cheers
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Karla:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
/* Fonts are ALSO loaded via a real <link> tag in functions.php (cheers_assets) —
   the @import above is a fallback only. Some caching/optimization plugins strip
   @import statements from CSS, which silently breaks font loading, so the <link>
   is the one that actually matters in production. */

/* =====================================================================
   Everything below this line is the ORIGINAL APP'S STYLESHEET, verbatim,
   ported unchanged from the source app so the WordPress site matches it
   exactly. Only two changes: `.app` also gets html-level sizing since
   it's now the real page body (not a bounded artifact iframe), and the
   `.nav__*--desktop` visibility rules are adjusted for a full-width
   browser window instead of the app's fixed-width preview pane.
   ===================================================================== */

.app {
  --malt-950:#160F09; --malt-900:#1E140C; --malt-800:#2B1C11; --malt-700:#3B2716;
  --copper-500:#C97C3A; --copper-400:#DE9A5C; --copper-300:#EFC08A;
  --hop-600:#6E7F3F; --hop-700:#54622F; --hop-100:#E9ECDA;
  --gold-400:#E8B54A; --gold-300:#F2CC7A;
  --foam-50:#FBF6EC; --foam-100:#F3E8D3;
  --ink-900:#241811; --ink-700:#4A362A; --ink-500:#7C6A57;
  --line:#E3D5BE; --danger:#B4462A;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-family: 'Karla', sans-serif;
  background: var(--foam-50);
  color: var(--ink-900);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  container-name: app-root;
}
html, body { display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; background: var(--foam-50) !important; font-family: 'Karla', sans-serif; overflow-x: clip; }
.app * { box-sizing: border-box; }
.app h1, .app h2, .app h3 { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 0.02em; line-height: 1.02; font-weight: 400; margin: 0; }
.app button, .app input, .app select, .app textarea { font-family: inherit; color: inherit; }
.app button { cursor: pointer; }
.app a { color: inherit; text-decoration:none; }
@media (prefers-reduced-motion: reduce) { .app * { animation: none !important; transition: none !important; } }

/* ---------- layout helpers ---------- */
.page { display:block; width:100%; box-sizing:border-box; max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px; }
.page-enter { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
.page__header { margin-bottom: 28px; }
.page__header h1 { font-size: 44px; color: var(--malt-900); }
.page__header p { color: var(--ink-500); margin-top: 6px; }
.section { max-width: 1180px; margin: 0 auto; padding: 8px 24px 32px; }
.section__header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 18px; }
.section__header h2 { font-size: 30px; color: var(--malt-900); }
.link-btn { background:none; border:none; color: var(--copper-500); font-weight:700; padding:0; cursor:pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---------- nav ---------- */
.nav { position: sticky; top:0; z-index: 40; width:100%; background: var(--malt-950); border-bottom: 3px solid var(--copper-500); }
.nav__inner { max-width: 1180px; margin:0 auto; padding: 4px 24px 0; display:flex; align-items:center; gap: 22px; }
.nav__logo { display:flex; align-items:center; background:none; border:none; padding: 8px 0; }
.nav__logo-img { width:auto; object-fit: contain; flex-shrink: 0; }
.nav__logo-img--wide { height: 90px; display:block; }
.nav__logo-img--compact { height: 56px; display:none; }
/* Menu is ALWAYS the burger — desktop links/search/actions are permanently
   hidden regardless of screen size, and the nav bar (plus its dropdown) is
   full-bleed edge-to-edge so the dark background never breaks. */
.nav__links--desktop, .nav__actions--desktop, .nav__search--desktop { display:none !important; }
.nav__burger { display:flex; align-items:center; justify-content:center; margin-left:auto; width:40px; height:40px; background: var(--copper-500); border:1px solid var(--copper-500); border-radius:9px; color: #fff; flex-shrink:0; }
.nav__burger:hover { background: var(--copper-400); border-color: var(--copper-400); }
.nav__burger svg { display:block; }
.nav__link { background:none; border:none; color: var(--foam-100); opacity:.75; font-weight:600; font-size:14px; padding: 8px 10px; border-radius:6px; position:relative; transition: opacity .2s, background .2s; text-decoration:none; display:inline-block; }
.nav__link:hover { opacity:1; background: rgba(255,255,255,.06); }
.nav__link--active { opacity:1; color: var(--gold-300); }
.nav__link--active::after { content:''; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background: var(--gold-300); border-radius:2px; }
.nav__search { flex:1; display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px 12px; color: var(--foam-100); max-width: 360px; transition: border-color .2s, background .2s; }
.nav__search:focus-within { border-color: var(--copper-400); background: rgba(255,255,255,.13); }
.nav__search input { background:none; border:none; outline:none; color: var(--foam-50); width:100%; font-size:14px; }
.nav__search input::placeholder { color: rgba(255,255,255,.45); }
.nav__user { display:flex; align-items:center; gap:6px; background:none; border:1px solid rgba(255,255,255,.2); color: var(--foam-100); padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; }
.nav__user:hover { border-color: var(--copper-400); color: var(--gold-300); }
.nav__signin { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; padding: 11px 18px; font-weight:700; font-size:14px; background: var(--copper-500) !important; color: #FFFFFF !important; border: 1.5px solid var(--copper-500); cursor:pointer; text-decoration:none; }
.nav__signin:hover { background: var(--copper-400) !important; border-color: var(--copper-400); }
.nav__mobile { display:none; flex-direction:column; gap:10px; padding: 14px 20px 20px; background: var(--malt-950); border-top: 1px solid rgba(255,255,255,.1); }
.nav__mobile .nav__link { text-align:left; color: var(--foam-100); }
.nav__mobile .nav__search { max-width:none; }
.nav.is-open .nav__mobile { display:flex; }

@media (max-width: 480px) {
  .nav__logo-img--wide { display:none; }
  .nav__logo-img--compact { display:block; }
}

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; padding: 11px 18px; font-weight:700; font-size:14px; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .2s, border-color .2s; cursor:pointer; text-decoration:none; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--copper-500); color: #fff; box-shadow: 0 2px 0 var(--malt-700); }
.btn--primary:hover { background: var(--copper-400); color:#fff; }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink-700); }
.btn--outline:hover { border-color: var(--copper-500); color: var(--copper-500); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color:#fff; }
.btn--ghost-on-dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); color: var(--foam-50); }
.btn--ghost-on-dark:hover { background: rgba(255,255,255,.15); border-color: var(--gold-300); }
.btn--sm { padding: 8px 13px; font-size: 13px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- hero ---------- */
.hero { width:100%; background: var(--malt-950); color: var(--foam-50); }
.hero__row { display:grid; grid-template-columns: 0.85fr 1.15fr; max-width: 1180px; margin: 0 auto; }
.hero__content { padding: 72px 48px; display:flex; flex-direction:column; justify-content:center; }
.hero__eyebrow { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-300); margin-bottom: 18px; }
.hero__title { font-size: 76px; color: var(--foam-50); margin-bottom: 18px; }
.hero__sub { color: var(--foam-100); opacity:.8; font-size:16px; max-width: 460px; margin-bottom: 26px; }
.hero__search { display:flex; align-items:center; gap:10px; max-width: 480px; margin-bottom: 20px; }
.hero__search-icon { color: rgba(255,255,255,.6); flex-shrink:0; font-size:16px; }
.hero__search input { flex:1; background:#fff; color: var(--ink-900); border:none; outline:none; border-radius: 9px; padding: 12px 14px; font-size:15px; }
.hero__search input::placeholder { color: var(--ink-500); }
.hero__search button { flex-shrink:0; }
.hero__cta-row { display:flex; gap: 10px; flex-wrap: nowrap; }
.hero__panel { display:flex; align-items:flex-start; justify-content:center; padding: 20px; padding-top: 4px; min-width:0; overflow:visible; }
.hero__logo { width: 100%; max-width:560px; height: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); animation: heroLogoIn .6s ease both; }
@keyframes heroLogoIn { from { opacity:0; transform: scale(.92); } to { opacity:1; transform: scale(1); } }

@container app-root (max-width: 900px) {
  .hero__content { padding: 56px 32px; }
  .hero__title { font-size: 54px; }
  .hero__panel { padding-top: 4px; }
}
@container app-root (max-width: 560px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__content { padding: 48px 22px 36px; }
  .hero__title { font-size: 52px; }
  .hero__panel { display:none; }
  .hero__cta-row .btn { padding: 10px 12px; font-size: 12.5px; }
}

/* ---------- ledger stats ---------- */
.ledger-stats { max-width:1180px; margin: 32px auto 32px; padding: 0 24px; display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; position:relative; z-index:2; }
.ledger-stats--tight { margin: 0 0 30px; padding:0; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius: 12px; padding: 18px; display:flex; flex-direction:column; gap:4px; box-shadow: 0 8px 20px rgba(43,28,17,.06); }
.stat-card__num { font-family:'Bebas Neue',sans-serif; font-size: 34px; color: var(--copper-500); }
.stat-card__label { font-size: 12.5px; color: var(--ink-500); font-weight:600; }
@container app-root (max-width: 700px) { .ledger-stats { grid-template-columns: repeat(2,1fr); } }

/* ---------- grid & beer card ---------- */
.grid { display:grid; width:100%; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@container app-root (max-width: 900px) { .grid { gap: 12px; } }
@container app-root (max-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@container app-root (max-width: 400px) { .grid { grid-template-columns: 1fr; } }
.featured-extra.beer-card { display: flex; }
@container app-root (max-width: 900px) { .featured-extra.beer-card { display: none; } }

.beer-card { text-align:left; background:#fff; border:1px solid var(--line); border-radius: 14px; overflow:hidden; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.beer-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(43,28,17,.14); border-color: var(--copper-300); }
.beer-card__photo { width:100%; }
.beer-card__body { padding: 14px 16px 18px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.beer-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.abv { font-family:'JetBrains Mono',monospace; font-size: 12px; color: var(--ink-500); display:flex; align-items:center; gap:2px; }
.beer-card__name { font-size: 22px; color: var(--malt-900); overflow-wrap: break-word; word-break: break-word; }
.beer-card__meta { font-size: 12.5px; color: var(--ink-500); display:flex; align-items:center; gap:4px; }
.beer-card__meta span { display:flex; align-items:center; gap:4px; }

.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing:.03em; padding: 4px 9px; border-radius: 999px; white-space:nowrap; max-width: 100%; min-width: 0; overflow:hidden; text-overflow: ellipsis; flex-shrink: 1; color:#fff; display:inline-block; }

.photo-img, .photo-placeholder { width:100%; height:100%; object-fit: contain; display:block; background: var(--foam-100); image-orientation: from-image; }
.photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding: 16px; box-sizing: border-box; }
.photo-placeholder span { font-family:'JetBrains Mono',monospace; font-size: 11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#fff; text-align:center; }
.photo-img.beer-card__photo, .photo-placeholder.beer-card__photo { height: 140px; }
.photo-img.beer-card__photo--compact, .photo-placeholder.beer-card__photo--compact { height: 280px; }
.photo-img.beer-card__photo--compact { object-fit: contain; background: var(--foam-100); padding: 20px; box-sizing: border-box; }

/* ---------- bottle-cap rating ---------- */
.cap-rating { display:inline-flex; align-items:center; gap: 3px; }
.cap-rating__num { font-family:'JetBrains Mono',monospace; font-size: 13px; color: var(--ink-500); margin-left: 6px; }
.cap { display:inline-block; }
.cap__crown { fill:none; stroke: var(--ink-500); stroke-width: 1.4; stroke-linejoin: round; }
.cap__face { fill: var(--foam-50); }
.cap__face--filled { fill: var(--copper-500); }
.cap__shine { fill: var(--foam-50); opacity: .85; }
.cap__handle { fill:none; stroke: var(--ink-500); stroke-width: 1.4; stroke-linecap: round; }

/* ---------- filters bar ---------- */
.filters-bar { display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; gap: 12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding: 12px 14px; margin-bottom: 24px; }
.filters-bar__search { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; flex:1; min-width:200px; }
.filters-bar__search input[type=search] { border:none; outline:none; background:none; font-size:14px; width:100%; }
.filters-bar__group { display:flex; align-items:center; gap:8px; color: var(--ink-500); }
.app select, .app input[type=text], .app input[type=number], .app input[type=search], .app textarea, .app input:not([type]) {
  border:1px solid var(--line); border-radius:8px; padding: 8px 10px; font-size: 13.5px; background:#fff; outline:none; transition: border-color .2s;
}
.app select:focus, .app input:focus, .app textarea:focus { border-color: var(--copper-500); }

/* ---------- empty state ---------- */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding: 60px 20px; color: var(--ink-500); background:#fff; border:1px dashed var(--line); border-radius:14px; }
.empty-state--gate { max-width: 420px; margin: 0 auto; }

/* ---------- pagination ---------- */
.pagination { display:flex; align-items:center; justify-content:center; gap:20px; margin: 32px 0 10px; }
.pagination__link { font-weight:700; color: var(--copper-500); text-decoration:none; }
.pagination__link:hover { text-decoration:underline; }
.pagination__status { color: var(--ink-500); font-size:13.5px; font-family:'JetBrains Mono',monospace; }

/* ---------- detail page ---------- */
.back-btn { display:inline-flex; align-items:center; gap:4px; margin-bottom: 18px; color: var(--copper-500); font-weight:700; }
.detail { display:flex; align-items:flex-start; gap: 40px; }
.detail__info { flex:1; min-width:0; order:1; overflow-wrap:break-word; }
.detail__photo { border-radius: 16px; flex-shrink:0; order:2; width: 280px; }
.photo-lightbox-trigger { all: unset; box-sizing: border-box; display:block; width:100%; height:100%; cursor: zoom-in; border-radius: inherit; overflow: hidden; }
.photo-lightbox-trigger:hover img { filter: brightness(0.92); }
.photo-img.detail__photo, .photo-placeholder.detail__photo { height: 280px; }
.photo-img.detail__photo { object-fit: contain; background: var(--foam-100); padding: 20px; box-sizing: border-box; }
.detail__top { display:flex; align-items:center; gap:12px; margin-bottom: 10px; flex-wrap:wrap; }
.detail__country { display:flex; align-items:center; gap:4px; color: var(--ink-500); font-size:13px; }
.detail h1 { font-size: 54px; color: var(--malt-900); margin-bottom: 18px; overflow-wrap:break-word; }
.detail__stat-row { display:flex; align-items:center; flex-wrap:wrap; gap: 24px 40px; margin-bottom: 16px; }
.detail__stat { display:flex; flex-direction:column; gap:4px; }
.detail__stat-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-500); font-weight:700; }
.detail__stat-value { font-family:'JetBrains Mono',monospace; font-size: 22px; color: var(--copper-500); font-weight:600; }
.buy-again { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding: 7px 12px; border-radius: 999px; margin-bottom: 22px; }
.buy-again--yes { background: var(--hop-100); color: var(--hop-700); }
.buy-again--no { background: #F4E4DC; color: var(--danger); }
.disclosure-notice { background: var(--foam-100); border-left: 3px solid var(--copper-500); border-radius: 4px; padding: 14px 20px; margin-bottom: 22px; }
.disclosure-notice p { color: var(--ink-700); font-size: 13.5px; line-height:1.55; margin: 0; }
.detail__comments { background: var(--foam-100); border-left: 3px solid var(--copper-500); border-radius: 4px; padding: 16px 20px; margin-bottom: 18px; }
.detail__comments h3 { font-size: 20px; margin-bottom: 6px; color: var(--malt-900); }
.detail__comments p { color: var(--ink-700); line-height:1.55; }
.detail__meta-line { font-size:12px; color: var(--ink-500); margin-bottom: 22px; font-family:'JetBrains Mono',monospace; }
.detail__actions { display:flex; gap: 10px; flex-wrap:wrap; }

@container app-root (max-width: 760px) {
  .detail__photo { width: 200px; }
  .photo-img.detail__photo, .photo-placeholder.detail__photo { height: 200px; }
  .detail h1 { font-size: 42px; }
}
@container app-root (max-width: 560px) {
  .detail { flex-direction:column; }
  .detail__photo { order:1; width:100%; }
  .detail__info { order:2; }
  .photo-img.detail__photo, .photo-placeholder.detail__photo { height: 220px; }
  .detail h1 { font-size: 38px; }
}

/* ---------- form ---------- */
.form { background:#fff; border:1px solid var(--line); border-radius: 16px; padding: 30px; max-width: 720px; display:flex; flex-direction:column; gap: 20px; }
.form__row { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__field { display:flex; flex-direction:column; gap:6px; }
.form__field label { font-size: 12.5px; font-weight:700; color: var(--ink-700); text-transform:uppercase; letter-spacing:.03em; }
.form__error { font-size:12px; color: var(--danger); }
.input-suffix { display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.input-suffix input { border:none; flex:1; }
.input-suffix span { padding: 0 12px; color: var(--ink-500); font-family:'JetBrains Mono',monospace; }
.rating-input { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.rating-input input[type=number] { width: 90px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:600; }
.checkbox-row { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; }
.checkbox-row input { width:18px; height:18px; accent-color: var(--copper-500); }
.photo-upload { display:flex; align-items:center; gap: 16px; }
.photo-upload__preview { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; }
.photo-upload__empty { width:92px; height:92px; border-radius:10px; background: var(--foam-100); display:flex; align-items:center; justify-content:center; color: var(--ink-500); }
.photo-upload__controls { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.photo-upload__hint { font-size: 11.5px; color: var(--ink-500); font-family:'JetBrains Mono',monospace; }
.form__actions { display:flex; justify-content:flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
@container app-root (max-width: 600px){ .form__row{ grid-template-columns:1fr; } }

/* ---------- my ratings table ---------- */
.ratings-table { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ratings-table__head, .ratings-table__row { display:grid; grid-template-columns: 2fr 1fr 1.2fr .9fr .7fr; align-items:center; gap: 12px; padding: 12px 18px; }
.ratings-table__head { background: var(--foam-100); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-500); font-weight:700; }
.ratings-table__row { border-top: 1px solid var(--line); }
.ratings-table__name { display:flex; align-items:center; gap:10px; background:none; border:none; font-weight:700; color: var(--malt-900); text-align:left; text-decoration:none; }
.ratings-table__thumb { width: 40px; height:40px; border-radius:8px; flex-shrink:0; }
.ratings-table__actions { display:flex; gap:10px; justify-content:flex-end; }
.ratings-table__actions a, .ratings-table__actions button { background:none; border:none; color: var(--ink-500); text-decoration:none; font-weight:600; font-size:13px; cursor:pointer; }
.ratings-table__actions a:hover, .ratings-table__actions button:hover { color: var(--copper-500); }
@container app-root (max-width: 760px) {
  .ratings-table__head { display:none; }
  .ratings-table__row { grid-template-columns: 1fr; gap:8px; }
  .ratings-table__actions { justify-content:flex-start; }
}

/* ---------- footer ---------- */
/* ---------- comments ---------- */
.comments-section { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.comments-section__title { font-size: 26px; color: var(--malt-900); margin-bottom: 20px; }
.comments-section__closed { color: var(--ink-500); font-size: 14px; }

.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list .children { list-style: none; margin: 18px 0 0; padding: 0 0 0 32px; }
.comment { display:flex; gap:14px; padding: 18px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: none; }
.comment .avatar { border-radius: 50%; flex-shrink:0; display:block; }
.comment-body { flex:1; min-width:0; }
.comment-author { font-weight:700; color: var(--malt-900); font-size: 14.5px; }
.comment-author .says { display:none; }
.comment-metadata { font-size: 12px; color: var(--ink-500); font-family:'JetBrains Mono',monospace; margin-bottom: 8px; }
.comment-metadata a { color: inherit; }
.comment-content p { color: var(--ink-700); line-height:1.55; margin: 0 0 8px; }
.comment-content p:last-child { margin-bottom: 0; }
.comment-reply-link { font-size: 12.5px; font-weight:700; color: var(--copper-500); }
.comment-awaiting-moderation { display:block; font-size:12.5px; color: var(--copper-500); font-style:italic; margin-top:6px; }

.comment-respond { background:#fff; border:1px solid var(--line); border-radius:14px; padding: 26px; }
#reply-title { font-size: 22px; color: var(--malt-900); margin-bottom: 16px; }
#reply-title small a { font-size: 13px; font-weight:600; color: var(--copper-500); margin-left: 10px; }
.comment-form-comment label, .comment-form-author label, .comment-form-email label, .comment-form-url label {
	display:block; font-size: 12.5px; font-weight:700; color: var(--ink-700); text-transform:uppercase; letter-spacing:.03em; margin-bottom: 6px;
}
.comment-form-comment textarea, .comment-form-author input, .comment-form-email input, .comment-form-url input {
	width:100%; border:1px solid var(--line); border-radius:9px; padding:10px; font-family:inherit; font-size:14.5px;
}
.comment-form-comment textarea { min-height: 110px; margin-bottom: 16px; }
.comment-form-author, .comment-form-email, .comment-form-url { margin-bottom: 14px; }
.comment-notes, .logged-in-as { font-size: 13px; color: var(--ink-500); margin-bottom: 16px; }
.logged-in-as a { color: var(--copper-500); }
.form-submit { margin-top: 6px; }
.comment-navigation { display:flex; justify-content:space-between; margin-bottom: 24px; font-weight:700; }
.comment-navigation a { color: var(--copper-500); }

/* ---------- stats page ---------- */
.stats-block { background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; margin-bottom:24px; }
.stats-block h2 { font-size:24px; color:var(--malt-900); margin-bottom:4px; }
.stats-block__note { font-size:12.5px; color:var(--ink-500); margin-bottom:18px; }
.stats-bar { display:grid; grid-template-columns: 160px 1fr 70px; align-items:center; gap:12px; margin-bottom:10px; }
.stats-bar__label { font-size:13px; color:var(--ink-700); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-bar__track { background:var(--foam-100); border-radius:6px; height:16px; overflow:hidden; }
.stats-bar__fill { display:block; height:100%; background:var(--copper-500); border-radius:6px; }
.stats-bar__fill--gold { background:var(--gold-400); }
.stats-bar__fill--hop { background:var(--hop-600); }
.stats-bar__value { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-700); text-align:right; }
.stats-block--highlight { background:var(--malt-950); border:none; }
.stats-block--highlight h2 { color:var(--foam-50) !important; }
.stats-highlight { font-size:22px; color:var(--foam-50) !important; font-family:'Bebas Neue',sans-serif; letter-spacing:.02em; }
.stats-highlight__num { color:var(--gold-300) !important; margin-left:10px; }
@media (max-width:560px){ .stats-bar { grid-template-columns: 100px 1fr 54px; } }

.footer { display:flex; align-items:center; justify-content:center; gap:8px; padding: 26px; color: var(--ink-500); font-size: 13px; border-top: 1px solid var(--line); flex-wrap:wrap; }

/* ---------- photo lightbox ---------- */
.cheers-lightbox { position:fixed; inset:0; background: rgba(22,15,9,.94); display:none; align-items:center; justify-content:center; z-index:999; padding: 40px; }
.cheers-lightbox.is-open { display:flex; }
.cheers-lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.5); object-fit: contain; }
.cheers-lightbox__close { position:absolute; top: 18px; right: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cheers-lightbox__close:hover { background: rgba(255,255,255,.2); }
.footer__sep { opacity:.5; }
.footer__link { color: var(--ink-500); text-decoration:underline; text-underline-offset:2px; }
.footer__link:hover { color: var(--copper-500); }

/* ---------- generic page content (legal pages, etc.) ---------- */
.page-content { max-width: 760px; color: var(--ink-700); line-height:1.65; }
.page-content h2 { font-size: 26px; color: var(--malt-900); margin: 34px 0 12px; }
.page-content h2:first-child { margin-top: 0; }
.page-content p { margin: 0 0 16px; }
.page-content ul { margin: 0 0 16px; padding-left: 22px; }
.page-content li { margin-bottom: 6px; }
.page-content strong { color: var(--ink-900); }
.page-content a { color: var(--copper-500); text-decoration:underline; }
.page-content blockquote { background: var(--foam-100); border-left: 3px solid var(--copper-500); border-radius: 4px; margin: 0 0 16px; padding: 14px 20px; }
.page-content blockquote p { margin: 0; }
.footer__logo { width: 22px; height: 22px; object-fit: contain; }