@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */

:root {
  /* Core brand — from Vermont slate quarry samples */
  --gc-green: #3E6E62;
  --gc-red: #A86B58;
  --gc-dark: #2F3235;
  --gc-purple: #8E7D86;

  /* Neutrals */
  --gc-white: #F9F8F5;
  --gc-fieldstone: #F0EDE8;
  --gc-ledge: #D8D5CF;

  /* Text */
  --gc-pencil: #3A3C3E;
  --gc-lichen: #6B6F6D;
  --gc-gravel: #9A9D9B;

  /* Links */
  --gc-blue: #527D98;
  --gc-blue-hover: #3E6880;

  /* Tints */
  --gc-green-tint: #E8EFED;
  --gc-red-tint: #F5ECE8;
  --gc-purple-tint: #EFEBEE;
  --gc-blue-tint: #E6EEF3;

  /* Interactive shades */
  --gc-green-pressed: #305A50;
  --gc-red-pressed: #8E5848;
  --gc-purple-pressed: #5A4C54;
  --gc-purple-dark: #6B5C64;

  /* Typography */
  --gc-font-heading: 'Lora', Georgia, serif;
  --gc-font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;

  /* Type scale */
  --gc-h1-size: 2rem;
  --gc-h2-size: 1.5rem;
  --gc-h3-size: 1.25rem;
  --gc-h4-size: 1.1rem;
  --gc-body-size: 1rem;
  --gc-small-size: 0.875rem;
  --gc-tiny-size: 0.8rem;

  /* Spacing */
  --gc-space-xs: 0.5rem;
  --gc-space-sm: 1rem;
  --gc-space-md: 1.5rem;
  --gc-space-lg: 1.75rem;
  --gc-space-xl: 2.5rem;
  --gc-space-section: 2.5rem;

  /* Layout */
  --gc-content-max: 1100px;
  --gc-radius: 6px;
  --gc-radius-lg: 10px;
}


/* ------------------------------------------------------------
   2. BASE TYPOGRAPHY
   ------------------------------------------------------------ */

body {
  font-family: var(--gc-font-body);
  font-size: var(--gc-body-size);
  line-height: 1.65;
  color: var(--gc-pencil);
  background-color: var(--gc-white);
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4,
.WaGadgetContent h1,
.WaGadgetContent h2,
.WaGadgetContent h3,
.WaGadgetContent h4 {
  font-family: var(--gc-font-heading);
  color: var(--gc-dark);
  margin-top: 0;
}

h1, .WaGadgetContent h1 {
  font-size: var(--gc-h1-size);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--gc-space-sm);
}

h2, .WaGadgetContent h2 {
  font-size: var(--gc-h2-size);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--gc-space-sm);
}

h3, .WaGadgetContent h3 {
  font-size: var(--gc-h3-size);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--gc-space-xs);
}

h4, .WaGadgetContent h4 {
  font-size: var(--gc-h4-size);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--gc-space-xs);
}

/* Body text */
p {
  margin-bottom: var(--gc-space-sm);
}

/* Links */
a {
  color: var(--gc-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gc-blue-hover);
  text-decoration: underline;
}

/* Gadget content wrapper — ensure font inheritance */
.WaGadgetContent {
  font-family: var(--gc-font-body);
}


/* ------------------------------------------------------------
   3. NAVIGATION
   Horizontal menu — slate green with Green-Slate texture.
   Overrides the GUI Colors-and-Styles slate-dark default.
   ------------------------------------------------------------ */

/* Nav band — slate green textured background.
   WA renders a sibling <div class="menuBackground"> behind .menuInner that paints
   the full-width nav stripe (extends ~2235px past the 940px content area). This
   sibling is what the GUI Colors-and-Styles slate-dark default colors. Target it
   directly to cover the whole visible nav region. Belt-and-suspenders on the
   outer container + menuInner in case theme variants paint differently. */
.WaGadgetMenuHorizontal {
  font-family: var(--gc-font-body);
}

