:root {
  /* Palette sourced from the FBA Threat Database logo's blood-red map. */
  --bg: #faf5f5;
  --surface: #ffffff;
  --surface-alt: #f5eded;
  --border: #e3cdcf;
  --border-strong: #c79ea1;
  --text: #241315;
  --muted: #6b5457;
  --heading: #3a1215;
  --primary: #c6202c;
  --primary-dark: #89161e;
  --primary-soft: #f8e7e9;
  --primary-contrast: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(199, 158, 161, 0.55);
  --glass-blur: blur(16px);
  --glow: 0 8px 26px rgba(198, 32, 44, 0.14);
  --glow-strong: 0 12px 36px rgba(198, 32, 44, 0.22);
  --shadow: 0 10px 30px rgba(36, 19, 21, 0.08);
  --shadow-soft: 0 4px 12px rgba(36, 19, 21, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --max-width: 1180px;
  --focus: #89161e;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

a:hover {
  color: var(--primary-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button,
input[type="submit"] {
  min-height: 46px;
  padding: 0.8rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: 700;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  background: var(--primary-dark);
  box-shadow: var(--glow-strong);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1000;
  background: var(--primary-dark);
  color: var(--primary-contrast);
  padding: 0.85rem 1rem;
  border-radius: 999px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header,
.site-footer,
.hero,
.search,
.card,
.business-card,
.form-card,
.empty {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}

/* Fallback for browsers without backdrop-filter support: a solid surface
   instead of a half-transparent panel over unpredictable content. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header,
  .site-footer,
  .hero,
  .search,
  .card,
  .business-card,
  .form-card,
  .empty {
    background: var(--surface);
  }
}

.site-header {
  max-width: var(--max-width);
  margin: 1rem auto 1.25rem;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0.75rem;
  z-index: 40;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
}

.site-title {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--heading);
  text-decoration: none;
}

.site-tagline {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* --- Hamburger nav ---------------------------------------------------
   A plain <button id="navToggle"> + <nav id="siteNav">, toggled by JS in
   footer.php (adds/removes .is-open, flips aria-expanded). The nav lives
   inside a dropdown panel behind the hamburger at every screen width, not
   just on mobile. */
.nav-hamburger {
  position: relative;
  margin-left: auto;
}

.hamburger-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--heading);
  cursor: pointer;
}

.hamburger-icon-open,
.hamburger-icon-close {
  width: 24px;
  height: 24px;
}

/* Two separate, explicit SVGs swapped by aria-expanded state, rather than
   one icon animated with CSS transforms. */
.hamburger-icon-close {
  display: none;
}

.hamburger-toggle[aria-expanded="true"] .hamburger-icon-open {
  display: none;
}

.hamburger-toggle[aria-expanded="true"] .hamburger-icon-close {
  display: block;
}

.hamburger-toggle[aria-expanded="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.site-nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 240px;
  padding: 0.6rem;
  /* Fully opaque, not the shared glass treatment used elsewhere -- a
     dropdown menu sits directly over page content and needs to stay
     legible. */
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glow);
}

.site-nav.hidden,
html.has-js .site-nav:not(.is-open) {
  display: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--heading);
  text-decoration: none;
  font-weight: 650;
}

.site-nav a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--heading);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::marker {
  content: "";
}

.nav-dropdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-dropdown[open] summary::after {
  transform: rotate(-135deg);
}

.nav-dropdown summary:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem 0 0.25rem 0.75rem;
}

.nav-dropdown-menu a {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.nav-dropdown-menu a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

@media (max-width: 640px) {
  .site-nav {
    right: -0.6rem;
    min-width: 220px;
    max-width: calc(100vw - 2rem);
  }
}

.site-main,
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.1rem 2.5rem;
}

.hero {
  padding: 1.4rem;
  margin-bottom: 1.2rem;
}

.hero h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  color: var(--heading);
}

