/* ==========================================================================
   WAMC THEME — World Association of Master Chefs
   Built on Bootstrap 5 foundation, layered with WAMC heraldic styling
   ========================================================================== */

:root {
  /* Brand palette — drawn from the WAMC crest */
  --wamc-black: #0a0a0a;
  --wamc-charcoal: #1a1a1a;
  --wamc-gold: #c9a961;
  --wamc-gold-dark: #b08d4a;

  /* Publication dates. Warm enough to be picked out of a grey byline at a
     glance, dark enough to stay legible on white. Not the brand gold —
     that is reserved for buttons and medals. */
  --wamc-date: #C2610F;
  --wamc-gold-light: #e0c989;
  --wamc-cream: #f6f2e9;
  --wamc-parchment: #ebe5d3;
  --wamc-burgundy: #7a2e2e;
  --wamc-burgundy-dark: #5a1f1f;

  /* Falcon-style neutrals */
  --wamc-bg: #f9fafd;
  --wamc-border: #e3e6ed;
  --wamc-text: #2a2c34;
  --wamc-text-muted: #748194;

  /* Layout */
  --sidebar-width: 240px;
  --navbar-height: 64px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--wamc-bg);
  color: var(--wamc-text);
  margin: 0;
  padding-top: var(--navbar-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.with-sidebar { padding-left: var(--sidebar-width); }

h1, h2, h3, h4, h5, .serif {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--wamc-charcoal);
  letter-spacing: -0.01em;
}

a { color: var(--wamc-burgundy); }

/* ==========================================================================
   NAVBAR (top, fixed, on every page)
   ========================================================================== */

.wamc-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-height);
  background: var(--wamc-black);
  border-bottom: 1px solid #2a2a2a;
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.wamc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--wamc-cream);
  text-decoration: none;
}

/* The brand sits above the sidebar, so it lines up with the sidebar edge.
   A fixed width did that, but on admin pages the "Admin" pill also lives in
   this box and ate 78px of it, leaving too little for the words: "Head
   Office" broke onto two lines and the whole block looked cut off. A minimum
   keeps the alignment and lets the pill push past it. */
body.with-sidebar .wamc-brand {
  min-width: calc(var(--sidebar-width) - 24px);
}

/* The artwork is the whole crest — crown, laurel and banner — centred in a
   square canvas, so it fills about four fifths of the box. Sized to read at
   the same weight the old cropped mark did. */
.wamc-brand-crest { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }

.wamc-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* Two short lines, and both must stay on one line each. */
.wamc-brand-text strong, .wamc-brand-text span { white-space: nowrap; }
.wamc-brand-text strong {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--wamc-gold);
  letter-spacing: 0.5px;
}
.wamc-brand-text span {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.wamc-nav-links { display: flex; gap: 24px; margin-left: 36px; }
.wamc-nav-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.wamc-nav-links a:hover, .wamc-nav-links a.active { color: var(--wamc-gold); }
.wamc-nav-links .chev { font-size: 10px; opacity: 0.6; }

.wamc-nav-search {
  flex: 1;
  max-width: 420px;
  height: 36px;
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #888;
  font-size: 13px;
  margin-left: 12px;
}
.wamc-nav-search i { margin-right: 10px; color: #666; }

.wamc-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language switcher */
.wamc-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ccc;
  font-size: 12.5px;
  padding: 6px 10px;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.wamc-lang:hover { border-color: var(--wamc-gold); color: var(--wamc-gold); }
.wamc-lang i.bi-globe2 { font-size: 14px; }
.wamc-lang i.bi-chevron-down { font-size: 10px; opacity: 0.7; }
.wamc-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: none;
  z-index: 1031;
}
.wamc-lang.open .wamc-lang-menu { display: block; }
.wamc-lang.open i.bi-chevron-down { transform: rotate(180deg); }
.wamc-lang i.bi-chevron-down { transition: transform 0.15s; }
.wamc-lang-menu { max-height: 70vh; overflow-y: auto; }
.wamc-lang-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--wamc-text);
  text-decoration: none;
  border-radius: 4px;
}
.wamc-lang-menu a:hover { background: var(--wamc-cream); color: var(--wamc-burgundy); }
.wamc-lang-menu a.current { background: var(--wamc-charcoal); color: var(--wamc-gold); }
.wamc-lang-menu a small { font-size: 11px; opacity: 0.6; }

