/*
Theme Name: Cheshire Buzz
Description: Gold & Cobalt theme for Cheshire Buzz, built on GeneratePress. Header and footer are coded (see functions.php) rather than built with GP Elements, so the whole design lives in version control — same site-wide pattern as the directory/events plugin.
Template: generatepress
Version: 1.0.0
Author: Cheshire Buzz
*/

/* ==========================================================================
   Design tokens — Gold & Cobalt
   Same values and names as the Next.js build's globals.css, so the two
   stay comparable while both exist, and so anyone who worked on the Next.js
   design recognizes these immediately.
   ========================================================================== */
:root {
  --cb-surface: #f6f7f8;
  --cb-ink: #16181d;
  --cb-ink-muted: #757a8a;
  --cb-cobalt: #4c75f2;
  --cb-cobalt-dark: #173282;
  --cb-gold: #f2c94c;
  --cb-tan: #c3d0f7;
  --cb-tan-tint: #edeff8;
  --cb-border: #d8dbe0;

  --cb-footer-ink: #a9adb8;
  --cb-footer-link: #dcdee3;
  --cb-footer-label: #6b6f7d;
  --cb-footer-line: #2a2d36;

  --cb-gold-tint: #f4e4b3;
  --cb-gold-ink: #937210;

  --cb-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cb-font-display: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cb-radius: 8px;
  --cb-max-width: 1400px;
}

/* Several components below set their own `display` (flex/grid) on an
   element that also toggles the native `hidden` attribute via JS — a
   class selector's `display` always outranks the `[hidden]` UA-stylesheet
   rule's specificity, so without this the element stays visible. One
   global, standard fix rather than patching each component. */
[hidden] {
  display: none !important;
}

/* GeneratePress wraps the whole site in its own #page.container — a
   SEPARATE width/background system (Customizer → Layout → Container
   Width, currently 1080px with a white background) that this theme
   never uses, since every template here is hand-coded rather than built
   on GP's content/sidebar layout. Left alone, that 1080px cap silently
   overrides this stylesheet's own --cb-max-width everywhere (nothing
   here can ever render wider than GP's own wrapper), and its white
   background shows past any section that's narrower than the viewport,
   instead of this theme's own var(--cb-surface). Neutralised once, here,
   rather than worked around in every template. */
#page.site {
  max-width: none;
  width: 100%;
  background: transparent;
}

/* GP's "one-container" layout (body.one-container, this theme's layout
   mode) also gives .site-content its own 40px padding on every side —
   responsively reduced, but never to zero — on top of this stylesheet's
   own padding-inline:24px on .cb-container/.cb-content-*. The two stack
   (confirmed: 30px from GP + 24px from us = 54px of dead space each
   side on mobile, nearly a third of a 375px screen), since this theme
   never relies on GP's own content/sidebar layout system. GP already
   ships the override for exactly this case — .full-width-content and
   .contained-content both zero this out — so this just applies that
   same, already-correct GP rule unconditionally rather than requiring
   one of those extra body classes. */
.one-container .site-content {
  padding: 0;
}

/* ==========================================================================
   Base
   ========================================================================== */
/* A standing safety net, not a fix for one component: full-bleed
   techniques using calc(50% - 50vw) (e.g. .cb-newsletter-box below) are
   a few pixels off on most browsers because 100vw includes the
   scrollbar's width while the actual content area doesn't. Clipping the
   stray horizontal pixels here is far more robust than trying to
   account for an unpredictable scrollbar width in the calc() itself.
   Both html AND body need it — overflow-x:hidden on body alone doesn't
   reliably suppress the viewport-level horizontal scrollbar/rubber-band
   on mobile browsers; the two-element form is the standard fix. */
html {
  overflow-x: hidden;
}
body {
  background: var(--cb-surface);
  color: var(--cb-ink);
  font-family: var(--cb-font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* GeneratePress renders <main> as a flex item of its own #content.site-content
   wrapper — but which axis is which depends on the template: some render
   site-content as flex-direction:column (where width is the cross axis, so
   align-items:stretch fills it), others as row (where width is the MAIN
   axis, sized by flex-basis/content, not stretch at all). Relying on
   stretch meant <main> fell back to shrink-to-fit on any row-direction
   template — sized to its own content and left-aligned, with empty space
   left over on the right instead of the page being centred/full-width.
   An explicit width:100% makes <main> fill site-content on either axis,
   unambiguously. min-width:0 stays alongside it so that on narrow
   viewports <main> can still shrink below an unwrappable bit of content
   (a filter bar, an unbroken address line) instead of forcing the whole
   page wider than the viewport. */
main,
.site-content > article {
  width: 100%;
  min-width: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cb-ink);
}

a {
  color: var(--cb-cobalt);
  text-decoration: none;
}
a:hover {
  color: var(--cb-cobalt-dark);
}

.cb-container {
  max-width: var(--cb-max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--cb-radius);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
}
.cb-btn-gold {
  background: var(--cb-gold);
  color: var(--cb-ink);
}
.cb-btn-gold:hover {
  background: color-mix(in srgb, var(--cb-gold) 90%, black);
  color: var(--cb-ink);
}

/* ==========================================================================
   Standalone page header (/subscribe/ — logo only, no nav)
   ========================================================================== */
.cb-standalone-header {
  padding: 40px 24px 0;
  text-align: center;
}
.cb-standalone-header img {
  display: inline-block;
  height: 28px;
  width: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.cb-header {
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-border);
}

.cb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

.cb-logo img {
  display: block;
  height: 28px;
  width: auto;
}

.cb-nav-links {
  display: none;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
}
.cb-nav-links a:not(.cb-btn) {
  color: var(--cb-ink);
}
.cb-nav-links a:not(.cb-btn):hover {
  color: var(--cb-cobalt-dark);
}

@media (min-width: 1024px) {
  .cb-nav-links {
    display: flex;
  }
  .cb-nav-toggle,
  .cb-mobile-panel {
    display: none !important;
  }
}

/* Mobile menu — pure CSS, no JavaScript: a checkbox drives visibility,
   same pattern as the old theme's own lightweight approach. */
.cb-nav-toggle-input {
  display: none;
}
.cb-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.cb-nav-toggle svg {
  width: 24px;
  height: 24px;
}
.cb-mobile-panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  border-top: 1px solid var(--cb-border);
}
.cb-nav-toggle-input:checked ~ .cb-mobile-panel {
  max-height: 480px;
}
.cb-mobile-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 20px;
}
.cb-mobile-panel-inner a {
  padding: 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--cb-ink);
  border-bottom: 1px solid var(--cb-border);
}
.cb-mobile-panel-inner a:last-child {
  border-bottom: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.cb-footer {
  background: var(--cb-ink);
}
.cb-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: 56px;
}
@media (min-width: 640px) {
  .cb-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cb-footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.cb-footer-tagline {
  margin-top: 12px;
  max-width: 320px;
  color: var(--cb-footer-ink);
  font-size: 16px;
}

.cb-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.cb-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--cb-surface);
}
.cb-footer-social a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--cb-surface);
}

.cb-footer-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-footer-label);
}

