/* =========================================================
   ENTRANCE ANIMATIONS
   ========================================================= */

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  opacity: 0;
  animation: fadeSlideUp 0.6s ease-out forwards;
}




/* =========================================================
   GLOBAL / THEME VARIABLES
   ========================================================= */

:root {
  color-scheme: light;

  /* Core surfaces */
  --custom-page-bg: #ffffff;
  --custom-header-bg: #ffffff;
  --custom-dropdown-bg: #ffffff;
  --custom-card-bg: #f9f9f9;
  --custom-social-bg: #ffffff;

  /* Text */
  --custom-text: #222222;
  --custom-text-secondary: #444444;
  --custom-text-muted: #666666;
  --custom-text-inverse: #ffffff;

  /* Borders */
  --custom-border: #dddddd;
  --custom-border-light: #eeeeee;
  --custom-border-strong: #000000;
  --custom-border-muted: #808080;

  /* Shadows */
  --custom-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --custom-button-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 0 4px rgba(245, 130, 32, 0.18);
  --custom-card-shadow:
      0 6px 18px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.04);

  /* Interaction */
  --custom-link-hover: #f58220;
  --custom-focus-ring: #f58220;
  --custom-required: #b81717;

  /* Primary line gradient */
  --custom-primary-line-bg:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 180, 80, 0.10),
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255, 225, 180, 0.08),
      transparent 60%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 245, 220, 0.05),
      transparent 70%
    ),
    #fdfcf9;

  /* Secondary line gradient */
  --custom-secondary-line-bg:
    radial-gradient(
      circle at 82% 25%,
      rgba(120, 230, 210, 0.11),
      transparent 55%
    ),
    radial-gradient(
      circle at 18% 70%,
      rgba(245, 130, 32, 0.09),
      transparent 60%
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(200, 240, 255, 0.05),
      transparent 70%
    ),
    #fbfcfc;

  /* Footer line gradient */
  --custom-footer-line-bg:
    radial-gradient(
      circle at 15% 20%,
      rgba(76, 175, 80, 0.08),
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(170, 225, 190, 0.06),
      transparent 55%
    ),
    #f3f5f2;
}

html,
body {
  overflow-x: clip;
}

body {
  background: var(--custom-page-bg);
  color: var(--custom-text);
}

/* =========================================================
   CUSTOM HEADER
   ========================================================= */


/*sticky/fixed header line rule*/
.line-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem;
  background-color: var(--custom-header-bg);
}

.custom-site-header {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--custom-header-bg);
  color: var(--custom-text);
  border-bottom: 1px solid var(--custom-border-light);
  box-sizing: border-box;
}

.custom-header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}


/* Header Logo */

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.custom-logo {
  display: block;
  max-width: 250px;
  height: auto;
}

/* =========================================================
   HEADER NAVIGATION
   ========================================================= */

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


/* Shared navigation links and dropdown button */

.custom-nav > a,
.custom-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;

  background: transparent;
  color: var(--custom-text) !important;

  border: 1px solid transparent;
  border-radius: 0.5rem;

  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* Hover */

.custom-nav > a:hover,
.custom-dropdown-toggle:hover {
  background-color: rgba(245, 130, 32, 0.10);
  color: var(--custom-link-hover) !important;
  border-color: rgba(245, 130, 32, 0.22);
  text-decoration: none;
}


/* Slight pressed effect */

.custom-nav > a:active,
.custom-dropdown-toggle:active {
  transform: translateY(1px);
}


/* Keyboard focus */

.custom-nav > a:focus-visible,
.custom-dropdown-toggle:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: 2px;

  background-color: rgba(245, 130, 32, 0.12);
  color: var(--custom-text) !important;
}


/* Current-page link */

.custom-nav > a[aria-current="page"],
.custom-nav > a.is-active,
.custom-dropdown.is-active > .custom-dropdown-toggle {
  background-color: var(--primary);
  color: var(--custom-text-inverse) !important;
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}


/* Current-page hover */

.custom-nav > a[aria-current="page"]:hover,
.custom-nav > a.is-active:hover,
.custom-dropdown.is-active > .custom-dropdown-toggle:hover {
  color: var(--custom-text-inverse) !important;
  filter: brightness(1.05);
}


/* Optional animated underline for non-active links */

.custom-nav > a::after,
.custom-dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.35rem;

  height: 2px;
  background-color: var(--custom-link-hover);
  border-radius: 999px;

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.custom-nav > a:hover::after,
.custom-nav > a:focus-visible::after,
.custom-dropdown-toggle:hover::before,
.custom-dropdown-toggle:focus-visible::before {
  transform: scaleX(1);
}


/* Do not show underline inside active filled link */

.custom-nav > a[aria-current="page"]::after,
.custom-nav > a.is-active::after,
.custom-dropdown.is-active > .custom-dropdown-toggle::before {
  display: none;
}


/* Header Menu Toggle */

.custom-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.custom-menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 5px 0;
  background: var(--custom-text);
  border-radius: 3px;
}