/* Nav icons (logged-in: bell, mail, avatar) */
.wamc-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}
.wamc-nav-icon:hover { background: #1f1f1f; color: var(--wamc-gold); }
/* Rendered only when the count is real — see the member top bar in header.php. */
.wamc-nav-badge {
  position: absolute;
  top: -1px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--wamc-burgundy);
  border: 1.5px solid var(--wamc-black);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.wamc-nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wamc-gold);
  color: var(--wamc-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.wamc-btn-ghost {
  background: transparent;
  border: 1px solid #444;
  color: #ddd;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.wamc-btn-ghost:hover { border-color: var(--wamc-gold); color: var(--wamc-gold); }

.wamc-btn-gold {
  background: var(--wamc-gold);
  border: 1px solid var(--wamc-gold);
  color: var(--wamc-black);
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.wamc-btn-gold:hover { background: var(--wamc-gold-light); color: var(--wamc-black); }

/* ==========================================================================
   SIDEBAR (logged-in pages only)
   ========================================================================== */

.wamc-sidebar {
  position: fixed;
  left: 0;
  top: var(--navbar-height);
  bottom: 0;
  width: var(--sidebar-width);
  background: white;
  border-right: 1px solid var(--wamc-border);
  padding: 22px 0;
  overflow-y: auto;
}

.wamc-sidebar-group {
  font-size: 10px;
  font-weight: 700;
  color: var(--wamc-text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 22px;
  margin-bottom: 10px;
  margin-top: 22px;
}
.wamc-sidebar-group:first-child { margin-top: 0; }

.wamc-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  color: var(--wamc-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.wamc-sidebar a i { font-size: 17px; color: var(--wamc-text-muted); width: 18px; }
.wamc-sidebar a:hover { background: var(--wamc-bg); color: var(--wamc-charcoal); }
.wamc-sidebar a:hover i { color: var(--wamc-gold-dark); }
.wamc-sidebar a.active {
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  border-left-color: var(--wamc-gold);
}
.wamc-sidebar a.active i { color: var(--wamc-burgundy); }
.wamc-sidebar-badge {
  margin-left: auto;
  background: var(--wamc-burgundy);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

/* ==========================================================================
   ADMIN NAVBAR EXTENSIONS
   ========================================================================== */

.wamc-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--wamc-gold);
  padding: 3px 9px;
  margin-left: 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.wamc-admin-pill i { font-size: 10px; }

.wamc-nav-search-kbd {
  margin-left: auto;
  font-family: 'Inter', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 2px 6px;
  border-radius: 3px;
}

.wamc-admin-newbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wamc-gold);
  color: var(--wamc-black);
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wamc-admin-newbtn:hover { background: var(--wamc-gold-light); }
.wamc-admin-newbtn i { font-size: 14px; }

.wamc-admin-role {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid #2a2a2a;
  cursor: pointer;
}
.wamc-admin-role:hover .wamc-admin-role-text strong { color: var(--wamc-gold); }
.wamc-admin-role-text { display: flex; flex-direction: column; line-height: 1.15; }
.wamc-admin-role-text strong { font-size: 12.5px; color: var(--wamc-cream); font-weight: 600; }
.wamc-admin-role-text span { font-size: 10px; color: #888; margin-top: 2px; }

/* Admin sidebar — same shape, slightly different group label colour */
.wamc-sidebar-admin .wamc-sidebar-group { color: var(--wamc-burgundy); }
.wamc-sidebar-admin .wamc-sidebar-badge { background: var(--wamc-gold); color: var(--wamc-black); }
body.admin-mode .wamc-sidebar a.active {
  background: #f6e9e9;
  border-left-color: var(--wamc-burgundy);
}

/* ==========================================================================
   ADMIN ACCORDION SIDEBAR
   Inline accordion: group headers collapsed; items expand inline below on
   hover of the group (or if the group contains the current page).
   Pure CSS, no JS required.
   ========================================================================== */

.wamc-sidebar-admin.is-accordion {
  padding: 14px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Each group is a vertical container of header + panel */
.wamc-sidebar-admin.is-accordion .wamc-acc-group {
  position: relative;
  margin: 0;
}

/* GROUP HEADER (always visible) */
.wamc-sidebar-admin.is-accordion .wamc-acc-head {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--wamc-text);
  cursor: pointer;
  border-left: 3px solid transparent !important;
  background: transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-head i.head-icon {
  font-size: 18px;
  color: var(--wamc-text-muted);
  width: 20px;
  text-align: center;
  transition: color 0.12s;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-head .head-chev {
  margin-left: auto;
  font-size: 11px;
  color: var(--wamc-text-muted);
  transition: transform 0.2s, color 0.12s;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-head .head-badge {
  margin-left: auto;
  background: var(--wamc-burgundy);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-head .head-badge + .head-chev {
  margin-left: 6px;
}

/* Hover, open & current state on the head */
.wamc-sidebar-admin.is-accordion .wamc-acc-group:hover > .wamc-acc-head,
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-open > .wamc-acc-head,
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-current > .wamc-acc-head {
  background: var(--wamc-bg);
  color: var(--wamc-charcoal);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-group:hover > .wamc-acc-head i.head-icon,
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-open > .wamc-acc-head i.head-icon,
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-current > .wamc-acc-head i.head-icon {
  color: var(--wamc-burgundy);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-current > .wamc-acc-head {
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  border-left-color: var(--wamc-gold) !important;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-open > .wamc-acc-head .head-chev {
  transform: rotate(90deg);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-group:hover > .wamc-acc-head .head-chev,
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-open > .wamc-acc-head .head-chev {
  color: var(--wamc-burgundy);
}

/* THE PANEL — collapsed by default; opens only when its group is clicked (.is-open). */
.wamc-sidebar-admin.is-accordion .wamc-acc-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.15s ease;
  background: transparent;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-group.is-open > .wamc-acc-panel {
  max-height: 400px;
  opacity: 1;
  padding: 2px 0 6px;
}

/* Items inside the panel */
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 48px !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--wamc-text);
  text-decoration: none;
  border-left: 3px solid transparent !important;
  transition: background 0.12s, color 0.12s;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a i {
  font-size: 14px;
  color: var(--wamc-text-muted);
  width: 16px;
  text-align: center;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a:hover {
  background: var(--wamc-bg);
  color: var(--wamc-burgundy);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a:hover i {
  color: var(--wamc-burgundy);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a.active {
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  border-left-color: var(--wamc-gold) !important;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a.active i {
  color: var(--wamc-burgundy);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a .wamc-sidebar-badge {
  margin-left: auto;
  background: var(--wamc-burgundy);
  color: white;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-panel a.active .wamc-sidebar-badge {
  background: var(--wamc-gold);
  color: var(--wamc-black);
}

/* The optional panel-label inside each panel - now hidden because redundant */
.wamc-sidebar-admin.is-accordion .wamc-acc-panel-label { display: none; }

/* Direct-link entries (Dashboard, My Queue, Sign out) - no expanding panel */
.wamc-sidebar-admin.is-accordion .wamc-acc-direct {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--wamc-text);
  text-decoration: none;
  border-left: 3px solid transparent !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-direct i.head-icon {
  font-size: 18px;
  color: var(--wamc-text-muted);
  width: 20px;
  text-align: center;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-direct:hover {
  background: var(--wamc-bg);
  color: var(--wamc-charcoal);
}
.wamc-sidebar-admin.is-accordion .wamc-acc-direct:hover i.head-icon { color: var(--wamc-burgundy); }
.wamc-sidebar-admin.is-accordion .wamc-acc-direct.active {
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  border-left-color: var(--wamc-gold) !important;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-direct.active i.head-icon { color: var(--wamc-burgundy); }
.wamc-sidebar-admin.is-accordion .wamc-acc-direct .wamc-sidebar-badge {
  margin-left: auto;
  background: var(--wamc-burgundy);
  color: white;
}
.wamc-sidebar-admin.is-accordion .wamc-acc-direct.active .wamc-sidebar-badge {
  background: var(--wamc-gold);
  color: var(--wamc-black);
}

/* Spacer between groups */
.wamc-sidebar-admin.is-accordion .wamc-acc-spacer {
  height: 1px;
  margin: 6px 14px;
  background: var(--wamc-border);
}


/* ==========================================================================
   COMMON BUTTONS / LINKS / EYEBROWS
   ========================================================================== */

.wamc-btn-primary {
  background: var(--wamc-gold);
  color: var(--wamc-black);
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--wamc-gold);
  transition: all 0.2s;
}
.wamc-btn-primary:hover { background: var(--wamc-gold-light); color: var(--wamc-black); transform: translateY(-1px); }

.wamc-btn-burgundy {
  background: var(--wamc-burgundy);
  color: white;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--wamc-burgundy);
  transition: all 0.2s;
}
.wamc-btn-burgundy:hover { background: var(--wamc-burgundy-dark); color: white; border-color: var(--wamc-burgundy-dark); }

.wamc-btn-outline-light {
  background: transparent;
  color: var(--wamc-cream);
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #5a5a5a;
}
.wamc-btn-outline-light:hover { border-color: var(--wamc-gold); color: var(--wamc-gold); }

.wamc-btn-outline {
  background: white;
  color: var(--wamc-text);
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13.5px;
  text-decoration: none;
  border: 1px solid var(--wamc-border);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wamc-btn-outline:hover { border-color: var(--wamc-burgundy); color: var(--wamc-burgundy); }

.wamc-link-arrow {
  color: var(--wamc-burgundy);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: gap 0.15s;
}
.wamc-link-arrow:hover { color: var(--wamc-burgundy-dark); gap: 10px; }

.wamc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wamc-burgundy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wamc-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.wamc-eyebrow.gold { color: var(--wamc-gold); }

/* ==========================================================================
   HERO (public pages)
   ========================================================================== */

.wamc-hero {
  background-color: var(--wamc-black);
  background-image:
    linear-gradient(270deg, rgba(10, 10, 10, 0.90) 0%, rgba(10, 10, 10, 0.70) 34%, rgba(24, 14, 11, 0.40) 66%, rgba(24, 14, 11, 0.20) 100%),
    url('assets/hero-home.webp');
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  color: var(--wamc-cream);
  /* Was 80/100. The 100px bottom put a 129px blank band under the hero
     before the first real content. */
  padding: 64px 0 68px;
  position: relative;
  overflow: hidden;
}
.wamc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 15% 70%, rgba(122, 46, 46, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.wamc-hero .container { position: relative; }
.wamc-hero .wamc-eyebrow { color: var(--wamc-gold); margin-bottom: 18px; }
.wamc-hero h1 {
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--wamc-cream);
  margin-bottom: 20px;
  max-width: 700px;
}
.wamc-hero h1 em { color: var(--wamc-gold); font-style: italic; font-weight: 500; }
.wamc-hero-lead {
  font-size: 17px;
  line-height: 1.65;
  color: #c8c4ba;
  max-width: 540px;
  margin-bottom: 32px;
}
.wamc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.wamc-hero-crest {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 10px 40px rgba(201, 169, 97, 0.15));
  height: auto;
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.wamc-stats {
  background: var(--wamc-charcoal);
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  padding: 28px 0;
}
.wamc-stat {
  text-align: center;
  color: var(--wamc-cream);
  border-right: 1px solid #2a2a2a;
}
.wamc-stat:last-child { border-right: none; }
.wamc-stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 500;
  color: var(--wamc-gold);
  line-height: 1;
  margin-bottom: 4px;
}
.wamc-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* 72px top and bottom meant 144px of empty page between two touching
   sections. 48px halves that to 96px, which still separates them clearly
   without making the reader scroll through nothing. */
.wamc-section { padding: 32px 0; }
.wamc-section-tight { padding: 24px 0; }
.wamc-section-white { background: white; border-top: 1px solid var(--wamc-border); border-bottom: 1px solid var(--wamc-border); }
.wamc-section-cream { background: var(--wamc-cream); }
.wamc-section-parchment { background: var(--wamc-parchment); }
.wamc-section-dark { background: var(--wamc-black); color: var(--wamc-cream); }
.wamc-section-charcoal { background: var(--wamc-charcoal); color: var(--wamc-cream); }
.wamc-section-dark h2, .wamc-section-charcoal h2 { color: var(--wamc-cream); }

.wamc-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 24px;
  flex-wrap: wrap;
}
.wamc-section-header h2 {
  font-size: 36px;
  font-weight: 500;
  margin: 0;
}
.wamc-section-header p {
  color: var(--wamc-text-muted);
  font-size: 15px;
  margin: 6px 0 0;
  max-width: 560px;
}
.wamc-section-dark .wamc-section-header p,
.wamc-section-charcoal .wamc-section-header p { color: #b8b3a5; }
.wamc-section-header-center { display: block; text-align: center; margin-bottom: 30px; }
.wamc-section-header-center .wamc-eyebrow { justify-content: center; }
.wamc-section-header-center p { margin: 12px auto 0; }

/* ==========================================================================
   FROM HEAD OFFICE
   ========================================================================== */

.wamc-head-office-band {
  background: linear-gradient(135deg, #1a1410 0%, #2a2520 100%);
  color: var(--wamc-cream);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.wamc-head-office-band::before {
  content: '';
  position: absolute;
  right: -100px; top: -50px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.1), transparent 60%);
  pointer-events: none;
}
.wamc-head-office-band .container { position: relative; }
.wamc-ho-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wamc-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wamc-ho-eyebrow i { font-size: 14px; }

.wamc-ho-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 6px;
  padding: 22px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s;
  cursor: pointer;
}
/* Text column + thumbnail to its right */
.wamc-ho-card-row { display: flex; gap: 16px; align-items: flex-start; }
.wamc-ho-card-text { flex: 1; min-width: 0; }
.wamc-ho-thumb {
  flex-shrink: 0; width: 92px; height: 92px; border-radius: 6px;
  background: #2a2520 center/cover no-repeat;
  border: 1px solid rgba(201, 169, 97, 0.25);
}
@media (max-width: 991px) { .wamc-ho-thumb { width: 78px; height: 78px; } }
.wamc-ho-card:hover {
  border-color: var(--wamc-gold);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  transform: translateY(-2px);
}
.wamc-ho-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--wamc-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wamc-ho-card h4 {
  color: var(--wamc-cream);
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.3;
}
.wamc-ho-card p { font-size: 13.5px; color: #b8b3a5; line-height: 1.6; margin-bottom: 14px; }
.wamc-ho-card .meta { font-size: 11.5px; color: #999; }
.wamc-ho-card .read-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 14px;
  color: var(--wamc-gold);
  font-size: 12.5px;
  font-weight: 600;
}

/* ==========================================================================
   MEET OUR MEMBERS
   ========================================================================== */

.wamc-member-tile {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
  height: 100%;
}
.wamc-member-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  color: inherit;
}
.wamc-member-portrait {
  aspect-ratio: 1;
  background: var(--wamc-cream);
  position: relative;
  overflow: hidden;
}
.wamc-member-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55));
}
.wamc-member-portrait-overlay {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 1;
}
.wamc-portrait-badge {
  display: inline-block;
  background: rgba(201, 169, 97, 0.95);
  color: var(--wamc-black);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}
.wamc-member-tile-body { padding: 16px 18px 18px; position: relative; flex: 1 0 auto; }
.wamc-member-tile-body.has-flag::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--flag);
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
}
.wamc-member-tile-body > * { position: relative; z-index: 1; }
.wamc-member-tile-body strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--wamc-charcoal);
  margin-bottom: 3px;
}
.wamc-member-tile-body .title {
  font-size: 12.5px;
  color: var(--wamc-text-muted);
  margin-bottom: 8px;
}
.wamc-member-tile-body .chapter {
  font-size: 11px;
  color: var(--wamc-burgundy);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   NEWS — featured + carousel
   ========================================================================== */

/* Horizontal scroll carousel (Embla replacement for now) */
.wamc-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 12px;
}
.wamc-carousel::-webkit-scrollbar { height: 6px; }
.wamc-carousel::-webkit-scrollbar-track { background: transparent; }
.wamc-carousel::-webkit-scrollbar-thumb { background: var(--wamc-gold); border-radius: 3px; }

.wamc-carousel-item {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.wamc-carousel-item:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.05); }
.wamc-carousel-item-img { aspect-ratio: 16/9; background: var(--wamc-cream); position: relative; overflow: hidden; }
.wamc-carousel-item-body { padding: 14px 16px 16px; }
.wamc-carousel-item-body .tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--wamc-burgundy);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.wamc-carousel-item-body h5 {
  font-family: 'Playfair Display', serif;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 6px;
}
.wamc-carousel-item-body .meta {
  font-size: 11.5px;
  color: var(--wamc-text-muted);
}

/* ==========================================================================
   EVENTS — feature + carousel
   ========================================================================== */

.wamc-event-feature {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.wamc-event-feature:hover { color: inherit; box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.wamc-event-feature-img {
  aspect-ratio: auto;
  background: var(--wamc-cream);
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.wamc-event-date-overlay {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--wamc-black);
  color: var(--wamc-gold);
  border-radius: 4px;
  padding: 10px 14px;
  text-align: center;
  min-width: 64px;
  border: 1px solid rgba(201, 169, 97, 0.3);
}
.wamc-event-date-overlay .month { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; }
.wamc-event-date-overlay .day {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--wamc-cream);
}
.wamc-event-feature-body { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.wamc-event-feature-body .tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wamc-burgundy);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wamc-event-feature-body h3 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 12px;
}
.wamc-event-feature-body p {
  font-size: 14.5px;
  color: var(--wamc-text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}
.wamc-event-feature-body .meta {
  font-size: 13px;
  color: var(--wamc-text-muted);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.wamc-event-feature-body .meta i { color: var(--wamc-gold-dark); margin-right: 4px; }

.wamc-event-carousel-item-body { padding: 14px 16px 18px; }
.wamc-event-carousel-item-body .tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--wamc-burgundy);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.wamc-event-carousel-item-body h5 {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 8px;
}
.wamc-event-carousel-item-body .meta {
  font-size: 11.5px;
  color: var(--wamc-text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wamc-event-carousel-item-body .meta i { color: var(--wamc-gold-dark); margin-right: 3px; }

/* ==========================================================================
   WHY JOIN — value cards
   ========================================================================== */

.wamc-value-card {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 32px 28px;
  height: 100%;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.wamc-value-card:hover {
  border-color: var(--wamc-gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.wamc-value-icon {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
}
.wamc-value-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
  font-weight: 500;
}
.wamc-value-card p {
  color: var(--wamc-text-muted);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   LEADERBOARD
   ========================================================================== */

.wamc-lb-card {
  background: white;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 6px;
  padding: 20px 22px;
  height: 100%;
}
.wamc-lb-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-lb-trophy-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wamc-gold-light), var(--wamc-gold-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--wamc-black);
  font-size: 16px;
  box-shadow: 0 3px 9px rgba(176, 141, 74, 0.22);
}
.wamc-lb-header h3 { font-size: 17px; font-weight: 500; margin: 0; }
.wamc-lb-header small { display: block; font-size: 12px; color: var(--wamc-text-muted); margin-top: 2px; }

.wamc-lb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-lb-item:last-child { border-bottom: none; padding-bottom: 0; }
.wamc-lb-rank {
  font-family: 'Playfair Display', serif;
  width: 22px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--wamc-text-muted);
}
.wamc-lb-rank.r1 { color: var(--wamc-gold); }
.wamc-lb-rank.r2 { color: #b0b0b0; }
.wamc-lb-rank.r3 { color: #c67934; }
.wamc-lb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12.5px;
  flex-shrink: 0;
}
.wamc-lb-info { flex: 1; min-width: 0; }
.wamc-lb-info strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--wamc-charcoal);
}
.wamc-lb-info small {
  display: block;
  font-size: 11.5px;
  color: var(--wamc-text-muted);
  margin-top: 1px;
}
.wamc-lb-points {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--wamc-charcoal);
  text-align: right;
}
.wamc-lb-points small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--wamc-text-muted);
  letter-spacing: 0.5px;
}

.wamc-points-howto {
  background: var(--wamc-charcoal);
  color: var(--wamc-cream);
  padding: 22px 24px;
  border-radius: 6px;
  height: 100%;
}
.wamc-points-howto .wamc-eyebrow { color: var(--wamc-gold); margin-bottom: 8px; }
.wamc-points-howto h3 { color: var(--wamc-cream); font-size: 17px; margin-bottom: 6px; font-weight: 500; }
.wamc-points-howto > p { color: #b8b3a5; font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
.wamc-points-row {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #2a2520;
}
.wamc-points-row:last-child { border-bottom: none; padding-bottom: 0; }
.wamc-points-row-icon {
  width: 31px; height: 31px;
  border-radius: 6px;
  background: rgba(201, 169, 97, 0.1);
  color: var(--wamc-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wamc-points-row-body { flex: 1; }
.wamc-points-row-body strong { color: var(--wamc-cream); font-size: 13.5px; font-weight: 600; display: block; }
.wamc-points-row-body small { color: #999; font-size: 11.5px; }
.wamc-points-row .pts {
  font-family: 'Playfair Display', serif;
  color: var(--wamc-gold);
  font-size: 16px;
  font-weight: 500;
  margin-left: auto;
  padding-left: 10px;
  flex-shrink: 0;
}

/* ==========================================================================
   TRAINING / COURSES
   ========================================================================== */

.wamc-course-card {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.wamc-course-card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.05); border-color: var(--wamc-gold); }
.wamc-course-img {
  aspect-ratio: 16/9;
  background: var(--wamc-charcoal);
  position: relative;
  overflow: hidden;
}
.wamc-course-level {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--wamc-burgundy);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
}
.wamc-course-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.wamc-course-body .tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wamc-burgundy);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wamc-course-body h4 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 10px;
}
.wamc-course-body p {
  font-size: 13px;
  color: var(--wamc-text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.wamc-course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--wamc-border);
  font-size: 12px;
  color: var(--wamc-text-muted);
}
.wamc-course-footer strong { color: var(--wamc-charcoal); font-weight: 600; }
.wamc-course-footer i { color: var(--wamc-gold-dark); margin-right: 4px; }

/* ==========================================================================
   INTEREST GROUPS
   ========================================================================== */

.wamc-group-card {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 24px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.wamc-group-card:hover { color: inherit; border-color: var(--wamc-gold); transform: translateY(-3px); }
.wamc-group-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent, var(--wamc-burgundy));
}
.wamc-group-icon {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--accent-bg, var(--wamc-cream));
  color: var(--accent, var(--wamc-burgundy));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  margin-top: 6px;
}
.wamc-group-card h4 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}
.wamc-group-card .members-count {
  font-size: 12px;
  color: var(--wamc-text-muted);
  margin-bottom: 12px;
}
.wamc-group-card p {
  font-size: 13.5px;
  color: var(--wamc-text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
}
.wamc-group-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--wamc-border);
}
.wamc-group-avatars { display: flex; }
.wamc-group-avatars > div {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
}
.wamc-group-avatars > div:first-child { margin-left: 0; }
.wamc-group-join {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent, var(--wamc-burgundy));
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.wamc-cta-band {
  background: var(--wamc-black);
  color: var(--wamc-cream);
  padding: 44px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wamc-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.1) 0%, transparent 60%);
}
.wamc-cta-band .container { position: relative; }
.wamc-cta-band h2 {
  font-size: 44px;
  color: var(--wamc-cream);
  margin-bottom: 14px;
  font-weight: 500;
}
.wamc-cta-band h2 em { font-style: italic; color: var(--wamc-gold); }
.wamc-cta-band p {
  font-size: 17px;
  color: #c8c4ba;
  max-width: 540px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.wamc-footer {
  background: var(--wamc-black);
  color: #888;
  padding: 60px 0 24px;
  border-top: 1px solid #1a1a1a;
}
.wamc-footer h5 {
  color: var(--wamc-gold);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.wamc-footer ul { list-style: none; padding: 0; margin: 0; }
.wamc-footer ul li { margin-bottom: 10px; }
.wamc-footer a { color: #aaa; text-decoration: none; font-size: 13.5px; transition: color 0.15s; }
.wamc-footer a:hover { color: var(--wamc-gold); }
.wamc-footer-brand p { font-size: 13px; line-height: 1.65; color: #888; margin-top: 14px; max-width: 280px; }
.wamc-social { display: flex; gap: 10px; margin-top: 18px; }
.wamc-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid #333;
  display: flex; align-items: center; justify-content: center;
  color: #888; font-size: 14px;
}
.wamc-social a:hover { background: var(--wamc-gold); color: var(--wamc-black); border-color: var(--wamc-gold); }
.wamc-footer-bottom {
  border-top: 1px solid #222;
  padding-top: 24px;
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   DASHBOARD / MEMBER PAGES (content area, KPIs, cards, feeds)
   ========================================================================== */

.wamc-content { padding: 28px 32px; max-width: 1400px; margin: 0 auto; }

.wamc-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.wamc-page-header h1 { font-size: 28px; font-weight: 500; margin: 0 0 4px; }
.wamc-page-header p { color: var(--wamc-text-muted); font-size: 14px; margin: 0; }

.wamc-kpi {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 18px 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.wamc-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wamc-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  /* The tile icon is pinned to the top right corner; keep clear of it. */
  padding-right: 30px;
  /* A label must never split mid-word into "CONNECTION" / "S". */
  overflow-wrap: normal;
}
.wamc-kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--wamc-charcoal);
  line-height: 1;
  margin-bottom: 6px;
}
.wamc-kpi-delta { font-size: 12px; color: var(--wamc-text-muted); }
.wamc-kpi-delta.up { color: #2c7a7b; }
.wamc-kpi-icon {
  position: absolute;
  right: 18px; top: 18px;
  font-size: 22px;
  color: var(--wamc-gold);
  opacity: 0.7;
}

.wamc-card {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 22px;
}
.wamc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.wamc-card-header h3 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--wamc-charcoal);
}
.wamc-card-link {
  font-size: 12.5px;
  color: var(--wamc-burgundy);
  text-decoration: none;
  font-weight: 600;
}
.wamc-card-link:hover { text-decoration: underline; }

/* Activity feed */
.wamc-feed-tabs { display: flex; gap: 6px; }
.wamc-feed-tab {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wamc-text-muted);
  cursor: pointer;
}
.wamc-feed-tab.active { background: var(--wamc-charcoal); color: white; }
.wamc-feed-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.wamc-feed-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}
.wamc-feed-body { flex: 1; min-width: 0; }
.wamc-feed-header { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; }
.wamc-feed-header strong { font-weight: 600; color: var(--wamc-charcoal); }
.wamc-feed-meta { font-size: 11.5px; color: var(--wamc-text-muted); }
.wamc-feed-content {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--wamc-bg);
  border-radius: 4px;
  font-size: 13px;
  color: var(--wamc-text);
  line-height: 1.55;
}
.wamc-feed-thumb {
  width: 72px; height: 56px;
  border-radius: 4px;
  background: var(--wamc-parchment);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--wamc-gold-dark); font-size: 22px;
}