.cb-footer-links {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.cb-footer-links a {
  color: var(--cb-footer-link);
}
.cb-footer-links a:hover {
  color: var(--cb-surface);
}

.cb-footer-loop-text {
  margin-top: 16px;
  color: var(--cb-footer-link);
  font-size: 16px;
}

.cb-footer-bottom {
  border-top: 1px solid var(--cb-footer-line);
  padding-block: 20px;
}
.cb-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--cb-footer-label);
}
@media (min-width: 640px) {
  .cb-footer-bottom-inner {
    flex-direction: row;
  }
}
.cb-footer-bottom-inner a:hover {
  color: var(--cb-footer-link);
}
.cb-footer-bottom-links {
  display: flex;
  gap: 16px;
}

/* ==========================================================================
   Buttons (shared by header/footer/homepage)
   ========================================================================== */
.cb-btn-outline {
  background: transparent;
  color: var(--cb-surface);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.cb-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cb-surface);
}
.cb-btn-dark {
  display: inline-flex;
  margin-top: 24px;
  background: var(--cb-ink);
  color: var(--cb-surface);
  border-radius: var(--cb-radius);
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
}
.cb-btn-dark:hover {
  background: color-mix(in srgb, var(--cb-ink) 90%, white);
  color: var(--cb-surface);
}

/* ==========================================================================
   Homepage — hero
   ========================================================================== */
.cb-hero {
  position: relative;
  height: 480px;
  width: 100%;
  overflow: hidden;
}
.cb-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 29, 0.7);
}
.cb-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  text-align: center;
}
.cb-hero-badge {
  display: inline-block;
  border: 1px solid rgba(246, 247, 248, 0.3);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-surface);
}
.cb-hero-title {
  margin-top: 20px;
  max-width: 760px;
  font-size: 56px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cb-surface);
}
@media (min-width: 640px) {
  .cb-hero-title {
    font-size: 88px;
  }
}
.cb-hero-sub {
  margin-top: 20px;
  max-width: 540px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cb-footer-link);
}
.cb-hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}

.cb-gradient-bar {
  height: 6px;
  width: 100%;
  background: linear-gradient(to right, var(--cb-cobalt), var(--cb-gold), var(--cb-tan));
}

/* ==========================================================================
   Homepage — shared section scaffolding
   ========================================================================== */
.cb-section {
  padding-block: 64px;
}
.cb-section-bordered {
  border-top: 1px solid var(--cb-border);
  border-bottom: 1px solid var(--cb-border);
}
.cb-section-white {
  background: #fff;
}
.cb-section-title {
  margin-bottom: 24px;
  font-size: 30px;
  font-weight: 700;
}
.cb-section-link {
  margin-top: 24px;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-section-link:hover {
  text-decoration: underline;
}
.cb-empty {
  font-size: 14px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Homepage — upcoming events
   ========================================================================== */
.cb-events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .cb-events-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cb-events-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.cb-event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  transition: box-shadow 0.15s ease;
}
.cb-event-card:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-event-card-bar {
  height: 6px;
  flex: none;
}
.cb-event-card-media {
  position: relative;
  display: block;
  height: 160px;
  flex: none;
  overflow: hidden;
  background: var(--cb-tan-tint);
}
.cb-event-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-event-card-category {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: var(--cb-cobalt);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-surface);
}
.cb-event-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}
.cb-event-card-date {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-cobalt);
}
.cb-event-card-title {
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-event-card-title:hover {
  color: var(--cb-cobalt);
}
.cb-event-card-venue {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-event-card-snippet {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-event-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}
.cb-event-card-cost {
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-gold-ink);
  background: var(--cb-gold-tint);
}
.cb-event-card-view {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-event-card-view:hover {
  color: var(--cb-cobalt-dark);
}

/* ==========================================================================
   Homepage — latest newsletter issue
   ========================================================================== */
.cb-issues-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .cb-issues-grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

.cb-issue-feature {
  position: relative;
  display: flex;
  height: 340px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--cb-border);
  background: var(--cb-ink);
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
}
@media (min-width: 1024px) {
  .cb-issue-feature {
    height: 100%;
  }
}
.cb-issue-feature-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  opacity: 0.7;
  filter: blur(24px);
}
.cb-issue-feature-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cb-issue-feature-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cb-ink), rgba(22, 24, 29, 0.4), transparent);
}
.cb-issue-feature-body {
  position: relative;
  padding: 24px;
  color: var(--cb-surface);
}
.cb-issue-feature-tag {
  display: inline-block;
  border-radius: 999px;
  background: var(--cb-gold);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink);
}
.cb-issue-feature-title {
  margin-top: 12px;
  font-size: 28px;
  font-weight: 700;
}
.cb-issue-feature-excerpt {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-footer-link);
}

.cb-issue-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
}
.cb-issue-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--cb-border);
}
.cb-issue-row:last-child {
  border-bottom: none;
}
.cb-issue-row:hover {
  background: color-mix(in srgb, var(--cb-tan-tint) 40%, transparent);
}
.cb-issue-row-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cb-tan-tint);
}
.cb-issue-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-issue-row-body {
  min-width: 0;
}
.cb-issue-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-issue-row-date {
  font-size: 12px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Homepage — guides
   ========================================================================== */
.cb-guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .cb-guides-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cb-guides-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.cb-guide-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  transition: box-shadow 0.15s ease;
}
.cb-guide-card:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-guide-card-media {
  position: relative;
  height: 160px;
  flex: none;
  overflow: hidden;
  background: var(--cb-tan-tint);
}
.cb-guide-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-guide-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}
.cb-guide-card-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-cobalt);
}
.cb-guide-card-title {
  margin-top: 4px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-guide-card-snippet {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Homepage — explore by town
   ========================================================================== */
.cb-towns-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cb-town-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-ink);
}
.cb-town-pill:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}

/* ==========================================================================
   Homepage — business directory teaser
   ========================================================================== */
.cb-section-directory {
  background: var(--cb-gold-tint);
}
.cb-directory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .cb-directory-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cb-directory-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.cb-directory-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  transition: box-shadow 0.15s ease;
}
.cb-directory-tile:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-directory-tile-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--cb-ink);
}
.cb-directory-tile-count {
  font-size: 14px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Shared content-page scaffolding — single posts, pages, guides
   ========================================================================== */
.cb-pb-24 {
  padding-bottom: 96px;
}
.cb-content-narrow {
  max-width: 896px;
  margin-inline: auto;
  padding-inline: 24px;
}
.cb-content-wide {
  max-width: 1152px;
  margin-inline: auto;
  padding-inline: 24px;
}
.cb-page-title {
  font-size: 36px;
  font-weight: 700;
}
.cb-page-intro {
  margin-top: 16px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
}
.cb-empty-box {
  margin-top: 32px;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 24px;
}
.cb-guides-archive-grid {
  margin-top: 40px;
}

/* ==========================================================================
   Things to Do town hub (taxonomy-cb_town.php)
   ========================================================================== */
.cb-breadcrumb {
  font-size: 14px;
}
.cb-breadcrumb a {
  color: var(--cb-ink-muted);
}
.cb-breadcrumb a:hover {
  color: var(--cb-cobalt);
}
.cb-breadcrumb span {
  color: var(--cb-ink-muted);
  margin: 0 4px;
}
.cb-town-title {
  margin-top: 4px;
}
.cb-town-events-header {
  margin-top: 40px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cb-town-subheading {
  font-size: 22px;
  font-weight: 700;
}
.cb-town-events-grid {
  margin-top: 32px;
}
.cb-town-categories {
  margin-top: 56px;
}
.cb-town-more {
  margin-top: 56px;
  border-top: 1px solid var(--cb-border);
  padding-top: 32px;
}
.cb-town-more-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink-muted);
}
.cb-town-more-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.cb-town-more-list a {
  color: var(--cb-ink);
}
.cb-town-more-list a:hover {
  color: var(--cb-cobalt);
}