.WaGadgetMenuHorizontal .menuBackground,
.WaGadgetMenuHorizontal > .menuBackground {
  background:
    linear-gradient(rgba(62, 110, 98, 0.90), rgba(62, 110, 98, 0.88)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/Green-Slate.png') center / cover no-repeat !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  /* Break out of the content column so the band extends across the full viewport.
     WA's theme sets .menuBackground to width:2235px (the legacy desktop frame width)
     constrained to the content column; -2000px left/right gives generous overflow
     in both directions to cover any modern viewport (up to ~4000px wide). */
  left: -2000px !important;
  right: -2000px !important;
  width: auto !important;
}

.WaGadgetMenuHorizontal .menuInner {
  background: transparent !important;
}

/* WA paints the menu items' <ul class="firstLevel"> with the GUI Colors-and-Styles
   slate-dark fill — that's the dark strip that was showing in the middle of the nav
   band where the menu items sit. Force transparent so the green texture below shows
   through behind the menu items. */
.WaGadgetMenuHorizontal ul.firstLevel,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel,
.WaGadgetMenuHorizontal ul.firstLevel li {
  background: transparent !important;
  background-color: transparent !important;
}

/* Nav brand name — Lora serif (kept for the homepage label position) */
.WaGadgetMenuHorizontal .menuInner .menuItemLogo a,
.WaGadgetMenuHorizontal .menuItemLogo a {
  font-family: var(--gc-font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Top-level menu items */
.WaGadgetMenuHorizontal .menuInner > ul > li > a,
.WaGadgetMenuHorizontal .menuInner .firstLevel > a,
.WaGadgetMenuHorizontal .firstLevelMenuItem > a {
  color: var(--gc-white) !important;
  background: transparent !important;
  font-family: var(--gc-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--gc-small-size) !important;
  letter-spacing: 0.01em;
  padding: 1.1rem 1.4rem !important;
  transition: color 0.18s ease, background 0.18s ease;
}

/* Hover — subtle white tint + green-tint text */
.WaGadgetMenuHorizontal .menuInner > ul > li > a:hover,
.WaGadgetMenuHorizontal .firstLevelMenuItem > a:hover {
  color: var(--gc-green-tint) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Current page — darker bg tint + slate-red bottom accent */
.WaGadgetMenuHorizontal .menuInner > ul > li.selected > a,
.WaGadgetMenuHorizontal .menuInner > ul > li.menuActive > a,
.WaGadgetMenuHorizontal .firstLevelMenuItem.selected > a,
.WaGadgetMenuHorizontal .firstLevelMenuItem.menuActive > a {
  color: var(--gc-white) !important;
  background: rgba(0, 0, 0, 0.12) !important;
  box-shadow: inset 0 -3px 0 var(--gc-red);
}

/* Dropdown menus — clean off-white surface against the green band */
.WaGadgetMenuHorizontal .menuInner .dropDown {
  background: var(--gc-white);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.WaGadgetMenuHorizontal .menuInner .dropDown a {
  color: var(--gc-pencil) !important;
  background: transparent !important;
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  letter-spacing: 0.02em;
}

.WaGadgetMenuHorizontal .menuInner .dropDown a:hover {
  color: var(--gc-green) !important;
  background: var(--gc-fieldstone) !important;
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */

/* Primary button (Style 1) — set colors in GUI, shape here */
.linkStyle1 a,
a.linkStyle1,
.WaGadgetContent .linkStyle1 a {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  border-radius: var(--gc-radius);
  padding: 0.6rem 1.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-decoration: none;
  display: inline-block;
}

.linkStyle1 a:hover,
a.linkStyle1:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.linkStyle1 a:active,
a.linkStyle1:active {
  transform: translateY(0);
}

/* Secondary button (Style 2) — outlined */
.linkStyle2 a,
a.linkStyle2,
.WaGadgetContent .linkStyle2 a {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  border-radius: var(--gc-radius);
  padding: 0.6rem 1.5rem;
  background: transparent;
  border: 2px solid var(--gc-green);
  color: var(--gc-green);
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.linkStyle2 a:hover,
a.linkStyle2:hover {
  background: var(--gc-green);
  color: var(--gc-white);
  text-decoration: none;
}

/* Accent button (Style 3) — set colors in GUI, shape here */
.linkStyle3 a,
a.linkStyle3,
.WaGadgetContent .linkStyle3 a {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  border-radius: var(--gc-radius);
  padding: 0.6rem 1.5rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
  text-decoration: none;
  display: inline-block;
}

.linkStyle3 a:hover,
a.linkStyle3:hover {
  text-decoration: none;
  transform: translateY(-1px);
}


/* ------------------------------------------------------------
   5. LAYOUT ZONES — BACKGROUNDS
   ------------------------------------------------------------ */

/* Footer zone — dark background */
/* (Background color set in GUI: Outer footer → #2F3235) */
/* Text color must be set here — no GUI field for it */
.zoneFooter1,
.zoneFooter2,
.zoneFooter3 {
  color: var(--gc-white);
}

.zoneFooter1 a,
.zoneFooter2 a,
.zoneFooter3 a {
  color: rgba(249, 248, 245, 0.7);
  transition: color 0.2s ease;
}

.zoneFooter1 a:hover,
.zoneFooter2 a:hover,
.zoneFooter3 a:hover {
  color: var(--gc-white);
  text-decoration: none;
}

.zoneFooter1 h1, .zoneFooter1 h2, .zoneFooter1 h3, .zoneFooter1 h4,
.zoneFooter2 h1, .zoneFooter2 h2, .zoneFooter2 h3, .zoneFooter2 h4,
.zoneFooter3 h1, .zoneFooter3 h2, .zoneFooter3 h3, .zoneFooter3 h4 {
  color: var(--gc-white);
}


/* ------------------------------------------------------------
   6. HOMEPAGE SECTION BANDS
   Apply these class names in each gadget's Advanced → CSS class
   ------------------------------------------------------------ */

/* Hydrangea band (default white) */
.gc-band-white {
  background-color: var(--gc-white);
  padding: var(--gc-space-section) 0;
}

/* Fieldstone band (warm gray) */
.gc-band-fieldstone {
  background-color: var(--gc-fieldstone);
  padding: var(--gc-space-section) 0;
}

/* Fieldstone band with Main Street photo */
.gc-band-fieldstone-photo {
  background:
    linear-gradient(rgba(240, 237, 232, 0.62), rgba(240, 237, 232, 0.58)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/granville-main-street-3469.jpg') center / cover no-repeat;
  padding: var(--gc-space-section) 0;
  border-radius: var(--gc-radius-lg);
}

/* Photo-band scoped text contrast — sub-heading and CTA link read against
   the lighter overlay (0.62/0.58) without the fieldstone-tint washout. */
.gc-band-fieldstone-photo .gc-section-heading p {
  color: var(--gc-pencil);
}

.gc-band-fieldstone-photo .gc-browse-all a {
  color: var(--gc-pencil);
  font-weight: 600;
}

/* Slate Green band (community guide callout) */
.gc-band-green {
  background-color: var(--gc-green);
  padding: var(--gc-space-section) 0;
  color: var(--gc-green-tint);
}

.gc-band-green h1,
.gc-band-green h2,
.gc-band-green h3,
.gc-band-green h4 {
  color: var(--gc-white);
}

.gc-band-green p {
  color: rgba(232, 239, 237, 0.8);
}

.gc-band-green a {
  color: var(--gc-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.gc-band-green a:hover {
  border-bottom-color: var(--gc-white);
  text-decoration: none;
}

/* Slate Dark band (if ever needed beyond nav/footer) */
.gc-band-dark {
  background-color: var(--gc-dark);
  padding: var(--gc-space-section) 0;
  color: var(--gc-white);
}

.gc-band-dark h1,
.gc-band-dark h2,
.gc-band-dark h3,
.gc-band-dark h4 {
  color: var(--gc-white);
}

/* Rounded-corner modifier — stack with any band class to turn a full-width
   band into a card-style block with rounded edges. Used on the homepage
   "What's happening" title block (green-texture + rounded), and available
   for any future band-as-card treatment. */
.gc-band-rounded {
  border-radius: var(--gc-radius-lg);
  overflow: hidden;
}


/* ------------------------------------------------------------
   7. SECTION HEADINGS
   Centered heading with optional subtext for section intros
   ------------------------------------------------------------ */

.gc-section-heading {
  text-align: center;
  margin-bottom: var(--gc-space-lg);
}

.gc-section-heading h2 {
  font-size: var(--gc-h2-size);
  margin-bottom: var(--gc-space-xs);
}

.gc-section-heading p {
  color: var(--gc-lichen);
  font-size: var(--gc-body-size);
  max-width: 520px;
  margin: 0 auto;
}


/* ------------------------------------------------------------
   8. INTENT CARDS (three-column row)
   ------------------------------------------------------------ */

.gc-intent-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gc-space-md);
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0 var(--gc-space-sm);
}

.gc-intent-card {
  border: none;
  border-radius: var(--gc-radius-lg);
  padding: 1.75rem var(--gc-space-md);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gc-intent-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(47, 50, 53, 0.15);
}

/* Bold card color variants — slate texture backgrounds */
.gc-intent-card-green {
  background: 
    linear-gradient(rgba(62, 110, 98, 0.82), rgba(62, 110, 98, 0.78)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/Green-Slate.png') center / cover no-repeat;
}

.gc-intent-card-red {
  background: 
    linear-gradient(rgba(168, 107, 88, 0.72), rgba(168, 107, 88, 0.68)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/terra-red-slate-natur-b-1.jpg') center / cover no-repeat;
}

.gc-intent-card-purple {
  background: 
    linear-gradient(rgba(142, 125, 134, 0.78), rgba(142, 125, 134, 0.74)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/slate_texture_1.jpeg') center / cover no-repeat;
}

.gc-intent-card-green h3,
.gc-intent-card-red h3,
.gc-intent-card-purple h3   { color: #FFFFFF; }

.gc-intent-card-green p,
.gc-intent-card-red p,
.gc-intent-card-purple p    { color: rgba(255, 255, 255, 0.75); }

.gc-intent-card-green a,
.gc-intent-card-red a,
.gc-intent-card-purple a    { color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

.gc-intent-card-green a:hover,
.gc-intent-card-red a:hover,
.gc-intent-card-purple a:hover { border-bottom-color: #FFFFFF; text-decoration: none; }


.gc-intent-card-icon {
  font-size: 2rem;
  margin-bottom: var(--gc-space-sm);
  display: block;
}

/* v1.4.1: standardize SVG icon size across intent + CTA cards
   (overrides any width/height attributes baked into the SVG markup) */
.gc-intent-card-icon svg,
.gc-cta-card-icon svg {
  width: 44px;
  height: 44px;
}

.gc-intent-card h3 {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h3-size);
  margin-bottom: var(--gc-space-xs);
}

.gc-intent-card p {
  font-size: var(--gc-small-size);
  margin-bottom: var(--gc-space-sm);
}

.gc-intent-card a {
  font-weight: 600;
  font-size: var(--gc-small-size);
}


/* ------------------------------------------------------------
   9. DIRECTORY TEASER
   ------------------------------------------------------------ */

.gc-directory-search {
  max-width: 560px;
  margin: 0 auto var(--gc-space-md);
  display: flex;
  gap: var(--gc-space-xs);
}

.gc-directory-search input[type="text"] {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  font-family: var(--gc-font-body);
  font-size: var(--gc-body-size);
  color: var(--gc-pencil);
  background: var(--gc-white);
  transition: border-color 0.2s ease;
}

.gc-directory-search input[type="text"]:focus {
  outline: none;
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(62, 110, 98, 0.12);
}

.gc-directory-search input[type="text"]::placeholder {
  color: var(--gc-gravel);
}

.gc-directory-search button {
  padding: 0.7rem 1.5rem;
  background: var(--gc-green);
  color: var(--gc-white);
  border: none;
  border-radius: var(--gc-radius);
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gc-directory-search button:hover {
  background: var(--gc-green-pressed);
}

/* Category pills */
.gc-category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gc-space-xs);
  max-width: 640px;
  margin: 0 auto var(--gc-space-sm);
}

.gc-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gc-ledge);
  border-radius: 20px;
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-pencil);
  background: var(--gc-white);
  text-decoration: none;
  transition: all 0.2s ease;
}

.gc-pill:hover {
  background: var(--gc-green-tint);
  border-color: var(--gc-green);
  color: var(--gc-green);
  text-decoration: none;
}

/* Colored pill variants */
.gc-pill-green {
  background: var(--gc-green-tint);
  color: var(--gc-green);
  border-color: transparent;
}

.gc-pill-red {
  background: var(--gc-red-tint);
  color: var(--gc-red);
  border-color: transparent;
}

.gc-pill-purple {
  background: var(--gc-purple-tint);
  color: var(--gc-purple-dark);
  border-color: transparent;
}

/* Browse all categories CTA — sits below the pills, centered */
.gc-browse-all {
  text-align: center;
  margin-top: var(--gc-space-sm);
}


/* ------------------------------------------------------------
   10. EVENT CARDS
   ------------------------------------------------------------ */

.gc-event-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gc-space-md);
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0 var(--gc-space-sm);
}

.gc-event-card {
  background: var(--gc-white);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
  padding: var(--gc-space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gc-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(47, 50, 53, 0.06);
}

.gc-event-date {
  font-size: var(--gc-tiny-size);
  font-weight: 600;
  color: var(--gc-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--gc-space-xs);
}

.gc-event-card h3 {
  font-size: var(--gc-h4-size);
  margin-bottom: var(--gc-space-xs);
}

.gc-event-card p {
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
}


/* ------------------------------------------------------------
   11. ABOUT SECTION (two-column)
   ------------------------------------------------------------ */

.gc-about-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gc-space-lg);
  align-items: center;
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0 var(--gc-space-sm);
}

.gc-about-image {
  border-radius: var(--gc-radius-lg);
  overflow: hidden;
}

.gc-about-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* ------------------------------------------------------------
   12. FEATURED MEMBER SPOTLIGHT
   ------------------------------------------------------------ */

.gc-featured-member {
  display: flex;
  align-items: center;
  gap: var(--gc-space-md);
  max-width: 700px;
  margin: 0 auto;
  padding: var(--gc-space-md);
  background: var(--gc-white);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
}

.gc-featured-member-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--gc-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gc-fieldstone);
}

.gc-featured-member-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gc-featured-member-label {
  font-size: var(--gc-tiny-size);
  font-weight: 600;
  color: var(--gc-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.gc-featured-member h3 {
  font-size: var(--gc-h3-size);
  margin-bottom: 0.25rem;
}

.gc-featured-member p {
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
}


/* ------------------------------------------------------------
   13. COMMUNITY GUIDE CALLOUT
   ------------------------------------------------------------ */

.gc-guide-callout {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.gc-guide-callout h2 {
  color: var(--gc-white);
  margin-bottom: var(--gc-space-xs);
}

.gc-guide-callout p {
  color: rgba(232, 239, 237, 0.8);
  margin-bottom: var(--gc-space-md);
}

.gc-guide-btn {
  display: inline-block;
  padding: 0.7rem 2rem;
  background: transparent;
  color: var(--gc-white);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--gc-radius);
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  text-decoration: none;
  transition: all 0.2s ease;
}

.gc-guide-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--gc-white);
  text-decoration: none;
  color: var(--gc-white);
}


/* ------------------------------------------------------------
   14. TABLES (directory, member lists, interior page tables)
   .WaGadgetContent table = native WA rendered-content tables
   .gc-table = explicit class for Custom HTML tables
   Both share identical styling so tables look consistent
   regardless of which gadget renders them.
   ------------------------------------------------------------ */

.WaGadgetContent table,
.gc-table {
  font-family: var(--gc-font-body);
  font-size: 0.96rem;
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}

.WaGadgetContent table th,
.gc-table th {
  font-family: var(--gc-font-body);
  font-weight: 600;
  text-align: left;
  background: var(--gc-fieldstone);
  color: var(--gc-dark);
  border-bottom: 2px solid var(--gc-ledge);
  padding: 12px 14px;
}

.WaGadgetContent table td,
.gc-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gc-ledge);
  vertical-align: top;
}

.WaGadgetContent table tr:hover td,
.gc-table tr:hover td {
  background: var(--gc-fieldstone);
}

/* Inverted treatment when table sits on a fieldstone band */
.gc-band-fieldstone .WaGadgetContent table th,
.gc-band-fieldstone .gc-table th {
  background: var(--gc-white);
}

.gc-band-fieldstone .WaGadgetContent table tr:hover td,
.gc-band-fieldstone .gc-table tr:hover td {
  background: var(--gc-white);
}


/* ------------------------------------------------------------
   15. FORMS
   ------------------------------------------------------------ */

.WaGadgetContent input[type="text"],
.WaGadgetContent input[type="email"],
.WaGadgetContent input[type="tel"],
.WaGadgetContent textarea,
.WaGadgetContent select {
  font-family: var(--gc-font-body);
  font-size: var(--gc-body-size);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  padding: 0.6rem 0.8rem;
  transition: border-color 0.2s ease;
}

.WaGadgetContent input[type="text"]:focus,
.WaGadgetContent input[type="email"]:focus,
.WaGadgetContent input[type="tel"]:focus,
.WaGadgetContent textarea:focus,
.WaGadgetContent select:focus {
  outline: none;
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(62, 110, 98, 0.12);
}


/* ------------------------------------------------------------
   16. BREADCRUMBS
   ------------------------------------------------------------ */

.WaGadgetBreadcrumbs {
  font-family: var(--gc-font-body);
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
  padding: var(--gc-space-xs) 0;
}


/* ------------------------------------------------------------
   17. UTILITY CLASSES
   Apply via gadget Advanced → CSS class
   ------------------------------------------------------------ */

/* Text alignment */
.gc-text-center { text-align: center; }
.gc-text-left { text-align: left; }
.gc-text-right { text-align: right; }

/* Spacing helpers */
.gc-mt-0 { margin-top: 0; }
.gc-mb-0 { margin-bottom: 0; }
.gc-mt-sm { margin-top: var(--gc-space-sm); }
.gc-mb-sm { margin-bottom: var(--gc-space-sm); }
.gc-mt-md { margin-top: var(--gc-space-md); }
.gc-mb-md { margin-bottom: var(--gc-space-md); }
.gc-mt-lg { margin-top: var(--gc-space-lg); }
.gc-mb-lg { margin-bottom: var(--gc-space-lg); }
.gc-pt-section { padding-top: var(--gc-space-section); }
.gc-pb-section { padding-bottom: var(--gc-space-section); }

/* Content width constraint */
.gc-content-narrow {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Subtle link arrow for CTAs */
.gc-link-arrow::after {
  content: ' →';
  transition: margin-left 0.2s ease;
}

.gc-link-arrow:hover::after {
  margin-left: 4px;
}

/* Visually hidden (accessible) */
.gc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   18. GADGET SPACING OVERRIDES
   Wild Apricot adds default margins to gadget wrappers —
   tighten them so our band padding controls the rhythm.
   ------------------------------------------------------------ */

.WaGadgetContainer {
  margin-bottom: 0;
}

.WaGadgetCustomMenu,
.WaGadgetCustomHTML,
.WaGadgetContent,
.WaGadgetUpcomingEvents,
.WaGadgetFeaturedMember {
  margin-bottom: 0;
}

/* Reduce gap between section heading and its content */
.gc-section-heading {
  margin-bottom: var(--gc-space-md);
}

/* v1.3: removed duplicate .gc-intent-card padding rule (already set at section 8) */

/* ------------------------------------------------------------
   19. SLATE TEXTURE BANDS & ZONE TEXTURES
   ------------------------------------------------------------ */

/* Dark slate — events section */
.gc-band-slate {
  background: 
    linear-gradient(rgba(47, 50, 53, 0.78), rgba(47, 50, 53, 0.72)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/slate_texture_1.jpeg') center / cover no-repeat;
  color: var(--gc-white);
  padding: var(--gc-space-section) 0;
}

.gc-band-slate h1,
.gc-band-slate h2,
.gc-band-slate h3,
.gc-band-slate h4 {
  color: #FFFFFF;
}

.gc-band-slate p,
.gc-band-slate .sub {
  color: rgba(249, 248, 245, 0.7);
}

.gc-band-slate a {
  color: rgba(249, 248, 245, 0.8);
}

.gc-band-slate a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/* Override native events gadget colors inside slate band */
.WaGadgetUpcomingEvents.gc-band-slate.gadgetStyle001,
.WaGadgetUpcomingEvents.gc-band-slate {
  background: 
    linear-gradient(rgba(47, 50, 53, 0.78), rgba(47, 50, 53, 0.72)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/slate_texture_1.jpeg') center / cover no-repeat;
  border: none;
}


.WaGadgetUpcomingEvents.gc-band-slate .gadgetTitleH4 {
  color: #FFFFFF;
}

.WaGadgetUpcomingEvents.gc-band-slate .title a {
  color: #FFFFFF;
}

.WaGadgetUpcomingEvents.gc-band-slate .title a:hover {
  color: rgba(249, 248, 245, 0.7);
}

.WaGadgetUpcomingEvents.gc-band-slate .date {
  color: rgba(249, 248, 245, 0.6);
}

.WaGadgetUpcomingEvents.gc-band-slate .date .dateonly {
  color: var(--gc-green-tint);
}

.WaGadgetUpcomingEvents.gc-band-slate li {
  border-bottom-color: rgba(249, 248, 245, 0.12);
}

.WaGadgetUpcomingEvents.gc-band-slate .gadgetStyleTitle,
.WaGadgetUpcomingEvents.gc-band-slate .gadgetStyleBody {
  max-width: var(--gc-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gc-space-sm);
  padding-right: var(--gc-space-sm);
}

/* Green slate texture — community guide */
.gc-band-green-texture {
  background: 
    linear-gradient(rgba(62, 110, 98, 0.88), rgba(62, 110, 98, 0.85)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/Green-Slate.png') center / cover no-repeat;
  padding: var(--gc-space-section) 0;
  color: var(--gc-green-tint);
}

/* Dark slate footer texture */
.zoneFooter1 {
  background: 
    linear-gradient(rgba(47, 50, 53, 0.82), rgba(47, 50, 53, 0.78)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/slate_texture_1.jpeg') center / cover no-repeat;
}

.gc-band-green-texture h1,
.gc-band-green-texture h2,
.gc-band-green-texture h3,
.gc-band-green-texture h4 {
  color: #FFFFFF;
}

.gc-band-green-texture p {
  color: rgba(232, 239, 237, 0.8);
}

.gc-band-green-texture a {
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.gc-band-green-texture a:hover {
  border-bottom-color: #FFFFFF;
  text-decoration: none;
}

/* UpcomingEvents gadget on a green-texture band. Mirrors the gc-band-slate
   variant up the file, but tuned for green: same white headlines and event
   titles, but the date emphasis uses the warm fieldstone cream (the slate
   variant used green-tint, which would disappear against the green band). */
.WaGadgetUpcomingEvents.gc-band-green-texture .gadgetTitleH4 {
  color: #FFFFFF;
}

.WaGadgetUpcomingEvents.gc-band-green-texture .title a {
  color: #FFFFFF;
}

.WaGadgetUpcomingEvents.gc-band-green-texture .title a:hover {
  color: rgba(249, 248, 245, 0.7);
}

.WaGadgetUpcomingEvents.gc-band-green-texture .date {
  color: rgba(249, 248, 245, 0.65);
}

.WaGadgetUpcomingEvents.gc-band-green-texture .date .dateonly {
  color: var(--gc-fieldstone);
}

.WaGadgetUpcomingEvents.gc-band-green-texture li {
  border-bottom-color: rgba(249, 248, 245, 0.12);
}

.WaGadgetUpcomingEvents.gc-band-green-texture .gadgetStyleTitle,
.WaGadgetUpcomingEvents.gc-band-green-texture .gadgetStyleBody {
  max-width: var(--gc-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gc-space-sm);
  padding-right: var(--gc-space-sm);
}

/* UpcomingEvents gadget on a white band — homepage "What's happening"
   events list variant (v1.8). Dark body text, slate-green underlined
   event titles, slate-green dateonly stamp. Pairs with .gc-events-cta
   below for the "See full calendar →" link. */
.WaGadgetUpcomingEvents.gc-band-white {
  background: var(--gc-white);
  border: none;
  padding: var(--gc-space-section) 0;
}

.WaGadgetUpcomingEvents.gc-band-white .gadgetTitleH4 {
  color: var(--gc-dark);
}

.WaGadgetUpcomingEvents.gc-band-white .title a {
  color: var(--gc-green);
  text-decoration: underline;
}

.WaGadgetUpcomingEvents.gc-band-white .title a:hover {
  color: var(--gc-green-pressed);
}

.WaGadgetUpcomingEvents.gc-band-white .date {
  color: var(--gc-lichen);
}

.WaGadgetUpcomingEvents.gc-band-white .date .dateonly {
  color: var(--gc-green);
}

.WaGadgetUpcomingEvents.gc-band-white li {
  border-bottom-color: var(--gc-ledge);
}

.WaGadgetUpcomingEvents.gc-band-white .gadgetStyleTitle,
.WaGadgetUpcomingEvents.gc-band-white .gadgetStyleBody {
  max-width: var(--gc-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gc-space-sm);
  padding-right: var(--gc-space-sm);
}

/* "See full calendar →" CTA on a white band (v1.8).
   Wrap the link in <div class="gc-events-cta"> inside a Custom HTML gadget
   that has the .gc-band-white class applied. Slate-green, underlined,
   slightly enlarged for visual weight as the bottom-of-section CTA. */
.gc-band-white .gc-events-cta {
  text-align: center;
  margin-top: var(--gc-space-md);
}

.gc-band-white .gc-events-cta a {
  font-size: 1.25rem;
  color: var(--gc-green);
  letter-spacing: 0.01em;
  font-weight: 600;
  text-decoration: underline;
}

.gc-band-white .gc-events-cta a:hover {
  color: var(--gc-green-pressed);
}

/* About section slideshow */
.gc-band-fieldstone .WaGadgetSlideshow,
.gc-band-fieldstone .slideshowWidget {
  border-radius: var(--gc-radius-lg);
  overflow: hidden;
  border: 3px solid var(--gc-white);
  box-shadow: 0 2px 12px rgba(47, 50, 53, 0.08);
}


/* ------------------------------------------------------------
   20. NATIVE GADGET OVERRIDES
   Restyle WA's default Upcoming Events and Featured Member
   gadgets to match the Granville design system
   ------------------------------------------------------------ */

/* --- Shared: kill the gray header bar and outer border --- */
.WaGadgetUpcomingEvents.gadgetStyle001,
.WaGadgetFeaturedMember.gadgetStyle001 {
  background: transparent;
  border: none;
}

.WaGadgetUpcomingEvents .gadgetStyleTitle,
.WaGadgetFeaturedMember .gadgetStyleTitle {
  background: transparent;
  padding: 0 0 var(--gc-space-sm) 0;
}

.WaGadgetUpcomingEvents .gadgetTitleH4,
.WaGadgetFeaturedMember .gadgetTitleH4 {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h3-size);
  font-weight: 600;
  color: var(--gc-dark);
  margin: 0;
}

.WaGadgetUpcomingEvents .gadgetStyleBody,
.WaGadgetFeaturedMember .gadgetStyleBody {
  padding: 0;
}

/* --- Upcoming Events --- */
.WaGadgetUpcomingEvents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.WaGadgetUpcomingEvents li {
  padding: var(--gc-space-sm) 0;
  border-bottom: 1px solid var(--gc-ledge);
}

.WaGadgetUpcomingEvents li:last-child,
.WaGadgetUpcomingEvents li.last {
  border-bottom: none;
}

.WaGadgetUpcomingEvents .title a {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h4-size);
  font-weight: 600;
  color: var(--gc-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.WaGadgetUpcomingEvents .title a:hover {
  color: var(--gc-green);
}

.WaGadgetUpcomingEvents .date {
  font-family: var(--gc-font-body);
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
  margin-top: 0.25rem;
}

.WaGadgetUpcomingEvents .date .dateonly {
  font-weight: 600;
  color: var(--gc-green);
  text-transform: uppercase;
  font-size: var(--gc-tiny-size);
  letter-spacing: 0.03em;
}

.WaGadgetUpcomingEvents .date .location {
  color: var(--gc-gravel);
}

/* --- Featured Member --- */
.WaGadgetFeaturedMember ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.WaGadgetFeaturedMember li {
  display: flex;
  align-items: center;
  gap: var(--gc-space-md);
  padding: var(--gc-space-sm) 0;
}

.WaGadgetFeaturedMember .img {
  width: 80px;
  height: 80px;
  border-radius: var(--gc-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gc-fieldstone);
}

.WaGadgetFeaturedMember .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.WaGadgetFeaturedMember .rightPart {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h4-size);
  font-weight: 600;
  color: var(--gc-dark);
}

.WaGadgetFeaturedMember .rightPart a {
  color: var(--gc-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.WaGadgetFeaturedMember .rightPart a:hover {
  color: var(--gc-green);
}

.WaGadgetFeaturedMember .action {
  margin-top: var(--gc-space-xs);
}

.WaGadgetFeaturedMember .action a {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
}

.WaGadgetFeaturedMember .action a:hover {
  color: var(--gc-green-pressed);
}

/* Hide loading error message */
.WaGadgetFeaturedMember .loadingError {
  display: none;
}

/* ------------------------------------------------------------
   21. HERO BANNER
   Used on Visit Granville, Living Here, and future intent pages.
   ------------------------------------------------------------ */

/* Eliminate the cream strip above hero photos. WA wraps Custom HTML
   gadgets in an outer div with 20px top padding inherited from the
   placeholder zone — that padding shows as a fieldstone-colored strip
   between the nav band and the hero photo. Scoped with :has() so only
   the wrappers around heroes lose the padding; other gadgets keep theirs. */
div:has(> .WaGadgetCustomHTML > .gadgetStyleBody > .gc-hero) {
  padding-top: 0;
}

.gc-hero {
  position: relative;
  min-height: 576px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--gc-space-xl) var(--gc-space-sm);

  /* Break out of content container to full viewport width */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

.gc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.38) 55%,
    rgba(0, 0, 0, 0.50) 100%
  );
  z-index: 1;
}

/* Rotating background slides (v1.8 — May 18).
   Layered behind the radial scrim. Each slide is positioned absolutely
   over .gc-hero with its own background-image; only the .is-active slide
   is at opacity 1, the others fade in/out via the rotation script in the
   per-page hero gadget. Slide 0 carries .is-active in markup so heros
   paint immediately on first frame. */
.gc-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.gc-hero-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gc-hero-slide {
    transition: none;
  }
}

.gc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.gc-hero h1 {
  font-family: var(--gc-font-heading);
  font-size: 3.25rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Home hero modifier — bumped headline so home sits above interior pages */
.gc-hero--home h1 {
  font-size: 3.5rem;
}

/* Space below h1 when followed directly by body or pull quote
   (interior page patterns) */
.gc-hero h1 + p,
.gc-hero h1 + .gc-hero-quote {
  margin-top: 1.25rem;
}

.gc-hero p {
  font-family: var(--gc-font-body);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--gc-space-md);
}

.gc-hero-btn,
.gc-hero-btn:link,
.gc-hero-btn:visited {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--gc-green);
  color: #FFFFFF;
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  border-radius: var(--gc-radius);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.gc-hero-btn:hover {
  background: var(--gc-green-pressed);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--gc-white);
}

/* Home hero subtitle — Lora mixed-case qualifier above h1
   ("Granville, New York" sits above "Chamber of Commerce") */
.gc-hero-subtitle {
  font-family: var(--gc-font-heading);
  font-size: 1.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 0.4rem;
}

/* Home hero italic tagline — Lora italic, sits below the rule
   ("In the heart of the slate valley") */
.gc-hero-tagline {
  font-family: var(--gc-font-heading);
  font-style: italic;
  font-size: 1.375rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0 0 1.75rem;
}

/* Hairline rule — editorial divider.
   Default: between h1 and tagline on home hero (64px wide).
   Variant --sm: between eyebrow and h1 on interior locale heros (48px). */
.gc-hero-rule {
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  margin: 1.25rem auto;
}

.gc-hero-rule.gc-hero-rule--sm {
  width: 48px;
  margin: 0.75rem auto 1.25rem;
}


/* ------------------------------------------------------------
   21b. JOIN US MIXER CARD (v1.8 — May 18)
   Right-rail sticky card that rotates through curated mixer photos.
   Shares the rotation mechanism with .gc-hero (crossfade + reduced-motion
   respect + tab-hidden pause) but with portrait framing and a caption.
   Lives in the right column of the Join Us 2-column WA layout.
   ------------------------------------------------------------ */

.gc-mixer-card {
  position: sticky;
  top: 80px;
  max-width: 360px;
  margin: 1.25rem auto 0;
}

.gc-mixer-card-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--gc-radius-lg);
  background: var(--gc-slate-dark);
}

.gc-mixer-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.gc-mixer-slide.is-active {
  opacity: 1;
}

.gc-mixer-caption {
  margin: var(--gc-space-xs) 0 0;
  font-family: var(--gc-font-heading);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gc-lichen);
  text-align: center;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .gc-mixer-slide {
    transition: none;
  }
}


/* ------------------------------------------------------------
   22. RESPONSIVE
   All breakpoint adjustments consolidated here.
   v1.4: previously split across three @media (max-width: 768px)
   blocks scattered through the file; merged into one for clarity.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  :root {
    --gc-h1-size: 1.65rem;
    --gc-h2-size: 1.3rem;
    --gc-h3-size: 1.1rem;
    --gc-space-section: 1.75rem;
  }

  /* Layout grids collapse to single column */
  .gc-intent-cards,
  .gc-event-cards {
    grid-template-columns: 1fr;
    gap: var(--gc-space-sm);
  }

  .gc-about-row {
    grid-template-columns: 1fr;
    gap: var(--gc-space-md);
  }

  .gc-about-row > :last-child {
    order: -1;
  }

  .gc-featured-member {
    flex-direction: column;
    text-align: center;
  }

  .gc-directory-search {
    flex-direction: column;
  }

  .gc-directory-search button {
    width: 100%;
  }

  /* Footer columns stack */
  .zoneFooter1 [style*="grid-template-columns"] {
    display: block !important;
  }

  .zoneFooter1 [style*="grid-template-columns"] > div {
    margin-bottom: 1.5rem;
  }

  /* Mixer card stops being sticky when the 2-column layout collapses */
  .gc-mixer-card {
    position: static;
    margin: var(--gc-space-md) auto;
  }

  /* Hero cancels its full-bleed breakout on mobile */
  .gc-hero {
    width: auto;
    left: auto;
    margin-left: 0;
    min-height: 360px;
    border-radius: var(--gc-radius-lg);
  }

  .gc-hero h1 {
    font-size: 2rem;
  }

  .gc-hero--home h1 {
    font-size: 2.25rem;
  }

  .gc-hero-subtitle {
    font-size: 1.25rem;
  }

  .gc-hero-tagline {
    font-size: 1rem;
  }

  .gc-hero-rule {
    width: 48px;
    margin: 1rem auto;
  }

  .gc-hero-rule.gc-hero-rule--sm {
    width: 36px;
    margin: 0.5rem auto 0.85rem;
  }
}

