/*
Theme Name: South Bay Gaming Club
Theme URI: https://southbaygamingclub.org
Author: South Bay Gaming Club
Description: Custom theme for the South Bay Gaming Club — a warm, photo-forward
  tabletop wargaming club site built on the Barrall Consulting Design System
  (warm-neutral palette, one clay accent). Pairs with Simple Membership for dues.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: sbgc
*/

/* ============================================================
   Design tokens (from the Claude Design handoff)
   ============================================================ */
:root {
  /* Surfaces */
  --ivory: #FBF7F0;
  --surface-page: #FBF7F0;
  --surface-raised: #F4ECDF;
  --surface-sunken: #EADDC9;
  --surface-deeper: #E1D2B9;
  --surface-card: #FFFFFF;

  /* Ink / text */
  --text-strong: #211C17;
  --text-body: #3F372D;
  --text-secondary: #6E6253;
  --text-muted: #8C7E6C;
  --text-inverse: #FBF7F0;

  /* Clay accent */
  --clay-700: #9C4226;
  --clay-600: #B24A2A;
  --clay-500: #C75A37;
  --clay-400: #D9774F;
  --clay-100: #F6E1D6;

  /* Supporting */
  --honey-500: #DA9B3B;
  --evergreen-500: #3C6F52;
  --evergreen-600: #3C6F52;
  --forest-100: #E3EDE6;
  --forest-600: #3C6F52;

  /* Borders + focus */
  --border-subtle: #E7DAC6;
  --border-default: #D8C6AB;
  --border-strong: #BCA585;
  --ring-focus: rgba(199, 90, 55, 0.38);

  /* Semantic shortcuts */
  --link: var(--clay-600);
  --text-accent: var(--clay-600);
  --ink-900: #1C1611;

  /* Fonts */
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type roles — valid `font` shorthand: weight size/line-height family */
  --type-hero: 800 clamp(34px, 5vw, 52px)/1.05 var(--font-display);
  --type-display: 800 clamp(28px, 4vw, 42px)/1.08 var(--font-display);
  --type-h1: 800 clamp(24px, 3vw, 32px)/1.12 var(--font-display);
  --type-h2: 700 clamp(20px, 2.4vw, 26px)/1.18 var(--font-display);
  --type-h3: 700 19px/1.25 var(--font-display);
  --type-lead: 400 clamp(17px, 1.6vw, 20px)/1.6 var(--font-text);
  --type-body: 400 17px/1.62 var(--font-text);
  --type-ui: 600 15px/1.2 var(--font-text);
  --type-caption: 500 13px/1.4 var(--font-text);

  /* Spacing (4px rhythm) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --gutter: max(24px, 5vw);
  --content-max: 1160px;

  /* Radii */
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-2xl: 26px;
  --radius-pill: 999px;

  /* Warm-tinted shadows (brown, not gray) */
  --shadow-xs: 0 1px 2px rgba(33, 28, 23, 0.10);
  --shadow-card: 0 14px 34px -18px rgba(33, 28, 23, 0.32), 0 2px 6px rgba(33, 28, 23, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { letter-spacing: -0.02em; color: var(--text-strong); margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ring-focus); outline-offset: 2px; border-radius: 4px; }

.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { max-width: var(--content-max); margin: 0 auto; padding: 56px var(--gutter); }
.band { background: var(--surface-raised); border-top: 1px solid var(--border-subtle); }
.band--bordered { border-bottom: 1px solid var(--border-subtle); }

/* Eyebrow / overline label */
.ds-eyebrow {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.overline {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lead { font: var(--type-lead); color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.accent-mono { font-family: var(--font-mono); color: var(--text-accent); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: var(--type-ui);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0 18px;
  height: 44px;
  cursor: pointer;
  transition: transform 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard), background 120ms var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-card); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--clay-500); color: #fff; box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--clay-400); color: #fff; }
.btn--primary:active { background: var(--clay-700); }

.btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--surface-card); border-color: var(--border-strong); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: color-mix(in srgb, var(--clay-100) 60%, transparent); color: var(--clay-700); box-shadow: none; }

