/* =====================================================================
   Join Scouts page styles
   =====================================================================
   FORK (1.4.20): this was a 15KB <style> block living inside a Custom HTML
   block on /join-scouts/ (page 7030). It shipped with every request to that
   page, could not be cached separately, and was one careless edit in the
   block editor away from being lost.

   Same treatment as gcc-program.css in 1.3.0, and for the same reasons.
   Enqueued by gcc_scripts() on any page whose content carries the
   `gcc-join` wrapper class, so it follows the markup rather than the slug.

   Depends on gcc-overrides: every rule below reads --gcc-font-sans, and the
   colour custom properties are declared on .gcc-join itself rather than in
   theme.json because they are scoped to this page's component system.

   Moved verbatim. Nothing below this header was rewritten, and the file was
   verified byte-for-byte against the block it replaced (15,283 characters,
   121 rules, zero parse errors) before the page's copy was removed.
   ===================================================================== */

/* ─── Reset inherited theme styles inside .gcc-join scope ────────── */
.gcc-join, .gcc-join * { box-sizing: border-box; }
.gcc-join {
  font-family: var(--gcc-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: #1e2024;
  background: #FAF9F5;
  padding: 0;
  margin: 40px 0;
  border-radius: 8px;
  overflow: hidden;

  --gcc-blue: #003F87;
  --gcc-blue-dark: #002855;
  --gcc-blue-pale: #E6EEF7;
  --gcc-red: #CE1126;
  --gcc-tan: #D6CEBD;
  --gcc-tan-light: #E9E9E4;
  --gcc-tan-dark: #AD9D7B;
  --gcc-warm-gray: #515354;
  --gcc-pale-gray: #858787;       /* borders and dividers only: 3.61:1 on white, too light for text */
  --gcc-inactive: #757676;        /* 1.4.24: inactive buttons. White text 4.55:1 (AA) */
  --gcc-off-white: #FAF9F5;
  --gcc-text: #1e2024;
  --gcc-border: #d9d3c4;

  --gcc-cub-scout:  #003F87;
  --gcc-cub-scout-accent: #FCD116;
  --gcc-scouts-bsa: #243E2C;
  --gcc-scouts-bsa-accent: #E9E9E4;  /* 1.4.24: was Tan #D6CEBD. Red text on Tan is 3.59:1 and fails AA; on Light Tan it is 4.61:1 */
  --gcc-venturing:  #006A3F;
  --gcc-venturing-accent: #FCD116;
  --gcc-sea-scout:  #003366;
  --gcc-sea-scout-accent: #9AB3D5;
}

.gcc-join h1, .gcc-join h2, .gcc-join h3, .gcc-join h4 {
  font-family: var(--gcc-font-sans);
  color: var(--gcc-blue);
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 700;
  padding: 0;
  border: none;
  background: none;
  text-transform: none;
  letter-spacing: normal;
}
.gcc-join p {
  margin: 0 0 1em;
  padding: 0;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}
.gcc-join p:last-child { margin-bottom: 0; }
.gcc-join a {
  color: var(--gcc-blue);
  text-decoration: underline;
  background: none;
  border: none;
}
.gcc-join a:hover { color: var(--gcc-blue-dark); }
.gcc-join button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
}
.gcc-join select, .gcc-join input {
  font-family: inherit;
  font-size: inherit;
  color: var(--gcc-text);
  border-radius: 4px;
  background: white;
}
.gcc-join input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
}
.gcc-join details {
  margin: 0;
  padding: 0;
}

.gcc-join .gcc-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.gcc-join .gcc-hero {
  background: var(--gcc-blue);
  color: white;
  padding: 60px 0 50px;
  position: relative;
  overflow: hidden;
}
.gcc-join .gcc-hero::after {
  content: '';
  position: absolute;
  right: -100px; top: -50px;
  width: 400px; height: 400px;
  background: var(--gcc-blue-dark);
  transform: rotate(72deg);
  opacity: 0.5;
  z-index: 0;
}
.gcc-join .gcc-hero .gcc-container { position: relative; z-index: 1; }
.gcc-join .gcc-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gcc-tan);
  background: rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 18px;
}
.gcc-join .gcc-hero h2 {
  color: white;
  font-size: 44px;
  margin-bottom: 16px;
  max-width: 780px;
}
.gcc-join .gcc-hero p {
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  max-width: 680px;
  margin: 0 0 10px;
}