@media (max-width: 480px) {
  :root {
    --gc-h1-size: 1.5rem;
    --gc-h2-size: 1.2rem;
    --gc-space-section: 1.25rem;
  }
}
/* ============================================================
   23. INTERIOR PAGES SUPPLEMENT (Block D)
   Added 2026-05-15 for Visit Granville + Living Here
   ============================================================ */

/* Detail card grid — used in Things to See, Church list */
.gc-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gc-space-md);
  margin-top: var(--gc-space-md);
}

.gc-detail-card {
  background: var(--gc-white);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gc-detail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47, 50, 53, 0.06);
}

.gc-detail-card h3,
.gc-detail-card h4 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.gc-detail-card-meta {
  font-size: 0.82rem;
  color: var(--gc-lichen);
  margin-top: 0.8rem;
  word-break: break-word;
}

.gc-band-fieldstone .gc-detail-card { background: var(--gc-white); }

/* Two-column responsive row */
.gc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: var(--gc-space-md);
}

@media (max-width: 720px) {
  .gc-two-col { grid-template-columns: 1fr; }
}

/* Fact list — Did You Know section */
.gc-fact-list {
  list-style: none;
  padding: 0;
  margin: var(--gc-space-md) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}

@media (max-width: 720px) {
  .gc-fact-list { grid-template-columns: 1fr; }
}