/* AI suggestion card (dashboard) */
.wamc-ai-card {
  background: linear-gradient(135deg, var(--wamc-charcoal), #2a2520);
  border-radius: 6px;
  padding: 22px;
  color: var(--wamc-cream);
  position: relative;
  overflow: hidden;
}
.wamc-ai-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.15), transparent 70%);
}
.wamc-ai-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--wamc-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wamc-ai-card h4 {
  color: var(--wamc-cream);
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 6px;
}
.wamc-ai-card p { color: #bbb6a8; font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
.wamc-ai-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201, 169, 97, 0.15);
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
}
.wamc-ai-suggestion:hover { background: rgba(201, 169, 97, 0.08); border-color: rgba(201, 169, 97, 0.3); }
.wamc-ai-suggestion i { color: var(--wamc-gold); font-size: 14px; }
.wamc-ai-suggestion span { flex: 1; font-size: 12.5px; color: var(--wamc-cream); font-weight: 500; }
.wamc-ai-suggestion small { color: #888; font-size: 10.5px; display: block; margin-top: 2px; }

/* Mini event row */
.wamc-event-mini {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-event-mini:last-child { border-bottom: none; padding-bottom: 0; }
.wamc-event-date-mini { text-align: center; min-width: 44px; flex-shrink: 0; }
.wamc-event-date-mini .month {
  font-size: 9px; font-weight: 700; color: var(--wamc-burgundy);
  letter-spacing: 1px; text-transform: uppercase;
}
.wamc-event-date-mini .day {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 500;
  color: var(--wamc-charcoal); line-height: 1;
}
.wamc-event-mini-body { flex: 1; }
.wamc-event-mini-body h5 {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 3px;
}
.wamc-event-mini-body small { font-size: 11.5px; color: var(--wamc-text-muted); }
.wamc-rsvp-pill {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--wamc-border);
  border-radius: 12px;
  color: var(--wamc-text-muted);
  text-decoration: none;
}
.wamc-rsvp-pill:hover { border-color: var(--wamc-burgundy); color: var(--wamc-burgundy); }
.wamc-rsvp-pill.going { background: var(--wamc-burgundy); border-color: var(--wamc-burgundy); color: white; }

/* Message rows */
.wamc-msg-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-msg-item:last-child { border-bottom: none; }
.wamc-msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  flex-shrink: 0; position: relative;
}
.wamc-msg-avatar.unread::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wamc-burgundy);
  border: 2px solid white;
}
.wamc-msg-body { flex: 1; min-width: 0; }
.wamc-msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.wamc-msg-name { font-size: 13.5px; font-weight: 600; color: var(--wamc-charcoal); }
.wamc-msg-time { font-size: 11px; color: var(--wamc-text-muted); }
.wamc-msg-preview { font-size: 12.5px; color: var(--wamc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   AVATAR / IMAGE PLACEHOLDER COLORS (chef tints)
   Single source of truth — do not redefine in page-level <style> blocks.
   ========================================================================== */

.tint-gold     { background: #f6efd9; color: #8a6b1a; }
.tint-burgundy { background: #f1dede; color: #7a2e2e; }
.tint-teal     { background: #d9eced; color: #2c7a7b; }
.tint-blue     { background: #dce6f2; color: #2c4a7b; }
.tint-rose     { background: #f1dde4; color: #8a3c5a; }
.tint-purple   { background: #e3d8ee; color: #4a2c6e; }
.tint-amber    { background: #f6e8c8; color: #b18028; }
.tint-red      { background: #f5dada; color: #b54545; }
.tint-green    { background: #dce8d9; color: #3c7a2c; }
.tint-olive    { background: #e8e8c8; color: #6e6c2c; }

/* ==========================================================================
   SHARED ADMIN PAGE COMPONENTS
   Used across admin-chapters, admin-members, admin-events, admin-news,
   admin-resources, admin-training-*, admin-awards, admin-audit, admin-reports,
   admin-chapter-requests, admin-partum-concilio
   ========================================================================== */

/* Toolbar — search + filter dropdowns */
.adm-toolbar {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adm-toolbar.standalone {
  border-radius: 6px;
  border-bottom: 1px solid var(--wamc-border);
  margin-bottom: 20px;
}
.adm-search {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--wamc-bg);
  border: 1px solid var(--wamc-border);
  border-radius: 4px;
}
.adm-search i { color: var(--wamc-text-muted); }
.adm-search input {
  border: none; outline: none; background: transparent;
  flex: 1; font-size: 13px; color: var(--wamc-text);
}
.adm-filter {
  padding: 7px 12px;
  border: 1px solid var(--wamc-border);
  border-radius: 4px;
  background: white;
  font-size: 13px;
  color: var(--wamc-text);
  min-width: 140px;
}

/* Summary cards row at top of admin pages */
.adm-summary-row { margin-bottom: 24px; }
.adm-summary-card {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}
.adm-summary-card .icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--wamc-cream);
  color: var(--wamc-burgundy);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.adm-summary-card.green .icon  { background: #e3f2f1; color: #2c7a7b; }
.adm-summary-card.amber .icon  { background: #fff4d6; color: #8a6b1a; }
.adm-summary-card.red   .icon  { background: #f7e3e3; color: #b54545; }
.adm-summary-card.teal  .icon  { background: #e3f2f1; color: #2c7a7b; }
.adm-summary-card.purple .icon { background: #ebe3f0; color: #4a2c6e; }
.adm-summary-card.gold  .icon  { background: #fff4d6; color: #8a6b1a; }
.adm-summary-card .body { min-width: 0; }
.adm-summary-card .value {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--wamc-charcoal);
  line-height: 1;
}
.adm-summary-card .label {
  font-size: 11px;
  color: var(--wamc-text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Tab row */
.adm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.adm-tab {
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wamc-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
}
.adm-tab:hover { color: var(--wamc-burgundy); }
.adm-tab.active {
  background: white;
  border-color: var(--wamc-border);
  color: var(--wamc-burgundy);
}
.adm-tab .count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: var(--wamc-bg);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  color: var(--wamc-text-muted);
}
.adm-tab.active .count { background: var(--wamc-burgundy); color: white; }

/* Generic table */
.adm-table-wrap {
  background: white;
  border: 1px solid var(--wamc-border);
  border-radius: 0 0 6px 6px;
  overflow-x: auto;
}
.adm-table-wrap.standalone { border-radius: 6px; }
.adm-table { width: 100%; font-size: 13px; min-width: 900px; }
.adm-table thead { border-bottom: 1px solid var(--wamc-border); background: var(--wamc-bg); }
.adm-table th {
  font-size: 10.5px; font-weight: 700;
  color: var(--wamc-text-muted);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 12px 14px; text-align: left;
  white-space: nowrap;
}
.adm-table th.num, .adm-table td.num { text-align: right; }
.adm-table th.right, .adm-table td.right { text-align: right; }
.adm-table td {
  padding: 14px;
  border-bottom: 1px solid var(--wamc-border);
  vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: rgba(246, 233, 211, 0.3); }
.adm-table .checkbox-cell { width: 22px; padding-right: 0; }
.adm-table .checkbox-cell input { accent-color: var(--wamc-burgundy); width: 15px; height: 15px; }

/* Status dots */
.adm-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.adm-status-dot.green { background: #4caf50; }
.adm-status-dot.amber { background: #ffa726; }
.adm-status-dot.red   { background: #ef5350; }
.adm-status-dot.grey  { background: #aaa; }
.adm-status-dot.blue  { background: #4a8acc; }

/* Action button (table row action) */
.adm-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 4px;
  background: white;
  border: 1px solid var(--wamc-border);
  color: var(--wamc-text-muted);
  text-decoration: none;
  margin-right: 4px;
  transition: all 0.15s;
}
.adm-action-btn:hover { color: var(--wamc-burgundy); border-color: var(--wamc-burgundy); }

/* Table footer / pagination */
.adm-table-footer {
  background: white;
  border: 1px solid var(--wamc-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--wamc-text-muted);
}
.adm-pagination { display: flex; gap: 4px; }
.adm-pagination a {
  min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wamc-border);
  border-radius: 4px;
  background: white;
  color: var(--wamc-text);
  font-size: 12px;
  text-decoration: none;
  padding: 0 8px;
}
.adm-pagination a.active { background: var(--wamc-charcoal); color: white; border-color: var(--wamc-charcoal); }
.adm-pagination a:hover:not(.active) { border-color: var(--wamc-gold); }

/* Status badges (a common pattern for state pills) */
.adm-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 11px;
}
.adm-state.published { background: #e3f2f1; color: #2c7a7b; }
.adm-state.pending   { background: #fff4d6; color: #8a6b1a; }
.adm-state.draft     { background: var(--wamc-bg); color: var(--wamc-text-muted); }
.adm-state.rejected  { background: #f7e3e3; color: #b54545; }
.adm-state.archived  { background: var(--wamc-bg); color: var(--wamc-text-muted); }
.adm-state.scheduled { background: #ebe3f0; color: #4a2c6e; }
.adm-state.live      { background: #fff4d6; color: #8a6b1a; }
.adm-state.completed { background: var(--wamc-bg); color: var(--wamc-text-muted); }
.adm-state.cancelled { background: #f7e3e3; color: #b54545; }


@media (max-width: 992px) {
  body.with-sidebar { padding-left: 0; }
  .wamc-sidebar { transform: translateX(-100%); }
  .wamc-nav-links, .wamc-nav-search { display: none; }
  .wamc-hero h1 { font-size: 36px; }
  .wamc-section-header h2 { font-size: 28px; }
  .wamc-event-feature { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PUBLIC MEGA-MENU
   Adds dropdown panels under each top-level public nav item.
   Hover to open on desktop; click/tap to open on touch.
   ========================================================================== */

.wamc-mega { position: relative; }

.wamc-mega-item {
  position: relative;
  display: flex;
  align-items: center;
}

.wamc-mega-trigger {
  color: #ccc;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  cursor: pointer;
  /* Make the hover target span the full navbar height so the cursor
     can travel from the trigger into the panel without losing hover. */
  padding: 22px 0;
}
.wamc-mega-trigger:hover,
.wamc-mega-trigger.active,
.wamc-mega-item.is-open .wamc-mega-trigger {
  color: var(--wamc-gold);
}

/* Panel — hidden by default, fades in on hover/open */
.wamc-mega-panel {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  background: #fff;
  border-top: 3px solid var(--wamc-gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 1029;
}

.wamc-mega-item:hover .wamc-mega-panel,
.wamc-mega-item.is-open .wamc-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

/* Inner grid — centred, capped width */
.wamc-mega-cols {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.15fr;
  gap: 36px;
  padding: 30px 40px 34px;
}

.wamc-mega-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wamc-text-muted);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wamc-border);
}

.wamc-mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wamc-mega-col li { margin-bottom: 4px; }
.wamc-mega-col li a {
  display: block;
  padding: 6px 0;
  color: var(--wamc-text);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.45;
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
  transition: color 0.12s, border-color 0.12s, padding-left 0.12s;
}
.wamc-mega-col li a:hover {
  color: var(--wamc-burgundy);
  border-left-color: var(--wamc-burgundy);
}
.wamc-mega-col li a span {
  display: block;
  font-size: 11px;
  color: var(--wamc-text-muted);
  margin-top: 1px;
}

/* Featured tile — cream block on the right */
.wamc-mega-feature {
  background: var(--wamc-cream);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.wamc-mega-feature:hover {
  border-color: var(--wamc-gold);
}
.wamc-mega-feature-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wamc-gold-dark);
  margin-bottom: 6px;
}
.wamc-mega-feature-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  line-height: 1.2;
  color: var(--wamc-charcoal);
  margin-bottom: 6px;
}
.wamc-mega-feature-desc {
  font-size: 12px;
  color: var(--wamc-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.wamc-mega-feature-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--wamc-burgundy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: auto;
}

/* Smaller screens — collapse to two columns, hide featured tile */
@media (max-width: 900px) {
  .wamc-mega-cols {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 22px 24px;
  }
  .wamc-mega-feature { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* On small screens the public nav already hides (see existing rule).
     Defensive: ensure the panel never renders inline. */
  .wamc-mega-panel { display: none; }
}

/* ==========================================================================
   ABOUT US — public editorial pages (about, governance, conduct, contact)
   ========================================================================== */

.about-hero {
  background-color: var(--wamc-black);
  background-image:
    linear-gradient(90deg, rgba(10, 10, 10, 0.91) 0%, rgba(10, 10, 10, 0.74) 40%, rgba(24, 14, 11, 0.46) 74%, rgba(24, 14, 11, 0.28) 100%),
    var(--wamc-hero-image, url('assets/hero-home.webp'));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: var(--wamc-cream);
  /* Was 64/72, which left a 104px blank band between the hero and the first
     real content on every inner page. */
  padding: 48px 24px 48px;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  top: 0; right: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(201, 169, 97, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.about-hero-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.about-hero-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wamc-gold);
  margin-bottom: 14px;
}
.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--wamc-cream);
  margin: 0 0 18px;
  max-width: 720px;
}
.about-hero p {
  font-size: 18px;
  line-height: 1.55;
  color: #cbcbcb;
  max-width: 640px;
  margin: 0;
}

/* Same reasoning as .wamc-section — this one carries the inner pages. */
.about-section {
  padding: 32px 24px;
  background: #fff;
}
.about-section.alt { background: var(--wamc-bg); }
.about-section.cream { background: var(--wamc-cream); }
.about-inner {
  max-width: 960px;
  margin: 0 auto;
}
.about-inner.narrow { max-width: 720px; }

.about-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--wamc-charcoal);
  margin: 0 0 6px;
}
.about-section .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--wamc-text);
  margin: 0 0 24px;
}
.about-section p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--wamc-text);
}
.about-section .eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wamc-gold-dark);
  margin-bottom: 12px;
}

/* Two-up panel: heading column + content column */
.about-two-up {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 760px) {
  .about-two-up { grid-template-columns: 1fr; gap: 24px; }
}
/* A grid child is min-width:auto by default, so one wide thing inside — a
   fee table, a long unbroken word — pushes the whole column past 1fr and the
   page scrolls sideways. This panel is used on a dozen public pages. */
.about-two-up > * { min-width: 0; }

/* Timeline */
.about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 92px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--wamc-border);
}
.about-timeline li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 18px 0;
  position: relative;
}
.about-timeline .year {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--wamc-gold-dark);
  text-align: right;
}
.about-timeline li::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 28px;
  width: 9px;
  height: 9px;
  background: var(--wamc-gold);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--wamc-gold);
}
.about-timeline h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin: 0 0 4px;
  color: var(--wamc-charcoal);
}
.about-timeline p { margin: 0; font-size: 14.5px; color: var(--wamc-text-muted); }

/* Value cards */
/* Five values, five columns.
   This was auto-fit with a 220px minimum, which on a 960px page worked out at
   four across and left the fifth stranded on a row of its own. The count is
   fixed at five and has been since the page was written, so the grid says
   five and steps down in whole rows: 5 -> 3 -> 2 -> 1. */
.about-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}
.about-value-card {
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-top: 3px solid var(--wamc-gold);
  border-radius: 4px;
  padding: 18px 16px 20px;
}
.about-value-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0 0 7px;
  color: var(--wamc-charcoal);
}
.about-value-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--wamc-text-muted);
  margin: 0;
}

/* Stat strip */
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--wamc-border);
  border-bottom: 1px solid var(--wamc-border);
}
.about-stat .stat-value {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  color: var(--wamc-charcoal);
  line-height: 1;
}
.about-stat .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wamc-text-muted);
  margin-top: 6px;
  display: block;
}