.custom-menu-toggle:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: 3px;
}

/* =========================================================
   HEADER DROPDOWN
   ========================================================= */

.custom-dropdown {
  position: relative;
}

.custom-dropdown-toggle::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.55rem;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.18s ease;
}


/* Rotate arrow while open */

.custom-dropdown:hover .custom-dropdown-toggle::after,
.custom-dropdown.is-open .custom-dropdown-toggle::after {
  transform: translateY(0.1rem) rotate(225deg);
}


.custom-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;

  min-width: 220px;
  padding: 0.45rem;

  background-color: var(--custom-dropdown-bg);
  border: 1px solid var(--custom-border);
  border-radius: 0.65rem;
  box-shadow: var(--custom-shadow);

  z-index: 9999;
}


/* Keeps hover menu open while pointer crosses the gap */

.custom-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}


.custom-dropdown:hover .custom-dropdown-menu,
.custom-dropdown:focus-within .custom-dropdown-menu,
.custom-dropdown.is-open .custom-dropdown-menu {
  display: block;
}


/* Dropdown links */

.custom-dropdown-menu a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0.7rem 0.85rem;

  background-color: transparent;
  color: var(--custom-text) !important;

  border-radius: 0.4rem;

  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    padding-left 0.16s ease;
}


.custom-dropdown-menu a:hover {
  padding-left: 1rem;
  background-color: rgba(245, 130, 32, 0.11);
  color: var(--custom-link-hover) !important;
}


.custom-dropdown-menu a:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: -1px;

  background-color: rgba(245, 130, 32, 0.12);
  color: var(--custom-text) !important;
}


/* Active dropdown item */

.custom-dropdown-menu a[aria-current="page"],
.custom-dropdown-menu a.is-active {
  background-color: var(--primary);
  color: var(--custom-text-inverse) !important;
  font-weight: 700;
}

/* =========================================================
   HEADER INTERACTION OVERRIDES
   ========================================================= */

/* Dropdown item hover/focus — sufficient specificity */
#site-wrapper .custom-dropdown-menu a:hover,
#site-wrapper .custom-dropdown-menu a:focus-visible {
  background-color: rgba(245, 130, 32, 0.11) !important;
  color: var(--custom-link-hover) !important;
  padding-left: 1rem;
  text-decoration: none;
}

/* Preserve active dropdown-item appearance */
#site-wrapper .custom-dropdown-menu a[aria-current="page"],
#site-wrapper .custom-dropdown-menu a.is-active {
  background-color: var(--primary) !important;
  color: var(--custom-text-inverse) !important;
  font-weight: 700;
}

/* Hamburger button base styling */
#site-wrapper .custom-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;

  min-width: 52px;
  min-height: 52px;
  padding: 0.55rem;

  background-color: transparent;
  color: var(--custom-text) !important;

  border: 1px solid transparent;
  border-radius: 0.5rem;

  cursor: pointer;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

/* Hamburger SVG icon */
#site-wrapper .custom-menu-toggle svg {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
}

/* Hamburger hover */
#site-wrapper .custom-menu-toggle:hover {
  background-color: rgba(245, 130, 32, 0.10);
  color: var(--custom-link-hover) !important;
  border-color: rgba(245, 130, 32, 0.22);
}

/* Hamburger pressed state */
#site-wrapper .custom-menu-toggle:active {
  transform: translateY(1px);
}

/* Hamburger keyboard focus */
#site-wrapper .custom-menu-toggle:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: 2px;
  background-color: rgba(245, 130, 32, 0.12);
  color: var(--custom-text) !important;
}

/* Show hamburger on mobile */

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

.custom-footer {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: transparent;
  color: var(--custom-text);
  padding: 4rem 3rem 2rem;
  font-family: inherit;
  box-sizing: border-box;
}

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


/* Footer Main Layout */

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1fr;
  gap: 5rem;
  max-width: 1670px;
  margin: 0 auto;
}


/* Footer Branding */

.footer-logo-row {
  display: flex;
  align-items: center;
}

.footer-logo-image {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
}

.footer-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #12a64a;
  color: var(--custom-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.footer-title {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.footer-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--custom-text-secondary);
  letter-spacing: 0.03em;
}

.footer-description {
  max-width: 560px;
  margin-top: 1.5rem;
  line-height: 1.6;
}


/* Footer Links and Contact */

.footer-links h3,
.footer-contact h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.footer-links a,
.footer-contact a,
.footer-legal a {
  color: var(--custom-text-secondary);
  text-decoration: none;
}

.footer-links a {
  display: block;
  margin-bottom: 1rem;
}

.footer-contact p {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--custom-text-secondary);
}

.footer-icon {
  width: 1.2rem;
  color: var(--custom-text-muted);
  flex-shrink: 0;
}


/* Footer Link Interaction */

.footer-links a:hover,
.footer-contact a:hover,
.footer-legal a:hover,
.footer-socials a:hover {
  color: var(--custom-link-hover);
}