.gc-fact-list li {
  padding-left: 28px;
  position: relative;
  font-size: 0.97rem;
  line-height: 1.5;
}

.gc-fact-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gc-red-tint);
  font-size: 0.85rem;
}

.gc-band-green .gc-fact-list li,
.gc-band-green-texture .gc-fact-list li { color: rgba(255, 255, 255, 0.95); }
.gc-band-green .gc-fact-list strong,
.gc-band-green-texture .gc-fact-list strong { color: var(--gc-white); }

/* Anchor event list — When to Come section */
.gc-anchor-list {
  margin-top: var(--gc-space-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.gc-anchor-item {
  padding: 14px 18px;
  background: var(--gc-white);
  border-left: 3px solid var(--gc-red);
  border-radius: 0 var(--gc-radius) var(--gc-radius) 0;
}

.gc-anchor-item strong {
  display: block;
  font-family: var(--gc-font-heading);
  color: var(--gc-dark);
  margin-bottom: 2px;
}

.gc-anchor-item span {
  font-size: 0.86rem;
  color: var(--gc-lichen);
}

/* CTA cards — Lodging + Restaurants callout */
.gc-cta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: var(--gc-space-md);
}

@media (max-width: 720px) {
  .gc-cta-cards { grid-template-columns: 1fr; }
}

.gc-cta-card {
  padding: 28px 26px;
  border-radius: var(--gc-radius-lg);
  color: var(--gc-white);
  text-decoration: none;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gc-cta-card:hover,
.gc-cta-card:link,
.gc-cta-card:visited {
  text-decoration: none;
  color: var(--gc-white);
}

.gc-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(47, 50, 53, 0.12);
}

/* CTA card color variants — same textured treatment as the intent cards,
   so Lodging / Restaurants / Living Here on Visit Granville and similar
   pages match the homepage's visual language. */
.gc-cta-card-green {
  background:
    linear-gradient(rgba(62, 110, 98, 0.82), rgba(62, 110, 98, 0.78)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/Green-Slate.png') center / cover no-repeat;
}

.gc-cta-card-red {
  background:
    linear-gradient(rgba(168, 107, 88, 0.72), rgba(168, 107, 88, 0.68)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/terra-red-slate-natur-b-1.jpg') center / cover no-repeat;
}

.gc-cta-card-purple {
  background:
    linear-gradient(rgba(142, 125, 134, 0.78), rgba(142, 125, 134, 0.74)),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/slate_texture_1.jpeg') center / cover no-repeat;
}

.gc-cta-card-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}

.gc-cta-card h3 {
  color: var(--gc-white);
  margin: 0 0 6px;
}

.gc-cta-card p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  margin: 0;
}

.gc-cta-card-cta {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 1px;
}

/* Cross-link footer card — bridges between intent pages
   v1.1: uses slate texture backgrounds (overrides original plain gradient) */
.gc-crosslink {
  display: block;
  background: 
    linear-gradient(135deg, rgba(168, 107, 88, 0.92) 0%, rgba(142, 88, 72, 0.90) 100%),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/terra-red-slate-natur-b-1.jpg') center / cover no-repeat;
  color: var(--gc-white);
  padding: 36px 32px;
  border-radius: var(--gc-radius-lg);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: var(--gc-space-md);
}

.gc-crosslink-to-visit {
  background: 
    linear-gradient(135deg, rgba(62, 110, 98, 0.92) 0%, rgba(48, 90, 80, 0.90) 100%),
    url('https://granvillenychamber.wildapricot.org/resources/Pictures/textures/Green-Slate.png') center / cover no-repeat;
}

.gc-crosslink:hover,
.gc-crosslink:link,
.gc-crosslink:visited {
  text-decoration: none;
  color: var(--gc-white);
}

.gc-crosslink:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(47, 50, 53, 0.15);
}