/* Full-width image banner below the compact hero */
.gcc-join .gcc-hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: -1px;
}

.gcc-join .gcc-intro { padding: 40px 0 20px; }
.gcc-join .gcc-intro h2 { font-size: 28px; margin-bottom: 12px; color: var(--gcc-blue); }
.gcc-join .gcc-intro p { font-size: 18px; color: var(--gcc-warm-gray); max-width: 780px; margin: 0 0 12px; }

.gcc-join .gcc-finder {
  background: white;
  border: 1.5px solid var(--gcc-tan-dark);
  border-top: 4px solid var(--gcc-red);
  border-radius: 6px;
  padding: 30px;
  margin: 20px 0 50px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.gcc-join .gcc-finder h3 { font-size: 24px; margin-bottom: 6px; color: var(--gcc-blue); }
.gcc-join .gcc-finder-sub { color: var(--gcc-warm-gray); margin: 0 0 24px; font-size: 16px; }

.gcc-join .gcc-scout-row {
  background: var(--gcc-off-white);
  border: 1px solid var(--gcc-border);
  border-radius: 5px;
  padding: 18px 20px 20px;
  margin-bottom: 14px;
  position: relative;
}
.gcc-join .gcc-scout-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.gcc-join .gcc-scout-label {
  font-family: var(--gcc-font-sans);
  font-size: 17px;
  color: var(--gcc-blue);
  font-weight: 700;
}
.gcc-join .gcc-remove-btn {
  color: var(--gcc-warm-gray);  /* 1.4.24: was pale gray, 3.61:1 */
  font-size: 14px;
  padding: 4px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.gcc-join .gcc-remove-btn:hover { color: var(--gcc-red); }

.gcc-join .gcc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gcc-join .gcc-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gcc-warm-gray);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: inherit;
}
.gcc-join .gcc-field select,
.gcc-join .gcc-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--gcc-border);
  border-radius: 4px;
  background: white;
  font-family: inherit;
  color: var(--gcc-text);
  line-height: 1.4;
  height: auto;
  margin: 0;
  box-shadow: none;
}
/* 1.4.24: the focus state used to be outline: none plus a 2px shadow in
   --gcc-blue-pale (#E6EEF7), which is 1.2:1 against the white field and
   cannot be seen. Keyboard users had only the border color change to go on.
   The ring is now the same one the rest of the site uses (see "Keyboard
   focus" in style.css), with the blue border kept as a second cue. */
.gcc-join .gcc-field select:focus,
.gcc-join .gcc-field input[type="text"]:focus {
  outline: 3px solid #232528;
  outline-offset: 2px;
  border-color: var(--gcc-blue);
  box-shadow: 0 0 0 2px #FFFFFF;
}

.gcc-join .gcc-rec {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--gcc-blue-pale);
  border-left: 4px solid var(--gcc-blue);
  animation: gccFadeIn 0.25s ease;
}
.gcc-join .gcc-rec.boundary {
  background: #FFF8E7;
  border-left-color: #C87F00;
}
@keyframes gccFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gcc-join .gcc-rec-title {
  font-family: var(--gcc-font-sans);
  font-weight: 700;
  color: var(--gcc-blue);
  margin-bottom: 4px;
  font-size: 16px;
}
.gcc-join .gcc-rec-title.boundary { color: #8B5A00; }
.gcc-join .gcc-rec-body {
  font-size: 15px;
  color: var(--gcc-warm-gray);
  line-height: 1.5;
}
.gcc-join .gcc-rec-programs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gcc-join .gcc-rec-chip {
  color: white;
  padding: 4px 10px 4px 6px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.gcc-join .gcc-chip-icon {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.gcc-join .gcc-rec-chip.cubScout  { background: var(--gcc-cub-scout-accent); color: var(--gcc-cub-scout); }
.gcc-join .gcc-rec-chip.scoutsBSA { background: var(--gcc-scouts-bsa-accent); color: var(--gcc-red); }
.gcc-join .gcc-rec-chip.venturing { background: var(--gcc-venturing); }
.gcc-join .gcc-rec-chip.seaScout  { background: var(--gcc-sea-scout); }

.gcc-join .gcc-not-yet {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--gcc-tan-light);
  border-left: 4px solid var(--gcc-tan-dark);
  font-size: 15px;
  color: var(--gcc-warm-gray);
}

.gcc-join .gcc-add-scout-btn {
  background: white;
  border: 1.5px dashed var(--gcc-blue);
  color: var(--gcc-blue);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
}
.gcc-join .gcc-add-scout-btn:hover { background: var(--gcc-blue-pale); }

.gcc-join .gcc-zip-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--gcc-border);
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 14px;
  align-items: end;
}
.gcc-join .gcc-find-btn {
  background: var(--gcc-red);
  color: white;
  border: none;
  padding: 14px 26px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}