.footer-links a:focus-visible,
.footer-contact a:focus-visible,
.footer-legal a:focus-visible,
.footer-socials a:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: 3px;
}


/* Footer Divider and Bottom Row */

.footer-divider {
  max-width: 1670px;
  height: 1px;
  background: var(--custom-border);
  margin: 2.75rem auto 2rem;
}

.footer-bottom {
  max-width: 1670px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.footer-bottom p {
  margin: 0;
  color: var(--custom-text-secondary);
  font-size: 0.95rem;
}


/* Footer Social and Legal Links */

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.footer-socials a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--custom-social-bg);
  color: var(--custom-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}

.footer-legal {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.banner-button-spacing {
  margin-left: 2rem;
  margin-right: 2rem;
}

.redirect-button {
  background-color: var(--primary);
  color: var(--custom-text-inverse) !important;

  font-size: 1.6rem;
  font-weight: 600;

  padding: 1rem 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 24rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid transparent;
  border-radius: 1.25rem;

  text-decoration: none;
  cursor: pointer;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.redirect-button:hover,
.redirect-button:focus {
  transform: translateY(-2px);
  box-shadow: var(--custom-button-shadow);

  border-color: #ffbc7a;

  color: var(--custom-text-inverse) !important;
  text-decoration: none;
}

.redirect-button:focus-visible {
  outline: 3px solid var(--custom-focus-ring);
  outline-offset: 3px;
}

.single-button-sizing {
  font-size: 2rem;
  padding: 2rem;
}

/* =========================================================
   HEADINGS AND UTILITY CONTAINERS
   ========================================================= */

.contact-info-heading {
  margin-top: 6rem;
  font-size: 4.25rem;
  border-radius: 0.75rem;
}

/* =========================================================
   CARD STYLES
   ========================================================= */

/* Shared card appearance */

.contact-card,
.apply-next-steps-card,
.home-workshop-card,
.workshops-page-workshop-card,
.core-value-card,
.who-we-serve-card,
.program-curriculum-card {

    box-sizing: border-box;
    overflow: hidden;

    background: var(--custom-card-bg);
    color: var(--custom-text);

    border: 1px solid var(--custom-border);
    border-radius: 1.25rem;

    box-shadow: var(--custom-card-shadow);

    padding: 2rem;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


/* Center-aligned cards */

.contact-card,
.apply-next-steps-card,
.home-workshop-card,
.core-value-card {
    text-align: center;
}


/* Left-aligned cards */

.workshops-page-workshop-card,
.who-we-serve-card,
.program-curriculum-card {
    width: 100%;
    text-align: left;
}


/* Contact and application cards */

.contact-card,
.apply-next-steps-card {
  margin-top: 4rem;
  margin-bottom: 4rem;
}


/* Home workshop cards */

.home-workshop-card {
  width: 36rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}


/* Workshop page cards */

.workshops-page-workshop-card {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.workshop-tags {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: auto;
    text-align: left;
}

.workshop-tags > p {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.5rem;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
    font-size: 1.5rem;
    border: 1px solid;
    border-radius: 1.75rem;
}

.workshops-page-workshop-card h2,
.workshops-page-workshop-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left;
}


/* Core value, who-we-serve, and curriculum cards */

.core-value-card,
.who-we-serve-card,
.program-curriculum-card {
  margin-top: 3rem;
  margin-bottom: 3rem;
}


/* Program curriculum card header */

.program-curriculum-card-header {
  display: flex;
  margin-bottom: 2rem;
}

.program-curriculum-card-header p {
  margin: 0;
}

.program-curriculum-card-header img {
  flex: 0 0 50px;
  object-fit: contain;
  margin-right: 2rem;
}

/* =========================================================
   GRID AND FLEX LAYOUTS
   ========================================================= */

/* Home Workshops */

.home-featured-workshops {
  justify-content: center;
  display: flex;
  gap: 2rem;
  flex-direction: row;
}

/*Home featured programs section*/

.home-program-key-topics {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1rem;
}

.home-program-key-topics p {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    margin-right: 10rem;
}

.home-program-key-topics ul {
    text-align: left;      /* keep list readable */
    width: fit-content;    /* shrink to content */
    margin: 0;
}


/* Workshop Listing */

.all-workshops {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 3.25rem;
}

.workshop-additional-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-left: 3rem;
  padding-top: 2rem;
}


/* Core Values */

.core-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
  padding-top: 2rem;
}

.core-values > :nth-child(5) {
  grid-column: 1 / -1;
  justify-self: center;
}


/* Who We Serve */

.who-we-serve {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
  padding-top: 2rem;
}


/* Program Curriculum */

.program-curriculum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
  padding-top: 2rem;
}


/* =========================================================
    OTHER
   ========================================================= */

.banner-featured-program{
    background: linear-gradient(to right, var(--secondary), var(--primary));
    border-radius: 1.5rem;
    width: 24rem;
    padding: 1rem;
    margin: 0 auto;
    font-size: 1.32rem;
    font-weight: 600;
}