.gc-crosslink h3 {
  color: var(--gc-white);
  font-size: 1.5rem;
  margin: 0 0 6px;
}

.gc-crosslink p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.gc-crosslink-arrow {
  font-size: 1.4rem;
  margin-left: 8px;
}

/* General button utility (non-hero contexts) */
.gc-btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--gc-green);
  color: var(--gc-white);
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--gc-radius);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.12s ease;
  margin-top: 8px;
}

.gc-btn:link,
.gc-btn:visited,
.gc-btn:hover {
  text-decoration: none;
  color: var(--gc-white);
}

.gc-btn:hover {
  background: var(--gc-green-pressed);
  transform: translateY(-1px);
}

.gc-btn-red { background: var(--gc-red); }
.gc-btn-red:hover { background: var(--gc-red-pressed); }

.gc-btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.gc-btn-ghost:hover { background: rgba(255, 255, 255, 0.25); }

.gc-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Pull-quote hero treatment — Living Here hero */
.gc-hero-quote {
  border-left: 3px solid var(--gc-red);
  padding-left: 1.2rem;
  margin: 0 0 1rem;
  font-style: italic;
  font-family: var(--gc-font-heading);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--gc-white);
  max-width: 680px;
}

.gc-hero-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--gc-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}

/* Interior page table — see section 14 for .gc-table definition
   (harmonized with .WaGadgetContent table) */