/* People cards (governance) */
.about-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.about-person {
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-radius: 4px;
  padding: 22px;
  text-align: center;
}
.about-person .avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
}
.about-person h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 2px;
  color: var(--wamc-charcoal);
}
.about-person .role {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wamc-gold-dark);
  display: block;
  margin-bottom: 8px;
}
.about-person .bio {
  font-size: 13px;
  line-height: 1.5;
  color: var(--wamc-text-muted);
  margin: 0;
}

/* Conduct principles list */
.about-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.about-principle {
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-left: 3px solid var(--wamc-burgundy);
  border-radius: 4px;
  padding: 22px 24px;
}
.about-principle h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 8px;
  color: var(--wamc-charcoal);
}
.about-principle p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wamc-text);
  margin: 0;
}

/* Contact form */
.about-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
}
@media (max-width: 820px) {
  .about-contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
.about-contact-info h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin: 0 0 6px;
  color: var(--wamc-charcoal);
}
.about-contact-info p, .about-contact-info address {
  font-size: 14px;
  line-height: 1.65;
  color: var(--wamc-text);
  font-style: normal;
  margin: 0 0 22px;
}
.about-contact-info .label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wamc-text-muted);
  margin-bottom: 4px;
}
.about-form { background: #fff; border: 1px solid var(--wamc-border); border-radius: 4px; padding: 28px; }
.about-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-form .field { margin-bottom: 14px; }
.about-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--wamc-text);
  margin-bottom: 6px;
}
.about-form input,
.about-form select,
.about-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--wamc-border);
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: var(--wamc-bg);
  transition: border-color 0.15s, background 0.15s;
}
.about-form input:focus,
.about-form select:focus,
.about-form textarea:focus {
  outline: none;
  border-color: var(--wamc-gold);
  background: #fff;
}
.about-form textarea { min-height: 120px; resize: vertical; }
.about-form .submit-row {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.about-form button[type="submit"] {
  background: var(--wamc-burgundy);
  color: #fff;
  border: 1px solid var(--wamc-burgundy);
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}
.about-form button[type="submit"]:hover {
  background: var(--wamc-burgundy-dark);
}

/* ============ Recognition service ribbon (shared: leaderboard, profiles) ============ */
.ribbon { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px 4px 0; margin-top: 7px; position: relative; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,97,0.85) 12%, rgba(201,169,97,0.85) 88%, transparent); }
.ribbon::before { top: 0; }
.ribbon::after { bottom: 0; }
.ribbon-tile {
  width: 26px; height: 24px; flex-shrink: 0;
  transform: skewX(-15deg);
  border: 1.5px solid rgba(201,169,97,0.95);
  border-radius: 3px;
  background-color: var(--tc, #888);
  background-image:
    linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.25) 16%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.45) 100%),
    linear-gradient(60deg, rgba(255,255,255,0) 55%, rgba(255,255,255,0.35) 64%, rgba(255,255,255,0) 72%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 1.5px rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.3);
  cursor: help;
}
.ribbon-end { --tc: #18181a; }
.ribbon-sep { width: 1px; height: 22px; background: rgba(201,169,97,0.6); margin: 0 6px; flex-shrink: 0; transform: skewX(-15deg); }

/* ============ Reusable admin list table ============ */
.adm-list-wrap { background: #fff; border: 1px solid var(--wamc-border); border-radius: 6px; overflow-x: auto; margin-bottom: 28px; }
.adm-list { width: 100%; font-size: 13px; min-width: 640px; border-collapse: collapse; }
.adm-list thead { border-bottom: 1px solid var(--wamc-border); background: var(--wamc-bg); }
.adm-list th { font-size: 10.5px; font-weight: 700; color: var(--wamc-text-muted); letter-spacing: 1px; text-transform: uppercase; padding: 11px 14px; text-align: left; white-space: nowrap; }
.adm-list td { padding: 12px 14px; border-bottom: 1px solid var(--wamc-border); vertical-align: middle; }
.adm-list tr:last-child td { border-bottom: 0; }
.adm-list tbody tr:hover td { background: rgba(246, 233, 211, 0.35); }
.adm-list-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 4px; background: #fff; border: 1px solid var(--wamc-border); color: var(--wamc-text-muted); cursor: pointer; margin-left: 4px; text-decoration: none; font-family: inherit; padding: 0; }
.adm-list-btn:hover { color: var(--wamc-burgundy); border-color: var(--wamc-burgundy); }
.adm-list-btn.danger:hover { color: #b54545; border-color: #b54545; }
.adm-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.4px; text-transform: uppercase; }
.adm-pill.on { background: #e3f2f1; color: #2c7a7b; }
.adm-pill.off { background: var(--wamc-bg); color: var(--wamc-text-muted); }

/* ==========================================================================
   READ-MORE affordances on news cards (home, magazine, member feed)
   ========================================================================== */
.mag-card-readmore { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--wamc-burgundy); transition:gap .15s; }
.mag-card:hover .mag-card-readmore { gap:10px; }
.feed-readmore { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; font-weight:600; color:var(--wamc-burgundy); text-decoration:none; transition:gap .15s; }
.feed-readmore:hover { gap:10px; color:var(--wamc-burgundy); }

/* ==========================================================================
   ANNOUNCEMENT MODAL (Read full notice)
   ========================================================================== */
.ann-modal-overlay { position:fixed; inset:0; background:rgba(12,10,8,0.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:48px 18px; overflow-y:auto; }
.ann-modal-overlay.open { display:flex; animation:annFade .25s ease both; }
@keyframes annFade { from { opacity:0; } to { opacity:1; } }
.ann-modal-box { background:#fff; border-radius:14px; max-width:620px; width:100%; position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.45); animation:annPop .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes annPop { from { opacity:0; transform:translateY(20px) scale(.97); } to { opacity:1; transform:none; } }
.ann-modal-close { position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.9); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:none; border-radius:50%; font-size:22px; line-height:1; color:var(--wamc-charcoal); cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.18); transition:background .15s, color .15s, transform .2s; }
.ann-modal-close:hover { background:var(--wamc-burgundy); color:#fff; transform:rotate(90deg); }

/* Full-bleed image header (shown only when the notice has a thumbnail) */
.ann-modal-hero { position:relative; display:none; }
.ann-modal-box.has-thumb .ann-modal-hero { display:block; }
.ann-modal-thumb { width:100%; height:220px; object-fit:cover; display:block; }
.ann-modal-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(74,20,30,0.5), rgba(0,0,0,0) 55%); pointer-events:none; }
.ann-modal-hero-tag { position:absolute; left:22px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:var(--wamc-gold); color:var(--wamc-burgundy-dark); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:6px 12px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,0.2); }