/* ==========================================================================
   Single event (single-directory_event.php)
   ========================================================================== */
.cb-event-hero-outer {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-top: 40px;
}
.cb-event-breadcrumb {
  margin-top: 0;
}
.cb-event-hero {
  position: relative;
  margin-top: 20px;
}
.cb-event-hero-wrap {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
}
.cb-event-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  filter: blur(24px);
}
.cb-event-hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 29, 0.1);
}
.cb-event-hero-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cb-event-header-card {
  margin-top: 20px;
  max-width: 672px;
  border-radius: 8px;
  background: #fff;
  padding: 32px;
  box-shadow: 0 20px 44px rgba(28, 27, 24, 0.08);
}
@media (min-width: 640px) {
  .cb-event-header-card {
    padding: 36px;
  }
}
.cb-event-header-card-overlap {
  position: relative;
  margin-top: -64px;
  box-shadow: 0 20px 44px rgba(28, 27, 24, 0.14);
}

.cb-event-category-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--cb-cobalt);
  padding: 6px 14px;
  font-family: var(--cb-font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cb-surface);
}
.cb-event-title {
  margin-top: 12px;
  font-size: 36px;
  line-height: 0.94;
}
@media (min-width: 640px) {
  .cb-event-title {
    font-size: 56px;
  }
}
.cb-event-meta-pills {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cb-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-ink);
}
.cb-event-cost-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-gold-ink);
  background: var(--cb-gold-tint);
  padding: 5px 12px;
}
.cb-event-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.cb-event-directions-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-cobalt);
}
.cb-event-directions-link:hover {
  text-decoration: underline;
}
.cb-event-organizer {
  margin-top: 20px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-event-organizer span {
  font-weight: 500;
  color: var(--cb-ink);
}

.cb-event-body {
  max-width: 672px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 40px;
}
.cb-event-section-title {
  font-size: 24px;
  font-weight: 700;
}
.cb-event-section-title-spaced {
  margin-top: 40px;
}
.cb-event-section-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-event-other-dates {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-event-content {
  margin-top: 16px;
}
.cb-event-map {
  margin-top: 16px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
}
.cb-event-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: none;
}
@media (min-width: 640px) {
  .cb-event-map iframe {
    height: 340px;
  }
}

.cb-event-related {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-top: 24px;
  padding-bottom: 64px;
}
.cb-event-related-grid {
  margin-top: 20px;
}

/* ==========================================================================
   Shared medium-width container (directory pages use max-w-5xl)
   ========================================================================== */
.cb-content-medium {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==========================================================================
   Directory homepage (page-directory.php)
   ========================================================================== */
.cb-directory-submit-link {
  color: var(--cb-cobalt);
  text-decoration: underline;
  font-weight: 800;
}
.cb-directory-home-grid {
  margin-top: 40px;
  display: grid;
  /* minmax(0, 1fr), not 1fr — see .cb-listing-grid for why: a plain 1fr
     track won't shrink below a tile's min-content width, so the tile
     with the longest category name (e.g. "Trade & Home Services") can
     force its column wider than its sibling, producing uneven columns. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 640px) {
  .cb-directory-home-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cb-directory-home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 24px 16px;
  text-align: center;
  transition: box-shadow 0.15s ease;
}
.cb-directory-home-tile:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-directory-home-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cb-tan-tint);
}
.cb-directory-home-tile-name {
  font-family: var(--cb-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--cb-ink);
}
.cb-directory-home-tile-count {
  font-size: 12px;
  color: var(--cb-ink-muted);
}

.cb-directory-popular {
  margin-top: 40px;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 28px;
}
.cb-directory-popular-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.cb-directory-popular-title {
  font-family: var(--cb-font-display);
  font-size: 18px;
  font-weight: 700;
}
.cb-directory-popular-note {
  font-size: 12px;
  color: var(--cb-ink-muted);
}
.cb-directory-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-directory-popular-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-directory-popular-chip:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}
.cb-directory-popular-chip-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Directory category archive (taxonomy-directory_category.php)
   ========================================================================== */
.cb-directory-filter-bar {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .cb-directory-filter-bar {
    flex-direction: row;
    align-items: center;
  }
}
.cb-directory-filter-input {
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--cb-ink);
}
.cb-directory-filter-input-grow {
  flex: 1;
}
.cb-directory-filter-clear {
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-directory-filter-clear:hover {
  color: var(--cb-cobalt);
}

.cb-listing-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .cb-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .cb-listing-grid {
    /* minmax(0, 1fr), not 1fr — a plain 1fr track won't shrink below a
       card's min-content width, so one long unbroken address/title could
       force its column wider than the others and push the grid past the
       page's right edge. minmax(0, …) lets the existing text-ellipsis
       rules on the card do their job instead. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Directory listing card (template-parts/directory-listing-card.php)
   ========================================================================== */
.cb-listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 16px;
  transition: box-shadow 0.15s ease;
}
.cb-listing-card:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-listing-card-featured {
  border: 2px solid var(--cb-gold);
}
.cb-listing-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.cb-listing-card-badge {
  border-radius: 999px;
  background: var(--cb-tan-tint);
  padding: 4px 10px;
  font-family: var(--cb-font-display);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--cb-ink);
}
.cb-listing-card-badge-featured {
  background: var(--cb-gold);
}
.cb-listing-card-address {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cb-ink-muted);
}
.cb-listing-card-address svg {
  flex: none;
}
.cb-listing-card-address span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-listing-card-title {
  margin-top: 8px;
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cb-ink);
}
.cb-listing-card-title:hover {
  color: var(--cb-cobalt);
}
.cb-listing-card-rating {
  margin-top: 6px;
}
.cb-listing-card-desc {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cb-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb-listing-card-attrs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cb-listing-card-attr {
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-listing-card-verified {
  margin-top: 12px;
}
.cb-listing-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--cb-border);
  padding-top: 14px;
  margin-top: 16px;
}
.cb-listing-card-view {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-listing-card-view:hover {
  color: var(--cb-cobalt-dark);
}
.cb-listing-card-actions {
  display: flex;
  gap: 6px;
}
.cb-listing-card-icon-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
}
.cb-listing-card-icon-btn:hover {
  border-color: var(--cb-cobalt);
}

/* ==========================================================================
   Star rating / verified pill (template-parts)
   ========================================================================== */
.cb-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cb-star-rating-stars {
  display: inline-flex;
  gap: 2px;
}
.cb-star-rating-value {
  color: var(--cb-ink);
  font-size: 14px;
}
.cb-star-rating-count {
  color: var(--cb-ink-muted);
}

