:root {
   /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
   --primary: #4B6C32;
   --primaryLight: #F2F7EB;
   --primaryDarker: #3E5A28;
   --primaryLightHover: #E6EFE0;
   --textOnPrimaryLight: #555555;

   --secondary: #246476;
   --textOnSecondary: #FFFFFF;
   --secondaryLight: #ABDCEA;
   --secondaryDarker: #406D79;
   --secondaryLightHover: #699FAE;
   --textOnSecondaryLight: #555555;

   --secondaryGreen: #7DAD41;
   --secondaryOrange: #F47E52;
   --secondaryDarkBlue: #246476;
   --secondaryYellow: #F3BC4A;
   --secondaryYellowDarker: #E0AC3F;
   --secondaryYellowLight: #F9E0A7;
   --secondaryYellowLightHover: #F6D68E;
   --secondaryBrown: #B27B56;
   --secondaryBlue: #1CB2AA;

   --secondaryGreenOpacity: #edf5e6;
   --secondaryOrangeOpacity: #ffeee9;
   --secondaryDarkBlueOpacity: #ddedef;
   --secondaryYellowOpacity: #fff7e8;
   --secondaryBrownOpacity: #f9f6f2;
   --secondaryBlueOpacity: #def5f4;

   --white: #FFFFFF;
   --gray: #A0A0A0;
   --lightGray: #EEEEEE;

   --green: #9EC26F;
   --greenDarker: #8BB560;
   --greenBackground: #EBF2E1;

   --yellow: #F7CD79;
   --yellowDarker: #EABB64;
   --textOnYellow: #555555;
   --yellowBackground: #FDF4E3;

   --blue: #58C5BF;
   --blueDarker: #48B4AE;
   --blueBackground: #DCF2F1;

   --orange: #FA9F7D;
   --orangeDarker: #F88E67;
   --orangeBackground: #FDEAE3;

   --darkBlue: #5A8B99;
   --darkBlueBorder: #406874;
   --darkBlueDarker: #4A7B8A;
   --darkBlueBackground: #DCE6E9;

   --brown: #C69E83;
   --brownDarker: #B28B6F;
   --brownBackground: #F6F1ED;

   --dangerRed: #dc3545;
   --dangerRedDarker: #c82333;
   --dangerRedBorder: #bd2130;
   --textOnDangerRed: var(--white);

   --accentPurple: #6f42c1;
   --accentPurpleDarker: #5a32a3;
   --accentPurpleBorder: #542c94;
   --textOnAccentPurple: var(--white);

   --buttonBorderRadius: 0.5rem;
   --buttonPaddingY: 0.5rem;
   --buttonPaddingX: 1rem;
   --buttonTransition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

   /* RGB value for new --primary for focus shadow */
   --primary-rgb-value: 75, 108, 50;

   /* 13px - 16px */
   --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
   /* 31px - 49px */
   --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
   --bodyFontSize: 1rem;
   /* 60px - 100px top and bottom */
   --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

.bg-primary {
   background-color: var(--primary) !important;
}

.text-primary {
   color: var(--primary) !important;
}

.border-primary {
   border-color: var(--primary) !important;
}

.bg-primaryLight {
   background-color: var(--primaryLight) !important;
}

.text-primaryLight {
   color: var(--textOnPrimaryLight) !important;
}

.border-primaryLight {
   border-color: var(--gray) !important;
}

.bg-secondary {
   background-color: var(--secondary) !important;
}

.text-secondary {
   color: var(--darkBlue) !important;
}

.border-secondary {
   border-color: var(--gray) !important;
}

.bg-secondaryLight {
   background-color: var(--secondaryLight) !important;
}

.text-secondaryLight {
   color: var(--darkBlue) !important;
}

.border-secondaryLight {
   border-color: var(--gray) !important;
}

.bg-secondaryGreen {
   background-color: var(--secondaryGreen) !important;
}

.text-secondaryGreen {
   color: var(--white) !important;
}

.border-secondaryGreen {
   border-color: var(--green) !important;
}

.bg-secondaryOrange {
   background-color: var(--secondaryOrange) !important;
}

.text-secondaryOrange {
   color: var(--white) !important;
}

.border-secondaryOrange {
   border-color: var(--orange) !important;
}

.bg-secondaryDarkBlue {
   background-color: var(--secondaryDarkBlue) !important;
}

.text-secondaryDarkBlue {
   color: var(--white) !important;
}

.border-secondaryDarkBlue {
   border-color: var(--darkBlueBorder) !important;
}

.bg-secondaryYellow {
   background-color: var(--secondaryYellow) !important;
}

.text-secondaryYellow {
   color: var(--white) !important;
}

.border-secondaryYellow {
   border-color: var(--yellow) !important;
}

.bg-secondaryBrown {
   background-color: var(--secondaryBrown) !important;
}

.text-secondaryBrown {
   color: var(--white) !important;
}

.border-secondaryBrown {
   border-color: var(--brown) !important;
}

.bg-secondaryBlue {
   background-color: var(--secondaryBlue) !important;
}

.text-secondaryBlue {
   color: var(--white) !important;
}

.border-secondaryBlue {
   border-color: var(--blue) !important;
}

.bg-secondaryGreenOpacity {
   background-color: var(--secondaryGreenOpacity) !important;
}

.text-secondaryGreenOpacity {
   color: var(--primary) !important;
}

.border-secondaryGreenOpacity {
   border-color: var(--green) !important;
}

.bg-secondaryOrangeOpacity {
   background-color: var(--secondaryOrangeOpacity) !important;
}

.text-secondaryOrangeOpacity {
   color: var(--secondaryOrange) !important;
}

.border-secondaryOrangeOpacity {
   border-color: var(--orange) !important;
}

.bg-secondaryDarkBlueOpacity {
   background-color: var(--secondaryDarkBlueOpacity) !important;
}

.text-secondaryDarkBlueOpacity {
   color: var(--secondaryDarkBlue) !important;
}

.border-secondaryDarkBlueOpacity {
   border-color: var(--darkBlueBorder) !important;
}

.bg-secondaryYellowOpacity {
   background-color: var(--secondaryYellowOpacity) !important;
}

.text-secondaryYellowOpacity {
   color: var(--secondaryYellow) !important;
}

.border-secondaryYellowOpacity {
   border-color: var(--yellow) !important;
}

.bg-secondaryBrownOpacity {
   background-color: var(--secondaryBrownOpacity) !important;
}

.text-secondaryBrownOpacity {
   color: var(--secondaryBrown) !important;
}

.border-secondaryBrownOpacity {
   border-color: var(--brown) !important;
}

.bg-secondaryBlueOpacity {
   background-color: var(--secondaryBlueOpacity) !important;
}

.text-secondaryBlueOpacity {
   color: var(--secondaryBlue) !important;
}

.border-secondaryBlueOpacity {
   border-color: var(--blue) !important;
}

.bg-white {
   background-color: var(--white) !important;
}

.text-white {
   color: var(--darkBlue) !important;
}

.border-white {
   border-color: var(--gray) !important;
}

.bg-gray {
   background-color: var(--gray) !important;
}

.text-gray {
   color: var(--white) !important;
}

.border-gray {
   border-color: var(--darkBlueBorder) !important;
}

.bg-lightGray {
   background-color: var(--lightGray) !important;
}

.text-lightGray {
   color: var(--darkBlue) !important;
}

.border-lightGray {
   border-color: var(--gray) !important;
}

.bg-green {
   background-color: var(--green) !important;
}

.text-green {
   color: var(--white) !important;
}

.border-green {
   border-color: var(--primary) !important;
}

.bg-yellow {
   background-color: var(--yellow) !important;
}

.text-yellow {
   color: var(--darkBlue) !important;
}

.border-yellow {
   border-color: var(--yellow) !important;
}

.bg-blue {
   background-color: var(--blue) !important;
}

.text-blue {
   color: var(--white) !important;
}

.border-blue {
   border-color: var(--darkBlue) !important;
}

.bg-orange {
   background-color: var(--orange) !important;
}

.text-orange {
   color: var(--white) !important;
}

.border-orange {
   border-color: var(--orange) !important;
}

.bg-darkBlue {
   background-color: var(--darkBlue) !important;
}

.text-darkBlue {
   color: var(--white) !important;
}

.border-darkBlue {
   border-color: var(--darkBlueBorder) !important;
}

.bg-brown {
   background-color: var(--brown) !important;
}

.text-brown {
   color: var(--white) !important;
}

.border-brown {
   border-color: var(--brown) !important;
}

.bg-greenBackground {
   background-color: var(--greenBackground) !important;
}

.text-greenBackground {
   color: var(--primary) !important;
}

.border-greenBackground {
   border-color: var(--green) !important;
}

.bg-yellowBackground {
   background-color: var(--yellow) !important;
}

.text-yellowBackground {
   color: var(--darkBlue) !important;
}

.border-yellowBackground {
   border-color: var(--yellow) !important;
}

.bg-blueBackground {
   background-color: var(--blueBackground) !important;
}

.text-blueBackground {
   color: var(--blue) !important;
}

.border-blueBackground {
   border-color: var(--blue) !important;
}

.bg-orangeBackground {
   background-color: var(--orangeBackground) !important;
}

.text-orangeBackground {
   color: var(--orange) !important;
}

.border-orangeBackground {
   border-color: var(--orange) !important;
}

.bg-darkBlueBackground {
   background-color: var(--darkBlueBackground) !important;
}

.text-darkBlueBackground {
   color: var(--darkBlue) !important;
}

.border-darkBlueBackground {
   border-color: var(--darkBlueBorder) !important;
}

.bg-brownBackground {
   background-color: var(--brownBackground) !important;
}

.text-brownBackground {
   color: var(--brown) !important;
}

.border-brownBackground {
   border-color: var(--brown) !important;
}



.bg-preset-primary {
   background-color: var(--primary) !important;
   color: var(--white) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-primaryLight {
   background-color: var(--primaryLight) !important;
   color: var(--textOnPrimaryLight) !important;
   border-color: var(--gray) !important;
}

.bg-preset-secondary {
   background-color: var(--secondary) !important;
   color: var(--darkBlue) !important;
   border-color: var(--gray) !important;
}

.bg-preset-secondaryLight {
   background-color: var(--secondaryLight) !important;
   color: var(--darkBlue) !important;
   border-color: var(--gray) !important;
}

.bg-preset-secondaryGreen {
   background-color: var(--secondaryGreen) !important;
   color: var(--white) !important;
   border-color: var(--green) !important;
}

.bg-preset-secondaryOrange {
   background-color: var(--secondaryOrange) !important;
   color: var(--white) !important;
   border-color: var(--orange) !important;
}

.bg-preset-secondaryDarkBlue {
   background-color: var(--secondaryDarkBlue) !important;
   color: var(--white) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-secondaryYellow {
   background-color: var(--secondaryYellow) !important;
   color: var(--white) !important;
   border-color: var(--yellow) !important;
}

.bg-preset-secondaryBrown {
   background-color: var(--secondaryBrown) !important;
   color: var(--white) !important;
   border-color: var(--brown) !important;
}

.bg-preset-secondaryBlue {
   background-color: var(--secondaryBlue) !important;
   color: var(--white) !important;
   border-color: var(--blue) !important;
}

.bg-preset-secondaryGreenOpacity {
   background-color: var(--secondaryGreenOpacity) !important;
   color: var(--primary) !important;
   border-color: var(--green) !important;
}

.bg-preset-secondaryOrangeOpacity {
   background-color: var(--secondaryOrangeOpacity) !important;
   color: var(--secondaryOrange) !important;
   border-color: var(--orange) !important;
}

.bg-preset-secondaryDarkBlueOpacity {
   background-color: var(--secondaryDarkBlueOpacity) !important;
   color: var(--secondaryDarkBlue) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-secondaryYellowOpacity {
   background-color: var(--secondaryYellowOpacity) !important;
   color: var(--secondaryYellow) !important;
   border-color: var(--yellow) !important;
}

.bg-preset-secondaryBrownOpacity {
   background-color: var(--secondaryBrownOpacity) !important;
   color: var(--secondaryBrown) !important;
   border-color: var(--brown) !important;
}

.bg-preset-secondaryBlueOpacity {
   background-color: var(--secondaryBlueOpacity) !important;
   color: var(--secondaryBlue) !important;
   border-color: var(--blue) !important;
}

.bg-preset-white {
   background-color: var(--white) !important;
   color: var(--darkBlue) !important;
   border-color: var(--gray) !important;
}

.bg-preset-gray {
   background-color: var(--gray) !important;
   color: var(--white) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-lightGray {
   background-color: var(--lightGray) !important;
   color: var(--darkBlue) !important;
   border-color: var(--gray) !important;
}

.bg-preset-green {
   background-color: var(--green) !important;
   color: var(--white) !important;
   border-color: var(--primary) !important;
}

.bg-preset-yellow {
   background-color: var(--yellow) !important;
   color: var(--darkBlue) !important;
   border-color: var(--yellow) !important;
}

.bg-preset-blue {
   background-color: var(--blue) !important;
   color: var(--white) !important;
   border-color: var(--darkBlue) !important;
}

.bg-preset-orange {
   background-color: var(--orange) !important;
   color: var(--white) !important;
   border-color: var(--orange) !important;
}

.bg-preset-darkBlue {
   background-color: var(--darkBlue) !important;
   color: var(--white) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-brown {
   background-color: var(--brown) !important;
   color: var(--white) !important;
   border-color: var(--brown) !important;
}

.bg-preset-greenBackground {
   background-color: var(--greenBackground) !important;
   color: var(--primary) !important;
   border-color: var(--green) !important;
}

.bg-preset-yellowBackground {
   background-color: var(--yellow) !important;
   color: var(--darkBlue) !important;
   border-color: var(--yellow) !important;
}

.bg-preset-blueBackground {
   background-color: var(--blueBackground) !important;
   color: var(--blue) !important;
   border-color: var(--blue) !important;
}

.bg-preset-orangeBackground {
   background-color: var(--orangeBackground) !important;
   color: var(--orange) !important;
   border-color: var(--orange) !important;
}

.bg-preset-darkBlueBackground {
   background-color: var(--darkBlueBackground) !important;
   color: var(--darkBlue) !important;
   border-color: var(--darkBlueBorder) !important;
}

.bg-preset-brownBackground {
   background-color: var(--brownBackground) !important;
   color: var(--brown) !important;
   border-color: var(--brown) !important;
}

/* Base Button Style */
.btn {
   display: inline-block;
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
   padding: var(--buttonPaddingY) var(--buttonPaddingX);
   font-size: 0.95rem;
   border-radius: var(--buttonBorderRadius);
   transition: var(--buttonTransition);
}

.btn:hover {
   text-decoration: none;
}

.btn:focus,
.btn.focus {
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb-value), 0.35);
}

.btn:disabled,
.btn.disabled {
   opacity: 0.65;
   pointer-events: none;
}

/* Primary Action Buttons (Solid Background) */
.btn-primary-primary {
   background-color: var(--primary) !important;
   color: var(--white) !important;
   border-color: var(--primary) !important;
}

.btn-primary-primary:hover {
   background-color: var(--primaryDarker) !important;
   border-color: var(--primaryDarker) !important;
}

.btn-primary-primaryLight {
   background-color: var(--primaryLight) !important;
   color: var(--textOnPrimaryLight) !important;
   border-color: var(--primaryLight) !important;
}

.btn-primary-primaryLight:hover {
   background-color: var(--primaryLightHover) !important;
   border-color: var(--primaryLightHover) !important;
}

.btn-primary-secondary {
   background-color: var(--secondary) !important;
   color: var(--textOnSecondary) !important;
   border-color: var(--secondary) !important;
}

.btn-primary-secondary:hover {
   background-color: var(--secondaryDarker) !important;
   border-color: var(--secondaryDarker) !important;
}

.btn-primary-secondaryLight {
   background-color: var(--secondaryLight) !important;
   color: var(--textOnSecondaryLight) !important;
   border-color: var(--secondaryLight) !important;
}

.btn-primary-secondaryLight:hover {
   background-color: var(--secondaryLightHover) !important;
   border-color: var(--secondaryLightHover) !important;
}

.btn-primary-green {
   background-color: var(--green) !important;
   color: var(--white) !important;
   border-color: var(--green) !important;
}

.btn-primary-green:hover {
   background-color: var(--greenDarker) !important;
   border-color: var(--greenDarker) !important;
}

.btn-primary-orange {
   background-color: var(--orange) !important;
   color: var(--white) !important;
   border-color: var(--orange) !important;
}

.btn-primary-orange:hover {
   background-color: var(--orangeDarker) !important;
   border-color: var(--orangeDarker) !important;
}

.btn-primary-darkBlue {
   background-color: var(--darkBlue) !important;
   color: var(--white) !important;
   border-color: var(--darkBlueBorder) !important;
}

.btn-primary-darkBlue:hover {
   background-color: var(--darkBlueDarker) !important;
   border-color: var(--darkBlueBorder) !important;
   /* Or darkBlueDarker */
}

.btn-primary-yellow {
   /* Generic Yellow button */
   background-color: var(--yellow) !important;
   color: var(--textOnYellow) !important;
   border-color: var(--yellow) !important;
}

.btn-primary-yellow:hover {
   background-color: var(--yellowDarker) !important;
   border-color: var(--yellowDarker) !important;
}

.btn-primary-yellowDarker {
   /* Generic Yellow button */
   background-color: var(--yellowDarker) !important;
   color: var(--white) !important;
   border-color: var(--yellowDarker) !important;
}

.btn-primary-yellowDarker:hover {
   background-color: var(--yellow) !important;
   color: var(--textOnYellow) !important;
   border-color: var(--yellow) !important;
}

.btn-primary-brown {
   background-color: var(--brown) !important;
   color: var(--white) !important;
   border-color: var(--brown) !important;
}

.btn-primary-brown:hover {
   background-color: var(--brownDarker) !important;
   border-color: var(--brownDarker) !important;
}

.btn-primary-blue {
   /* Info Blue button */
   background-color: var(--blue) !important;
   color: var(--white) !important;
   border-color: var(--blue) !important;
}

.btn-primary-blue:hover {
   background-color: var(--blueDarker) !important;
   border-color: var(--blueDarker) !important;
}

.btn-primary-danger {
   background-color: var(--dangerRed) !important;
   color: var(--textOnDangerRed) !important;
   border-color: var(--dangerRedBorder) !important;
}

.btn-primary-danger:hover {
   background-color: var(--dangerRedDarker) !important;
   border-color: var(--dangerRedDarker) !important;
}

.btn-primary-accent {
   background-color: var(--accentPurple) !important;
   color: var(--textOnAccentPurple) !important;
   border-color: var(--accentPurpleBorder) !important;
}

.btn-primary-accent:hover {
   background-color: var(--accentPurpleDarker) !important;
   border-color: var(--accentPurpleDarker) !important;
}

/* Secondary Action Buttons (Outline/Light Background) */
.btn-secondary-primary {
   background-color: transparent !important;
   color: var(--primary) !important;
   border-color: var(--primary) !important;
}

.btn-secondary-primary:hover {
   background-color: var(--primary) !important;
   color: var(--white) !important;
}

.btn-secondary-primaryLight {
   background-color: transparent !important;
   color: var(--primary) !important;
   /* Using primary color for text for better contrast on transparent with primaryLight border */
   border-color: var(--primaryLight) !important;
}

.btn-secondary-primaryLight:hover {
   background-color: var(--primaryLight) !important;
   color: var(--textOnPrimaryLight) !important;
}

/* "Secondary Theme" outline button now uses --secondaryYellow */
.btn-secondary-secondary {
   background-color: transparent !important;
   color: var(--secondaryYellow) !important;
   border-color: var(--secondaryYellow) !important;
}

.btn-secondary-secondary:hover {
   background-color: var(--secondaryYellow) !important;
   color: var(--textOnYellow) !important;
}

.btn-secondary-green {
   background-color: transparent !important;
   color: var(--green) !important;
   border-color: var(--green) !important;
}

.btn-secondary-green:hover {
   background-color: var(--green) !important;
   color: var(--white) !important;
}

.btn-secondary-orange {
   background-color: transparent !important;
   color: var(--orange) !important;
   border-color: var(--orange) !important;
}

.btn-secondary-orange:hover {
   background-color: var(--orange) !important;
   color: var(--white) !important;
}

.btn-secondary-darkBlue {
   background-color: transparent !important;
   color: var(--darkBlue) !important;
   border-color: var(--darkBlue) !important;
}

.btn-secondary-darkBlue:hover {
   background-color: var(--darkBlue) !important;
   color: var(--white) !important;
}

.btn-secondary-yellow {
   /* Generic Yellow outline button */
   background-color: transparent !important;
   color: var(--yellow) !important;
   border-color: var(--yellow) !important;
}

.btn-secondary-yellow:hover {
   background-color: var(--yellow) !important;
   color: var(--textOnYellow) !important;
}

.btn-secondary-yellowDarker {
   /* Generic Yellow outline button */
   background-color: transparent !important;
   border-color: var(--yellowDarker) !important;
   color: var(--yellowDarker) !important;
}

.btn-secondary-yellowDarker:hover {
   background-color: var(--yellow) !important;
   color: var(--textOnYellow) !important;
   border-color: var(--yellow) !important;
}

.btn-secondary-brown {
   background-color: transparent !important;
   color: var(--brown) !important;
   border-color: var(--brown) !important;
}

.btn-secondary-brown:hover {
   background-color: var(--brown) !important;
   color: var(--white) !important;
}

.btn-secondary-blue {
   /* Info Blue outline button */
   background-color: transparent !important;
   color: var(--blue) !important;
   border-color: var(--blue) !important;
}

.btn-secondary-blue:hover {
   background-color: var(--blue) !important;
   color: var(--white) !important;
}

.btn-secondary-danger {
   background-color: white !important;
   color: var(--dangerRed) !important;
   border-color: var(--dangerRed) !important;
}

.btn-secondary-danger:hover {
   background-color: var(--dangerRed) !important;
   color: var(--textOnDangerRed) !important;
}

.btn-secondary-accent {
   background-color: transparent !important;
   color: var(--accentPurple) !important;
   border-color: var(--accentPurple) !important;
}

.btn-secondary-accent:hover {
   background-color: var(--accentPurple) !important;
   color: var(--textOnAccentPurple) !important;
}

.btn-error {
   background: var(--dangerRed);
}
.btn-success {
   background: var(--greenDarker);
}
.btn-warning {
   background: var(--yellowDarker);
}
.btn-info {
   background: var(--blueDarker);
}

/* Secondary buttons with explicit light background */
.btn-secondary.has-light-bg {
   background-color: var(--lightGray) !important;
}

/* Secondary buttons with explicit border */
.btn-has-border {
   border: 1px solid !important;
}

.btn-has-border:hover {
   border: none;
}

/* Hover states for has-light-bg would be the same as transparent ones, just starting from lightGray */
.btn-secondary-primary.has-light-bg:hover {
   background-color: var(--primary) !important;
   color: var(--white) !important;
}

.btn-secondary-green.has-light-bg:hover {
   background-color: var(--green) !important;
   color: var(--white) !important;
}

.btn-secondary-danger.has-light-bg:hover {
   background-color: var(--dangerRed) !important;
   color: var(--textOnDangerRed) !important;
}

.btn-secondary-accent.has-light-bg:hover {
   background-color: var(--accentPurple) !important;
   color: var(--textOnAccentPurple) !important;
}

.btn-secondary-blue.has-light-bg:hover {
   background-color: var(--blue) !important;
   color: var(--white) !important;
}