.hero p {
  margin: 0;
  color: var(--muted);
}

.search {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

/* Universal spacing between a question (label) and its input box, and
   between one field and the next -- applies everywhere on the site
   (threat, anti-black list, blog, login, etc. forms) without needing to
   remember to touch every individual form file. Deliberately only adds
   margin here, not width/border/padding, so it can't conflict with the
   field styling below or with things like inline search boxes that
   aren't meant to be full-width. */
label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--heading);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
  width: 100%;
  min-height: 48px;
  margin-bottom: 0.6rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* Native <select> keeps the browser's own compact sizing rather than the
   48px/full-width treatment meant for typed fields -- a dropdown reads
   oddly stretched edge-to-edge and doesn't need the extra height. */
select {
  width: auto;
  min-height: 40px;
  padding: 0.55rem 0.8rem;
}

/* Real multi-field forms (add/edit threat, add/edit anti-black list entry,
   blog editor, etc.) want their <select> dropdowns matching the
   full-width look of the text fields around them, unlike a standalone
   filter/utility dropdown (e.g. a search sort-order picker) which reads
   better compact. */
.form-card select {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 0.95rem;
}

.search input[type="text"],
.search input[type="search"],
.search-form input[type="search"],
.search-form input[type="text"] {
  margin-bottom: 0;
}

.meta,
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--muted);
  margin: 0 0 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.card,
.business-card,
.form-card {
  padding: 1.15rem;
}

.card:hover {
  border-color: var(--border-strong);
}

.name {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.name a {
  color: var(--heading);
  text-decoration: none;
}

.name a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.small {
  font-size: 0.95rem;
}

.muted {
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.2rem 0.7rem;
  margin: 0.35rem 0.35rem 0.25rem 0;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-strong);
  font-size: 0.88rem;
  font-weight: 650;
}

.empty {
  padding: 1.2rem;
  color: var(--muted);
  border-style: dashed;
}

.pager {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pager a {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--heading);
}

.pager a.active {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto 1.25rem;
  padding: 1.1rem;
  color: var(--muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
}

.footer-intro {
  max-width: 380px;
}

.footer-intro-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--heading);
  text-decoration: none;
}

.footer-intro-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.footer-intro-title:hover {
  color: var(--primary-dark);
}

.footer-intro p {
  margin: 0.5rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-social {
  margin: 0;
}

/* Right-hand side: nav columns as a group, pushed to the right edge of
   the footer via the parent .footer-top's justify-content: space-between
   -- but the LINK TEXT inside each column stays left-aligned to its own
   column (not to the footer as a whole), which is what actually reads
   as tidy stacked lists rather than a ragged right edge. Matches the B1
   Rolodex site's own footer layout exactly. */
.footer-columns {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2.5rem 3.5rem;
  text-align: left;
}

.footer-nav-group-stack {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.footer-nav-column--stacked {
  gap: 0.45rem;
}

.footer-nav-column--right {
  text-align: left;
}

.footer-nav-column {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 160px;
}

.footer-nav-column a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-nav-column a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-label {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--heading);
}

.footer-label--sub {
  margin-top: 1.1rem;
}

.footer-label--follow {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--heading);
  text-decoration: none;
}

.social-links a svg {
  width: 16px;
  height: 16px;
}

.social-links a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary);
}

@media (max-width: 900px) {
  /* Real single-column stacking, not just wrapping -- .footer-columns
     uses justify-content:flex-end for its desktop right-aligned layout,
     and if that's still active while wrapping on a narrower screen,
     each wrapped row right-aligns independently at whatever width it
     happens to be, producing a staggered "staircase" effect (each row
     starting at a different horizontal position) instead of a clean
     stack. Once everything is flex-direction:column with align-items:
     flex-start, there's no horizontal justification left to cause that.
     900px rather than a typical mobile-only 640px breakpoint -- the
     footer's side-by-side layout (intro block + nav columns) needs
     more room than most tablets provide even in landscape, so a
     mobile-only breakpoint left tablets hitting the same staircase
     issue phones originally had. */
  .footer-top,
  .footer-columns,
  .footer-nav-group-stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 1.75rem;
  }

  .footer-nav-column {
    min-width: 0;
    width: 100%;
  }

  .footer-intro {
    max-width: 100%;
  }
}