.cb-verified-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border: 1.5px solid var(--cb-cobalt);
  background: rgba(76, 117, 242, 0.12);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-verified-pill-compact {
  border: none;
  border-radius: 999px;
  background: rgba(76, 117, 242, 0.12);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
}

/* ==========================================================================
   Single directory listing (single-directory_listing.php)
   ========================================================================== */
.cb-listing-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cb-listing-featured-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--cb-tan);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-cobalt-dark);
}
.cb-listing-heading-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cb-listing-title {
  font-size: 36px;
}
@media (min-width: 640px) {
  .cb-listing-title {
    font-size: 48px;
  }
}
.cb-listing-claim-btn {
  flex: none;
  white-space: nowrap;
}
.cb-listing-rating {
  margin-top: 12px;
}
.cb-listing-attrs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-listing-attr {
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-listing-image {
  margin-top: 24px;
  display: flex;
  max-height: 380px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: var(--cb-tan-tint);
}
.cb-listing-image img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

.cb-listing-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .cb-listing-layout {
    grid-template-columns: 1fr 320px;
  }
}
.cb-listing-main {
  min-width: 0;
}
.cb-listing-prose {
  margin-top: 16px;
}

.cb-opening-hours {
  margin-top: 16px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
}
.cb-opening-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--cb-ink-muted);
  border-top: 1px solid var(--cb-border);
}
.cb-opening-hours-row:first-child {
  border-top: none;
}
.cb-opening-hours-row-today {
  background: var(--cb-tan-tint);
  color: var(--cb-ink);
  font-weight: 600;
}
.cb-opening-hours-note {
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 16px;
  font-size: 14px;
  color: var(--cb-ink);
}

.cb-listing-sidebar {
  height: fit-content;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 24px;
}
.cb-listing-sidebar-label {
  font-family: var(--cb-font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cb-ink-muted);
}
.cb-listing-info-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}
.cb-listing-info-list > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.cb-listing-info-icon {
  grid-row: 1 / span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--cb-tan-tint);
  color: var(--cb-cobalt);
}
.cb-listing-info-list dt {
  grid-column: 2;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-listing-info-list dd {
  grid-column: 2;
  margin: 2px 0 0;
  color: var(--cb-ink-muted);
  overflow-wrap: anywhere;
}
.cb-listing-info-list > div > .cb-listing-directions-link {
  grid-column: 2;
  justify-self: start;
}
.cb-listing-info-list dd a {
  color: var(--cb-ink-muted);
}
.cb-listing-info-list dd a:hover {
  color: var(--cb-cobalt);
}
.cb-listing-directions-link {
  margin-top: 4px;
  display: inline-block;
  color: var(--cb-cobalt);
}
.cb-listing-directions-link:hover {
  text-decoration: underline;
}

.cb-listing-socials {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}
.cb-listing-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cb-tan-tint);
}
.cb-listing-social-btn:hover {
  background: color-mix(in srgb, var(--cb-tan) 40%, transparent);
}

.cb-listing-sidebar-btn {
  margin-top: 20px;
  display: block;
  text-align: center;
  width: 100%;
}
.cb-listing-book-btn {
  margin-top: 10px;
  display: block;
  border-radius: 8px;
  border: 1.5px solid var(--cb-cobalt);
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-listing-book-btn:hover {
  background: rgba(76, 117, 242, 0.05);
}

.cb-listing-claim-box {
  margin-top: 20px;
  border-top: 1px solid var(--cb-border);
  padding-top: 20px;
}
.cb-listing-claimed-note {
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-listing-claim-cta {
  border-radius: 8px;
  border: 2px solid var(--cb-gold);
  background: rgba(242, 201, 76, 0.1);
  padding: 16px;
}
.cb-listing-claim-cta-title {
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-listing-claim-cta-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--cb-ink-muted);
}
.cb-listing-claim-cta-btn {
  margin-top: 12px;
  display: block;
  width: 100%;
  text-align: center;
}

.cb-listing-report-link {
  margin-top: 16px;
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--cb-ink-muted);
}
.cb-listing-report-link:hover {
  color: var(--cb-cobalt);
  text-decoration: underline;
}

.cb-listing-featured-in {
  grid-column: 2;
  margin-top: -8px;
  height: fit-content;
  border-radius: 8px;
  border: 1px solid var(--cb-tan);
  background: var(--cb-tan-tint);
  padding: 20px;
}
@media (max-width: 1023px) {
  .cb-listing-featured-in {
    grid-column: 1;
  }
}
.cb-listing-featured-in-label {
  font-family: var(--cb-font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cb-cobalt-dark);
}
.cb-listing-featured-in-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-listing-featured-in-list a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cb-ink);
}
.cb-listing-featured-in-list a:hover {
  color: var(--cb-cobalt);
}

/* ==========================================================================
   Custom pagination (template-parts/pagination.php — a filtered query,
   not WP's main query, so the_posts_pagination() can't be used)
   ========================================================================== */
.cb-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin-right: 6px;
  padding-inline: 10px;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-pagination-link-current {
  background: var(--cb-gold);
  border-color: var(--cb-gold);
  color: var(--cb-ink);
}
.cb-pagination-ellipsis {
  padding-inline: 4px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Events archive (page-events.php, taxonomy-event_category.php)
   ========================================================================== */
.cb-events-intro {
  max-width: none;
}
.cb-events-submit-cta {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cb-ink);
}
.cb-events-submit-cta a {
  color: var(--cb-cobalt);
  text-decoration: underline;
  font-weight: 800;
}

.cb-events-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .cb-events-layout {
    grid-template-columns: 220px 1fr;
  }
}

.cb-event-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cb-event-sidebar-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink-muted);
}
.cb-event-sidebar-town select {
  width: 100%;
}
.cb-event-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-event-sidebar-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--cb-ink);
}
.cb-event-sidebar-item:hover {
  background: var(--cb-tan-tint);
}
.cb-event-sidebar-item-active {
  background: var(--cb-cobalt);
  color: var(--cb-surface);
  font-weight: 600;
}
.cb-event-sidebar-item-active:hover {
  background: var(--cb-cobalt);
}

.cb-event-main {
  min-width: 0;
}
.cb-events-empty {
  margin-top: 32px;
}
.cb-events-list-grid {
  margin-top: 32px;
}

/* ==========================================================================
   Event toolbar (template-parts/event-toolbar.php)
   ========================================================================== */
