/* =====================================================================
   THE DOING CIRCLE: shared styles for Wild Apricot
   ---------------------------------------------------------------------
   Paste this whole file into Wild Apricot: Website → CSS.
   It only styles things whose class starts with "tdc-", so it won't
   change the rest of your Wild Apricot theme.

   Brand
     Blue    #004B80   (headings, buttons, links)
     Orange  #F2740B   (accents: rules, borders, highlights)
     "THE DOING CIRCLE" is always all caps, Times New Roman Bold.
     Body text is Helvetica.

   Why some lines say !important: Wild Apricot's theme styles links and
   images very specifically, and would otherwise win over these rules.
   ===================================================================== */


/* ---------- Brand basics ---------- */

.tdc-section {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #222222;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto 40px;
}

.tdc-section *,
.tdc-section *::before,
.tdc-section *::after {
  box-sizing: inherit;
}

/* Use anywhere: <span class="tdc-name">THE DOING CIRCLE</span> */
.tdc-name {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: bold !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tdc-heading {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  color: #004B80;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 24px;
}

/* Short orange line under a heading */
.tdc-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #F2740B;
  margin: 12px auto 0;
}


/* ---------- Square images (padding-percentage technique) ----------
   The frame is always a square; the photo fills it and is cropped
   from the centre, whatever shape the original photo is. */

.tdc-square {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #E6EEF4; /* shows while the photo loads */
}

.tdc-square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ---------- Buttons ---------- */

a.tdc-btn,
a.tdc-btn:link,
a.tdc-btn:visited {
  display: inline-block;
  min-height: 48px;
  padding: 12px 28px;
  border: 2px solid #004B80;
  border-radius: 999px;
  background: #004B80;
  color: #FFFFFF !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

a.tdc-btn:hover,
a.tdc-btn:focus {
  background: #FFFFFF;
  border-color: #F2740B;
  color: #004B80 !important;
}

a.tdc-btn:focus-visible {
  outline: 3px solid #004B80;
  outline-offset: 3px;
}

/* Outline version: white with a blue border */
a.tdc-btn--outline,
a.tdc-btn--outline:link,
a.tdc-btn--outline:visited {
  background: #FFFFFF;
  color: #004B80 !important;
}

a.tdc-btn--outline:hover,
a.tdc-btn--outline:focus {
  background: #004B80;
  border-color: #F2740B;
  color: #FFFFFF !important;
}

/* Call-to-action band */
.tdc-cta {
  text-align: center;
  padding: 36px 20px;
  border-top: 3px solid #F2740B;
  background: #F4F8FB;
  border-radius: 8px;
}

.tdc-cta p {
  max-width: 640px;
  margin: 0 auto 20px;
}

.tdc-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}


/* ---------- Event card ---------- */

.tdc-event {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #D5DEE6;
  border-left: 5px solid #F2740B;
  border-radius: 8px;
  margin-bottom: 20px;
}

.tdc-event__image {
  width: 100%;
}

.tdc-event__label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #004B80;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tdc-event__title {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.25;
  color: #004B80;
  margin: 0 0 8px;
}

.tdc-event__when,
.tdc-event__where {
  margin: 0;
  font-weight: bold;
}

.tdc-event__where {
  font-weight: normal;
  color: #4A4A4A;
}

.tdc-event__text {
  margin: 12px 0 16px;
}

/* Wider screens: photo on the left, details on the right */
@media (min-width: 640px) {
  .tdc-event {
    flex-direction: row;
    align-items: flex-start;
    padding: 20px;
  }
  .tdc-event__image {
    flex: 0 0 220px;
    width: 220px;
  }
  .tdc-event__body {
    flex: 1 1 auto;
    min-width: 0;
  }
}


/* ---------- Photo grid ---------- */

.tdc-grid {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tdc-grid li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tdc-grid li::before {
  content: none !important; /* hides theme bullet decorations */
}

.tdc-grid__caption {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  color: #333333;
}

@media (min-width: 768px) {
  .tdc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}


/* ---------- How it works (numbered steps) ---------- */

.tdc-steps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: none;
}

.tdc-step {
  list-style: none !important;
  margin: 0 !important;
  padding: 24px 20px !important;
  background: #FFFFFF;
  border: 1px solid #D5DEE6;
  border-top: 4px solid #F2740B;
  border-radius: 8px;
  text-align: center;
}

.tdc-step::before {
  content: none !important;
}

.tdc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #004B80;
  color: #FFFFFF;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-weight: bold;
}

