/* ===========================
   Base Surface Variables
   =========================== */
:root {
  --surface-bg: var(--wp--preset--color--neutral-white-full);
  --surface-text: var(--wp--preset--color--navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-lime-green-mid);
}

/* ===========================
   Surface Classes (Variables)
   =========================== */
   
.surface-neutral-light {
  --surface-bg: var(--wp--preset--color--neutral-white-full);
  --surface-text: var(--wp--preset--color--navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-lime-green-full);
  --surface-border-highlight: var(--wp--preset--color--hero-lime-green-full);
  --surface-pill: var(--wp--preset--color--hero-lime-green-mid);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--neutral-white-full);
}

.surface-neutral-grey {
  --surface-bg: var(--wp--preset--color--neutral-grey-full);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--neutral-grey);
}

.surface-hero-navy-blue-full {
  --surface-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-text: var(--wp--preset--color--neutral-white-full);
  --surface-heading: var(--wp--preset--color--neutral-white-full);
  --surface-button-bg: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-sky-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-lime-green-mid);
  --surface-card-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
}

.surface-hero-lime-green-full {
  --surface-bg: var(--wp--preset--color--hero-lime-green-full);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-lime-green-mid);
  --surface-border-highlight: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-lime-green-low);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-lime-green-low);
}

.surface-hero-orange-full {
  --surface-bg: var(--wp--preset--color--hero-orange-full);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-orange-low);
  --surface-button-hover-bg: var(--wp--preset--color--hero-lime-green-mid);
  --surface-card-hover-bg: var(--wp--preset--color--hero-orange-low);
}

.surface-hero-sky-blue-full {
  --surface-bg: var(--wp--preset--color--hero-sky-blue-full);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-orange-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-sky-blue-low);
  --surface-button-hover-bg: var(--wp--preset--color--hero-orange-mid);
  --surface-card-hover-bg: var(--wp--preset--color--hero-sky-blue-low);
}

.surface-hero-navy-blue-mid {
  --surface-bg: var(--wp--preset--color--hero-navy-blue-mid);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-orange-full);
  --surface-button-text: var(--wp--preset--color--hero-lime-green-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-navy-blue-low-low);
  --surface-border-highlight: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-sky-blue-full);
}

.surface-hero-lime-green-mid, .surface-primary{
  --surface-bg: var(--wp--preset--color--hero-lime-green-mid);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-lime-green-low);
  --surface-border-highlight: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-lime-green-full);
}

.surface-hero-orange-mid {
  --surface-bg: var(--wp--preset--color--hero-orange-mid);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-orange-low);
  --surface-border-highlight: var(--wp--preset--color--hero-orange-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-orange-full);
}

.surface-hero-sky-blue-mid {
  --surface-bg: var(--wp--preset--color--hero-sky-blue-mid);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-text: var(--wp--preset--color--neutral-white-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-light-bg: var(--wp--preset--color--hero-sky-blue-low);
  --surface-border-highlight: var(--wp--preset--color--hero-sky-blue-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-sky-blue-full);
}

.surface-hero-navy-blue-low {
  --surface-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-text: var(--wp--preset--color--neutral-white-full);
  --surface-heading: var(--wp--preset--color--neutral-white-full);
  --surface-button-bg: var(--wp--preset--color--hero-orange-full);
  --surface-button-text: var(--wp--preset--color--hero-lime-green-full);
  --surface-border: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-sky-blue-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-navy-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-navy-blue-mid);
}

.surface-hero-lime-green-low {
  --surface-bg: var(--wp--preset--color--hero-lime-green-low);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-orange-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-lime-green-full);
  --surface-border-highlight: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-lime-green-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-lime-green-mid);
}

.surface-hero-orange-low {
  --surface-bg: var(--wp--preset--color--hero-orange-low);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-lime-green-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-orange-full);
  --surface-border-highlight: var(--wp--preset--color--hero-orange-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-orange-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-orange-mid);
}

.surface-hero-sky-blue-low {
  --surface-bg: var(--wp--preset--color--hero-sky-blue-low);
  --surface-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-heading: var(--wp--preset--color--hero-navy-blue-full);
  --surface-button-bg: var(--wp--preset--color--hero-orange-full);
  --surface-button-text: var(--wp--preset--color--hero-navy-blue-full);
  --surface-border: var(--wp--preset--color--hero-sky-blue-full);
  --surface-border-highlight: var(--wp--preset--color--hero-sky-blue-full);
  --surface-button-hover-bg: var(--wp--preset--color--hero-sky-blue-low);
  --surface-card-hover-bg: var(--wp--preset--color--hero-sky-blue-mid);
}

/* ===========================
   Surface System (Apply Variables)
   =========================== */

/* Apply background and main text color to all surfaces */
[class*="surface-"] {
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

/* Headings inside any surface */
[class*="surface-"] h1,
[class*="surface-"] h2,
[class*="surface-"] h3,
[class*="surface-"] h4,
[class*="surface-"] h5,
[class*="surface-"] h6 {
  color: var(--surface-heading);
}

/* Buttons inside any surface */
[class*="surface-"] .wp-block-button__link,
[class*="surface-"] button,
[class*="surface-"] .button {
  background-color: var(--surface-button-bg);
  color: var(--surface-button-text);
  border: none; /* Optional: remove default border */
  border-radius: 30px;
  padding: 17px 30px;
  min-width: 220px;
  text-align: center;
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1.263em;
}

/* Optional: link hover states for buttons */
[class*="surface-"] .wp-block-button__link:hover,
[class*="surface-"] button:not(.accordion-item-button):hover,
[class*="surface-"] .button:hover,
[class*="surface-"] a:hover .button{
  opacity: 1;
  background-color: var(--surface-button-hover-bg);
}
[class*="surface-"].has-border{
  border-color: var(--surface-border-highlight);
}

/* Inverted buttons inside surface */
[class*="surface-"] button.accordion-item-button{
  background-color: var(--wp--preset--color--neutral-white-full);
  color: var(--wp--preset--color--hero-navy-blue-full);
  border-radius: 10px;
  padding: 18px 70px 18px 30px;
  text-align: left;
  font-weight: 700!important;
  font-size: 1.125em;
  line-height: 1.25em;
  border: 0;
}