/* =========================================================
   YAPLA OVERRIDES
   ========================================================= */

/* Banner Overlay */

#site-wrapper .zone-banner {
  background: rgba(0, 0, 0, 0.19);
}


/* Primary Line */

#site-wrapper .line-primary {
  background: var(--custom-primary-line-bg);
  color: var(--custom-text);
}


/* Secondary Line */

#site-wrapper .line-secondary {
  background: var(--custom-secondary-line-bg);
  color: var(--custom-text);
}

/* General Links Inside Themed Lines */

#site-wrapper .line-primary a:not(.redirect-button),
#site-wrapper .line-secondary a:not(.redirect-button) {
  color: var(--custom-text) !important;
}

#site-wrapper .line-primary a:not(.redirect-button):hover,
#site-wrapper .line-primary a:not(.redirect-button):focus,
#site-wrapper .line-secondary a:not(.redirect-button):hover,
#site-wrapper .line-secondary a:not(.redirect-button):focus {
  color: var(--custom-link-hover) !important;
}

/* Footer Line */

#site-wrapper .line-footer {
  background: var(--custom-footer-line-bg);
  color: var(--custom-text);
}

/*line separation*/
#site-wrapper .line-primary,
#site-wrapper .line-secondary {
    position: relative;
}

#site-wrapper .line-primary::after,
#site-wrapper .line-secondary::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 24px;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0,0,0,0.06),
        transparent
    );

    opacity: 0.35;
}

/* Remove Unwanted Child Backgrounds */

#site-wrapper .line-primary h2,
#site-wrapper .line-primary h3,
#site-wrapper .line-primary p,
#site-wrapper .line-primary ul,
#site-wrapper .line-secondary h2,
#site-wrapper .line-secondary h3,
#site-wrapper .line-secondary p,
#site-wrapper .line-secondary ul,
#site-wrapper .line-footer h2,
#site-wrapper .line-footer h3,
#site-wrapper .line-footer p,
#site-wrapper .line-footer ul {
  background: transparent;
  color: var(--custom-text);
}

/* =========================================================
   btn-primary visual override
   Preserve Bootstrap/Yapla sizing and layout
   ========================================================= */

#site-wrapper .btn-primary,
#site-wrapper .btn-primary:link,
#site-wrapper .btn-primary:visited {
    background-color: var(--primary) !important;
    color: var(--custom-text-inverse) !important;

    border: 2px solid transparent !important;
    border-radius: 1.25rem !important;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

#site-wrapper .btn-primary:hover,
#site-wrapper .btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: var(--custom-button-shadow);

    border-color: #ffbc7a !important;

    color: var(--custom-text-inverse) !important;
    text-decoration: none;
}

#site-wrapper .btn-primary:focus-visible {
    outline: 3px solid var(--custom-focus-ring);
    outline-offset: 3px;
}

#site-wrapper .btn-primary:active {
    transform: translateY(1px);
}

/* Yapla built-in single button override */

#site-wrapper #singlebutton {
    background-color: var(--primary) !important;
    color: var(--custom-text-inverse) !important;

    border: 2px solid transparent !important;
    border-radius: 1.25rem !important;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

#site-wrapper #singlebutton:hover,
#site-wrapper #singlebutton:focus {
    transform: translateY(-2px);
    box-shadow: var(--custom-button-shadow);

    border-color: #ffbc7a !important;

    color: var(--custom-text-inverse) !important;
    text-decoration: none;
}

#site-wrapper #singlebutton:focus-visible {
    outline: 3px solid var(--custom-focus-ring);
    outline-offset: 3px;
}

#site-wrapper #singlebutton:active {
    transform: translateY(1px);
}

/* Yapla Previous/Back buttons */

#site-wrapper .btn.btn-link.pull-left {
    background: var(--secondary) !important;
    color: var(--secondary-contrast) !important;

    border: 2px solid transparent !important;
    border-radius: 1.25rem !important;

    text-decoration: none !important;
    cursor: pointer;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

#site-wrapper .btn.btn-link.pull-left:hover,
#site-wrapper .btn.btn-link.pull-left:focus {
    background: var(--secondary) !important;
    color: var(--secondary-contrast) !important;

    border-color: #9be79b !important;
    box-shadow: var(--custom-button-shadow);
    transform: translateY(-2px);

    text-decoration: none !important;
}

#site-wrapper .btn.btn-link.pull-left:focus-visible {
    outline: 3px solid var(--custom-focus-ring);
    outline-offset: 3px;
}

#site-wrapper .btn.btn-link.pull-left:active {
    transform: translateY(1px);
}


/* Footer Links */

#site-wrapper .line-footer .footer-links a,
#site-wrapper .line-footer .footer-contact a,
#site-wrapper .line-footer .footer-legal a {
  background: transparent !important;
  color: var(--custom-text-secondary) !important;
}

#site-wrapper .line-footer .footer-links a:hover,
#site-wrapper .line-footer .footer-contact a:hover,
#site-wrapper .line-footer .footer-legal a:hover,
#site-wrapper .line-footer .footer-socials a:hover {
  color: var(--custom-link-hover) !important;
}