.tdc-section h3.tdc-step__title {
  margin: 12px 0 8px;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-weight: bold;
  color: #004B80;
}

.tdc-step p {
  margin: 0;
}

.tdc-step a.tdc-step__link,
.tdc-step a.tdc-step__link:visited {
  display: inline-block;
  margin-top: 12px;
  color: #004B80 !important;
  font-weight: bold;
  font-style: normal !important;
  text-decoration: underline !important;
}

.tdc-step a.tdc-step__link::after {
  content: "\00a0\2192";
  color: #F2740B;
}

@media (min-width: 768px) {
  .tdc-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}


/* ---------- Footer ---------- */

.tdc-footer {
  max-width: none;
  margin: 0;
  padding: 50px 20px 30px;
  background: #004B80;
  color: #FFFFFF;
  text-align: center;
}

.tdc-footer__inner {
  max-width: 900px;
  margin: 0 auto;
}

.tdc-footer p.tdc-footer__name {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.2;
  color: #FFFFFF;
}

.tdc-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 32px;
}

.tdc-footer__title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.tdc-footer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.tdc-footer a,
.tdc-footer a:link,
.tdc-footer a:visited {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}

.tdc-footer a:hover,
.tdc-footer a:focus {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.tdc-footer a:focus-visible {
  outline: 2px solid #F2740B;
  outline-offset: 2px;
}

.tdc-footer p.tdc-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 769px) {
  .tdc-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ---------- Wild Apricot "Upcoming events" block ----------
   Styles Wild Apricot's own Upcoming events gadget (home page
   "Coming Up Next") as TDC cards. Its list comes from Wild Apricot. */

.WaGadgetUpcomingEvents {
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 48px 20px !important;
  background: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.WaGadgetUpcomingEvents .gadgetStyleTitle {
  text-align: center;
  margin: 0 0 28px;
}

.WaGadgetUpcomingEvents .gadgetTitleH4 {
  font-family: "Roboto Slab", "Times New Roman", Times, serif !important;
  font-size: 28px !important;
  font-weight: normal !important;
  line-height: 1.2;
  color: #004B80 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.WaGadgetUpcomingEvents .gadgetTitleH4::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #F2740B;
  margin: 12px auto 0;
}

.WaGadgetUpcomingEvents ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.WaGadgetUpcomingEvents li {
  position: relative;
  list-style: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background: #FFFFFF;
  border: 1px solid #D5DEE6;
  border-top: 4px solid #F2740B;
  border-radius: 8px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

/* The whole card is clickable: the title link stretches over it */
.WaGadgetUpcomingEvents .title a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Small arrow after the title, hinting the card opens the event */
.WaGadgetUpcomingEvents .title a::after {
  content: "\00a0\2192";
  color: #F2740B;
}

.WaGadgetUpcomingEvents li:hover,
.WaGadgetUpcomingEvents li:focus-within {
  border-color: #F2740B;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 75, 128, 0.12);
}

.WaGadgetUpcomingEvents li:hover .title a,
.WaGadgetUpcomingEvents li:focus-within .title a {
  text-decoration: underline !important;
}

.WaGadgetUpcomingEvents li::before {
  content: none !important;
}

.WaGadgetUpcomingEvents .title a,
.WaGadgetUpcomingEvents .title a:link,
.WaGadgetUpcomingEvents .title a:visited {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: bold !important;
  font-size: 20px !important;
  line-height: 1.3;
  color: #004B80 !important;
  text-decoration: none !important;
}

.WaGadgetUpcomingEvents .title a:hover,
.WaGadgetUpcomingEvents .title a:focus {
  text-decoration: underline !important;
}

.WaGadgetUpcomingEvents .date {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #222222;
}

.WaGadgetUpcomingEvents .location {
  margin-top: 4px;
  font-size: 15px;
  font-style: normal;
  color: #4A4A4A;
}

.WaGadgetUpcomingEvents .location span {
  font-style: normal !important;
}

@media (min-width: 768px) {
  .WaGadgetUpcomingEvents ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}


/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .tdc-section {
    font-size: 16px;
  }
  .tdc-heading {
    font-size: 26px;
  }
  .tdc-cta__buttons a.tdc-btn {
    display: block;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.tdc-btn,
  .WaGadgetUpcomingEvents li {
    transition: none;
  }
  .WaGadgetUpcomingEvents li:hover,
  .WaGadgetUpcomingEvents li:focus-within {
    transform: none;
  }
}