.cb-event-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .cb-event-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.cb-event-toolbar-search {
  display: flex;
  gap: 8px;
}
.cb-event-toolbar-search .cb-directory-filter-input {
  width: 100%;
  max-width: 280px;
}
.cb-event-toolbar-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cb-event-date-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink-muted);
}
.cb-event-date-pill:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}
.cb-event-date-pill-active {
  border-color: var(--cb-cobalt);
  background: var(--cb-cobalt);
  color: var(--cb-surface);
}
.cb-event-date-pill-active:hover {
  color: var(--cb-surface);
}
.cb-event-toolbar-datepicker {
  display: inline-flex;
}
.cb-event-date-pill-picker {
  position: relative;
  cursor: pointer;
}
.cb-event-date-pill-picker input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cb-event-date-clear {
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-event-date-clear:hover {
  color: var(--cb-cobalt);
}

/* ==========================================================================
   Directory list/map toggle (taxonomy-directory_category.php +
   assets/js/directory-map.js)
   ========================================================================== */
.cb-view-toggle {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.cb-view-toggle-btn {
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-view-toggle-btn:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}
.cb-view-toggle-btn-active,
.cb-view-toggle-btn-active:hover {
  border-color: var(--cb-cobalt);
  background: var(--cb-cobalt);
  color: var(--cb-surface);
}

.cb-directory-map {
  margin-top: 32px;
  height: 520px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
}
.cb-directory-map .leaflet-popup-content a {
  text-decoration: none;
}

/* ==========================================================================
   Shared form styling (event/directory submit, claim, report, contact,
   advertise — assets/js/ajax-form.js)
   ========================================================================== */
.cb-form {
  position: relative;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
}
@media (min-width: 640px) {
  .cb-form {
    padding: 40px;
  }
}
.cb-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(to right, var(--cb-cobalt), var(--cb-gold), var(--cb-tan));
}
.cb-form-honeypot {
  position: absolute;
  left: -9999px;
}
.cb-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-ink);
}
.cb-form-label-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .cb-form-label-row {
    grid-template-columns: 1fr 1fr;
  }
  .cb-form-label-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.cb-form-input {
  margin-top: 6px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--cb-ink);
  font-family: inherit;
}
.cb-form-input:focus {
  outline: none;
  border-color: var(--cb-cobalt);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76, 117, 242, 0.15);
}
.cb-form-hint {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--cb-ink-muted);
}
.cb-form-file-error {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #dc2626;
}
.cb-form-input[type="file"] {
  cursor: pointer;
  padding: 7px 10px;
}
.cb-form-input[type="file"]::file-selector-button {
  margin-right: 12px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: rgba(76, 117, 242, 0.1);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-cobalt-dark);
}
.cb-form hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--cb-border);
}

.cb-form-attrs {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-form-attr-pill {
  display: inline-flex;
}
.cb-form-attr-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cb-form-attr-pill span {
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-form-attr-pill input:checked + span {
  border-color: var(--cb-cobalt);
  background: rgba(76, 117, 242, 0.1);
  color: var(--cb-cobalt-dark);
}
.cb-form-attr-pill input:focus-visible + span {
  outline: 2px solid var(--cb-cobalt);
  outline-offset: 1px;
}

.cb-form-disclosure {
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  padding: 16px;
}
.cb-form-disclosure summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
  list-style: none;
}
.cb-form-disclosure summary::-webkit-details-marker {
  display: none;
}
.cb-form-disclosure summary::after {
  content: "+ Add";
  float: right;
  font-weight: 500;
  color: var(--cb-ink-muted);
}
.cb-form-disclosure[open] summary::after {
  content: "\2212 Hide";
}
.cb-form-disclosure-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cb-ink-muted);
}
.cb-form-disclosure[open] .cb-form-disclosure-hint {
  display: none;
}
.cb-form-disclosure-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cb-form-checkbox-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--cb-gold);
  background: rgba(242, 201, 76, 0.1);
  padding: 16px;
  font-size: 14px;
  color: var(--cb-ink);
}
.cb-form-checkbox-card input {
  margin-top: 2px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--cb-gold);
}
.cb-form-checkbox-card-title {
  font-weight: 600;
}
.cb-form-checkbox-card-sub {
  margin-top: 2px;
  display: block;
  font-size: 13px;
  color: var(--cb-ink-muted);
}

.cb-form-submit {
  margin-top: 8px;
  align-self: flex-start;
}
.cb-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cb-form-error {
  font-size: 14px;
  color: #dc2626;
}

.cb-form-success {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--cb-cobalt);
  background: rgba(76, 117, 242, 0.05);
  padding: 32px;
}
@media (min-width: 640px) {
  .cb-form-success {
    padding: 40px;
  }
}
.cb-form-success-icon {
  font-size: 30px;
}
.cb-form-success-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-form-success-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-form-success-simple {
  margin-top: 32px;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
}
@media (min-width: 640px) {
  .cb-form-success-simple {
    padding: 40px;
  }
}
.cb-form-success-simple p {
  border-radius: 6px;
  background: rgba(76, 117, 242, 0.1);
  padding: 16px;
  color: var(--cb-cobalt-dark);
}

/* ==========================================================================
   Subscribe page (page-subscribe.php) — standalone, no nav/footer, exactly
   one screen tall with no scrolling. cbz_standalone_page_body_class() adds
   "page-subscribe" to <body> for this (WordPress's own body_class() does
   NOT add a "page-{slug}" class for ordinary Pages).

   The standalone header isn't nested inside #page.site like the normal
   header is — cbz_header() prints .cb-standalone-header as a sibling
   BEFORE #page.site opens — so <body> itself (not #page.site) is the
   flex column that has to share exactly 100vh between the header and
   #page.site; giving #page.site its own 100% height double-counted the
   header's height and pushed the page past one screen.
   ========================================================================== */
body.page-subscribe {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
body.page-subscribe .cb-standalone-header {
  flex-shrink: 0;
}
body.page-subscribe #page.site {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.page-subscribe .site-footer {
  flex-shrink: 0;
}
body.page-subscribe .site-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.cb-subscribe-main {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--cb-surface);
}
.cb-subscribe-grid {
  margin: 0 auto;
  display: grid;
  width: 100%;
  max-width: 1024px;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px 24px;
  overflow: auto;
}
@media (min-width: 1024px) {
  .cb-subscribe-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-block: 32px;
  }
}
.cb-subscribe-mockup {
  /* Below 1024px this page is one screen tall with no scroll (see
     body.page-subscribe above) — the decorative phone mockup is the one
     element with no functional job, so it's dropped here rather than
     fighting to cram image + full headline + form + note into a phone's
     viewport height. */
  display: none;
}
@media (min-width: 1024px) {
  .cb-subscribe-mockup {
    display: flex;
    justify-content: center;
    order: 1;
  }
}
.cb-subscribe-mockup img {
  width: 100%;
  max-width: 384px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.15));
}
.cb-subscribe-copy {
  order: 1;
}
@media (min-width: 1024px) {
  .cb-subscribe-copy {
    order: 2;
  }
}
.cb-subscribe-title {
  font-size: 28px;
  font-weight: 700;
}
@media (min-width: 640px) {
  .cb-subscribe-title {
    font-size: 32px;
  }
}
.cb-subscribe-sub {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
}
/* Beehiiv's embed.js measures its container at mount and sets the
   iframe's inline width AND height to match — including reflowing to a
   taller layout at narrower widths (e.g. ~267×68 rather than a scaled
   553×51), so it is NOT a fixed aspect ratio. An earlier version of this
   rule forced a fixed 553:51 aspect-ratio on the wrapper — correct for
   the wide/desktop layout, but it clipped the bottom off the form at
   narrower widths where Beehiiv actually needs proportionally more
   height. The fix is to not fight either dimension: let Beehiiv's own
   inline width/height stand, and just clamp the wrapper's max-width so
   it never grows past the embed's native desktop size. */