/* ============================================================
   Cards / tags / badges / stats
   ============================================================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card--accent { border-top: 3px solid var(--clay-500); }
.card--2xl { border-radius: var(--radius-2xl); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  font: 600 14px/1 var(--font-text);
}
.tag i { width: 15px; height: 15px; color: var(--clay-600); }

.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.badge--clay { background: var(--clay-100); color: var(--clay-700); }

.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value { font: 800 clamp(28px, 3vw, 36px)/1 var(--font-display); color: var(--text-strong); letter-spacing: -0.02em; }
.stat__label { font: 700 15px/1.2 var(--font-text); color: var(--text-strong); }
.stat__sub { font: var(--type-caption); color: var(--text-muted); }

/* Icon chip (rounded square holding a Lucide icon) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--clay-100);
  color: var(--clay-600);
}
.chip--40 { width: 40px; height: 40px; }
.chip--42 { width: 42px; height: 42px; }
.chip--46 { width: 46px; height: 46px; }

/* Round initials avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--clay-100);
  color: var(--clay-700);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   Form fields (also reskins Simple Membership inputs)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field-label { font: var(--type-ui); color: var(--text-strong); }
.input,
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field select, .field textarea {
  width: 100%;
  font: var(--type-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 11px 13px;
}
.input:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clay-400);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
.field textarea { min-height: 92px; resize: vertical; }

/* ============================================================
   Header
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--ivory) 86%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--clay-500); color: #fff; box-shadow: var(--shadow-xs);
}
.brand__name { font: 800 18px/1 var(--font-display); color: var(--text-strong); letter-spacing: -0.01em; }
.brand__tag { font: 600 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.brand__lines { display: flex; flex-direction: column; line-height: 1; }

.mainnav { display: flex; align-items: center; gap: 22px; }
.mainnav a.navlink {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  font: var(--type-ui); color: var(--text-secondary);
}
.mainnav a.navlink:hover { color: var(--text-strong); text-decoration: none; }
.mainnav a.navlink.is-active { color: var(--text-strong); }
.mainnav a.navlink .underline { width: 100%; height: 2px; border-radius: 2px; background: transparent; }
.mainnav a.navlink.is-active .underline { background: var(--clay-500); }

.navtoggle { display: none; }

/* ============================================================
   Footer
   ============================================================ */
.sitefooter {
  background: var(--ink-900);
  color: var(--text-inverse);
  padding: 36px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.sitefooter .brand__name { color: var(--ivory); font-size: 16px; }
.sitefooter__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: var(--clay-500); color: #fff;
}
.footernav { display: flex; gap: 24px; flex-wrap: wrap; }
.footernav a { font: var(--type-ui); color: rgba(251, 247, 240, 0.82); }
.footernav a:hover { color: #fff; }
.sitefooter__copy { font: var(--type-caption); color: rgba(251, 247, 240, 0.45); }

/* ============================================================
   Layout helpers used across pages
   ============================================================ */
.grid { display: grid; gap: 24px; }
.two-col { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; }
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-7 { gap: 32px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.maxw-46 { max-width: 46ch; } .maxw-54 { max-width: 54ch; } .maxw-60 { max-width: 60ch; }
.divider-v { width: 1px; height: 40px; background: var(--border-subtle); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
  .two-col, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .mainnav { gap: 18px; }
  .mainnav .navlink { display: none; }       /* simplify on small screens */
  .mainnav .btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .sbgc-hero-layer { transition: none !important; }
}

/* ============================================================
   Magazine featured-issue contents list
   ============================================================ */
.mag-contents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mag-contents li { font: var(--type-caption); color: var(--text-muted); }
.mag-contents li strong { font: 600 15px/1.35 var(--font-text); color: var(--text-strong); }
.entry-content a { color: var(--link); }

/* ============================================================
   Simple Membership forms — reskin to match the design
   ============================================================ */
.swpm-login-form-inner input[type="text"],
.swpm-login-form-inner input[type="password"],
.swpm-registration-widget-form input[type="text"],
.swpm-registration-widget-form input[type="email"],
.swpm-registration-widget-form input[type="password"],
.swpm-profile-form input[type="text"],
.swpm-profile-form input[type="email"],
.swpm-profile-form input[type="password"],
.swpm-membership-payment-button-section input,
.entry-content .swpm-text-field,
.entry-content .swpm-email-field,
.entry-content .swpm-password-field {
	width: 100%;
	font: var(--type-body);
	color: var(--text-strong);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 11px 13px;
}
.swpm-login-form-inner input:focus,
.swpm-registration-widget-form input:focus,
.swpm-profile-form input:focus {
	outline: none;
	border-color: var(--clay-400);
	box-shadow: 0 0 0 3px var(--ring-focus);
}
.swpm-login-form-inner table td,
.swpm-registration-widget-form table td,
.swpm-profile-form table td { padding: 6px 6px 6px 0; vertical-align: middle; }

.swpm-login-form-submit,
.swpm-registration-submit,
.swpm-profile-submit,
input.swpm-login-form-submit,
.entry-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: var(--type-ui);
	background: var(--clay-500);
	color: #fff;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	padding: 0 20px;
	height: 46px;
	cursor: pointer;
	transition: transform 120ms var(--ease-standard), background 120ms var(--ease-standard);
}
.swpm-login-form-submit:hover,
.entry-content input[type="submit"]:hover { background: var(--clay-400); transform: translateY(-2px); }

.swpm-join-pay .swpm-payment-button,
.sbgc-join-pay form { width: 100%; }
.swpm-yes-button, .swpm-no-button { border-radius: var(--radius-md); }

/* Subscriptions + cancel table on the profile page */
.swpm-subscriptions-table { width: 100%; border-collapse: collapse; }
.swpm-subscriptions-table th,
.swpm-subscriptions-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); text-align: left; }