/* Footer Social Links */

#site-wrapper .line-footer .footer-socials a {
  background: var(--custom-social-bg);
  color: var(--custom-text-muted);
}


/* Required Form Indicator */

#site-wrapper span.control-label--required {
  color: var(--custom-required) !important;
}

/* =========================================================
   RESPONSIVE STYLES
   ========================================================= */

/* banner height adjustments for large desktop monitor screens*/

@media (min-width: 1600px) {
  #site-wrapper .zone-banner {
    min-height: clamp(450px, 30vw, 700px);
    position: relative;
  }

  #site-wrapper .zone-banner .mod-banner__wrapper,
  #site-wrapper .zone-banner .mod-banner__img {
    min-height: inherit;
  }

  #site-wrapper .zone-banner .mod-banner__img {
    height: 100% !important;
  }
}

/* Desktop only */

@media (min-width: 768px) {
  .centering-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 28rem;
  }

}


/* =========================================================
   RESPONSIVE HEADER AND FOOTER
   ========================================================= */


/* ---------------------------------------------------------
   Compact desktop header
   Slightly reduce spacing before switching to hamburger
   --------------------------------------------------------- */

@media (min-width: 1051px) and (max-width: 1200px) {

  .custom-header-inner {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .custom-nav {
    gap: 0;
  }

  .custom-nav > a,
  .custom-dropdown-toggle {
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
  }

  .custom-dropdown-toggle::after {
    margin-left: 0.35rem;
  }
}


/* ---------------------------------------------------------
   Collapsed header
   Switches to hamburger before navigation becomes crowded
   --------------------------------------------------------- */

@media (max-width: 1050px) {

  .custom-header-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
  }

  .custom-logo-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .custom-logo {
    width: 100%;
    max-width: 220px;
  }

  #site-wrapper .custom-menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .custom-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.75rem;
  }

  .custom-nav.is-open {
    display: flex;
  }

  .custom-nav > a {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem;
    border-top: 1px solid var(--custom-border-light);
    white-space: normal;
  }


  /* Header dropdown */

  .custom-dropdown {
    width: 100%;
  }

  .custom-dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 0.75rem;
    border-top: 1px solid var(--custom-border-light);
    white-space: normal;
  }

  .custom-dropdown-menu,
  .custom-dropdown-align-right .custom-dropdown-menu {
    position: static;
    left: auto;
    right: auto;

    width: 100%;
    min-width: 0;

    padding: 0.35rem 0 0.35rem 1rem;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    box-sizing: border-box;
  }

  .custom-dropdown-menu::before {
    display: none;
  }

  .custom-dropdown-menu a {
    white-space: normal;
  }
}


/* ---------------------------------------------------------
   Very narrow header
   Prevents logo and hamburger from colliding
   --------------------------------------------------------- */

@media (max-width: 420px) {

  .custom-header-inner {
    padding-inline: 0.75rem;
  }

  .custom-logo {
    max-width: 190px;
  }
}


/* ---------------------------------------------------------
   Small tablet home-page adjustment
   --------------------------------------------------------- */

@media (max-width: 900px) and (min-width: 768px) {

  .home-program-key-topics {
    margin-top: 5rem;
  }
}


/* ---------------------------------------------------------
   Tablet and mobile footer
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .custom-footer {
    padding: 3rem 1.5rem 2rem;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-bottom p {
    order: 3;
  }
}


/* ---------------------------------------------------------
   Mobile content layouts
   Header is already handled at 1050px
   --------------------------------------------------------- */

@media (max-width: 767px) {

  /* Home workshop layout */

  .home-featured-workshops {
    flex-direction: column;
    align-items: center;
  }

  .home-workshop-card {
    width: 100%;
    max-width: 36rem;
  }


  /* Workshop page layouts */

  .all-workshops {
    grid-template-columns: 1fr;
  }

  .workshop-additional-info {
    grid-template-columns: 1fr;
    padding-left: 0;
  }


  /* Card grids */

  .program-curriculum {
    grid-template-columns: 1fr;
  }

  .who-we-serve {
    grid-template-columns: 1fr;
  }

  .core-values {
    grid-template-columns: 1fr;
  }

  .core-values > :nth-child(5) {
    grid-column: auto;
  }
}


@media (prefers-color-scheme: light) {
    #site-wrapper .workshop-tags > p {
        color: var(--primary) !important;
        border-color: var(--primary);
    }
}