.cb-subscribe-embed-wrap {
  margin-top: 24px;
  max-width: 553px;
}
.cb-subscribe-embed-wrap iframe {
  display: block;
  max-width: 100%;
  margin: 0;
  background: transparent;
  border: none;
  /* Hidden until Beehiiv has sized it (see page-subscribe.php): the
     iframe first paints at the browser's default size and unstyled,
     then Beehiiv's script resizes it, which read as a big layout jump. */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cb-subscribe-embed-wrap.is-ready iframe {
  opacity: 1;
}
/* Reserve the form's usual height so nothing below it moves when it appears. */
.cb-subscribe-embed-wrap {
  min-height: 51px;
}
.cb-subscribe-note {
  margin-top: 12px;
  font-size: 14px;
  font-style: italic;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Contact page (page-contact.php)
   ========================================================================== */
.cb-contact-layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .cb-contact-layout {
    grid-template-columns: 1fr 320px;
  }
  .cb-contact-layout .cb-form,
  .cb-contact-layout .cb-form-success {
    margin-top: 0;
  }
}
.cb-contact-sidebar {
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 24px;
}
.cb-contact-sidebar-section {
  border-top: 1px solid var(--cb-border);
  padding-top: 24px;
}
.cb-contact-sidebar-label {
  font-family: var(--cb-font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cb-ink);
}
.cb-contact-sidebar-email {
  margin-top: 4px;
  display: block;
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-contact-sidebar-email:hover {
  text-decoration: underline;
}
.cb-contact-sidebar-text {
  margin-top: 4px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-contact-sidebar-link {
  color: var(--cb-cobalt);
  font-weight: 500;
}
.cb-contact-sidebar-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Advertise page (page-advertise.php) — the "See it in action" sample
   card is deliberately styled to match the newsletter EMAIL's own
   palette, not the site's, since it's a facsimile of a real placement.
   ========================================================================== */
.cb-advertise-sample {
  margin-top: 48px;
}
.cb-advertise-sample-intro {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-advertise-sample-intro a {
  font-weight: 600;
  color: var(--cb-cobalt);
}
.cb-advertise-sample-card {
  margin: 20px auto 0;
  max-width: 620px;
  font-family: var(--cb-font-body);
}
.cb-advertise-sample-tag {
  display: inline-block;
  border-radius: 2px;
  background: #ffd633;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #111;
}
.cb-advertise-sample-body {
  margin-top: 14px;
  border-radius: 12px;
  border: 3px solid #ffd633;
  background: #fbf9f4;
  padding: 28px;
}
@media (min-width: 640px) {
  .cb-advertise-sample-body {
    padding: 28px 32px;
  }
}
.cb-advertise-sample-title {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #111;
}
@media (min-width: 640px) {
  .cb-advertise-sample-title {
    font-size: 30px;
  }
}
.cb-advertise-sample-meta {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #666;
}
.cb-advertise-sample-copy {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: #111;
}
.cb-advertise-sample-images {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cb-advertise-sample-images img {
  height: 200px;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.cb-advertise-sample-cta {
  margin-top: 20px;
  display: inline-block;
  border-radius: 6px;
  background: #173282;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}
.cb-advertise-sample-disclaimer {
  margin-top: 12px;
  font-size: 10px;
  font-style: italic;
  color: #999;
}
.cb-advertise-after {
  margin-top: 48px;
}
.cb-advertise-form {
  margin-top: 32px;
}

.cb-guide-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  /* 420px, not the original 320px — Beehiiv's embed (in the newsletter
     box below) switches to its compact, stacked-looking layout somewhere
     between 320 and 340px wide, which visibly wraps its own "Try It"
     button label onto two lines. Now that the embed sits inside the
     box's own 24px padding rather than bleeding past it, the box itself
     needs to be ~48px wider than that threshold to still give Beehiiv a
     clear run of ~340px+ — 420px keeps a comfortable margin above it. */
  .cb-guide-layout {
    grid-template-columns: 1fr 420px;
    align-items: start;
  }
  .cb-guide-sidebar {
    position: sticky;
    top: 96px;
  }
}

.cb-article-card {
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  padding: 32px;
}
@media (min-width: 640px) {
  .cb-article-card {
    padding: 40px;
  }
}
.cb-article-title {
  font-size: 36px;
}
.cb-article-date {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-article-content {
  margin-top: 32px;
}

/* ==========================================================================
   Newsletter sidebar box (guide posts)
   ========================================================================== */
.cb-newsletter-box {
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  padding: 24px;
}
/* Below 1024px the sidebar stacks under the article in a single-column
   layout, where the content column (~307px after the surrounding page
   padding stacks up) is even narrower than the desktop sidebar width
   that gives Beehiiv's embed enough room for its normal single-row
   layout — there's no spare column to widen here, so the box still
   breaks out to the full viewport width (the standard
   calc(50% - 50vw) full-bleed technique, robust to however much padding
   stacks above it) even though it no longer matches the inset, margined
   look of other cards like .cb-article-card at this width. That's a
   deliberate trade-off: without the extra width, Beehiiv's "Try It"
   button label wraps onto two lines (confirmed happens below ~340px of
   clear space) — see .cb-newsletter-box-embed below for how that space
   is spent. */
@media (max-width: 1023px) {
  .cb-newsletter-box {
    margin-inline: calc(50% - 50vw);
  }
}
.cb-newsletter-box-tag {
  display: inline-block;
  border-radius: 4px;
  background: var(--cb-gold);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink);
}
.cb-newsletter-box-title {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--cb-ink);
}
.cb-newsletter-box-sub {
  margin-top: 4px;
  font-size: 15px;
  color: var(--cb-ink-muted);
}
/* A modest 12px inset either side — not the box's full 24px padding —
   because Beehiiv's embed.js measures its container at mount and
   switches to a compact layout (its own "Try It" button label wrapping
   onto two lines) once that's under ~340px. The mobile full-bleed box
   above only just clears that threshold in the first place; the full
   24px padding would eat back into it enough to bring the wrap back on
   ordinary phone widths. 12px (net, via -12px against the 24px padding)
   is the largest inset confirmed to still leave Beehiiv enough room.

   Beehiiv's embed.js sets the iframe's inline width AND height to match
   whatever it measures — including reflowing to a taller layout at
   narrower widths, so it is NOT a fixed aspect ratio. A fixed-450×51 +
   transform:scale() approach (an earlier version of this rule, same
   mistake as .cb-subscribe-embed-wrap once made) breaks the moment
   Beehiiv measures a width other than 450. Letting Beehiiv's own inline
   width/height stand and just clamping max-width is robust regardless
   of what width it measures. */
.cb-newsletter-box-embed {
  margin: 16px -12px 0;
}
.cb-newsletter-box-embed iframe {
  display: block;
  max-width: 100%;
  margin: 0;
  background: transparent;
  border: none;
}

/* ==========================================================================
   Newsletter archive (home.php)
   ========================================================================== */
.cb-issue-hero {
  position: relative;
  /* min-height, not a fixed height — on mobile .cb-issue-hero-inner
     stacks the cover image, tag, title, excerpt and two buttons in a
     column, which needs well over 460px; a fixed height + overflow:
     hidden was silently clipping the bottom off that stack (the
     buttons) instead of letting the box grow to fit. 460px is still
     the right size for the desktop row layout, which comfortably fits
     within it. */
  min-height: 460px;
  width: 100%;
  overflow: hidden;
  background: var(--cb-ink);
}
.cb-issue-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  opacity: 0.6;
  filter: blur(24px);
}
.cb-issue-hero-inner {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-block: 40px;
  text-align: center;
}
@media (min-width: 1024px) {
  .cb-issue-hero-inner {
    flex-direction: row;
    text-align: left;
  }
}
.cb-issue-hero-cover {
  flex: none;
  width: 224px;
  height: 224px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cb-ink);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}
@media (min-width: 640px) {
  .cb-issue-hero-cover {
    width: 288px;
    height: 288px;
  }
}
.cb-issue-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cb-issue-hero-text {
  max-width: 420px;
}
.cb-issue-hero-tag {
  display: inline-block;
  border-radius: 4px;
  background: var(--cb-gold);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-ink);
}
.cb-issue-hero-title {
  margin-top: 16px;
  font-size: 36px;
  line-height: 0.95;
  font-weight: 600;
  color: var(--cb-surface);
}
.cb-issue-hero-excerpt {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-footer-link);
}
.cb-issue-hero-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
@media (min-width: 1024px) {
  .cb-issue-hero-actions {
    justify-content: flex-start;
  }
}

.cb-issues-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .cb-issues-archive-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cb-issues-archive-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.cb-issue-archive-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
  transition: box-shadow 0.15s ease;
}
.cb-issue-archive-card:hover {
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-issue-archive-media {
  position: relative;
  height: 160px;
  flex: none;
  overflow: hidden;
  background: var(--cb-ink);
}
.cb-issue-archive-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  opacity: 0.7;
  filter: blur(20px);
}
.cb-issue-archive-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cb-issue-archive-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}
.cb-issue-archive-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cb-cobalt);
}
.cb-issue-archive-title {
  margin-top: 4px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-issue-archive-snippet {
  margin-top: 8px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-issue-archive-link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-cobalt);
}