/* Eyebrow label — small all-caps above H1 in hero (interior locale pages) */
.gc-eyebrow {
  font-family: var(--gc-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* When eyebrow goes directly to h1 (no rule between), restore a gap */
.gc-eyebrow + h1 {
  margin-top: 0.85rem;
}

/* ============================================================
   24. SECTION INNER WRAPPER
   Constrains interior page section content to content-max width
   + adds horizontal gutters inside bands.
   Apply by wrapping each section gadget's content in:
     <div class="gc-section-inner">…</div>
   Heroes are exempt (they use .gc-hero-content).
   ============================================================ */

.gc-section-inner {
  max-width: var(--gc-content-max);
  margin: 0 auto;
  padding: 0 var(--gc-space-sm);
}


/* ============================================================
   25. WA NATIVE GADGET ALIGNMENT — SHARED UTILITIES
   Cruft neutralization, modal dialogs, button widgets,
   and form-field base styles. Applies across multiple gadgets.
   Added 2026-05-15 for Events / Directory / Join Us alignment.
   ============================================================ */

/* --- Cruft: vestigial 9-slice corner imagery from older WA themes.
   These wrappers contain only decorative cells (c1-c5, r1-r4).
   Modern border-radius makes them obsolete. Hide entirely. */
.WaGadgetEvents .cornersContainer,
.WaGadgetMemberDirectory .cornersContainer,
.WaGadgetMembershipApplication .cornersContainer,
.WaGadgetMemberPublicProfile .cornersContainer,
.cww1, .cww2, .cww3, .cww4 {
  display: none;
}

/* --- WA button widget pattern (used in modals, dialogs)
   Buttons are styled <div>s with nested wrappers:
   .waButtonContainer > .buttonComponent.buttonColorX > .waBarButtonText */
.waButtonContainer .buttonComponent {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  padding: 0.55rem 1.3rem;
  border-radius: var(--gc-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.waButtonContainer .buttonComponent.buttonColorGreen {
  background: var(--gc-green);
  color: var(--gc-white);
}

.waButtonContainer .buttonComponent.buttonColorGreen:hover {
  background: var(--gc-green-pressed);
}

.waButtonContainer .buttonComponent.buttonColorOrange {
  background: var(--gc-red);
  color: var(--gc-white);
}

.waButtonContainer .buttonComponent.buttonColorOrange:hover {
  background: var(--gc-red-pressed);
}

.waBarButtonText {
  font-family: var(--gc-font-body);
  font-weight: 600;
  color: inherit;
}

/* --- Registration confirmation modal */
.dialogMainContainer.oneClickRegistrationDialog {
  font-family: var(--gc-font-body);
}

.dialogRoundedBox {
  border-radius: var(--gc-radius-lg);
  background: var(--gc-white);
  box-shadow: 0 8px 24px rgba(47, 50, 53, 0.18);
}

.dialogInnerContainer {
  padding: var(--gc-space-md);
}

.dialogContainer .actionButtons {
  margin-top: var(--gc-space-md);
  padding-top: var(--gc-space-sm);
  display: flex;
  gap: var(--gc-space-xs);
  justify-content: flex-end;
}

/* --- Form field base styles (membership app + event registration)
   WA's form field pattern:
   .fieldSubContainer.{type}GroupContainer
     > .fieldLabel (with .mandatorySymbol + .mandatoryLabel)
     > .fieldBody (inputs / radio items / etc.) */

.fieldSubContainer {
  margin-bottom: var(--gc-space-md);
}

.fieldLabel {
  font-family: var(--gc-font-body);
  font-weight: 600;
  color: var(--gc-pencil);
  font-size: var(--gc-small-size);
  margin-bottom: 0.5rem;
  display: block;
}

.mandatorySymbol {
  color: var(--gc-red);
  font-weight: 700;
  margin-right: 0.15rem;
}

.mandatoryLabel {
  font-family: var(--gc-font-body);
  font-weight: 600;
}

.fieldBody input[type="text"],
.fieldBody input[type="email"],
.fieldBody input[type="tel"],
.fieldBody input.typeText,
.fieldBody input.typeEmail,
.fieldBody select,
.fieldBody textarea {
  font-family: var(--gc-font-body);
  font-size: var(--gc-body-size);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  padding: 0.55rem 0.75rem;
  background: var(--gc-white);
  color: var(--gc-pencil);
  width: 100%;
  max-width: 480px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fieldBody input:focus,
.fieldBody select:focus,
.fieldBody textarea:focus {
  outline: none;
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(62, 110, 98, 0.12);
}

/* Radio + checkbox layout */
.groupBodyVertical .fieldItem {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0;
}

.fieldItem .typeRadioContainer,
.fieldItem .typeCheckboxContainer {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.fieldItem .label {
  flex: 1;
  font-family: var(--gc-font-body);
  font-size: var(--gc-body-size);
  color: var(--gc-pencil);
  line-height: 1.4;
}


/* ============================================================
   26. EVENTS PAGE — WaGadgetEvents
   States: List, Calendar, Details, RegistrationModal
   Added 2026-05-15
   ============================================================ */

/* --- Page header (shared across list + calendar states) */
.WaGadgetEvents h3.sectionTitle {
  font-family: var(--gc-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-md);
}

/* Hide RSS feed icon — WA paints <a.rssFeedLabel> inside h1.pageTitle
   across both list and calendar states. Needs !important to beat the
   default theme's display:inline-block on the anchor. */
.WaGadgetEvents .rssFeedLabel,
.WaGadgetEvents h1.pageTitle .rssFeedLabel,
.WaGadgetEvents h3.sectionTitle + a[href*="rss"],
.WaGadgetEvents h3.sectionTitle img[src*="rss"],
.rssFeedLabel {
  display: none !important;
}

/* List / Calendar view toggle */
.WaGadgetEvents a.calendarModeLink {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
}

.WaGadgetEvents a.calendarModeLink:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

/* --- LIST STATE: event cards (li.boxesListItem) */
.WaGadgetEvents ul.boxesList {
  list-style: none;
  padding: 0;
  margin: var(--gc-space-md) 0 0;
}

.WaGadgetEvents li.boxesListItem {
  margin-bottom: var(--gc-space-md);
}

.WaGadgetEvents .boxesListItem .boxOuterContainer {
  background: var(--gc-white);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
  padding: var(--gc-space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.WaGadgetEvents .boxesListItem .boxOuterContainer:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47, 50, 53, 0.08);
}

/* Event title in card header */
.WaGadgetEvents h4.boxHeaderTitle {
  font-family: var(--gc-font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 var(--gc-space-sm);
  line-height: 1.3;
}

.WaGadgetEvents h4.boxHeaderTitle .hiddenEventIcon {
  margin-right: 0.4rem;
  opacity: 0.5;
}

.WaGadgetEvents a.eventDetailsLink {
  color: var(--gc-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.WaGadgetEvents a.eventDetailsLink:hover {
  color: var(--gc-green);
}

/* Kill the cyan arrow ::after pseudo-element WA injects via icon_set.png
   sprite on event-title links. Needs !important to override the sprite
   background and the content declaration. */
.WaGadgetEvents a.eventDetailsLink::after,
.WaGadgetEvents .boxHeaderTitle a::after,
.WaGadgetEvents a.eventDetailsLink::before {
  display: none !important;
  background-image: none !important;
  content: none !important;
}

/* Info block (When / Location / Time) — shared with detail state */
.WaGadgetEvents .boxBodyInfoContainer ul.boxInfo {
  list-style: none;
  padding: 0;
  margin: 0;
}

.WaGadgetEvents .boxBodyInfoContainer ul.boxInfo li {
  padding: 0.3rem 0;
  font-size: var(--gc-small-size);
}

.WaGadgetEvents label.eventInfoBoxLabel {
  font-family: var(--gc-font-body);
  font-weight: 600;
  color: var(--gc-lichen);
  text-transform: uppercase;
  font-size: var(--gc-tiny-size);
  letter-spacing: 0.05em;
  margin-right: 0.8rem;
  display: inline-block;
  min-width: 72px;
}

.WaGadgetEvents div.eventInfoBoxValue {
  display: inline-block;
  color: var(--gc-pencil);
  font-size: var(--gc-small-size);
}

.WaGadgetEvents .eventInfoBoxValue strong {
  font-weight: 600;
  color: var(--gc-dark);
}

/* Description container */
.WaGadgetEvents .boxBodyContentContainer.fixedHeight {
  font-size: var(--gc-small-size);
  color: var(--gc-pencil);
  margin-top: var(--gc-space-sm);
  line-height: 1.5;
}

.WaGadgetEvents .gadgetEventEditableArea p {
  margin-bottom: 0.5rem;
}

.WaGadgetEvents .gadgetEventEditableArea p:last-child {
  margin-bottom: 0;
}

/* "Show details" footer link */
.WaGadgetEvents a.footerEventDetailsLink {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--gc-space-sm);
  transition: color 0.2s ease;
}

.WaGadgetEvents a.footerEventDetailsLink::after {
  content: ' →';
  transition: margin-left 0.2s ease;
}

.WaGadgetEvents a.footerEventDetailsLink:hover {
  color: var(--gc-green-pressed);
}

.WaGadgetEvents a.footerEventDetailsLink:hover::after {
  margin-left: 4px;
}

/* --- CALENDAR STATE */

/* View tabs (Week / Month / Year) — active uses Label, inactive uses Link */
.WaGadgetEvents .viewSwitchersTable {
  margin-bottom: var(--gc-space-sm);
}

.WaGadgetEvents .weekButtonLink,
.WaGadgetEvents .monthButtonLink,
.WaGadgetEvents .yearButtonLink {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
}

.WaGadgetEvents .weekButtonLink:hover,
.WaGadgetEvents .monthButtonLink:hover,
.WaGadgetEvents .yearButtonLink:hover {
  color: var(--gc-green);
}

.WaGadgetEvents .weekButtonLabel,
.WaGadgetEvents .monthButtonLabel,
.WaGadgetEvents .yearButtonLabel {
  font-family: var(--gc-font-body);
  font-weight: 700;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  padding: 0.4rem 0.8rem;
}

/* Prev / Today / Next navigation */
.WaGadgetEvents .decDateButton,
.WaGadgetEvents .todayButton,
.WaGadgetEvents .incDateButton {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
}

.WaGadgetEvents .decDateButton:hover,
.WaGadgetEvents .todayButton:hover,
.WaGadgetEvents .incDateButton:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

/* Calendar grid table */
.WaGadgetEvents table.EventListCalendar {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--gc-space-md);
  font-family: var(--gc-font-body);
}

.WaGadgetEvents table.EventListCalendar th {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-tiny-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gc-lichen);
  background: var(--gc-fieldstone);
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--gc-ledge);
  text-align: center;
}

.WaGadgetEvents td.EventListCalendarItemDefault,
.WaGadgetEvents td.EventListCalendarItemInactive,
.WaGadgetEvents td.EventListCalendarItemSelected {
  border: 1px solid var(--gc-ledge);
  vertical-align: top;
  height: 90px;
  padding: 0.4rem;
}

.WaGadgetEvents td.EventListCalendarItemDefault {
  background: var(--gc-white);
}

.WaGadgetEvents td.EventListCalendarItemInactive {
  background: var(--gc-fieldstone);
}

.WaGadgetEvents td.EventListCalendarItemSelected {
  background: var(--gc-green-tint);
}

.WaGadgetEvents .calendarDate {
  font-family: var(--gc-font-body);
  font-size: var(--gc-small-size);
  font-weight: 600;
  color: var(--gc-pencil);
}

.WaGadgetEvents td.EventListCalendarItemInactive .calendarDate {
  color: var(--gc-gravel);
  font-weight: 400;
}

.WaGadgetEvents td.EventListCalendarItemSelected .calendarDate {
  color: var(--gc-green);
  font-weight: 700;
}

/* Event pill on calendar — override WA's default cyan (rgb(64, 178, 207))
   The pill renders as an unclassed div inside the day cell, with inline
   "height:9;overflow:hidden;" — we override both. */
.WaGadgetEvents td.EventListCalendarItemDefault > div,
.WaGadgetEvents td.EventListCalendarItemSelected > div {
  background: var(--gc-green) !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: var(--gc-radius);
  margin-top: 0.4rem;
  padding: 2px 6px;
}

.WaGadgetEvents td.EventListCalendarItemDefault > div a,
.WaGadgetEvents td.EventListCalendarItemSelected > div a {
  color: var(--gc-white) !important;
  font-family: var(--gc-font-body);
  font-size: var(--gc-tiny-size);
  font-weight: 600;
  text-decoration: none;
  display: block;
}

/* --- DETAIL STATE (system page) */

.WaGadgetEvents .pageBackContainer {
  margin-bottom: var(--gc-space-sm);
}

.WaGadgetEvents a.eventBackLink {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.WaGadgetEvents a.eventBackLink:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

.WaGadgetEvents h1.pageTitle.SystemPageTitle {
  font-family: var(--gc-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-md);
  line-height: 1.2;
}

/* Admin-only warning banner (only visible to logged-in admins) */
.WaGadgetEvents .MessageBoxContainer.confirmWindowWarning {
  background: #FFF8E1;
  border-left: 3px solid #E0A800;
  border-radius: var(--gc-radius);
  padding: 0.8rem 1rem;
  font-size: var(--gc-small-size);
  margin: var(--gc-space-md) 0;
}

.WaGadgetEvents .MessageBoxContainer .text {
  color: var(--gc-pencil);
}

/* Registration section on detail page */
.WaGadgetEvents .registrationInfoContainer {
  margin-top: var(--gc-space-lg);
  padding-top: var(--gc-space-md);
  border-top: 1px solid var(--gc-ledge);
}

.WaGadgetEvents h4.infoTitle {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h4-size);
  font-weight: 600;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-sm);
}

.WaGadgetEvents ul.registrationInfo {
  list-style: none;
  padding: 0;
  margin: 0;
}

.WaGadgetEvents ul.registrationInfo li {
  padding: 0.4rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: var(--gc-small-size);
}

.WaGadgetEvents ul.registrationInfo li::before {
  content: '';
}

.WaGadgetEvents label.regTypeLiLabel {
  font-weight: 600;
  color: var(--gc-pencil);
  min-width: 100px;
}

.WaGadgetEvents div.regTypeLiValue {
  color: var(--gc-lichen);
}

/* Register button (vanilla <a> inside .boxActionContainer) */
.WaGadgetEvents .boxActionContainer {
  margin-top: var(--gc-space-md);
}

.WaGadgetEvents .boxActionContainer a {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--gc-green);
  color: var(--gc-white);
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  border-radius: var(--gc-radius);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.WaGadgetEvents .boxActionContainer a:hover {
  background: var(--gc-green-pressed);
  transform: translateY(-1px);
  color: var(--gc-white);
  text-decoration: none;
}

/* Register button (input variant on event detail page) — WA defaults to
   gray rgb(240,240,240). Needs !important because WA's default theme has
   higher specificity on input[type="button"]. */
.WaGadgetEvents input.typeButton.registerButton,
.WaGadgetEvents input.typeButton[value="Register"] {
  background: var(--gc-green) !important;
  color: var(--gc-white) !important;
  border: none !important;
  padding: 0.7rem 1.6rem !important;
  border-radius: var(--gc-radius) !important;
  font-family: var(--gc-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--gc-small-size) !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.WaGadgetEvents input.typeButton.registerButton:hover {
  background: var(--gc-green-pressed) !important;
  transform: translateY(-1px);
}


/* ============================================================
   27. DIRECTORY PAGE — WaGadgetMemberDirectory
   States: List, Member Public Profile
   Added 2026-05-15
   ============================================================ */

/* --- LIST STATE */

/* Search bar */
.WaGadgetMemberDirectory .memberDirectorySearchArea {
  background: var(--gc-fieldstone);
  border-radius: var(--gc-radius-lg);
  padding: var(--gc-space-sm) var(--gc-space-md);
  margin-bottom: var(--gc-space-md);
  display: flex;
  align-items: center;
  gap: var(--gc-space-sm);
  flex-wrap: wrap;
}

.WaGadgetMemberDirectory .memberDirectorySearchArea label {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-pencil);
}

.WaGadgetMemberDirectory .memberDirectorySearchArea input[type="text"] {
  flex: 1;
  max-width: 320px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  font-family: var(--gc-font-body);
  font-size: var(--gc-small-size);
  background: var(--gc-white);
  color: var(--gc-pencil);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.WaGadgetMemberDirectory .memberDirectorySearchArea input[type="text"]:focus {
  outline: none;
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgba(62, 110, 98, 0.12);
}

.WaGadgetMemberDirectory .searchResult {
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
  margin-left: auto;
}

.WaGadgetMemberDirectory .searchResult em {
  font-style: normal;
  font-weight: 700;
  color: var(--gc-dark);
}

/* --- Filter columns (Primary Category / Business State) */
.WaGadgetMemberDirectory table.browsingColumns {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gc-space-lg);
}

.WaGadgetMemberDirectory tr.filterHead th {
  font-family: var(--gc-font-body);
  font-weight: 600;
  text-align: left;
  color: var(--gc-dark);
  font-size: var(--gc-small-size);
  padding: 0.5rem 0.8rem;
  border-bottom: 2px solid var(--gc-ledge);
}

.WaGadgetMemberDirectory tr.filterRow td {
  padding: 0.6rem 0.8rem;
  vertical-align: top;
}

.WaGadgetMemberDirectory .filterOptions ul.filterList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.WaGadgetMemberDirectory .filterList li {
  margin-bottom: 0.25rem;
}

.WaGadgetMemberDirectory a.optionLink {
  font-family: var(--gc-font-body);
  color: var(--gc-green);
  text-decoration: none;
  font-size: var(--gc-small-size);
  font-weight: 500;
}

.WaGadgetMemberDirectory a.optionLink:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

.WaGadgetMemberDirectory a.optionLink.emptyName {
  color: var(--gc-gravel);
  pointer-events: none;
}

.WaGadgetMemberDirectory .selectedFilter {
  background: var(--gc-green-tint);
  color: var(--gc-green);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  display: inline-block;
  font-size: var(--gc-small-size);
  font-weight: 600;
}

/* --- Members table */
.WaGadgetMemberDirectory table.membersTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--gc-space-md);
  font-family: var(--gc-font-body);
}

.WaGadgetMemberDirectory table.membersTable thead th {
  font-family: var(--gc-font-body);
  font-weight: 600;
  text-align: left;
  background: var(--gc-fieldstone);
  color: var(--gc-dark);
  padding: 0.8rem;
  border-bottom: 2px solid var(--gc-ledge);
  font-size: var(--gc-small-size);
}

.WaGadgetMemberDirectory table.membersTable tbody tr.normal {
  border-bottom: 1px solid var(--gc-ledge);
  transition: background 0.2s ease;
}

.WaGadgetMemberDirectory table.membersTable tbody tr.normal:hover {
  background: var(--gc-fieldstone);
}

.WaGadgetMemberDirectory table.membersTable td {
  padding: 1rem 0.8rem;
  vertical-align: top;
  font-size: var(--gc-small-size);
  color: var(--gc-pencil);
}

.WaGadgetMemberDirectory .memberValue {
  margin-bottom: 0.2rem;
}

.WaGadgetMemberDirectory .memberValue:last-child {
  margin-bottom: 0;
}

/* Column 1: name + logo */
.WaGadgetMemberDirectory .memberDirectoryColumn1 h5 {
  margin: 0 0 0.5rem;
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h4-size);
  font-weight: 600;
}

.WaGadgetMemberDirectory .memberDirectoryColumn1 h5 a {
  color: var(--gc-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.WaGadgetMemberDirectory .memberDirectoryColumn1 h5 a:hover {
  color: var(--gc-green);
}

.WaGadgetMemberDirectory .memberDirectoryColumn1 img {
  max-width: 120px;
  height: auto;
  border-radius: var(--gc-radius);
  margin-top: 0.4rem;
  display: block;
}

/* Column 3: contact info links */
.WaGadgetMemberDirectory .memberDirectoryColumn3 a {
  color: var(--gc-green);
  text-decoration: none;
  word-break: break-all;
}

.WaGadgetMemberDirectory .memberDirectoryColumn3 a:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

/* --- MEMBER PUBLIC PROFILE (WaGadgetMemberPublicProfile) */

.WaGadgetMemberPublicProfile .pageBackContainer {
  margin-bottom: var(--gc-space-sm);
}

.WaGadgetMemberPublicProfile .pageBackContainer a {
  font-family: var(--gc-font-body);
  font-weight: 600;
  font-size: var(--gc-small-size);
  color: var(--gc-green);
  text-decoration: none;
}

.WaGadgetMemberPublicProfile .pageBackContainer a:hover {
  color: var(--gc-green-pressed);
  text-decoration: underline;
}

.WaGadgetMemberPublicProfile .profileHeaderContainer {
  display: flex;
  align-items: center;
  gap: var(--gc-space-md);
  margin-bottom: var(--gc-space-md);
}

.WaGadgetMemberPublicProfile .pageTitleOuterContainer h1,
.WaGadgetMemberPublicProfile .pageTitleOuterContainer .pageTitle {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h2-size);
  font-weight: 600;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-md);
}

.WaGadgetMemberPublicProfile .memberDirectoryDetailsContainer {
  background: var(--gc-white);
  padding: var(--gc-space-md);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
}


/* ============================================================
   28. MEMBERSHIP APPLICATION — WaGadgetMembershipApplication
   States: SelectLevel (level selection), plus subsequent wizard
   steps that share the .fieldSubContainer pattern from sec. 25.
   Added 2026-05-15
   ============================================================ */

/* Form wrapper — give the application a contained, card-like feel */
.WaGadgetMembershipApplication .generalFormContainer {
  background: var(--gc-white);
  padding: var(--gc-space-lg);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius-lg);
  margin-top: var(--gc-space-md);
}