.ann-modal-content { padding:30px 34px 34px; }
/* Gold accent strip across the top when there is no hero image */
.ann-modal-box:not(.has-thumb) .ann-modal-content { border-top:4px solid var(--wamc-gold); }
.ann-modal-box h3 { font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--wamc-charcoal); margin:0 0 10px; padding-right:30px; line-height:1.22; }
.ann-modal-meta { font-size:11.5px; color:var(--wamc-text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--wamc-border); }
.ann-modal-body { font-size:15.5px; line-height:1.75; color:var(--wamc-text); }
.ann-modal-body p { margin:0 0 1em; }
.ann-modal-body p:last-child { margin-bottom:0; }
.ann-modal-body img { max-width:100%; height:auto; border-radius:6px; margin:8px 0; }
.ann-modal-body ul, .ann-modal-body ol { margin:0 0 1em 1.4em; }
.ann-modal-body li { margin:0 0 .4em; }
.ann-modal-body a { color:var(--wamc-burgundy); font-weight:500; }

/* ==========================================================================
   MOBILE & RESPONSIVE — site-wide
   The desktop nav (public mega-menu) and the member/admin sidebar both hide
   below 992px. This section adds a hamburger that slides the appropriate
   navigation in as a drawer, plus general small-screen polish so every page
   reflows cleanly down to ~360px.
   ========================================================================== */

/* Hamburger toggle — hidden on desktop, shown on tablet/mobile (≤992px).
   On desktop the menus stay open (public mega-bar + member/admin sidebar). */
.wamc-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--wamc-cream);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  margin-right: 4px;
  margin-left: -4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.wamc-nav-toggle:hover { color: var(--wamc-gold); }