.cb-pagination {
  margin-top: 40px;
}
.cb-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  margin-right: 6px;
  padding-inline: 10px;
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-pagination .page-numbers.current {
  background: var(--cb-cobalt);
  border-color: var(--cb-cobalt);
  color: var(--cb-surface);
}

/* ==========================================================================
   .prose — rendered post/page/listing/event HTML content. Hand-written
   equivalent of the Next.js build's @tailwindcss/typography defaults plus
   its legacy-WP-content overrides (see that project's globals.css) —
   migrated content still carries class names authored for the pre-rebuild
   theme, which this site must keep supporting.
   ========================================================================== */
.prose {
  font-size: 16px;
  line-height: 1.75;
  color: var(--cb-ink);
  /* Editorial content sometimes contains a single long unbreakable token
     (a bare email address, a URL) with no spaces to wrap at. `break-word`
     alone doesn't fix this — browsers deliberately exclude it from the
     min-content calculation (it only kicks in once a line is already
     being broken), so the unbroken word still forces <main> — a flex
     item of GeneratePress's #content wrapper — wider than the viewport.
     `anywhere` is the one value that's also counted in min-content, so
     the text actually gets to shrink instead of pushing the page wide. */
  overflow-wrap: anywhere;
}
.prose > :first-child {
  margin-top: 0;
}
.prose > :last-child {
  margin-bottom: 0;
}
.prose p {
  margin: 1.25em 0;
}
.prose h2 {
  margin: 1.6em 0 0.8em;
  font-size: 1.5em;
}
.prose h3 {
  margin: 1.4em 0 0.6em;
  font-size: 1.25em;
}
.prose h4 {
  margin: 1.2em 0 0.5em;
  font-size: 1.1em;
}
.prose ul,
.prose ol {
  margin: 1.25em 0;
  padding-left: 1.5em;
}
.prose li {
  margin: 0.4em 0;
}
.prose blockquote {
  margin: 1.5em 0;
  padding-left: 1.2em;
  border-left: 3px solid var(--cb-border);
  font-style: italic;
  color: var(--cb-ink-muted);
}
.prose img {
  margin: 1.5em 0;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}
.prose strong {
  font-weight: 700;
}
.prose hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid var(--cb-border);
}
.prose a {
  color: var(--cb-cobalt);
}

/* WordPress core's own emoji-as-<img> sizing — without this, every emoji
   glyph in newsletter content renders at its native SVG size (huge)
   instead of inline with the text. */
.prose img.emoji {
  display: inline !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

/* The "Editor's Pick" callout box wrapped around a featured event. */
.prose .cbz-editors-pick {
  background-color: #fbf2da;
  border: 2px solid var(--cb-tan);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.prose .cbz-editors-pick__heading {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--cb-ink);
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.prose .cbz-editors-pick__body p:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Every link inside newsletter/page/listing/event body content gets a
   gold "highlighter" underline instead of a plain browser underline, with
   a soft cream wash that grows in on hover. */
.prose :where(p, li) a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--cb-gold);
  padding-bottom: 1px;
  background-image: linear-gradient(#fbf2da, #fbf2da);
  background-repeat: no-repeat;
  background-size: 100% 0%;
  background-position: 0 100%;
  transition: background-size 0.3s;
}
.prose :where(p, li) a:hover {
  background-size: 100% 88%;
}

/* The tan/gold divider rule under a newsletter issue's "Jump to" bar. */
.prose hr.wp-block-separator {
  height: 0;
  border: none;
  border-top: 2px solid var(--cb-gold);
  margin: 24px 0;
}

/* ==========================================================================
   "My List" — save/email a shortlist of directory listings (entirely
   client-side, localStorage; see assets/js/my-list.js and
   template-parts/my-list-ui.php). Matches SaveListingButton.tsx/
   MyListButton.tsx/SavedListingsDrawer.tsx/EmailMyListModal.tsx, restyled
   onto this theme's own Gold & Cobalt tokens rather than the old build's
   green accent.
   ========================================================================== */
.cb-save-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  color: var(--cb-ink-muted);
  cursor: pointer;
  /* GeneratePress's own button reset adds ~10px/20px padding, which in a
     fixed 30px circle left no room and squeezed the icon's width to 0. */
  padding: 0;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cb-save-btn svg {
  flex: none;
}
.cb-save-btn:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}
.cb-save-btn-active {
  border-color: var(--cb-cobalt);
  background: rgba(76, 117, 242, 0.1);
  color: var(--cb-cobalt);
}
.cb-save-btn-active svg {
  fill: var(--cb-cobalt);
}
.cb-listing-card-save {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.cb-listing-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-listing-save.cb-save-btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Nav "My List (N)" button — hidden until something's saved. */
.cb-mylist-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--cb-radius);
  background: var(--cb-tan);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
  cursor: pointer;
}
.cb-mylist-nav-btn:hover {
  background: color-mix(in srgb, var(--cb-tan) 85%, black);
}
.cb-mylist-nav-btn-mobile {
  justify-content: center;
  margin-top: 4px;
}