/* Form title */
.WaGadgetMembershipApplication .formTitleContainer h3.formTitle {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h2-size);
  font-weight: 600;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-xs);
}

.WaGadgetMembershipApplication .mandatoryFieldsTitle {
  font-family: var(--gc-font-body);
  font-size: var(--gc-tiny-size);
  color: var(--gc-lichen);
  margin-bottom: var(--gc-space-md);
}

.WaGadgetMembershipApplication .mandatoryFieldsTitle .mandatorySymbol {
  color: var(--gc-red);
  font-weight: 700;
}

/* Membership-level radio options rendered as selectable cards */
.WaGadgetMembershipApplication .radioGroupContainer .fieldItem {
  background: var(--gc-fieldstone);
  border: 1px solid var(--gc-ledge);
  border-radius: var(--gc-radius);
  padding: var(--gc-space-sm) var(--gc-space-md);
  margin-bottom: var(--gc-space-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.WaGadgetMembershipApplication .radioGroupContainer .fieldItem:hover {
  border-color: var(--gc-green);
  background: var(--gc-white);
}

.WaGadgetMembershipApplication .radioGroupContainer .fieldItem:has(input:checked) {
  border-color: var(--gc-green);
  background: var(--gc-green-tint);
}

/* Membership level label (the multi-line description) */
.WaGadgetMembershipApplication label.levelProperties {
  display: block;
  cursor: pointer;
}

.WaGadgetMembershipApplication .levelProperties .textLine {
  display: block;
  line-height: 1.5;
  margin-bottom: 0.2rem;
}

.WaGadgetMembershipApplication .levelProperties .textLine:first-of-type {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h4-size);
  font-weight: 600;
  color: var(--gc-dark);
  margin-bottom: 0.4rem;
}

.WaGadgetMembershipApplication .levelProperties .textLine.typeInstruction {
  font-family: var(--gc-font-body);
  font-size: var(--gc-small-size);
  color: var(--gc-lichen);
  font-weight: 400;
}

.WaGadgetMembershipApplication .levelProperties .textLine.extraInfo {
  margin-top: 0.5rem;
  color: var(--gc-pencil);
}

/* Navigation (Next / Previous) */
.WaGadgetMembershipApplication .navigationOuterContainer {
  margin-top: var(--gc-space-md);
  padding-top: var(--gc-space-md);
  border-top: 1px solid var(--gc-ledge);
}

.WaGadgetMembershipApplication .navigationContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.WaGadgetMembershipApplication .navigationContainer .left {
  text-align: left;
}

.WaGadgetMembershipApplication .navigationContainer .right {
  text-align: right;
  margin-left: auto;
}

/* Wizard nav buttons — WA defaults to gray. Same specificity battle as
   the Register input button. !important across the visual properties. */
.WaGadgetMembershipApplication input.nextButton,
.WaGadgetMembershipApplication input.prevButton {
  font-family: var(--gc-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--gc-small-size) !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: var(--gc-radius) !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.WaGadgetMembershipApplication input.nextButton {
  background: var(--gc-green) !important;
  color: var(--gc-white) !important;
  border: none !important;
}

.WaGadgetMembershipApplication input.nextButton:hover {
  background: var(--gc-green-pressed) !important;
  transform: translateY(-1px);
}

.WaGadgetMembershipApplication input.prevButton {
  background: var(--gc-fieldstone) !important;
  color: var(--gc-pencil) !important;
  border: 1px solid var(--gc-ledge) !important;
}

.WaGadgetMembershipApplication input.prevButton:hover {
  background: var(--gc-ledge) !important;
}

/* ============================================================
   29. LOGIN BUTTON — WaGadgetLoginButton restyle
   Lives top-right of header zone (current placement is fine).
   Restyle the default text-link into a quiet outline button.
   ============================================================ */

.WaGadgetLoginButton {
  display: inline-block;
}

.WaGadgetLoginButton a,
.WaGadgetLoginButton .loginLink,
.WaGadgetLoginButton a.loginLink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  color: var(--gc-pencil) !important;
  border: 1px solid var(--gc-ledge) !important;
  border-radius: var(--gc-radius) !important;
  font-family: var(--gc-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--gc-small-size) !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.WaGadgetLoginButton a:hover,
.WaGadgetLoginButton .loginLink:hover {
  background: var(--gc-fieldstone) !important;
  border-color: var(--gc-green) !important;
  color: var(--gc-pencil) !important;
}

/* The login button shows "Site Administrator | Change password | Log out"
   for logged-in users. Style those as inline text links. */
.WaGadgetLoginButton.loggedInState a,
.WaGadgetLoginButton .loggedIn a {
  display: inline;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--gc-link) !important;
  font-weight: 500 !important;
}


/* ============================================================
   30. SITE FOOTER — village skyline + 3-column + bottom strip
   Container styles for the Custom HTML gadget content
   that lives in the WA template's footer zone.
   ============================================================ */

.gc-site-footer {
  background: var(--gc-dark);
  color: var(--gc-white);
  margin-top: var(--gc-space-lg);
}

.gc-footer-graphic {
  width: 100%;
  display: block;
  height: auto;
  margin: 0;
}

.gc-footer-content {
  max-width: var(--gc-content-max, 1140px);
  margin: 0 auto;
  padding: var(--gc-space-lg) var(--gc-space-md);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gc-space-lg);
}