/* Shared dark backdrop behind any open drawer */
.wamc-nav-backdrop {
  position: fixed;
  inset: var(--navbar-height) 0 0 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1025;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
body.nav-open .wamc-nav-backdrop { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }

/* Public mobile drawer (built from the same mega-menu data) */
.wamc-mobile-menu {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 84vw;
  background: #fff;
  border-right: 1px solid var(--wamc-border);
  padding: 10px 0 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 1026;
}
body.nav-open .wamc-mobile-menu { transform: translateX(0); box-shadow: 6px 0 28px rgba(0,0,0,0.2); }
.wamc-mobile-menu a { color: var(--wamc-text); text-decoration: none; }
.wamc-mobile-menu .wmm-home {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid var(--wamc-border);
}
.wamc-mobile-menu .wmm-home.active { color: var(--wamc-burgundy); }
.wmm-group { border-bottom: 1px solid var(--wamc-border); }
.wmm-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px; font-weight: 600; font-size: 15px; color: var(--wamc-charcoal);
}
.wmm-group > summary::-webkit-details-marker { display: none; }
.wmm-chev { font-size: 12px; color: var(--wamc-text-muted); transition: transform 0.2s ease; }
.wmm-group[open] > summary .wmm-chev { transform: rotate(180deg); }
.wmm-links { background: var(--wamc-bg); padding: 4px 0 12px; }
.wmm-colhead {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wamc-text-muted); padding: 10px 22px 3px;
}
.wmm-links a { display: block; padding: 8px 22px 8px 30px; font-size: 14px; }
.wmm-links a:hover { color: var(--wamc-burgundy); background: #fff; }
.wmm-cta { display: flex; gap: 10px; padding: 18px 22px 6px; }
.wmm-cta a { flex: 1; text-align: center; }

/* ==========================================================================
   Chapter Admin — chapter-admin.php (added 15/09/2026)
   Compact on purpose: figures, tabs and tight tables.
   ========================================================================== */
.wamc-sidebar a.wamc-sub-link { padding-left: 46px; font-size: 13px; }
.wamc-sidebar a.wamc-sub-link i { font-size: 14px; }

.ca-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin:0 0 14px; }
.ca-eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--wamc-gold-dark); margin:0 0 2px; }
.ca-head h1 { font-family:'Playfair Display',serif; font-size:1.6rem; margin:0; color:var(--wamc-charcoal); }
.ca-sub { font-size:13px; color:var(--wamc-text-muted); margin:2px 0 0; }
.ca-pick { display:flex; align-items:center; gap:8px; font-size:13px; max-width:100%; }
.ca-pick label { color:var(--wamc-text-muted); }
.ca-pick select { padding:6px 10px; border:1px solid var(--wamc-border); border-radius:6px; font-size:13px; max-width:100%; }
.ca-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr)); gap:8px; margin:0 0 14px; }
.ca-tile { background:#fff; border:1px solid var(--wamc-border); border-radius:8px; padding:9px 12px; }
.ca-tile b { display:block; font-size:1.35rem; line-height:1.15; color:var(--wamc-charcoal); font-weight:700; font-variant-numeric:tabular-nums; }
.ca-tile span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--wamc-text-muted); margin-top:2px; }
.ca-tile.is-warn b { color:#8a5a00; }
.ca-tile.is-bad b { color:var(--wamc-burgundy); }
.ca-tabs { display:flex; gap:2px; border-bottom:1px solid var(--wamc-border); margin:0 0 12px; overflow-x:auto; }
.ca-tabs a { padding:8px 12px; font-size:13px; font-weight:600; color:var(--wamc-text-muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.ca-tabs a:hover { color:var(--wamc-charcoal); }
.ca-tabs a[aria-current="page"] { color:var(--wamc-burgundy); border-bottom-color:var(--wamc-gold); }
.ca-tools { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ca-tools a { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:12.5px; border:1px solid var(--wamc-border); border-radius:6px; background:#fff; color:var(--wamc-charcoal); text-decoration:none; }
.ca-tools a:hover { border-color:var(--wamc-burgundy); color:var(--wamc-burgundy); }
.ca-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:12px; }
.ca-card { background:#fff; border:1px solid var(--wamc-border); border-radius:8px; padding:12px 14px; }
.ca-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 6px; }
.ca-card h2 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wamc-text-muted); margin:0; }
.ca-card-head a { font-size:12px; font-weight:600; color:var(--wamc-burgundy); text-decoration:none; }
.ca-list { list-style:none; margin:0; padding:0; }
.ca-list li { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--wamc-border); font-size:13px; }
.ca-list li:last-child { border-bottom:0; }
.ca-list small { color:var(--wamc-text-muted); white-space:nowrap; }
.ca-empty { font-size:13px; color:var(--wamc-text-muted); font-style:italic; margin:0; }
.ca-table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--wamc-border); border-radius:8px; margin:0 0 12px; }
.ca-table { width:100%; border-collapse:collapse; font-size:13px; }
.ca-table th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--wamc-text-muted); background:var(--wamc-bg); padding:7px 10px; white-space:nowrap; }
.ca-table td { padding:6px 10px; border-top:1px solid var(--wamc-border); vertical-align:top; }
.ca-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.ca-table .nowrap { white-space:nowrap; }
.ca-table tr:hover td { background:#fcfaf6; }
.ca-table a { color:var(--wamc-burgundy); text-decoration:none; font-weight:600; }
.ca-table a:hover { text-decoration:underline; }
.ca-muted { color:var(--wamc-text-muted); }
.ca-pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; background:var(--wamc-bg); color:var(--wamc-text-muted); white-space:nowrap; }
.ca-pill--active, .ca-pill--published, .ca-pill--founding { background:#e6f4ea; color:#1e6b35; }
.ca-pill--grace, .ca-pill--draft, .ca-pill--new, .ca-pill--review { background:#fff4dc; color:#8a5a00; }
.ca-pill--lapsed, .ca-pill--suspended, .ca-pill--resigned, .ca-pill--cancelled, .ca-pill--dormant, .ca-pill--none { background:#fbe7ea; color:#8c1d2e; }
.ca-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#3a9a55; vertical-align:middle; }
.ca-dot--amber { background:#d99a15; }
.ca-dot--red { background:#c0392b; }
.ca-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:0 0 8px; }
.ca-bar input { padding:6px 10px; border:1px solid var(--wamc-border); border-radius:6px; font-size:13px; width:min(280px,100%); }
.ca-bar small { color:var(--wamc-text-muted); font-size:12px; }
.ca-note { font-size:13px; background:var(--wamc-bg); border:1px solid var(--wamc-border); border-radius:8px; padding:10px 12px; margin:0 0 12px; }
.ca-h3 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--wamc-text-muted); margin:14px 0 6px; }

/* Desktop keeps its menus open — the drawer + backdrop never participate. */
@media (min-width: 993px) {
  .wamc-mobile-menu, .wamc-nav-backdrop { display: none !important; }

  /* Member menu: a bar under the header, not a left column. It sits in the
     page flow and scrolls away, so sticky panels on member pages keep their
     old offsets. Below 992px it is the same drawer as before. */
  body.member-topnav { padding-left: 0; --member-bar-height: 49px; }
  body.member-topnav .wamc-brand { min-width: 0; }
  .wamc-sidebar.wamc-member-bar {
    position: static;
    width: auto;
    display: flex;
    align-items: stretch;
    padding: 0 24px;
    border-right: 0;
    border-bottom: 1px solid var(--wamc-border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .wamc-member-bar .wamc-sidebar-group { display: none; }
  /* The second group label becomes a thin divider between "you" and "ours". */
  .wamc-member-bar .wamc-sidebar-group ~ .wamc-sidebar-group {
    display: block;
    flex: 0 0 1px;
    align-self: center;
    height: 22px;
    margin: 0 10px;
    padding: 0;
    font-size: 0;
    background: var(--wamc-border);
  }
  .wamc-member-bar a {
    height: 48px;
    gap: 7px;
    padding: 0 12px;
    font-size: 13.5px;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
  }
  .wamc-member-bar a i { font-size: 16px; width: auto; }
  .wamc-member-bar a.active { border-bottom-color: var(--wamc-gold); }
  /* Chapter Admin follows My chapter in the bar, tucked close to it. */
  .wamc-member-bar a.wamc-sub-link { padding-left: 2px; }
}

@media (max-width: 992px) {
  body { overflow-x: hidden; }
  .wamc-nav-toggle { display: inline-flex; }
  .wamc-navbar { padding: 0 14px; }

  /* Brand shouldn't reserve the sidebar-width gutter on mobile — the sidebar
     is a drawer here, so there is no gutter to line up with. */
  body.with-sidebar .wamc-brand { width: auto; min-width: 0; }

  /* Member/admin sidebar becomes a slide-in drawer. The original ≤992 rule
     already sets translateX(-100%) + body padding-left:0 + hides .wamc-nav-links;
     here we add the animation and the open state. */
  .wamc-sidebar { transition: transform 0.25s ease; z-index: 1026; box-shadow: none; }
  body.with-sidebar.nav-open .wamc-sidebar { transform: translateX(0); box-shadow: 6px 0 28px rgba(0,0,0,0.2); }

  /* Tighter content gutters */
  .wamc-content { padding: 20px 16px; }
  .wamc-nav-right { gap: 8px; }

  /* Trim the navbar identity block so it fits next to the avatar */
  .wamc-admin-role-text { display: none; }

  /* Medal-ribbon bars wrap instead of overflowing on narrow screens */
  .ribbon { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .wamc-navbar { padding: 0 10px; }
  .wamc-brand-text span { display: none; }      /* drop the small "Est. 1950" sub-label */
  .wamc-nav-right { gap: 6px; }
  .wamc-lang { padding: 6px 7px; }
  .wamc-content { padding: 16px 12px; }
  .wamc-page-header h1 { font-size: 23px; }
  .wamc-hero h1 { font-size: 28px; }
  .wamc-section-header h2 { font-size: 24px; }
  /* Hide the secondary notification icons on the smallest screens */
  .wamc-nav-icon { display: none; }
  /* Admin "+ New" quick-create is desktop-only chrome; drop it on phones */
  .wamc-admin-newbtn { display: none; }
}

/* Very small phones (iPhone SE and similar, 320-360px).
   At 320 the bar wanted 362px: toggle 40 + brand 106 + right 196 + padding 20.
   Flex items default to min-width:auto, so nothing shrank and the Sign Up
   button — the site's primary call to action — was clipped off the right edge
   on every page.
   Tighten the controls rather than hiding any of them, so both Log In and
   Sign Up stay reachable from the bar. Breakpoint is 360px, NOT 380px: 375px
   is one of the most common phone widths and must keep the roomier sizing. */
@media (max-width: 360px) {
  .wamc-navbar { padding: 0 6px; }
  .wamc-navbar > * { min-width: 0; }
  .wamc-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wamc-nav-right { gap: 4px; }
  .wamc-nav-right .wamc-btn-gold,
  .wamc-nav-right .wamc-btn-ghost { padding: 6px 9px; font-size: 12px; }
  .wamc-lang { padding: 5px 5px; font-size: 12px; }
  /* The crest carries width/height attributes, so both must be overridden. */
  .wamc-brand-crest { width: 40px; height: 40px; }
  .wamc-nav-toggle { padding: 0 6px; }
}

/* Media never blows out its container */
main img, .wamc-content img { max-width: 100%; }
/* Wide tables scroll horizontally instead of forcing page-wide overflow.
   Tables already inside a scroll wrapper (.adm-list-wrap) keep normal table
   layout and scroll via that wrapper instead. */
@media (max-width: 992px) {
  .wamc-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-list-wrap, .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-list-wrap table, .adm-table-wrap table { display: table; width: 100%; }
}

/* ---- Small-screen safety net ------------------------------------------
   Four things that quietly widen a page on a phone, fixed once here rather
   than page by page. */

/* A file input carries an intrinsic width of its own — about 344px in
   Chrome — which is wider than the screen of a small phone. */
input[type="file"] { max-width: 100%; }

/* Embedded players and framed previews. */
main iframe, .wamc-content iframe, main video, .wamc-content video { max-width: 100%; }

/* One unbroken string — a long e-mail address, a URL, a certificate number —
   otherwise sets the minimum width of everything around it. */
main, .wamc-content { overflow-wrap: break-word; }
main pre, .wamc-content pre { max-width: 100%; overflow-x: auto; }

/* On a 375px or 390px phone — an iPhone SE, a 12/13/14, a Pixel 5, between
   them most phones in use — Log In and Sign Up were wrapping onto two lines
   and standing the top bar up to 55px tall. Keep each button on one line. */
@media (max-width: 420px) {
  .wamc-navbar .wamc-btn-ghost,
  .wamc-navbar .wamc-btn-gold { white-space: nowrap; padding: 7px 11px; font-size: 12.5px; }
}
/* Narrower still, the WAMC wordmark is squeezed until it reads "WAM". The
   crest alone is better than a clipped name, and it frees the room the
   buttons need. */
@media (max-width: 400px) {
  .wamc-brand-text { display: none; }
  .wamc-navbar { padding: 0 8px; }
}

/* A role badge is a pill. A long title inside one must wrap, not push the
   identity block past the edge of a phone. */
.role-badges > span { max-width: 100%; flex-wrap: wrap; }

/* iOS zooms the whole page in when a field it is focusing is under 16px.
   The page never zooms back out, so the reader is left stranded sideways.
   Phone-width only, so the tighter desktop sizing is untouched. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}


/* Certiport credentials on the member Recognition page */
.rec-cred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rec-cred-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--wamc-border); border-radius: 8px; padding: 14px 18px; }
.rec-cred-text strong { display: block; font-size: 14.5px; color: var(--wamc-charcoal); }
.rec-cred-text span { display: block; font-size: 12px; color: var(--wamc-text-muted); margin-top: 3px; }
.rec-cred-more { margin-top: 14px; }
@media (max-width: 560px) { .rec-cred-list li { flex-direction: column; align-items: flex-start; } }


/* Four tiles two-up on a phone leaves each about 150px wide, so the labels
   need less letter-spacing and the icon needs to sit in tighter. */
@media (max-width: 480px) {
  .wamc-kpi { padding: 14px 14px; }
  .wamc-kpi-label { font-size: 10px; letter-spacing: 0.5px; padding-right: 24px; }
  .wamc-kpi-value { font-size: 25px; }
  .wamc-kpi-icon { right: 12px; top: 13px; font-size: 17px; }
}


/* --- Advertising slots (see ads.php) ------------------------------------
   The generous margin is not decoration. An advert sitting close to a button
   collects misclicks, misclicks are logged as invalid traffic, and enough of
   those closes an AdSense account. The label is there so a reader can always
   tell an advert from an article. */
.wamc-ad { display: block; margin: 34px auto; max-width: 100%; text-align: center; clear: both; }
.wamc-ad-wide { max-width: none; }
.wamc-ad-label { display: block; font-family: 'Inter', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wamc-text-muted); margin-bottom: 7px; }
.wamc-ad .adsbygoogle { display: block; min-height: 90px; }
@media (max-width: 640px) { .wamc-ad { margin: 26px auto; } }
@media print { .wamc-ad { display: none; } }


/* --- Section rhythm on small screens ------------------------------------
   None of the section paddings had a phone value, so a 375px screen carried
   the same 48px top and bottom as a 27-inch monitor — a third of the screen
   spent on nothing, on every band, on every page. */
@media (max-width: 768px) {
  .wamc-section { padding: 24px 0; }
  .wamc-section-tight { padding: 18px 0; }
  .wamc-section-header { margin-bottom: 18px; }
  .wamc-section-header-center { margin-bottom: 22px; }
  .wamc-section-header h2 { font-size: 27px; }
  .about-section { padding: 22px 16px; }
  .about-hero { padding: 32px 16px 32px; }
  .wamc-cta-band { padding: 32px 0; }
  .wamc-hero { padding: 40px 0 44px; }
}

/* ==================================================================
   Chef Chatter on the home page (index.php)

   Four link-out cards under Coming Events. Same card language as the
   news carousel, but the source name leads instead of a category,
   because the point of the block is that these come from elsewhere.
   ================================================================== */
.home-chatter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.home-chatter-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-chatter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
  border-color: var(--wamc-gold);
}
/* background-color under the picture, so a hotlinked image that fails to
   load leaves a calm tile rather than a white hole. */
.home-chatter-img { aspect-ratio: 16 / 10; background-color: #ece7e0; }
.home-chatter-body { padding: 15px 16px 17px; }
.home-chatter-source {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--wamc-burgundy);
  margin-bottom: 7px;
}
.home-chatter-card h3 {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--wamc-charcoal);
  margin: 0 0 9px;
}
.home-chatter-date { font-size: 11.5px; color: var(--wamc-text-muted); }
.home-chatter-date i { color: var(--wamc-gold-dark); margin-left: 2px; }