/* ============================================================
   Block-editable page content (.entry)
   ============================================================ */
.entry { width: 100%; }
/* Center normal blocks to the content width; gutter via padding. */
.entry > * {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
/* Full-bleed sections (theme bands + alignfull blocks) span edge to edge. */
.entry > .sbgc-fullbleed,
.entry > .alignfull {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
.entry > .alignwide { max-width: 1320px; }
/* Constrained shortcode sections: vertical rhythm only (gutter from .entry > *). */
.sbgc-section { padding-top: 28px; padding-bottom: 28px; }

/* Default typography for editor-authored content. */
.entry h1 { font: var(--type-display); margin: 0 0 .4em; }
.entry h2 { font: var(--type-h1); margin: 1.2em 0 .4em; }
.entry h3 { font: var(--type-h3); margin: 1em 0 .3em; }
.entry p { font: var(--type-body); color: var(--text-secondary); margin: 0 0 1em; }
.entry ul, .entry ol { font: var(--type-body); color: var(--text-secondary); }
.entry .lead { font: var(--type-lead); color: var(--text-secondary); }
.entry .ds-eyebrow { color: var(--clay-600); margin-bottom: .2em; }

/* Core columns → design grid spacing; Group blocks with the `card` class get card styling. */
.entry .wp-block-columns { gap: 24px; align-items: start; }
.entry .wp-block-column { min-width: 0; }
.entry .wp-block-group.card { padding: var(--space-6); }
.entry .wp-block-buttons { margin-top: 8px; }
.entry .wp-block-button__link {
	background: var(--clay-500);
	color: #fff;
	border-radius: var(--radius-md);
	padding: 12px 22px;
	font: var(--type-ui);
}
.entry .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--clay-600);
	border: 1px solid var(--clay-500);
}
.entry .wp-block-image img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); }

@media (max-width: 880px) {
	.entry .wp-block-columns { flex-wrap: wrap; }
}

/* Editable-content helpers (price card, stats) */
.entry .sbgc-price { font: 800 clamp(36px, 5vw, 48px)/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 .3em; }
.entry .sbgc-stat { border-top: 2px solid var(--clay-500); padding-top: 16px; }
.entry .sbgc-stat h2 { font: 800 clamp(28px, 3vw, 36px)/1 var(--font-display); margin: 0 0 .25em; }
.entry .sbgc-stat p { font: var(--type-caption); color: var(--text-muted); margin: 0; }
.entry .sbgc-stat p strong { display: block; font: 700 15px/1.2 var(--font-text); color: var(--text-strong); }
.entry .band .section { padding-top: 56px; padding-bottom: 56px; }

/* Polish pass: officers contact callout + magazine contents layout */
.entry .wp-block-group.sbgc-callout {
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: 24px 28px;
}
.entry .wp-block-group.sbgc-callout h3 { font: 600 16px/1.2 var(--font-text); margin: 0 0 .25em; }
.mag-contents li strong { display: block; margin-bottom: 2px; }

/* Linked map-pin chip (About venue cards) */
a.chip { text-decoration: none; transition: transform 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard); }
a.chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--clay-100); }