.gc-footer-col h4 {
  font-family: var(--gc-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gc-white);
  margin: 0 0 var(--gc-space-sm);
  letter-spacing: 0.01em;
}

.gc-footer-col p,
.gc-footer-col li {
  font-size: var(--gc-small-size);
  color: var(--gc-gravel);
  line-height: 1.7;
  margin: 0;
}

.gc-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gc-footer-col a {
  color: var(--gc-gravel);
  text-decoration: none;
  transition: color 0.2s ease;
}

.gc-footer-col a:hover {
  color: var(--gc-white);
  text-decoration: underline;
}

.gc-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--gc-space-sm) var(--gc-space-md);
  font-size: var(--gc-tiny-size);
  color: var(--gc-gravel);
  text-align: center;
}

.gc-footer-bottom a {
  color: var(--gc-gravel);
  text-decoration: none;
}

.gc-footer-bottom a:hover {
  color: var(--gc-white);
}

/* Responsive — collapse to single column on narrow viewports */
@media (max-width: 720px) {
  .gc-footer-content {
    grid-template-columns: 1fr;
    gap: var(--gc-space-md);
  }
}

/* ============================================================
   30b. PLATFORM ATTRIBUTION HIDE
   "Powered by Wild Apricot" lives in zoneFooter3 under
   #idFooterPoweredByContainer. The forum-documented .zoneBranding
   selectors don't apply to this theme — current WA markup uses
   ID-based naming. Confirmed via DOM inspect May 15, 2026.
   ============================================================ */

#idFooterPoweredByContainer {
  display: none;
}

/* ============================================================
   31. UTILITY PAGE INTRO — H1 + intro paragraph above gadget
   Wraps the page-specific heading and intro that sits between
   the breadcrumb and the WA gadget on /events, /directory,
   and /join-us. Drop the matching HTML snippets above each
   page's gadget.
   ============================================================ */

.gc-page-intro {
  max-width: var(--gc-content-max, 1140px);
  margin: 0 auto;
  padding: var(--gc-space-lg) var(--gc-space-md) var(--gc-space-md);
}

.gc-page-intro h1 {
  font-family: var(--gc-font-heading);
  font-size: var(--gc-h1-size, 2.5rem);
  font-weight: 700;
  color: var(--gc-dark);
  margin: 0 0 var(--gc-space-sm);
  line-height: 1.15;
}

.gc-page-intro p {
  font-size: 1.1rem;
  color: var(--gc-pencil);
  max-width: 720px;
  margin: 0;
  line-height: 1.55;
}

/* Remove the duplicate breadcrumb-or-title that WA may
   auto-emit on these pages once we have our own H1 */
.WaGadgetEvents h3.sectionTitle,
.WaGadgetMemberDirectory h3.sectionTitle,
.WaGadgetMembershipApplication h3.formTitle {
  /* Keep these — they're sub-headings within the gadget
     (Upcoming events / Select membership level / etc.)
     Our gc-page-intro h1 sits ABOVE the gadget. No conflict. */
}