@media (max-width: 900px) { .home-chatter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-chatter-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   Training & Accreditation pathway (index.php)

   The four steps a chef or a school goes through. A dark band on
   purpose: it is the one strong break in a long run of light
   sections, and it sits directly above the Current training
   carousel, which lists the actual courses when there are any.
   ================================================================== */
.wamc-path {
  background: var(--wamc-charcoal, #1c1816);
  color: #f2ece4;
  padding: 56px 0;
}
.wamc-path-head { text-align: center; margin-bottom: 38px; }
.wamc-path-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wamc-gold);
  margin-bottom: 10px;
}
.wamc-path-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 10px;
}
.wamc-path-head p { font-size: 15px; color: #b8aea3; margin: 0; }

.wamc-path-steps {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.wamc-path-steps li {
  background: #201d1b;
  border: 1px solid #2e2a27;
  border-radius: 10px;
  padding: 24px 22px 26px;
  position: relative;
}
/* The step number is decoration, not content — it sits behind the words. */
.wamc-path-n {
  position: absolute;
  top: 16px; right: 18px;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  line-height: 1;
  color: #3a3430;
}
.wamc-path-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(201, 162, 39, .14);
  color: var(--wamc-gold);
  font-size: 20px;
  margin-bottom: 15px;
}
.wamc-path-steps h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 8px;
}
.wamc-path-steps p { font-size: 13.5px; line-height: 1.6; color: #b8aea3; margin: 0; }

.wamc-path-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wamc-path-ghost {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid #4a4340;
  border-radius: 5px;
  color: #d8cfc4;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wamc-path-ghost:hover { border-color: var(--wamc-gold); color: var(--wamc-gold); }

@media (max-width: 900px) { .wamc-path-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .wamc-path-steps { grid-template-columns: 1fr; }
  .wamc-path { padding: 40px 0; }
}

/* ==================================================================
   Latest news on the home page (index.php) — balanced magazine

   Replaces the older .wamc-news-featured block. What that one got
   wrong, and this fixes:
     · the three side pictures were a fixed width inside a stretching
       card, so each came out a different height;
     · those cards were mostly empty — a headline in a 200px box;
     · the lead excerpt was cut mid-word.
   ================================================================== */
.wamc-news-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  align-items: stretch;
}

/* --- the lead story --- */
.wamc-news-lead {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-radius: 9px;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.wamc-news-lead:hover,
.wamc-news-row:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .09); border-color: var(--wamc-gold); }
.wamc-news-lead-img { aspect-ratio: 16 / 9; background-color: var(--wamc-cream); }
.wamc-news-lead-body { padding: 22px 24px 24px; }
.wamc-news-lead-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--wamc-charcoal);
  margin: 0 0 10px;
}
.wamc-news-lead-body p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--wamc-text-muted);
  margin: 0 0 12px;
}

/* --- the three beside it ---
   Equal rows: the three cards share the column height between them, so every
   thumbnail comes out the same size however long the headlines are. */
.wamc-news-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.wamc-news-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--wamc-border);
  border-radius: 9px;
  overflow: hidden;
  min-height: 0;
}
.wamc-news-row-img { background-color: var(--wamc-cream); }
.wamc-news-row-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wamc-news-row-body h4 {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--wamc-charcoal);
  margin: 0 0 6px;
}
.wamc-news-row-body p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wamc-text-muted);
  margin: 0 0 6px;
}

/* --- shared --- */
.wamc-news-tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wamc-burgundy);
  margin-bottom: 8px;
}
.wamc-news-meta { font-size: 11.5px; color: var(--wamc-text-muted); }
.wamc-news-meta i { color: var(--wamc-gold-dark); margin-right: 3px; }

@media (max-width: 860px) {
  .wamc-news-grid { grid-template-columns: 1fr; }
  .wamc-news-side { grid-template-rows: none; }
}
@media (max-width: 460px) { .wamc-news-row { grid-template-columns: 96px 1fr; } }


/* Five enduring values (about.php) — step down in whole rows, so the fifth
   card is never stranded on a row of its own again. */