/* =========================================================
   AUTOMATIC DARK MODE
   Keep dark-mode overrides after the responsive rules
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Core surfaces */
    --custom-page-bg: #101310;
    --custom-header-bg: #171b18;
    --custom-dropdown-bg: #202521;
    --custom-card-bg: #1b2024; 
    --custom-social-bg: #272e29;

    /* Text */
    --custom-text: #f2f4f2;
    --custom-text-secondary: #d3d9d4;
    --custom-text-muted: #b8c0ba;
    --custom-text-inverse: #ffffff;

    /* Borders */
    --custom-border: #3b443d;
    --custom-border-light: #303832;
    --custom-border-strong: #89938b;
    --custom-border-muted: #69736b;

    /* Shadows */
    --custom-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --custom-button-shadow: 0 6px 16px rgba(0, 0, 0, 0.40);
    --custom-card-shadow:
      0 10px 24px rgba(0, 0, 0, 0.35),
      0 2px 8px rgba(0, 0, 0, 0.25);

    /* Interaction */
    --custom-link-hover: #ff9c4a;
    --custom-focus-ring: #ffad68;
    --custom-required: #ff8080;

    /* Primary line gradient */
    --custom-primary-line-bg:
      radial-gradient(
        circle at 20% 20%,
        rgba(245, 130, 32, 0.15),
        transparent 55%
      ),
      radial-gradient(
        circle at 80% 80%,
        rgba(170, 105, 45, 0.10),
        transparent 62%
      ),
      radial-gradient(
        circle at 50% 50%,
        rgba(255, 190, 110, 0.05),
        transparent 72%
      ),
      #171512;

    /* Secondary line gradient */
    --custom-secondary-line-bg:
      radial-gradient(
        circle at 82% 25%,
        rgba(70, 185, 165, 0.16),
        transparent 55%
      ),
      radial-gradient(
        circle at 18% 70%,
        rgba(245, 130, 32, 0.12),
        transparent 60%
      ),
      radial-gradient(
        circle at 50% 0%,
        rgba(80, 150, 165, 0.07),
        transparent 70%
      ),
      #121817;

    /* Footer line gradient */
    --custom-footer-line-bg:
      radial-gradient(
        circle at 15% 20%,
        rgba(65, 185, 105, 0.18),
        transparent 48%
      ),
      radial-gradient(
        circle at 85% 80%,
        rgba(75, 155, 110, 0.14),
        transparent 58%
      ),
      #141a16;
  }

  /* ---------------------------------------------------------
     Yapla component overrides
     --------------------------------------------------------- */

  /* ---------------------------------------------------------
     General Yapla surfaces
     --------------------------------------------------------- */

  html,
  body,
  #site-wrapper,
  #site-wrapper .site-inner {
    background-color: var(--custom-page-bg);
    color: var(--custom-text);
  }

    /*Fallback in case line-secondary or line-primary not applied*/
  #site-wrapper {
    --font-color: var(--custom-text);
    color: var(--custom-text);
  }

  /*
   * Structural wrappers must stay transparent so the gradient
   * on .line-primary/.line-secondary/.line-footer remains visible.
   */

  #site-wrapper .line-primary > .container,
  #site-wrapper .line-secondary > .container,
  #site-wrapper .line-footer > .container,
  #site-wrapper .line-primary .row,
  #site-wrapper .line-secondary .row,
  #site-wrapper .line-footer .row,
  #site-wrapper .line-primary [class*="zone-"],
  #site-wrapper .line-secondary [class*="zone-"],
  #site-wrapper .line-footer [class*="zone-"] {
    background-color: transparent !important;
    background-image: none;
  }


/*line separation*/


    #site-wrapper .line-primary::after,
    #site-wrapper .line-secondary::after {

        background: linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.08),
            transparent
        );

        opacity: 0.25;
    }

/* List markers */