/* --- Share widget ------------------------------------------------------
   Small icon row (share_button.php); used both as the fixed site-wide
   sidebar below and inline wherever a page wants to share something more
   specific than "the current page." */
.share-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--heading);
  box-shadow: var(--shadow-soft);
}

@supports not (backdrop-filter: blur(1px)) {
  .share-icon {
    background: var(--surface);
  }
}

.share-icon svg {
  width: 15px;
  height: 15px;
}

.share-icon:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary);
  box-shadow: var(--glow);
}

/* Site-wide fixed share sidebar (see footer.php) -- pinned to the left
   edge and vertically centered in the viewport, so it stays visible on
   scroll. Toggled by an IntersectionObserver in footer.php while the
   footer is on screen, so it never overlaps the footer's own content. */
.share-widget-fixed {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.share-widget-fixed.is-hidden-for-footer {
  opacity: 0;
  pointer-events: none;
}

.share-widget-fixed .share-widget {
  flex-direction: column;
}

@media (max-width: 640px) {
  .share-widget-fixed {
    left: 0.5rem;
  }
}

.bad {
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: #fff1f1;
  border: 1px solid #f0b7b7;
  color: #8a1f1f;
}

.good {
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: #eef9f1;
  border: 1px solid #b8e0c1;
  color: #1e6a34;
}

.map-link {
  margin: 0.75rem 0 1.25rem;
}

.map-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 920px) {
  .search {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-header,
  .hero,
  .search,
  .card,
  .business-card,
  .site-footer,
  .form-card {
    padding: 1rem;
    border-radius: 14px;
  }

  .logo-link {
    width: 40px;
    height: 40px;
  }

  .site-title {
    font-size: 1.2rem;
  }

  .social-links a {
    width: 100%;
    justify-content: center;
  }

  .meta,
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .site-header,
  .card,
  .business-card,
  .site-footer,
  .search,
  .hero,
  .form-card,
  .empty {
    border: 1px solid CanvasText;
  }
}
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.google-form-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.google-form-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Utility classes — these replace scattered inline style="" attributes so
   the site can run a stricter Content-Security-Policy (style-src without
   'unsafe-inline'). */
.card-narrow-lg {
  max-width: 900px;
  margin: 0 auto;
}

.card-narrow-md {
  max-width: 560px;
  margin: 0 auto;
}

.card-narrow-sm {
  max-width: 420px;
  margin: 0 auto;
}

.mt-1 {
  margin-top: 1rem;
}

.mb-tight {
  margin: 0 0 10px;
}

.inline-link {
  color: inherit;
  text-decoration: underline;
}

.hidden {
  display: none;
}

.mt-05 {
  margin-top: 0.5rem;
}

.mb-05 {
  margin-bottom: 0.5rem;
}

.mt-06 {
  margin-top: 0.6rem;
}

.mt-025 {
  margin-top: 0.25rem;
}

.mt-075 {
  margin-top: 0.75rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.location-row-pad {
  margin-bottom: 0.75rem;
  padding: 0.85rem;
}

.inline-flex-gap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- Blog: cards, post layout, and the add/edit block editor ---------- */

.blog-card-thumb-link {
  display: block;
  margin: -1.15rem -1.15rem 0.9rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.blog-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-post-title {
  font-size: 1.6rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .blog-post-title {
    font-size: 2.2rem;
  }
}

.blog-post-featured-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 1rem 0;
}

.blog-post-content {
  line-height: 1.7;
}

.blog-post-text-block {
  margin-bottom: 1.25rem;
}

.blog-post-text-block h1,
.blog-post-text-block h2,
.blog-post-text-block h3,
.blog-post-text-block h4 {
  color: var(--heading);
  line-height: 1.25;
  margin: 1.2rem 0 0.5rem;
}

.blog-post-text-block ul,
.blog-post-text-block ol {
  padding-left: 1.4rem;
}

.blog-post-text-block li {
  margin-bottom: 0.35rem;
}

.blog-post-image-link {
  display: block;
}

.blog-post-block-image {
  display: block;
  height: auto;
  border-radius: var(--radius);
  margin: 0.5rem auto 1.5rem;
  object-fit: contain;
  max-width: 100%;
  transition: opacity 0.15s ease;
}

.blog-post-block-image--small {
  width: 100%;
  max-width: 320px;
}

.blog-post-block-image--medium {
  width: 100%;
  max-width: 560px;
}

.blog-post-block-image--large {
  width: 100%;
  max-width: 860px;
}

.blog-post-block-image--full {
  max-width: 100%;
  width: 100%;
}

.blog-post-image-link:hover .blog-post-block-image {
  opacity: 0.9;
}

.blog-post-video-wrap {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0.5rem auto 1.5rem;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.blog-post-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Block editor (add/edit blog) -- staff-only, add_blog.php/edit_blog.php
   are gated by require_role(admin/editor) before any of this renders. */
.block-editor {
  margin-bottom: 1rem;
}

.block-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.block-editor-block {
  position: relative;
  padding: 1rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.block-editor-block--text textarea {
  margin-bottom: 0;
}

.block-editor-block--image label,
.block-editor-block--video label {
  margin-top: 0.7rem;
}

.block-editor-block--image label:first-child,
.block-editor-block--video label:first-child {
  margin-top: 0;
}

.block-editor-preview {
  display: block;
  max-width: 240px;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
  border: 1px solid var(--border);
}

.block-remove-btn {
  margin-top: 0.75rem;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.block-remove-btn:hover {
  background: #fff1f1;
  color: #8a1f1f;
  border-color: #f0b7b7;
  box-shadow: none;
}

.block-editor-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.block-add-btn {
  background: var(--surface);
  color: var(--primary-dark);
  border: 1px solid var(--primary);
  font-size: 0.9rem;
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
}

.block-add-btn:hover {
  background: var(--primary-soft);
  box-shadow: none;
}

/* --- SEO / readability panel (add_blog.php / edit_blog.php) -----------
   Traffic-light check list: reuses the site's red/green language via
   the seo-check-{red,yellow,green} status classes, plus a yellow "warn"
   tier .bad/.good don't otherwise cover. Each check is a compact card
   so a dozen of them don't read as a wall of text. */
.seo-panel {
  margin-top: 1.25rem;
}

.seo-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.seo-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.seo-check-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 0.25rem;
  border-radius: 50%;
}

.seo-check-red {
  background: #fff1f1;
  border-color: #f0b7b7;
}

.seo-check-red .seo-check-dot {
  background: #c0392b;
}

.seo-check-yellow {
  background: #fffaf0;
  border-color: #f0dfa1;
}

.seo-check-yellow .seo-check-dot {
  background: #d4a017;
}

.seo-check-green {
  background: #eef9f1;
  border-color: #b8e0c1;
}

.seo-check-green .seo-check-dot {
  background: #1e6a34;
}

.seo-check-body {
  flex: 1 1 auto;
}

.seo-check-label {
  font-weight: 650;
  font-size: 0.92rem;
}

.seo-check-detail {
  font-size: 0.86rem;
  color: var(--muted);
}

/* Overall score headline row, above the individual keyword/readability
   checks -- deliberately larger/bolder than a .seo-check row so it
   reads as a summary, not just one more item in the list. */
.seo-overall-score {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.seo-overall-score .seo-check-dot {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
}

.seo-overall-score-label {
  font-weight: 700;
  font-size: 1.05rem;
}

.seo-overall-score-detail {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Secondary/ghost submit button -- used where a form has a primary
   action (Save) plus a lower-stakes secondary action (Preview SEO
   Score) that shouldn't visually compete with it. */
.btn-secondary {
  background: var(--surface);
  color: var(--primary-dark);
  border: 1px solid var(--border-strong);
  margin-top: 0.6rem;
  margin-left: 0.5rem;
}

.btn-secondary:hover {
  background: var(--primary-soft);
  box-shadow: none;
}

/* --- Contributors page --------------------------------------------------
   Names in a column on the left, photo alongside on the right, on
   anything wide enough for that to look intentional rather than
   cramped. Stacks (photo below the list) on mobile/tablet instead. */
.contributors-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.contributors-list {
  flex: 2 1 320px;
  margin: 0;
  column-count: 2;
  column-gap: 1.5rem;
}

.contributors-list li {
  break-inside: avoid;
}

.contributors-image {
  flex: 1 1 280px;
  max-width: 360px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

@media (max-width: 900px) {
  .contributors-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .contributors-image {
    max-width: 100%;
    order: 2;
  }

  .contributors-list {
    order: 1;
  }
}

@media (max-width: 480px) {
  .contributors-list {
    column-count: 1;
  }
}

/* --- FAQ page (faq.php) -------------------------------------------------
   Search box + category-grouped accordion. Search re-ranks matching
   items into a flat list (see faq.php's inline script); this is just the
   visual side of both states. */
#faqSearch {
  width: 100%;
  min-height: 48px;
  margin-bottom: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 0.6rem;
  padding: 0.9rem 1.1rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--heading);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 1.2rem;
  color: var(--primary);
  font-weight: 700;
}

.faq-item[open] summary::before {
  content: '\2212';
}

.faq-answer {
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  color: var(--text);
  line-height: 1.55;
}

.faq-answer p {
  margin: 0 0 0.6rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Resource / nonprofit directory cards (Useful Gov and NGO Resources,
   Political & Social Change) and the floating feature images used on
   those pages plus The B1 Rolodex page.
   ------------------------------------------------------------------- */

.page-feature-image {
  display: block;
  float: right;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
  border-radius: var(--radius);
}

.page-feature-image--logo {
  max-width: 180px;
  background: none;
}

.page-feature-image--bottom {
  float: none;
  margin: 1.5rem auto 0;
}

.page-feature-image--centered-top {
  float: none;
  margin: 0 auto 1.25rem;
}

.page-feature-image--lg {
  max-width: 440px;
}

.page-feature-image--logo-lg {
  max-width: 280px;
  background: none;
}

.page-feature-image--wide {
  max-width: 560px;
}

.page-feature-image-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 auto 1.25rem;
}

.page-feature-image-pair-img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--radius);
}

.page-feature-image-pair-img--logo {
  max-width: 200px;
  background: none;
}

.card-has-float-image::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 640px) {
  .page-feature-image {
    float: none;
    max-width: 220px;
    margin: 0 auto 1rem;
  }

  .page-feature-image--logo {
    max-width: 150px;
  }

  .page-feature-image--lg {
    max-width: 260px;
  }

  .page-feature-image--logo-lg {
    max-width: 180px;
  }

  .page-feature-image--wide {
    max-width: 100%;
  }

  .page-feature-image-pair {
    flex-direction: column;
    gap: 0.75rem;
  }

  .page-feature-image-pair-img {
    max-width: 220px;
  }

  .page-feature-image-pair-img--logo {
    max-width: 160px;
  }
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.resource-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 1.15rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.resource-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.resource-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.resource-helps {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 0.75rem;
}

.resource-contact {
  margin: 0;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.resource-contact a {
  overflow-wrap: anywhere;
}