.gcc-join .gcc-find-btn:hover { background: #B00E1F; color: white; text-decoration: none; }
.gcc-join .gcc-find-btn.disabled-visual {
  background: var(--gcc-inactive);  /* 1.4.24: was pale gray, 3.61:1 */
  cursor: not-allowed;
  color: white;
}
.gcc-join .gcc-find-btn.disabled-visual:hover { background: var(--gcc-inactive); }

.gcc-join .gcc-programs { display: block; padding: 20px 0 60px; }  /* display declared explicitly: the theme carries a generic .gcc-programs grid rule */
.gcc-join .gcc-programs h2 { font-size: 28px; text-align: center; margin-bottom: 8px; color: var(--gcc-blue); }
.gcc-join .gcc-programs-sub {
  text-align: center;
  color: var(--gcc-warm-gray);
  margin: 0 auto 30px;
  max-width: 620px;
  font-size: 17px;
}
.gcc-join .gcc-program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gcc-join .gcc-program-card {
  background: white;
  border: 1px solid var(--gcc-border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top-width: 6px;
  border-top-style: solid;
}
.gcc-join .gcc-program-card.cubScout  { border-top-color: var(--gcc-cub-scout); }
.gcc-join .gcc-program-card.scoutsBSA { border-top-color: var(--gcc-scouts-bsa); }
.gcc-join .gcc-program-card.venturing { border-top-color: var(--gcc-venturing-accent); }
.gcc-join .gcc-program-card.seaScout  { border-top-color: var(--gcc-sea-scout-accent); }

.gcc-join .gcc-program-card-header { padding: 18px 18px 12px; text-align: center; }
.gcc-join .gcc-program-icon {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.gcc-join .gcc-program-badge {
  display: inline-block;
  color: white;
  font-size: 14px;  /* 1.4.24: was 12px, under the site's 13px floor */
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.gcc-join .gcc-program-badge.cubScout  { background: var(--gcc-cub-scout-accent); color: var(--gcc-cub-scout); }
.gcc-join .gcc-program-badge.scoutsBSA { background: var(--gcc-scouts-bsa-accent); color: var(--gcc-red); }
.gcc-join .gcc-program-badge.venturing { background: var(--gcc-venturing); }
.gcc-join .gcc-program-badge.seaScout  { background: var(--gcc-sea-scout); }

.gcc-join .gcc-program-card h3 { font-size: 20px; margin: 0 0 4px; }
.gcc-join .gcc-program-card.cubScout  h3 { color: var(--gcc-cub-scout); }
.gcc-join .gcc-program-card.scoutsBSA h3 { color: var(--gcc-red); }
.gcc-join .gcc-program-card.venturing h3 { color: var(--gcc-venturing); }
.gcc-join .gcc-program-card.seaScout  h3 { color: var(--gcc-sea-scout); }

.gcc-join .gcc-program-age {
  font-size: 14px;
  color: var(--gcc-warm-gray);
  font-weight: 700;
}
.gcc-join .gcc-program-body {
  padding: 0 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gcc-join .gcc-program-body p {
  font-size: 15px;
  color: var(--gcc-warm-gray);
  margin: 0 0 14px;
  flex: 1;
}
.gcc-join .gcc-program-link {
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.gcc-join .gcc-program-link:hover { text-decoration: underline; }
.gcc-join .gcc-program-card.cubScout  .gcc-program-link { color: var(--gcc-cub-scout); }
.gcc-join .gcc-program-card.scoutsBSA .gcc-program-link { color: var(--gcc-red); }
.gcc-join .gcc-program-card.venturing .gcc-program-link { color: var(--gcc-venturing); }
.gcc-join .gcc-program-card.seaScout  .gcc-program-link { color: var(--gcc-sea-scout); }

.gcc-join .gcc-faq { background: var(--gcc-tan-light); padding: 50px 0; }
.gcc-join .gcc-faq h2 { font-size: 28px; text-align: center; margin-bottom: 30px; color: var(--gcc-blue); }
.gcc-join .gcc-faq-item {
  background: white;
  border-radius: 5px;
  margin-bottom: 10px;
  border: 1px solid var(--gcc-border);
}
.gcc-join .gcc-faq-item summary {
  padding: 16px 20px;
  font-family: var(--gcc-font-sans);
  font-weight: 700;
  color: var(--gcc-blue);
  cursor: pointer;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gcc-join .gcc-faq-item summary::-webkit-details-marker { display: none; }
.gcc-join .gcc-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--gcc-tan-dark);
}
.gcc-join .gcc-faq-item[open] summary::after { content: '\2212'; }
.gcc-join .gcc-faq-body {
  padding: 0 20px 18px;
  color: var(--gcc-warm-gray);
  font-size: 16px;
  line-height: 1.6;
}
.gcc-join .gcc-faq-body p { margin: 0 0 10px; }
.gcc-join .gcc-faq-body p:last-child { margin-bottom: 0; }

.gcc-join .gcc-adult {
  padding: 50px 0;
  background: white;
  border-top: 1px solid var(--gcc-border);
  border-bottom: 1px solid var(--gcc-border);
}
.gcc-join .gcc-adult-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}
.gcc-join .gcc-adult h2 { font-size: 24px; margin-bottom: 6px; color: var(--gcc-blue); }
.gcc-join .gcc-adult p { color: var(--gcc-warm-gray); margin: 0; font-size: 16px; }
.gcc-join .gcc-btn-outline {
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid var(--gcc-blue);
  color: var(--gcc-blue);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  background: transparent;
}
.gcc-join .gcc-btn-outline:hover {
  background: var(--gcc-blue-pale);
  color: var(--gcc-blue);
  text-decoration: none;
}

.gcc-join .gcc-contact {
  text-align: center;
  padding: 40px 0;
  background: var(--gcc-off-white);
}
.gcc-join .gcc-contact p { font-size: 16px; color: var(--gcc-warm-gray); margin: 0; }
.gcc-join .gcc-contact a { font-weight: 700; }

@media (max-width: 900px) {
  .gcc-join .gcc-program-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gcc-join .gcc-hero { padding: 40px 0 36px; }
  .gcc-join .gcc-hero h2 { font-size: 30px; }
  .gcc-join .gcc-hero p { font-size: 17px; }
  .gcc-join .gcc-fields { grid-template-columns: 1fr; }
  .gcc-join .gcc-zip-row { grid-template-columns: 1fr; }
  .gcc-join .gcc-finder { padding: 22px 18px; }
  .gcc-join .gcc-adult-inner { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .gcc-join .gcc-program-grid { grid-template-columns: 1fr; }
}


/* core/image puts the block className on the <figure>, so the rules above size
   the figure and leave the <img> inside it unsized — it then renders at whatever
   intrinsic size the file has. The four program SVGs are 62px, 14px, 22px and
   10px wide, which is why the card icons came out at four different sizes after
   the block conversion. Size the image, not just the figure. */
.gcc-join .gcc-program-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gcc-join .gcc-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* Block-gap reset — restores the pre-conversion spacing.

   Converting to blocks wraps these in layout groups, and WordPress adds a
   24px block-gap top margin to every child after the first. Inside a grid or
   a flex column that is not a gap, it is a downward shove: it put the three
   right-hand program cards 24px below Cub Scouts, and it put 24px of dead
   space between every card's header and its body — the body's own padding-top
   is 0, so that space was never designed. The grid's own gap and the cards'
   padding do the spacing here. */
.gcc-join .gcc-program-grid > *,
.gcc-join .gcc-program-card > * {
  margin-top: 0;
  margin-bottom: 0;
}