/* Drawer */
.cb-mylist-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.cb-mylist-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 29, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
}
.cb-mylist-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 400px;
  flex-direction: column;
  background: var(--cb-surface);
  box-shadow: -8px 0 24px rgba(16, 18, 23, 0.15);
}
.cb-mylist-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--cb-border);
  padding: 20px 24px;
}
.cb-mylist-panel-title {
  font-size: 22px;
  font-weight: 700;
}
.cb-mylist-icon-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: #fff;
  color: var(--cb-ink-muted);
  cursor: pointer;
  padding: 0;
}
.cb-mylist-icon-btn svg {
  flex: none;
}
.cb-mylist-icon-btn:hover {
  border-color: var(--cb-cobalt);
  color: var(--cb-cobalt);
}
.cb-mylist-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.cb-mylist-empty {
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-mylist-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cb-mylist-item {
  border-radius: 6px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 16px;
}
.cb-mylist-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cb-mylist-item-name {
  font-size: 15px;
  font-weight: 700;
}
.cb-mylist-item-remove {
  flex: none;
  border: none;
  background: none;
  padding: 0;
  color: var(--cb-ink-muted);
  cursor: pointer;
}
.cb-mylist-item-remove:hover {
  color: var(--cb-ink);
}
.cb-mylist-item-category {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cb-ink-muted);
}
.cb-mylist-item-tag {
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-tan-tint);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}
.cb-mylist-item-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.cb-mylist-item-view {
  color: var(--cb-cobalt);
}
.cb-mylist-item-view:hover {
  color: var(--cb-cobalt-dark);
}
.cb-mylist-item-website {
  color: var(--cb-ink-muted);
}
.cb-mylist-item-website:hover {
  color: var(--cb-ink);
}
.cb-mylist-panel-footer {
  border-top: 1px solid var(--cb-border);
  padding: 20px 24px;
}
.cb-mylist-email-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cb-mylist-email-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.cb-mylist-clear-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: none;
  background: none;
  padding: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-ink-muted);
  cursor: pointer;
}
.cb-mylist-clear-link:hover {
  color: var(--cb-ink);
}
.cb-mylist-clear-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
}
.cb-mylist-clear-confirm-yes {
  border: none;
  background: none;
  padding: 0;
  font-weight: 600;
  color: #b91c1c;
  cursor: pointer;
}
.cb-mylist-clear-confirm-cancel {
  border: none;
  background: none;
  padding: 0;
  font-weight: 500;
  color: var(--cb-ink-muted);
  cursor: pointer;
}

/* Email modal */
.cb-mylist-email-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cb-mylist-email-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 29, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
}
.cb-mylist-email-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 8px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.cb-mylist-email-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cb-mylist-email-title {
  font-size: 20px;
  font-weight: 700;
}
.cb-mylist-email-intro {
  margin-top: 16px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-mylist-email-form .cb-form-label {
  margin-top: 16px;
}
.cb-mylist-email-submit {
  display: block;
  width: 100%;
  margin-top: 20px;
}
.cb-mylist-email-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.cb-mylist-email-success p {
  margin-top: 16px;
  font-size: 14px;
}

/* ==========================================================================
   /welcome — post-subscribe survey (page-welcome.php)
   ========================================================================== */
.cb-welcome-intro {
  text-align: center;
}
.cb-welcome-intro .cb-page-intro {
  margin-inline: auto;
}
.cb-survey-card {
  margin-top: 40px;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04);
  padding: 24px;
}
@media (min-width: 640px) {
  .cb-survey-card {
    padding: 32px;
  }
}
.cb-survey-title {
  font-size: 20px;
  font-weight: 700;
}
.cb-survey-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}
.cb-survey-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cb-survey-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cb-ink-muted);
}
.cb-survey-chips,
.cb-survey-toggle {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cb-survey-chip {
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-ink);
  cursor: pointer;
}
.cb-survey-chip:hover {
  border-color: var(--cb-cobalt);
}
.cb-survey-chip-active {
  border-color: var(--cb-cobalt);
  background: var(--cb-cobalt);
  color: var(--cb-surface);
  font-weight: 600;
}
.cb-survey-chip-active:hover {
  border-color: var(--cb-cobalt);
}
.cb-survey-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cb-survey-skip {
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-ink-muted);
  cursor: pointer;
}
.cb-survey-skip:hover {
  color: var(--cb-ink);
}
.cb-survey-success {
  text-align: center;
}
.cb-survey-success-icon {
  font-size: 28px;
}
.cb-survey-success-title {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
}
.cb-survey-success-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--cb-ink-muted);
}

/* ==========================================================================
   Cookie consent banner (template-parts/cookie-consent.php)
   ========================================================================== */
.cb-cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  border-top: 1px solid var(--cb-footer-line);
  background: var(--cb-ink);
  padding: 16px 24px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}
.cb-cookie-banner-inner {
  margin-inline: auto;
  display: flex;
  max-width: 1152px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 640px) {
  .cb-cookie-banner-inner {
    flex-direction: row;
  }
}
.cb-cookie-banner-text {
  font-size: 14px;
  color: var(--cb-footer-link);
  text-align: center;
}
@media (min-width: 640px) {
  .cb-cookie-banner-text {
    text-align: left;
  }
}
.cb-cookie-banner-text a {
  color: var(--cb-surface);
  text-decoration: underline;
}
.cb-cookie-banner-text a:hover {
  color: var(--cb-gold);
}
.cb-cookie-banner-actions {
  display: flex;
  flex: none;
  gap: 8px;
}
.cb-cookie-banner-decline {
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-footer-line);
  background: transparent;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-footer-link);
  cursor: pointer;
}
.cb-cookie-banner-decline:hover {
  color: var(--cb-surface);
}
.cb-cookie-banner-accept {
  border-radius: var(--cb-radius);
  border: none;
  background: var(--cb-gold);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink);
  cursor: pointer;
}
.cb-cookie-banner-accept:hover {
  background: color-mix(in srgb, var(--cb-gold) 90%, black);
}

/* Event submit form: Organiser group */
.cb-form-fieldset {
  margin: 8px 0 0;
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cb-form-legend {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.cb-form-legend .cb-form-hint {
  font-weight: 400;
}

/* Single event: Organiser section */
.cb-event-organiser {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}
.cb-event-organiser-name {
  font-weight: 600;
  color: var(--cb-ink);
}
.cb-event-organiser a {
  color: var(--cb-cobalt);
}
.cb-event-organiser a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   404 page (404.php)
   ========================================================================== */
.cb-404 {
  text-align: center;
  padding-block: 96px;
}
.cb-404-code {
  font-family: var(--cb-font-display);
  font-size: clamp(88px, 18vw, 160px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cb-ink);
}
.cb-404-code span {
  display: inline-block;
  margin-inline: 0.04em;
  color: var(--cb-gold);
}
.cb-404-title {
  margin-top: 16px;
  font-size: 32px;
}
.cb-404-text {
  margin: 16px auto 0;
  max-width: 520px;
  color: var(--cb-ink-muted);
}
.cb-404-links {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}
@media (min-width: 640px) {
  .cb-404-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cb-404-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--cb-border);
  background: #fff;
  padding: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cb-404-link:hover {
  border-color: var(--cb-cobalt);
  box-shadow: 0 4px 12px rgba(16, 18, 23, 0.08);
}
.cb-404-link-title {
  font-weight: 700;
  color: var(--cb-ink);
}
.cb-404-link-sub {
  font-size: 13px;
  color: var(--cb-ink-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cb-404-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.cb-404-contact {
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-ink-muted);
  text-decoration: underline;
}
.cb-404-contact:hover {
  color: var(--cb-cobalt);
}