#site-wrapper ul > li::marker,
    #site-wrapper ol > li::marker {
        color: #ffffff !important;
    }

  /* ---------------------------------------------------------
     General text inside themed lines
     --------------------------------------------------------- */

  #site-wrapper .line-primary,
  #site-wrapper .line-secondary,
  #site-wrapper .line-footer {
    color: var(--custom-text);
  }

  #site-wrapper .line-primary h1,
  #site-wrapper .line-primary h2,
  #site-wrapper .line-primary h3,
  #site-wrapper .line-primary h4,
  #site-wrapper .line-primary h5,
  #site-wrapper .line-primary h6,
  #site-wrapper .line-primary p,
  #site-wrapper .line-primary li,
  #site-wrapper .line-primary span,

  #site-wrapper .line-secondary h1,
  #site-wrapper .line-secondary h2,
  #site-wrapper .line-secondary h3,
  #site-wrapper .line-secondary h4,
  #site-wrapper .line-secondary h5,
  #site-wrapper .line-secondary h6,
  #site-wrapper .line-secondary p,
  #site-wrapper .line-secondary li,
  #site-wrapper .line-secondary span,

  #site-wrapper .line-footer h1,
  #site-wrapper .line-footer h2,
  #site-wrapper .line-footer h3,
  #site-wrapper .line-footer h4,
  #site-wrapper .line-footer h5,
  #site-wrapper .line-footer h6,
  #site-wrapper .line-footer p,
  #site-wrapper .line-footer li,
  #site-wrapper .line-footer span {
    background-color: transparent;
    color: var(--custom-text) !important;
  }


  /* ---------------------------------------------------------
     Links
     --------------------------------------------------------- */

  #site-wrapper .line-primary a:not(.redirect-button),
  #site-wrapper .line-secondary a:not(.redirect-button),
  #site-wrapper .line-footer a:not(.redirect-button) {
    color: var(--custom-text) !important;
  }

  #site-wrapper .line-primary a:not(.redirect-button):hover,
  #site-wrapper .line-primary a:not(.redirect-button):focus,
  #site-wrapper .line-secondary a:not(.redirect-button):hover,
  #site-wrapper .line-secondary a:not(.redirect-button):focus,
  #site-wrapper .line-footer a:not(.redirect-button):hover,
  #site-wrapper .line-footer a:not(.redirect-button):focus {
    color: var(--custom-link-hover) !important;
  }

  /* Preserve footer's secondary link colour */

  #site-wrapper .line-footer .footer-links a,
  #site-wrapper .line-footer .footer-contact a,
  #site-wrapper .line-footer .footer-legal a {
    background: transparent;
    color: var(--custom-text-secondary) !important;
  }

  /* Footer link hover override */
    
    #site-wrapper .line-footer .footer-links a:not(.btn):hover,
    #site-wrapper .line-footer .footer-contact a:not(.btn):hover,
    #site-wrapper .line-footer .footer-legal a:not(.btn):hover,
    #site-wrapper .line-footer .footer-socials a:not(.btn):hover {
      color: var(--custom-link-hover) !important;
    }

  /* Preserve button text */

  #site-wrapper .redirect-button,
  #site-wrapper .redirect-button:hover,
  #site-wrapper .redirect-button:focus {
    color: var(--custom-text-inverse) !important;
  }


  /* ---------------------------------------------------------
     Form labels and supporting text
     --------------------------------------------------------- */

  #site-wrapper form label,
  #site-wrapper form .control-label,
  #site-wrapper form .form-label,
  #site-wrapper form .form-group label,
  #site-wrapper form legend,
  #site-wrapper form .help-block,
  #site-wrapper form .form-text {
    background: transparent;
    color: var(--custom-text) !important;
  }

  /* Required indicators */

  #site-wrapper form .control-label--required,
  #site-wrapper form .required,
  #site-wrapper span.control-label--required {
    color: #ff8f8f !important;
  }


  /* ---------------------------------------------------------
     Form controls
     --------------------------------------------------------- */

    #site-wrapper form input:not([type="checkbox"]):not([type="radio"]),
    #site-wrapper form textarea,
    #site-wrapper form select,
    #site-wrapper form .form-control {
        color-scheme: dark;
        background-color: #202622 !important;
        color: var(--custom-text) !important;
    
        border: 2px solid #66736a !important; /* thicker + lighter */
    
        border-radius: 0.4rem;
        caret-color: var(--custom-text);
        box-shadow: none;
        transition:
            border-color .15s ease,
            box-shadow .15s ease,
            background-color .15s ease;
    }

  #site-wrapper form input:not([type="checkbox"]):not([type="radio"]):hover,
  #site-wrapper form textarea:hover,
  #site-wrapper form select:hover,
  #site-wrapper form .form-control:hover {
    border-color: var(--custom-border-strong) !important;
  }

  #site-wrapper form input:not([type="checkbox"]):not([type="radio"]):focus,
  #site-wrapper form textarea:focus,
  #site-wrapper form select:focus,
  #site-wrapper form .form-control:focus {
    background-color: #252c27 !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-focus-ring) !important;
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(255, 173, 104, 0.22);
  }

  #site-wrapper form input::placeholder,
  #site-wrapper form textarea::placeholder,
  #site-wrapper form .form-control::placeholder {
    color: var(--custom-text-muted) !important;
    opacity: 1;
  }


  /* ---------------------------------------------------------
     Select elements
     --------------------------------------------------------- */

  #site-wrapper form select,
  #site-wrapper form select.form-control {
    background-color: #202622 !important;
    color: var(--custom-text) !important;
  }

  #site-wrapper form select option,
  #site-wrapper form select optgroup {
    background-color: #202622 !important;
    color: var(--custom-text) !important;
  }

  /*
   * Some Yapla/Bootstrap selects use an attached button
   * or custom arrow area.
   */

  #site-wrapper form .input-group-addon,
  #site-wrapper form .input-group-btn,
  #site-wrapper form .select2-selection,
  #site-wrapper form .select2-selection__rendered,
  #site-wrapper form .bootstrap-select > .dropdown-toggle {
    background-color: #202622 !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-border) !important;
  }

  #site-wrapper form .select2-dropdown,
  #site-wrapper form .dropdown-menu {
    background-color: #202622 !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-border) !important;
  }

  #site-wrapper form .select2-results__option,
  #site-wrapper form .dropdown-menu li,
  #site-wrapper form .dropdown-menu a {
    background-color: transparent;
    color: var(--custom-text) !important;
  }

  #site-wrapper form .select2-results__option--highlighted,
  #site-wrapper form .dropdown-menu a:hover,
  #site-wrapper form .dropdown-menu a:focus {
    background-color: #303a33 !important;
    color: var(--custom-text) !important;
  }


  /* ---------------------------------------------------------
     Checkboxes and radio buttons
     --------------------------------------------------------- */

  #site-wrapper form input[type="checkbox"],
  #site-wrapper form input[type="radio"] {
    accent-color: var(--primary);
  }


  /* ---------------------------------------------------------
     Cards
     --------------------------------------------------------- */

  #site-wrapper .contact-card,
  #site-wrapper .apply-next-steps-card,
  #site-wrapper .home-workshop-card,
  #site-wrapper .workshops-page-workshop-card,
  #site-wrapper .core-value-card,
  #site-wrapper .who-we-serve-card,
  #site-wrapper .program-curriculum-card {
    background-color: var(--custom-card-bg) !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-border-strong) !important;
  }

  #site-wrapper .contact-card h2,
  #site-wrapper .contact-card h3,
  #site-wrapper .contact-card p,
  #site-wrapper .apply-next-steps-card h2,
  #site-wrapper .apply-next-steps-card h3,
  #site-wrapper .apply-next-steps-card p,
  #site-wrapper .home-workshop-card h2,
  #site-wrapper .home-workshop-card h3,
  #site-wrapper .home-workshop-card p,
  #site-wrapper .workshops-page-workshop-card h2,
  #site-wrapper .workshops-page-workshop-card h3,
  #site-wrapper .workshops-page-workshop-card p,
  #site-wrapper .core-value-card h2,
  #site-wrapper .core-value-card h3,
  #site-wrapper .core-value-card p,
  #site-wrapper .who-we-serve-card h2,
  #site-wrapper .who-we-serve-card h3,
  #site-wrapper .who-we-serve-card p,
  #site-wrapper .program-curriculum-card h2,
  #site-wrapper .program-curriculum-card h3,
  #site-wrapper .program-curriculum-card p {
    background: transparent;
    color: var(--custom-text) !important;
  }


  /* ---------------------------------------------------------
     Header and navigation
     --------------------------------------------------------- */

  #site-wrapper .custom-site-header,
  #site-wrapper .custom-header-inner {
    background-color: var(--custom-header-bg);
    color: var(--custom-text);
  }

  #site-wrapper .custom-nav a,
  #site-wrapper .custom-dropdown-toggle {
    color: var(--custom-text) !important;
  }

  #site-wrapper .custom-dropdown-menu {
    background-color: var(--custom-dropdown-bg) !important;
    color: var(--custom-text);
  }

  #site-wrapper .custom-dropdown-menu a {
    background-color: transparent;
    color: var(--custom-text) !important;
  }

    .custom-nav > a:hover,
  .custom-dropdown-toggle:hover {
    background-color: rgba(255, 156, 74, 0.13);
    border-color: rgba(255, 156, 74, 0.32);
  }

  .custom-nav > a:focus-visible,
  .custom-dropdown-toggle:focus-visible {
    background-color: rgba(255, 156, 74, 0.16);
  }

  .custom-dropdown-menu {
    background-color: var(--custom-dropdown-bg);
    border-color: var(--custom-border);
  }

  .custom-dropdown-menu a:hover,
  .custom-dropdown-menu a:focus-visible {
    background-color: rgba(255, 156, 74, 0.14);
  }




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

  #site-wrapper .line-footer .custom-footer {
    background: transparent;
    color: var(--custom-text);
  }

  #site-wrapper .line-footer .footer-socials a {
    background-color: var(--custom-social-bg) !important;
    color: var(--custom-text-muted) !important;
  }

  #site-wrapper .line-footer .footer-divider {
    background-color: var(--custom-border) !important;
  }

/* ---------------------------------------------------------
     Other Text
     --------------------------------------------------------- */
    
    #site-wrapper .workshop-tags > p {
        color: var(--custom-link-hover) !important;
        border-color: var(--custom-link-hover);
    }


  /* ---------------------------------------------------------
     Monochrome image/icon support
     --------------------------------------------------------- */

  /*
   * Add class="theme-monochrome-icon" only to black,
   * single-colour PNG/SVG icons.
   */

  #site-wrapper img.theme-monochrome-icon {
    filter: brightness(0) invert(1);
  }


  /* ---------------------------------------------------------
     Header interaction overrides
     --------------------------------------------------------- */

  #site-wrapper .custom-dropdown-menu a:hover,
  #site-wrapper .custom-dropdown-menu a:focus-visible {
    background-color: rgba(255, 156, 74, 0.14) !important;
    color: var(--custom-link-hover) !important;
  }

  #site-wrapper .custom-menu-toggle:hover {
    background-color: rgba(255, 156, 74, 0.13);
    border-color: rgba(255, 156, 74, 0.32);
    color: var(--custom-link-hover) !important;
  }

  #site-wrapper .custom-menu-toggle:focus-visible {
    background-color: rgba(255, 156, 74, 0.16);
  }
}