@media (max-width: 1080px) { .about-values { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .about-values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .about-values { grid-template-columns: 1fr; } }


/* ==========================================================================
   Certificate checker (admin-cert-checker.php)
   Two or three scans go up side by side, big enough to actually read. The
   viewer panes stay a fixed height so the Keep/Drop buttons line up across
   the row — an owner comparing 134 groups should not have to hunt for them.
   ========================================================================== */

.wamc-cc { max-width: 1600px; }

.cc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.cc-head h1 { margin:0 0 4px; font-size:26px; color:var(--wamc-text); }
.cc-head p { margin:0; color:var(--wamc-text-muted); font-size:14px; max-width:60ch; }
.cc-count { flex:none; background:var(--wamc-burgundy); color:#fff; border-radius:999px; padding:5px 13px; font-size:13px; font-weight:600; }

.cc-flash { border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:14px; }
.cc-flash.ok  { background:#e8f5ec; border:1px solid #b6ddc4; color:#1e5c37; }
.cc-flash.err { background:#fdecea; border:1px solid #f2b8b2; color:#8a2119; }

.cc-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--wamc-border); padding-bottom:10px; }
.cc-tabs a { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:7px; font-size:14px; color:var(--wamc-text-muted); text-decoration:none; }
.cc-tabs a:hover { background:var(--wamc-bg); color:var(--wamc-text); }
.cc-tabs a.on { background:var(--wamc-charcoal); color:#fff; }
.cc-tabs a b { background:var(--wamc-gold); color:var(--wamc-black); border-radius:999px; padding:1px 7px; font-size:12px; }
.cc-tabs a.on b { background:var(--wamc-gold-light); }
.cc-tabs-sep { flex:1 1 auto; }

.cc-empty { color:var(--wamc-text-muted); padding:36px 0; text-align:center; font-size:15px; }

.cc-table { width:100%; border-collapse:collapse; font-size:14px; }
.cc-table th { text-align:left; padding:9px 10px; border-bottom:2px solid var(--wamc-border); color:var(--wamc-text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.cc-table td { padding:10px; border-bottom:1px solid var(--wamc-border); vertical-align:middle; }
.cc-table tr:hover td { background:var(--wamc-bg); }
.cc-who { max-width:420px; }
.cc-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; white-space:nowrap; }

.cc-pill { display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; white-space:nowrap; }
.cc-shared_number { background:#fdeceb; color:#8a2119; }
.cc-similar_name  { background:#fff4e0; color:#8a5a12; }
.cc-missing_field { background:#eef1f7; color:#41506b; }

.cc-btn { display:inline-block; border:1px solid var(--wamc-border); background:#fff; color:var(--wamc-text); border-radius:7px; padding:8px 14px; font-size:14px; font-family:inherit; cursor:pointer; text-decoration:none; line-height:1.2; }
.cc-btn:hover { background:var(--wamc-bg); }
.cc-btn-go { background:var(--wamc-charcoal); color:#fff; border-color:var(--wamc-charcoal); }
.cc-btn-go:hover { background:var(--wamc-black); color:#fff; }
.cc-btn-keep { background:#1e7a45; border-color:#1e7a45; color:#fff; font-weight:600; flex:1 1 auto; }
.cc-btn-keep:hover { background:#176036; color:#fff; }
.cc-btn-drop { color:#8a2119; border-color:#e6c2be; }
.cc-btn-drop:hover { background:#fdecea; }
.cc-btn-all { background:var(--wamc-gold); border-color:var(--wamc-gold-dark); color:var(--wamc-black); font-weight:600; }
.cc-btn-all:hover { background:var(--wamc-gold-dark); }

.cc-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.cc-bar-sp { flex:1 1 auto; }
.cc-pos { color:var(--wamc-text-muted); font-size:13px; }
.cc-hint { background:var(--wamc-cream); border:1px solid var(--wamc-parchment); border-radius:8px; padding:11px 14px; font-size:14px; color:var(--wamc-text); margin:0 0 16px; max-width:90ch; }

.cc-grid { display:grid; gap:16px; align-items:start; }
.cc-cols-1 { grid-template-columns:minmax(0, 720px); }
.cc-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cc-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }

.cc-card { border:1px solid var(--wamc-border); border-radius:10px; background:#fff; padding:12px; display:flex; flex-direction:column; gap:10px; }
.cc-card.cc-status-accepted { border-color:#8fc7a5; box-shadow:0 0 0 2px #e8f5ec inset; }
.cc-card.cc-status-rejected { border-color:#e6c2be; opacity:.72; }
.cc-card.cc-status-imported { border-color:var(--wamc-gold); }

.cc-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cc-ref { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--wamc-text-muted); }
.cc-state { font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; }
.cc-state-pending  { background:#eef1f7; color:#41506b; }
.cc-state-accepted { background:#e8f5ec; color:#1e5c37; }
.cc-state-rejected { background:#fdecea; color:#8a2119; }
.cc-state-imported { background:#fdf3dd; color:#6b5312; }

.cc-viewer { position:relative; height:min(58vh, 620px); background:var(--wamc-bg); border:1px solid var(--wamc-border); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cc-viewer iframe { width:100%; height:100%; border:0; }
.cc-viewer img { max-width:100%; max-height:100%; object-fit:contain; }
.cc-missing { padding:18px; text-align:center; font-size:13px; color:var(--wamc-text-muted); }
.cc-missing code { display:inline-block; word-break:break-all; }

.cc-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; }
.cc-links a { color:var(--wamc-burgundy); }
.cc-file { color:var(--wamc-text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

.cc-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cc-fields label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--wamc-text-muted); }
.cc-fields input { border:1px solid var(--wamc-border); border-radius:6px; padding:7px 9px; font-size:14px; font-family:inherit; color:var(--wamc-text); background:#fff; }
.cc-fields input:focus { outline:2px solid var(--wamc-gold); outline-offset:1px; }
.cc-fields input[readonly] { background:var(--wamc-bg); color:var(--wamc-text-muted); }

.cc-gap  { margin:0; font-size:12px; color:#8a5a12; background:#fff4e0; border-radius:6px; padding:6px 9px; }
.cc-note { margin:0; font-size:12px; color:var(--wamc-text-muted); background:var(--wamc-bg); border-radius:6px; padding:6px 9px; max-height:7.5em; overflow:auto; }

.cc-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }

.cc-footer { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:18px; padding-top:14px; border-top:1px solid var(--wamc-border); }
.cc-note-field { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--wamc-text-muted); flex:1 1 280px; max-width:420px; }
.cc-note-field input { border:1px solid var(--wamc-border); border-radius:6px; padding:8px 10px; font-size:14px; font-family:inherit; }
.cc-footer-btns { display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 1180px) { .cc-cols-3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px) {
  .cc-cols-2, .cc-cols-3 { grid-template-columns:1fr; }
  .cc-viewer { height:70vh; }
  .cc-head { flex-direction:column; }
}

/* Dropped scans leave the compare screen. This line is the way back to them. */
.cc-dropped-bar { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 13px; border-radius:8px; background:var(--wamc-bg); border:1px solid var(--wamc-border); font-size:13px; color:var(--wamc-text-muted); }
.cc-dropped-bar a { color:var(--wamc-burgundy); font-weight:600; }

/* Find any scan, not just the ones waiting — the only way to reach a clean
   scan whose membership number needs changing after import. */
.cc-search { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.cc-search input[type=search] { flex:1 1 auto; max-width:560px; border:1px solid var(--wamc-border); border-radius:7px; padding:9px 12px; font-size:14px; font-family:inherit; color:var(--wamc-text); background:#fff; }
.cc-search input[type=search]:focus { outline:2px solid var(--wamc-gold); outline-offset:1px; }

/* "Same person, different papers" — a medal award and a membership certificate
   are two real records. Both are kept and both point at one member. */
.cc-same { margin-top:18px; padding:14px 16px; border:1px solid var(--wamc-parchment); border-radius:10px; background:var(--wamc-cream); }
.cc-same h2 { margin:0 0 3px; font-size:16px; color:var(--wamc-text); }
.cc-same > p { margin:0 0 12px; font-size:13px; color:var(--wamc-text-muted); max-width:80ch; }
.cc-same-find { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.cc-same-find input { flex:1 1 320px; max-width:520px; border:1px solid var(--wamc-border); border-radius:7px; padding:9px 12px; font-size:14px; font-family:inherit; background:#fff; color:var(--wamc-text); }
.cc-same-find input:focus { outline:2px solid var(--wamc-gold); outline-offset:1px; }
.cc-btn-same { background:var(--wamc-burgundy); border-color:var(--wamc-burgundy); color:#fff; font-weight:600; }
.cc-btn-same:hover { background:var(--wamc-burgundy-dark); color:#fff; }
.cc-btn-same .cc-mono { color:#f3e6e6; }
.cc-same-table { background:#fff; border-radius:8px; overflow:hidden; }
.cc-same-table th { background:transparent; }
.cc-linked { margin:0; font-size:12px; color:#1e5c37; background:#e8f5ec; border-radius:6px; padding:6px 9px; }
.cc-linked a { color:#1e5c37; font-weight:600; }

/* "Same person, different papers" — a medal award and a membership certificate
   are two real records. Both are kept and both point at one member. */
.cc-same { margin-top:18px; padding:14px 16px; border:1px solid var(--wamc-parchment); border-radius:10px; background:var(--wamc-cream); }
.cc-same h2 { margin:0 0 3px; font-size:16px; color:var(--wamc-text); }
.cc-same > p { margin:0 0 12px; font-size:13px; color:var(--wamc-text-muted); max-width:80ch; }
.cc-same-find { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.cc-same-find input { flex:1 1 320px; max-width:520px; border:1px solid var(--wamc-border); border-radius:7px; padding:9px 12px; font-size:14px; font-family:inherit; background:#fff; color:var(--wamc-text); }
.cc-same-find input:focus { outline:2px solid var(--wamc-gold); outline-offset:1px; }
.cc-btn-same { background:var(--wamc-burgundy); border-color:var(--wamc-burgundy); color:#fff; font-weight:600; }
.cc-btn-same:hover { background:var(--wamc-burgundy-dark); color:#fff; }
.cc-btn-same .cc-mono { color:#f3e6e6; }
.cc-same-table { background:#fff; border-radius:8px; overflow:hidden; }
.cc-same-table th { background:transparent; }
.cc-linked { margin:0; font-size:12px; color:#1e5c37; background:#e8f5ec; border-radius:6px; padding:6px 9px; }
.cc-linked a { color:#1e5c37; font-weight:600; }

.cc-same-new { margin:12px 0 8px; font-size:13px; color:var(--wamc-text-muted); }
.cc-same-newbtns { display:flex; flex-wrap:wrap; gap:8px; }


/* ==========================================================================
   Google preferred sources (preferred_source.php)
   A plain link dressed as a button. No third-party script, so nothing here
   loads or sets anything until the reader actually clicks.
   ========================================================================== */
.ps-box { border:1px solid var(--wamc-border); border-radius:10px; background:var(--wamc-cream); padding:16px 18px; }
.ps-lead { margin:0 0 10px; font-size:15px; font-weight:600; color:var(--wamc-text); }
.ps-btn { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid #dadce0; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; color:#3c4043; text-decoration:none; transition:box-shadow .12s ease, border-color .12s ease; }
.ps-btn:hover, .ps-btn:focus-visible { color:#3c4043; border-color:#c6c9cd; box-shadow:0 1px 5px rgba(0,0,0,.12); }
.ps-btn:focus-visible { outline:2px solid var(--wamc-charcoal); outline-offset:2px; }
.ps-g { display:inline-flex; flex:none; }
.ps-note { margin:10px 0 0; font-size:12.5px; color:var(--wamc-text-muted); max-width:60ch; }
.ps-compact { border:0; background:transparent; padding:0; }
@media (max-width:480px) { .ps-btn { width:100%; justify-content:center; } }

/* In the news filter rail the button shares a 236px column, so it goes full
   width and is allowed to wrap onto a second line rather than being clipped. */
.nf-side .ps-compact { width:100%; }
.nf-side .ps-btn { width:100%; justify-content:flex-start; gap:8px; padding:9px 12px; font-size:13px; line-height:1.3; text-align:left; }
.nf-side .ps-txt { white-space:normal; }

/* ---- Corporate Members showcase (corporate-members.php) — added 13/09/2026 ---- */
.cm-count { font-size:14px; color:var(--wamc-text-muted); margin:0 0 22px; }
.cm-grid { list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:18px; }
.cm-card { background:#fff; border:1px solid var(--wamc-border); border-top:3px solid var(--wamc-gold);
  border-radius:8px; padding:22px 20px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.cm-logo { width:100%; height:90px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cm-logo img { max-width:100%; max-height:90px; object-fit:contain; }
.cm-mono { width:76px; height:76px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600; color:#f6f2e9; }
.cm-mono.mono-charcoal { background:var(--wamc-charcoal); }
.cm-mono.mono-burgundy { background:var(--wamc-burgundy); }
.cm-mono.mono-teal { background:#2c7a7b; }
.cm-mono.mono-gold { background:var(--wamc-gold-dark); color:var(--wamc-charcoal); }
.cm-name { font-family:'Playfair Display',serif; font-size:1.15rem; line-height:1.25; color:var(--wamc-charcoal); margin:0 0 8px; }
.cm-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; font-size:12.5px; color:var(--wamc-text-muted); margin:0 0 10px; }
.cm-meta i { color:var(--wamc-gold-dark); }
.cm-desc { font-size:13.5px; line-height:1.55; color:var(--wamc-text); margin:0 0 12px; }
.cm-site { margin-top:auto; font-size:13px; font-weight:600; color:var(--wamc-burgundy); text-decoration:none; }
.cm-site:hover, .cm-site:focus-visible { text-decoration:underline; }
.cm-empty { background:#fff; border:1px dashed var(--wamc-border); border-radius:10px; padding:44px 24px; text-align:center; }
.cm-empty > i { font-size:34px; color:var(--wamc-gold-dark); display:block; margin-bottom:10px; }
.cm-empty h3 { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--wamc-charcoal); margin:0 0 6px; }
.cm-empty p { font-size:14px; color:var(--wamc-text-muted); margin:0; }
.cm-cta { text-align:center; max-width:720px; }
.cm-cta .lead { margin:0 auto 20px; }

/* ---- Member News & Feed (news-feed.php) — compact redesign 15/09/2026 ---- */
.nfd { max-width:1080px; }
.nfd-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 20px; margin:0 0 16px; }
.nfd-head h1 { font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--wamc-charcoal); margin:0 0 2px; }
.nfd-head p { font-size:13.5px; color:var(--wamc-text-muted); margin:0; }
.nfd-official { font-size:13px; font-weight:600; color:var(--wamc-burgundy); text-decoration:none; white-space:nowrap; }
.nfd-official:hover, .nfd-official:focus-visible { text-decoration:underline; }

.nfd-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:start; }
.nfd-layout:has(> .nfd-main:only-child) { grid-template-columns:minmax(0,1fr); }
@media (max-width: 880px) { .nfd-layout { grid-template-columns:minmax(0,1fr); } }

.nfd-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; position:relative; }
.nfd-tabs { display:flex; flex-wrap:wrap; gap:4px; }
.nfd-tab { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; font-size:13px; font-weight:600; border-radius:999px;
  color:var(--wamc-text-muted); background:#fff; border:1px solid var(--wamc-border); text-decoration:none; }
.nfd-tab:hover { color:var(--wamc-charcoal); border-color:var(--wamc-gold); }
.nfd-tab.is-active { color:#fff; background:var(--wamc-charcoal); border-color:var(--wamc-charcoal); }

.nfd-customise > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  font-size:13px; font-weight:600; color:var(--wamc-charcoal); border:1px solid var(--wamc-border); border-radius:999px; background:#fff; }
.nfd-customise > summary::-webkit-details-marker { display:none; }
.nfd-customise > summary i { color:var(--wamc-burgundy); }
.nfd-customise[open] > summary { border-color:var(--wamc-gold); }
.nfd-customise-body { position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:min(340px, 100%); background:#fff;
  border:1px solid var(--wamc-border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.12); padding:12px 14px; }
.nfd-customise-intro { font-size:12.5px; color:var(--wamc-text-muted); margin:0 0 6px; }
.nfd-toggle { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--wamc-border); cursor:pointer; }
.nfd-toggle input { margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--wamc-burgundy); }
.nfd-toggle > span { display:flex; flex-direction:column; gap:1px; }
.nfd-toggle-label { font-size:13px; font-weight:600; color:var(--wamc-charcoal); }
.nfd-toggle-label i { color:var(--wamc-gold-dark); margin-right:3px; }
.nfd-toggle-hint { font-size:11.5px; color:var(--wamc-text-muted); }
.nfd-save { margin-top:10px; background:var(--wamc-burgundy); color:#fff; border:0; border-radius:5px; padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.nfd-save:hover { background:var(--wamc-burgundy-dark); }

.nfd-scope { font-size:12.5px; color:var(--wamc-text-muted); margin:0 0 8px; }
.nfd-scope i { color:var(--wamc-gold-dark); }

.nfd-list { background:#fff; border:1px solid var(--wamc-border); border-radius:8px; }
.nfd-item { display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--wamc-border); }
.nfd-item:last-child { border-bottom:0; }
.nfd-item .feed-avatar { width:32px; height:32px; font-size:12px; }
.nfd-item-body { flex:1; min-width:0; }
.nfd-meta { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-size:11.5px; color:var(--wamc-text-muted); margin-bottom:2px; }
.nfd-tag { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:3px; }
.nfd-tag.chapter { background:var(--wamc-cream); color:var(--wamc-gold-dark); }
.nfd-tag.magazine { background:#efeaf3; color:#4a2c6e; }
.nfd-tag.industry { background:#e3efe0; color:#2f6224; }
.nfd-pinned { color:var(--wamc-burgundy); font-weight:600; }
.nfd-title { font-family:'Playfair Display',serif; font-size:1.05rem; line-height:1.3; color:var(--wamc-charcoal); margin:0 0 2px; }
.nfd-title a { color:inherit; text-decoration:none; }
.nfd-title a:hover, .nfd-title a:focus-visible { color:var(--wamc-burgundy); text-decoration:underline; }
.nfd-sub { font-size:13px; font-style:italic; color:var(--wamc-gold-dark); margin:0 0 2px; }
.nfd-text { font-size:13.5px; line-height:1.5; color:var(--wamc-text); margin:0; overflow-wrap:anywhere; }
.nfd-text.is-clamped { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.nfd-text[data-clamp].is-clamped { -webkit-line-clamp:4; }
.nfd-more { background:none; border:0; padding:0; margin-top:2px; font-size:12px; font-weight:600; color:var(--wamc-burgundy); cursor:pointer; }
.nfd-more:hover, .nfd-more:focus-visible { text-decoration:underline; }
.nfd-link { display:inline-block; margin-top:4px; font-size:12px; font-weight:600; color:var(--wamc-burgundy); text-decoration:none; }
.nfd-link:hover, .nfd-link:focus-visible { text-decoration:underline; }

.nfd-empty { text-align:center; padding:32px 20px; background:#fff; border:1px solid var(--wamc-border); border-radius:8px; }
.nfd-empty > i { font-size:30px; color:var(--wamc-text-muted); display:block; margin-bottom:8px; }
.nfd-empty h3 { font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--wamc-charcoal); margin:0 0 4px; }
.nfd-empty p { font-size:13.5px; color:var(--wamc-text-muted); margin:0; }

.nfd-side { position:sticky; top:84px; }
@media (max-width: 880px) { .nfd-side { position:static; } }
.nfd-card { background:#fff; border:1px solid var(--wamc-border); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.nfd-card-title { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wamc-text-muted); margin:0 0 6px; }
.nfd .side-event { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--wamc-border); }
.nfd .side-event:last-of-type { border-bottom:0; }
.nfd .side-event-date { width:36px; flex-shrink:0; background:var(--wamc-cream); border:1px solid var(--wamc-gold); border-radius:3px; text-align:center; padding:2px; }
.nfd .side-event-date .day { display:block; font-family:'Playfair Display',serif; font-size:1rem; line-height:1; color:var(--wamc-charcoal); }
.nfd .side-event-date .month { display:block; font-size:8.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--wamc-gold-dark); }
.nfd .side-event-body h4 { font-size:13px; font-weight:600; margin:0 0 1px; line-height:1.3; }
.nfd .side-event-body p { font-size:11.5px; color:var(--wamc-text-muted); margin:0; }
.nfd .side-person { display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--wamc-border); text-decoration:none; }
.nfd .side-person:last-of-type { border-bottom:0; }
.nfd .side-person .feed-avatar { width:30px; height:30px; font-size:11px; }
.nfd .side-person h4 { font-size:13px; font-weight:600; margin:0 0 1px; color:var(--wamc-charcoal); }
.nfd .side-person p { font-size:11px; color:var(--wamc-text-muted); margin:0; }
.nfd .side-person:hover h4 { color:var(--wamc-burgundy); }
.nfd .feed-avatar { border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }

.nfd .feed-flash { display:flex; align-items:center; gap:8px; font-size:13.5px; padding:9px 14px; border-radius:6px; margin-bottom:12px; }
.nfd .feed-flash.ok { background:#eef7ee; border:1px solid #bfe0bf; color:#2e6b2e; }
.nfd .feed-flash.err { background:#fcecec; border:1px solid #f0c2c2; color:#a02828; }
