/*
Theme Name: Website Tech for Small Businesses 2025
Theme URI: https://website-tech.glerner.com
Author: AZ WP Website Consulting LLC
Author URI: https://website-tech.glerner.com
Description: Website Tech is a Twenty Twenty-Four child
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.08
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: website-tech
Template: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

/* heading font Andika https://gwfh.mranftl.com/fonts/andika?subsets=latin Google Font with subset and converted to woff2 */


/* Font Variables set in theme.json (at least in some themes) */
/* Preset variables are owned by WordPress.
--wp--preset--color--<slug> are generated from settings.color.palette in the active theme.json or style variation.
Overwriting them in CSS de-syncs Global Styles, user styles, and variations. Avoid doing so.
Declare every palette slug you need in theme.json
Child themes and style variations should not rely on the parent’s palette; repeat the slugs you use.
You may set each palette color to:
- a hex color, or
- an alias variable via var(--my-alias) if you prefer indirection.
*/
/* WordPress core/parent theme compatibility variables.
   Uses Color Palette Generator variables with hex fallbacks for themes without them. */
:root,
:root .editor-styles-wrapper,
.edit-site-global-styles-variations_item-preview,
.edit-site-global-styles-variations_item {
  --base: var(--text-on-dark, #f9f9f9);
  --base-2: #ffffff;
  --contrast: var(--text-on-light, #111111);
  --contrast-2: #636363;
  --contrast-3: #A4A4A4;
  --accent: #cfcabe;
  --accent-2: #c2a990;
  --accent-3: #d8613c;
  --accent-4: #b1c5a4;
  --accent-5: #b5bdbc;
}

/* Close WordPress variables set in theme.json */


:root {
  /* Hint to browsers that both color schemes are supported */
  color-scheme: light dark;
}

/* Manual overrides driven by your JS light-dark toggle */
html[data-color-scheme="light"] {
  color-scheme: light;
}

html[data-color-scheme="dark"] {
  color-scheme: dark;
}

/* these are *not* WordPress presets, safe to copy to your style.css as needed */
:root,
.editor-styles-wrapper,
.edit-site-global-styles-variations_item-preview {
  /* Compatibility mappings for parent themes expecting preset color slugs */
  /* These only apply when copied into your theme's style.css */
  --wp--custom--button--background-hover: var(--accent-light);
  --wp--custom--button--text-hover: var(--text-on-light);
  --wp--custom--form-input--color: var(--text-on-light, black);
  --wp--custom--form-input--background: var(--text-on-dark, white);
  /* Background convenience aliases */
  --bg-primary: var(--primary-dark);
  --bg-secondary: var(--secondary-dark);
  --bg-tertiary: var(--tertiary-dark);
  --bg-accent: var(--accent-dark);
  --cf-title: var(--primary-lighter);
  /* Border and radius aliases (used by various plugins) */
  --wp--preset--color--border: var(--tertiary-dark);
  --wp--custom--border-radius--small: 5px;
}


/* WordPress gives all .has-* class colors !important, so !important is required to override. */

/* Page Background Colors (Mode: primary-tinted) */
.bg-base, .has-base-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: #00c100 !important;
  color: var(--text-on-dark) !important;
}


.bg-primary-lighter, .has-primary-lighter-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--primary-lighter) !important;
  color: var(--text-on-light) !important;
}

.bg-primary-light, .has-primary-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--primary-light) !important;
  color: var(--text-on-light) !important;
}

.bg-primary-dark, .has-primary-dark-background-color, .has-primary-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--primary-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-primary-darker, .has-primary-darker-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--primary-darker) !important;
  color: var(--text-on-dark) !important;
}

.bg-secondary-lighter, .has-secondary-lighter-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--secondary-lighter) !important;
  color: var(--text-on-light) !important;
}

.bg-secondary-light, .has-secondary-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--secondary-light) !important;
  color: var(--text-on-light) !important;
}

.bg-secondary-dark, .has-secondary-dark-background-color, .has-secondary-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--secondary-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-secondary-darker, .has-secondary-darker-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--secondary-darker) !important;
  color: var(--text-on-dark) !important;
}

.bg-tertiary-lighter, .has-tertiary-lighter-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--tertiary-lighter) !important;
  color: var(--text-on-light) !important;
}

.bg-tertiary-light, .has-tertiary-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--tertiary-light) !important;
  color: var(--text-on-light) !important;
}

.bg-tertiary-dark, .has-tertiary-dark-background-color, .has-tertiary-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--tertiary-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-tertiary-darker, .has-tertiary-darker-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--tertiary-darker) !important;
  color: var(--text-on-dark) !important;
}

.bg-accent-lighter, .has-accent-lighter-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--accent-lighter) !important;
  color: var(--text-on-light) !important;
}

.bg-accent-light, .has-accent-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--accent-light) !important;
  color: var(--text-on-light) !important;
}

.bg-accent-dark, .has-accent-dark-background-color, .has-accent-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--accent-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-accent-darker, .has-accent-darker-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--accent-darker) !important;
  color: var(--text-on-dark) !important;
}

.bg-error, .bg-error-light, .has-error-background-color, .has-error-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--error-light) !important;
  color: var(--text-on-light) !important;
}

.bg-error-dark, .has-error-dark-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--error-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-notice, .bg-notice-light, .has-notice-background-color, .has-notice-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--notice-light) !important;
  color: var(--text-on-light) !important;
}

.bg-notice-dark, .has-notice-dark-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--notice-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-success, .bg-success-light, .has-success-background-color, .has-success-light-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--success-light) !important;
  color: var(--text-on-light) !important;
}

.bg-success-dark, .has-success-dark-background-color {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--success-dark) !important;
  color: var(--text-on-dark) !important;
}

/* Utility classes for text colors only */
.text-primary-lighter {
  /* Fallback for browsers without light-dark(): */
  color: var(--primary-lighter);
}

.text-primary-light {
  /* Fallback for browsers without light-dark(): */
  color: var(--primary-light);
}

.text-primary-dark {
  /* Fallback for browsers without light-dark(): */
  color: var(--primary-dark);
}

.text-primary-darker {
  /* Fallback for browsers without light-dark(): */
  color: var(--primary-darker);
}

.text-secondary-lighter {
  /* Fallback for browsers without light-dark(): */
  color: var(--secondary-lighter);
}

.text-secondary-light {
  /* Fallback for browsers without light-dark(): */
  color: var(--secondary-light);
}

.text-secondary-dark {
  /* Fallback for browsers without light-dark(): */
  color: var(--secondary-dark);
}

.text-secondary-darker {
  /* Fallback for browsers without light-dark(): */
  color: var(--secondary-darker);
}

.text-tertiary-lighter {
  /* Fallback for browsers without light-dark(): */
  color: var(--tertiary-lighter);
}

.text-tertiary-light {
  /* Fallback for browsers without light-dark(): */
  color: var(--tertiary-light);
}

.text-tertiary-dark {
  /* Fallback for browsers without light-dark(): */
  color: var(--tertiary-dark);
}

.text-tertiary-darker {
  /* Fallback for browsers without light-dark(): */
  color: var(--tertiary-darker);
}

.text-accent-lighter {
  /* Fallback for browsers without light-dark(): */
  color: var(--accent-lighter);
}

.text-accent-light {
  /* Fallback for browsers without light-dark(): */
  color: var(--accent-light);
}

.text-accent-dark {
  /* Fallback for browsers without light-dark(): */
  color: var(--accent-dark);
}

.text-accent-darker {
  /* Fallback for browsers without light-dark(): */
  color: var(--accent-darker);
}

.text-error {
  /* Fallback for browsers without light-dark(): */
  color: var(--error-dark);
}

.text-notice {
  /* Fallback for browsers without light-dark(): */
  color: var(--notice-dark);
}

.text-success {
  /* Fallback for browsers without light-dark(): */
  color: var(--success-dark);
}

/* Modern color scheme aware styles - grouped after fallback styles to prevent CSS parsing issues */
/* Page Background Colors (Mode: primary-tinted) - Modern Version */
@supports (color: light-dark(black, white)) {
  .bg-base, .has-base-background-color {
    background-color: light-dark(#00c100, #002f00) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-primary-lighter, .has-primary-lighter-background-color {
    background-color: light-dark(var(--primary-lighter), var(--primary-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-primary-light, .has-primary-light-background-color {
    background-color: light-dark(var(--primary-light), var(--primary-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-primary-dark, .has-primary-dark-background-color, .has-primary-background-color {
    background-color: light-dark(var(--primary-dark), var(--primary-light)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-primary-darker, .has-primary-darker-background-color {
    background-color: light-dark(var(--primary-darker), var(--primary-lighter)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-secondary-lighter, .has-secondary-lighter-background-color {
    background-color: light-dark(var(--secondary-lighter), var(--secondary-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-secondary-light, .has-secondary-light-background-color {
    background-color: light-dark(var(--secondary-light), var(--secondary-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-secondary-dark, .has-secondary-dark-background-color, .has-secondary-background-color {
    background-color: light-dark(var(--secondary-dark), var(--secondary-light)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-secondary-darker, .has-secondary-darker-background-color {
    background-color: light-dark(var(--secondary-darker), var(--secondary-lighter)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-tertiary-lighter, .has-tertiary-lighter-background-color {
    background-color: light-dark(var(--tertiary-lighter), var(--tertiary-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-tertiary-light, .has-tertiary-light-background-color {
    background-color: light-dark(var(--tertiary-light), var(--tertiary-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-tertiary-dark, .has-tertiary-dark-background-color, .has-tertiary-background-color {
    background-color: light-dark(var(--tertiary-dark), var(--tertiary-light)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-tertiary-darker, .has-tertiary-darker-background-color {
    background-color: light-dark(var(--tertiary-darker), var(--tertiary-lighter)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-accent-lighter, .has-accent-lighter-background-color {
    background-color: light-dark(var(--accent-lighter), var(--accent-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-accent-light, .has-accent-light-background-color {
    background-color: light-dark(var(--accent-light), var(--accent-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-accent-dark, .has-accent-dark-background-color, .has-accent-background-color {
    background-color: light-dark(var(--accent-dark), var(--accent-light)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-accent-darker, .has-accent-darker-background-color {
    background-color: light-dark(var(--accent-darker), var(--accent-lighter)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-error, .bg-error-light, .has-error-background-color, .has-error-light-background-color {
    background-color: light-dark(var(--error-light), var(--error-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-error-dark, .has-error-dark-background-color {
    background-color: light-dark(var(--error-light), var(--error-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-notice, .bg-notice-light, .has-notice-background-color, .has-notice-light-background-color {
    background-color: light-dark(var(--notice-light), var(--notice-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-notice-dark, .has-notice-dark-background-color {
    background-color: light-dark(var(--notice-light), var(--notice-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-success, .bg-success-light, .has-success-background-color, .has-success-light-background-color {
    background-color: light-dark(var(--success-light), var(--success-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .bg-success-dark, .has-success-dark-background-color {
    background-color: light-dark(var(--success-light), var(--success-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

@supports (color: light-dark(black, white)) {
  .text-primary-lighter {
    color: light-dark(var(--primary-lighter), var(--primary-darker));
  }
}

@supports (color: light-dark(black, white)) {
  .text-primary-light {
    color: light-dark(var(--primary-light), var(--primary-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-primary-dark {
    color: light-dark(var(--primary-dark), var(--primary-light));
  }
}

@supports (color: light-dark(black, white)) {
  .text-primary-darker {
    color: light-dark(var(--primary-darker), var(--primary-lighter));
  }
}

@supports (color: light-dark(black, white)) {
  .text-secondary-lighter {
    color: light-dark(var(--secondary-lighter), var(--secondary-darker));
  }
}

@supports (color: light-dark(black, white)) {
  .text-secondary-light {
    color: light-dark(var(--secondary-light), var(--secondary-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-secondary-dark {
    color: light-dark(var(--secondary-dark), var(--secondary-light));
  }
}

@supports (color: light-dark(black, white)) {
  .text-secondary-darker {
    color: light-dark(var(--secondary-darker), var(--secondary-lighter));
  }
}

@supports (color: light-dark(black, white)) {
  .text-tertiary-lighter {
    color: light-dark(var(--tertiary-lighter), var(--tertiary-darker));
  }
}

@supports (color: light-dark(black, white)) {
  .text-tertiary-light {
    color: light-dark(var(--tertiary-light), var(--tertiary-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-tertiary-dark {
    color: light-dark(var(--tertiary-dark), var(--tertiary-light));
  }
}

@supports (color: light-dark(black, white)) {
  .text-tertiary-darker {
    color: light-dark(var(--tertiary-darker), var(--tertiary-lighter));
  }
}

@supports (color: light-dark(black, white)) {
  .text-accent-lighter {
    color: light-dark(var(--accent-lighter), var(--accent-darker));
  }
}

@supports (color: light-dark(black, white)) {
  .text-accent-light {
    color: light-dark(var(--accent-light), var(--accent-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-accent-dark {
    color: light-dark(var(--accent-dark), var(--accent-light));
  }
}

@supports (color: light-dark(black, white)) {
  .text-accent-darker {
    color: light-dark(var(--accent-darker), var(--accent-lighter));
  }
}

@supports (color: light-dark(black, white)) {
  .text-error {
    color: light-dark(var(--error-light), var(--error-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-notice {
    color: light-dark(var(--notice-light), var(--notice-dark));
  }
}

@supports (color: light-dark(black, white)) {
  .text-success {
    color: light-dark(var(--success-light), var(--success-dark));
  }
}

/* Light-Dark variables for gradients. Gradients can have variables, but can not have light-dark in them. */

:root {
--grad-ps-l1: var(--primary-lighter);
--grad-ps-l2: var(--secondary-lighter);
--grad-ps-d1: var(--primary-darker);
--grad-ps-d2: var(--secondary-darker);
--grad-pt-l1: var(--primary-lighter);
--grad-pt-l2: var(--tertiary-lighter);
--grad-pt-d1: var(--primary-darker);
--grad-pt-d2: var(--tertiary-darker);
--grad-st-l1: var(--secondary-lighter);
--grad-st-l2: var(--tertiary-lighter);
--grad-st-d1: var(--secondary-darker);
--grad-st-d2: var(--tertiary-darker);
}

@supports (color: light-dark(black, white)) {
:root {
--grad-ps-l1: light-dark(var(--primary-lighter), var(--primary-darker));
--grad-ps-l2: light-dark(var(--secondary-lighter), var(--secondary-darker));
--grad-pt-l1: light-dark(var(--primary-lighter), var(--primary-darker));
--grad-pt-l2: light-dark(var(--tertiary-lighter), var(--tertiary-darker));
--grad-st-l1: light-dark(var(--secondary-lighter), var(--secondary-darker));
--grad-st-l2: light-dark(var(--tertiary-lighter), var(--tertiary-darker));
--grad-ps-d1: light-dark(var(--primary-darker), var(--primary-lighter));
--grad-ps-d2: light-dark(var(--secondary-darker), var(--secondary-lighter));
--grad-pt-d1: light-dark(var(--primary-darker), var(--primary-lighter));
--grad-pt-d2: light-dark(var(--tertiary-darker), var(--tertiary-lighter));
--grad-st-d1: light-dark(var(--secondary-darker), var(--secondary-lighter));
--grad-st-d2: light-dark(var(--tertiary-darker), var(--tertiary-lighter));
}
}





/* END of Color Palette Generator styles */












/* Other Variables */

:root {
  --wp--custom--radius--medium: var(--wp--preset--font-size--small, 1em);
  --wp--custom--radius--large: calc(var(--wp--custom--radius--medium)*1.5);
  /*  --wp--style--global--content-size: defined in theme.json, Settings > Layout
    --wp--style--global--content-size: clamp(320px, 95vw, 1200px);
    --wp--style--global--wide-size: clamp(320px, 98vw, 1800px);
*/
  /*   --wp--style--root--padding-top: 0px;
  --wp--style--root--padding-right: var(--wp--preset--spacing--50);
  --wp--style--root--padding-bottom: 0px;
  --wp--style--root--padding-left: var(--wp--preset--spacing--50);
*/
}

.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {

  max-width: var(--wp--style--global--wide-size);
  margin-left: auto !important;
  margin-right: auto !important;
}


/*
 * - theme.json to Core Frameworks
 * When you import the theme.json blueprint for Bricks Builder, the following Core Framework variables are applied:
 *	- General:
 *	The website’s background color is set to var(--bg-body) (this is critical especially for dark mode).
 *	- Links:
 *	Link typography color uses the variable var(--primary).
 *	- Typography:
 *	Body text color is set to var(--text-body) and the font size to var(--text-m).
 *	For all headings, the color is set to var(--text-title).
 *	- Elements – Section:
 *	Padding is applied using the following variables for top, right, bottom, and left: var(--space-2xl), var(--space-m), var(--space-2xl), and var(--space-m) respectively.
 *	- Element – Container:
 *	The container width is defined by the variable var(--max-screen-width).
 *
 */


/* Screen Reader only
from https://equalizedigital.com/accessibility-checker/empty-link/ */
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 999999;
  padding: 0.75em 1.5em;
  background-color: var(--primary-dark);
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;

  @supports (color: light-dark(black, white)) {
    outline-color: light-dark(var(--accent-dark), var(--accent-light));
  }
}

/* Form field focus states */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 2px var(--primary-light);

  @supports (color: light-dark(black, white)) {
    border-color: light-dark(var(--primary-dark), var(--primary-light));
    box-shadow: 0 0 0 2px light-dark(var(--primary-light), var(--primary-dark));
  }
}

body {
  background-color: var(--text-on-dark);
  color: var(--text-on-light);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-light));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }

  font-family: var(--wp--preset--font-family--wide-sans-serif);
  font-size: var(--wp--preset--font-size--medium);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(1.4, 1.4 + 0.25vw, 1.8);
  /* Yes, this CSS is valid and will work in modern browsers.
line-height: clamp(1.4, 1.4 + 0.25vw, 1.8); is a correct use of the clamp() function for the line-height property.
Minimum (1.4): The line height will never be less than 1.4.
Preferred (1.4 + 0.25vw): The line height will scale fluidly based on the viewport width (vw). For example, on a 1000px wide screen, 0.25vw equals 2.5px, so the preferred value would be 1.4 + 0.025 (relative to the font size), resulting in a value around 1.425.
Maximum (1.8): The line height will never exceed 1.8.
*/
}

/* Heading background/color with light-dark() support.
   Other heading styles (font-family, weight, line-height, margins, padding) are in theme.json */
h1,
h2,
h3,
h4,
h5,
h6 {
  background-color: var(--wp--preset--color--primary-lighter, lightgreen);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--primary-lighter), var(--wp--preset--color--primary-darker));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

header p {
  /* for a light-mode dark header */
  color: light-dark(var(--text-on-dark), var(--text-on-light));
}

.wp-block-site-tagline, header p.wp-block-site-tagline {
  /* override global-styles-inline-css var(--wp--preset--color--contrast-2) */
  color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
}

/* size and background for site logo
 * theme.json styles > core/site-logo > elements > link > color > background
 */
.wp-block-site-logo img {
  height: auto;
  max-width: 125px;
  padding: 0;
}

img.custom-logo {
  background-color: var(--text-on-dark, lightgreen);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

/* Site Icon (logo displayed in Site Editor and in browser tab) */
img.edit-site-site-icon__image {
  background-color: var(--text-on-dark, lightgreen);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

.wp-block-site-logo a:hover {
  background-color: var(--text-on-dark, lightgreen);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }

  border-color:transparent;
}

/* Lists */
ul li,
ol li {

  margin-left: 1em;
}

/* Links - Base styles */
a,
a.wp-block-navigation-item__content,
a:where(:not(.wp-element-button)) {
  text-decoration: none;
  padding: 0 0.25em;
  border-style: dashed;
  border-width: 0.25em;
  border-color: transparent;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
  background-color: var(--text-on-dark) !important;
  color: var(--wp--preset--color--accent-dark) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
    color: light-dark(var(--wp--preset--color--accent-dark), var(--wp--preset--color--accent-light)) !important;
  }
}

/* Links - Hover state */
a:where(:not(.wp-element-button)):hover,
a.wp-block-navigation-item__content:hover {
  border-style: solid;
  border-color: var(--tertiary-dark);
  background-color: var(--wp--preset--color--accent-light) !important;
  color: var(--text-on-light) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-light), var(--wp--preset--color--accent-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
    border-color: light-dark(var(--tertiary-dark), var(--tertiary-light));
  }
}

/* Navigation links - override base colors */
.wp-block-navigation li.wp-block-navigation-item a.wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-dark);
  background-color: var(--text-on-dark);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--wp--preset--color--accent-dark), var(--wp--preset--color--accent-light));
    background-color: light-dark(var(--text-on-dark), var(--text-on-light));
  }
}

/* Site logo link - no border or decoration */
.wp-block-site-logo a {
  padding: 0.2em;
  border: none;
  text-decoration: none;
  margin: 2px;
}

/* Print link styles */
@media print {
  a:where(:not(.wp-element-button)) {
    padding: 0 0.25em;
    border: 0.2em solid transparent;
  }
}

/* headings in a Spectra container */
.wp-block-uagb-container h1,
.wp-block-uagb-container h2,
.wp-block-uagb-container h3,
.wp-block-uagb-container h4,
.wp-block-uagb-container h5,
.wp-block-uagb-container h6 {
  color: inherit;
  background-color: inherit;
  margin: 1em;
  padding: 1em;
  display: contents;
  /* otherwise it can display some outside the container */
}


.box {
  width: 200px;
  height: 200px;
  background-color: var(--wp--preset--color--tertiary-dark, lightgreen);
  color: var(--text-on-dark, black);
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  box-shadow: 5px 5px 10px var(--wp--preset--color--tertiary-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--tertiary-dark, black), var(--wp--preset--color--tertiary-dark, black));
    color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

.text {
  background-color: var(--text-on-dark, lightgreen);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark, white), var(--text-on-light, black));
    color: light-dark(var(--text-on-light, black), var(--text-on-dark, white));
  }

  font-size: 20px;
  font-weight: bold;
  text-align: center;
}


/* Menus */

.main_menu,
.gspb_container .wp-block-navigation__responsive-container a,
div[id^="gspb_container-id-gsbp"] a {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--accent-lighter) !important;
  color: var(--text-on-light) !important;

  @supports (color: light-dark(black, white)) {
    /* Modern color scheme aware version: */
    background-color: light-dark(var(--accent-lighter), var(--accent-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

.main_menu:hover,
button.wp-block-search .wp-block-search__button:hover,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-dark, black) !important;
  background-color: var(--text-on-dark, lightgreen) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-light), var(--wp--preset--color--accent-dark)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}

.wp-block-navigation a {
  background-color: var(--wp--preset--color--accent-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-dark), var(--wp--preset--color--accent-dark));
    color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

.wp-block-navigation a:hover {
  background-color: var(--wp--preset--color--accent-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-light), var(--wp--preset--color--accent-dark));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

header .wp-block-uagb-container:not(.uagb-layout-grid) .block-editor-inner-blocks .wp-block-navigation__container .wp-block.header-menu-item.wp-block-navigation-item header .wp-block-uagb-container:not(.uagb-layout-grid) .block-editor-inner-blocks .wp-block-navigation__container .wp-block.header-menu-item.wp-block-navigation-item {

  width: auto !important;
}


footer .has-tertiary-background-color * {

  background-color: var(--wp--preset--color--tertiary-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--tertiary-dark), var(--wp--preset--color--tertiary-light));
    color: light-dark(var(--text-on-dark), var(--text-on-light));
  }
}


/* <details> accordion - Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion | CSS-Tricks https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/
and improved https://codepen.io/thomashigginbotham/pen/aYqvqQ?editors=1100

<details>
  <summary>What's a Po' Boy?</summary>
  A po' boy (also po-boy, po boy) is a traditional sandwich from Louisiana. It almost always consists of meat, which is usually roast beef or fried seafood, often shrimp, crawfish, fish, oysters or crab.
</details>
*/

details {

  margin: 1rem;
}

summary {

  font-weight: bold;
  list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/right-arrow.svg);
}

details[open] summary {

  list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/down-arrow.svg);
}

summary::-webkit-details-marker {

  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/right-arrow.svg);
  color: var(--text-on-light);

  @supports (color: light-dark(black, white)) {
    color: light-dark(transparent, transparent);
  }
}

details[open] summary::-webkit-details-marker {

  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/down-arrow.svg);
}

/* Media and Text block */
.wp-block-media-text p {

  background-color: var(--primary-lighter);
  color: var(--text-on-light);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--primary-lighter), var(--primary-darker));
    color: light-dark(inherit, inherit);
  }
}


/* Image with Caption */
:root :where(.editor-styles-wrapper) :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption) {

  color: var(--text-on-light, black);
  background-color: var(--text-on-dark, lightgreen);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--text-on-light, black), var(--text-on-dark, white));
    background-color: light-dark(var(--text-on-dark), var(--text-on-light));
  }

  font-family: var(--wp--preset--font-family--gl-system-font);
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  border-bottom: double;
}

/* Greenshift admin panel items */
.editor-styles-wrapper .gspb-library-custom-variable-cards div {
  background-color: light-dark(var(--primary-lighter), var(--primary-darker));
  color: light-dark(var(--text-on-light), var(--text-on-dark));
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: var(--wp--preset--font-family--narrow-sans-serif);
  font-size: 12px;
  padding: 3px 8px;
}

.gspb_inspector_btn {
  background: light-dark(var(--text-on-dark), var(--text-on-light));
  color: light-dark(var(--accent-darker), var(--accent-lighter));
}

.editor-styles-wrapper .components-tab-panel__tabs,
div.components-panel__row.coreframework-utility-classes .components-tab-panel__tabs {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap !important;
  /* added so icons all show */
}

.editor-styles-wrapper .components-panel__body.is-opened {
  padding: 0.25em;
  /* default 16px too large, Greenshift "Local Styles" radio buttons
  gspb-field-button-list gspb-fluid-radio gspb_style_tabs_component gspb_attrs_tabs_component
  doesn't quite fit */
}

.editor-styles-wrapper .gspb-field-button-list {
  display: inline-flex;
  vertical-align: middle;
  flex-wrap: wrap;
}

.components-tab-panel__tabs {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.editor-styles-wrapper .gspb-field-radio-advanced .gspb_style_tabs_component .gspb-button {
  padding: 3px 6.5px;
}

.editor-styles-wrapper .gspb-field-radio-advanced .gspb_style_tabs_component.gspb_attrs_tabs_component .gspb-button {
  padding: 2px 0.5em;
  max-width: 1.5em;
}

.editor-styles-wrapper .gspb-field-radio-advanced .gspb_style_tabs_component i {
  font-size: 14px;
  height: auto;
  margin: 0
    /* !important */
  ;
  width: 1em;
  /* default "auto" doesn't work for flex wrapping, get one per line */
}

/* Heading with Number, Greenshift */
.wp-block-post-content h3.gspb_heading.gspb-selector-element a {

  padding: 0.25em;
  display: inline-block;
  /* else top padding and margin get cut off */
  /* font size want core framework text-l */
}

code {
  /* fix minimized code being on huge line */
  text-wrap-mode: wrap;
}

/* Syntax Highlighter */
.syntaxhighlighter table td.gutter {
  display: table-cell;
  /* or line numbers show as separate lines */
  width: min-content;
  /* might not be needed */
  max-width: fit-content;
  /* prevent wide line number table cells */
}

.wp-block-syntaxhighlighter-code tr {

  display: inline-table;
  /* prevent line numbers on their own lines, followed by code lines */
  /* or display: block, or inline-flex also work */
}


/* Login Form styling from https://developer.wordpress.org/news/2023/08/adding-and-using-custom-settings-in-theme-json/ */

input {

  font-family: var(--wp--preset--font-family--better-monospace);
  font-size: var(--wp--preset--font-size--medium);
}

.wp-block-search .wp-block-search__label, .wp-block-search .wp-block-search__input, .wp-block-search .wp-block-search__button,
input:where( :not([type=checkbox]):not([type=radio])),
select,
textarea {
  color: var(--wp--custom--form-input--color, black);
  background: var(--wp--custom--form-input--background, white);
  /* no light-dark */
  border: 2px solid;
  font-size: var(--wp--preset--font-size--small);
}

button.wp-block-search__button.wp-element-button {
  background-color: var(--wp--preset--color--accent-light, lightgreen);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-light), var(--wp--preset--color--accent-dark));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

button.wp-block-search__button.wp-element-button a:hover {
  background-color: var(--wp--preset--color--accent-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-dark), var(--wp--preset--color--accent-light));
    color: light-dark(var(--text-on-dark), var(--text-on-light));
  }
}

/* Greenshift Button Advanced. "Button label" is -title; "Secondary label", if enabled is -label. */
[id^="gspb_button-id-gsbp-"] .gspb-buttonbox-title {
  /* set in interface font-size: 1em !important; */
  line-height: 1.3;
  padding: 1em;
}

[id^="gspb_button-id-gsbp-"] .gspb-buttonbox-label {
  font-size: 1em !important;
  line-height: 1.3;
  padding: 1em;
}

.wp-block-loginout form {

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--wp--style--block-gap);
}

.wp-block-loginout form>* {

  margin: 0;
}

.wp-block-loginout form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) {

  box-sizing: border-box;
  display: block;
  width: 100%;
}

/* end Login form */


/* WordPress Admin Bar */
#wpadminbar * {
  height: max-content !important;
  width: auto;
  line-height: 1.5;
  box-sizing: content-box;
  overflow-clip-margin: border-box;
}

#wpadminbar .quicklinks .menupop ul li .ab-item,
#wpadminbar .quicklinks .menupop ul li a strong,
#wpadminbar .quicklinks .menupop.hover ul li .ab-item,
#wpadminbar .shortlink-input,
#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item {
  line-height: 1.5;
  /* default 2 is wrong, makes items overlap */
  height: 26px;
}

#wpadminbar,
#wpadminbar .ab-empty-item,
#wpadminbar a.ab-item,
#wpadminbar>#wp-toolbar span.ab-label,
#wpadminbar>#wp-toolbar span.noticon,
#wpadminbar .ab-sub-wrapper,
#wpadminbar ul,
#wpadminbar ul li,
#wpadminbar #adminbarsearch:before,
#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
  background-color: var(--wp--preset--color--accent-darker, lightgreen) !important;
  color: var(--text-on-dark, black) !important;
  border-color: var(--wp--preset--color--accent-lighter, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-darker), var(--wp--preset--color--accent-lighter)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }
}

#wpadminbar .ab-top-menu>li.hover>.ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item,
#wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus {
  background: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
}

.ab-sub-wrapper li[id^="wp-admin-bar-"] a:hover {
  background-color: var(--wp--preset--color--accent-lighter, lightgreen) !important;
  color: var(--text-on-light, white) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-lighter), var(--wp--preset--color--accent-darker)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}


button {
  background-color: var(--wp--preset--color--accent-darker, lightgreen);
  color: var(--text-on-dark, black);
  border-color: var(--wp--preset--color--accent-lighter, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-darker), var(--wp--preset--color--accent-lighter));
    color: light-dark(var(--text-on-dark), var(--text-on-light));
  }

  padding: var(--wp--preset--spacing--20);
  font-weight: bold;
  font-size: var(--wp--preset--font-size--medium);
  font-family: var(--wp--preset--font-family--better-monospace);
}

/* HFE Search Box */
.elementor-element form.hfe-search-button-wrapper div.hfe-search-form__container .hfe-search-form__input {

  padding: 4px 8px;
  height: 2em !important;
  align-content: baseline;
}

.elementor-element form.hfe-search-button-wrapper div.hfe-search-form__container button.hfe-search-submit {

  height: auto;
  color: var(--e-global-color-white, black);
  background-color: var(--e-global-color-accent, lightgreen);
  width: 30px;
  font-size: 18px;
  padding: .5em 0;
  margin: 0px 0;

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--e-global-color-white), var(--e-global-color-white));
    background-color: light-dark(var(--e-global-color-accent), var(--e-global-color-accent));
  }
}

/* styling for SureForms */
:is(#srfm-dashboard-container, #srfm-settings-container, #srfm-page-header, #srfm-dialog-root, #srfm-add-new-form-container, #srfm-suremail-container) .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 2em;
  /* added so isn't behind the WordPress admin bar */
}

div.srfm-form-container {
  --srfm-body-input-color: light-dark(var(--text-on-light), var(--text-on-dark));
}

.single-sureforms_form .srfm-single-page-container.has-form-title .srfm-single-banner-title {
  width: 100%;
  margin: 0 auto;
  color: var(--text-on-light);
  font-weight: 600;
  font-size: 40px;
  line-height: 44px;
  background-color: var(--primary-light);
}

/* Styling for Surecart */
ul.wp-block-surecart-product-template a,
ul.wp-block-surecart-product-template h2,
ul.wp-block-surecart-product-template h3 {
  /* Fallback for browsers without light-dark(): */
  background-color: var(--text-on-dark) !important;
  color: var(--text-on-light) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
    color: light-dark(var(--text-on-light), var(--text-on-dark)) !important;
  }
}


/* styling for WS Form */
form.wsf-form {

  font-family: var(--wp--preset--font-family--better-monospace);
}

div.wsf-field,
input[type="checkbox"].wsf-field+label.wsf-label,
input[type="checkbox"].wsf-field+label.wsf-label::before {

  color: var(--text-on-light, black);
  background-color: var(--text-on-dark, lightgreen);
  font-size: var(--wp--preset--font-size--medium);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--text-on-light, black), var(--text-on-dark, white));
    background-color: light-dark(var(--text-on-dark), var(--text-on-light));
  }
}

div.ws-form .wsf-alert {

  background-color: var(--wp--preset--color--secondary, lightgreen);
  border-color: var(--wp--preset--color--secondary, black);
  color: var(--wp--preset--color--foreground, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--secondary, white), var(--wp--preset--color--secondary, white));
    color: light-dark(var(--wp--preset--color--secondary, lightgreen), var(--wp--preset--color--secondary, lightgreen));
    color: light-dark(var(--wp--preset--color--foreground, black), var(--wp--preset--color--foreground, black));
  }
}

div.ws-form .wsf-text-danger {

  color: var(--wp--preset--color--highlight-2, black);
  padding-right: 0.2em;

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--wp--preset--color--highlight-2), var(--wp--preset--color--highlight-2));
  }
}

div.ws-form .wsf-help {

  color: var(--wp--preset--color--foreground, black);
  display: block;
  font-size: var(--wp--preset--font-size--small, 1em);
  line-height: 1.4;
  margin-top: 5px;

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--wp--preset--color--foreground, black), var(--wp--preset--color--foreground, black));
  }
}

button.wsf-button:hover {

  border-color: var(--wp--preset--color--tertiary-dark, black);
  background-color: var(--wp--preset--color--accent-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-light), var(--wp--preset--color--accent-dark));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

button.wsf-button.wsf-button-primary {

  background-color: var(--wp--preset--color--primary-darker, lightgreen);
  border-color: var(--wp--preset--color--accent-lighter, black);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--primary-darker), var(--wp--preset--color--primary-darker));
    color: light-dark(var(--wp--preset--color--accent-lighter), var(--wp--preset--color--accent-darker));
    color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

div.wsf-alert.wsf-alert-success {

  background-color: var(--wp--preset--color--primary-light, lightgreen);
  border-color: var(--wp--preset--color--accent-lighter, black);
  color: var(--wp--preset--color--black, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--primary-light), var(--wp--preset--color--primary-dark));
    color: light-dark(var(--wp--preset--color--accent-lighter), var(--wp--preset--color--accent-darker));
    color: light-dark(var(--wp--preset--color--black), var(--wp--preset--color--black));
  }
}

/* end WS Form */

/* Google Site Kit colors */
.googlesitekit-data-block .googlesitekit-data-block__title,
#wpadminbar .googlesitekit-adminbar .googlesitekit-data-block .googlesitekit-data-block__title,
.googlesitekit-data-block #wpadminbar .googlesitekit-adminbar .googlesitekit-data-block__title {
  color: var(--text-on-light, black);
  background-color: var(--text-on-dark, lightgreen);
}

/* end of Google Site Kit colors */


/* big CSS hover underline, thin un-hovered */
a,
.elementor a:where(:not(.wp-element-button, .uagb-button__wrapper, .uagb-tax-link)),
.wp-block-navigation a:where(:not(.wp-element-button, .uagb-button__wrapper, .uagb-tax-link, .wp-block-navigation-item__content)),
:root :where(.wp-block-post-date a:where(:not(.wp-element-button))) {
  vertical-align: baseline;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  text-decoration: underline;
  text-decoration-thickness: .15em;
  text-underline-offset: 0.25em;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu a {

  white-space: nowrap;
  flex-grow: 1;
  text-decoration: none;
}




/* Spectra (formerly Ultimate Add-ons for Gutenberg) */

/* Spectra highlight color, in the "Highlight" icon of the block's toolbar */
.uagb-highlight {
  background-color: var(--notice-light, lightgreen);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--notice-light), var(--notice-dark));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

/* Block Quotes */
:root :where(.wp-block-quote) {
  background-color: var(--secondary-lighter);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, #ffffff)) {
    background-color: light-dark(var(--secondary-lighter), var(--secondary-darker));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }

  border-radius: var(--wp--preset--spacing--20);
  border-width: 1px;
  font-family: var(--wp--preset--font-family--heading-font);
  font-size: var(--wp--preset--font-size--large);
  font-style: italic;
  padding-top: calc(var(--wp--preset--spacing--10) + 0.75rem);
  padding-right: var(--wp--preset--spacing--10);
  padding-bottom: calc(var(--wp--preset--spacing--10) + 0.75rem);
  padding-left: var(--wp--preset--spacing--10);
  margin-inline-start: 0.5em;
  margin-inline-end: 0.5em;
  margin: 0.25rem;
}

/* Spectra block quote */
.wp-block-uagb-blockquote.uagb-blockquote__skin-border blockquote.uagb-blockquote {

  /* .uagb-block-b0271a66.uagb-blockquote__skin-border blockquote.uagb-blockquote */
  border-color: var(--wp--preset--color--tertiary-darker, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--tertiary-lighter), var(--wp--preset--color--tertiary-darker));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

.wp-block-uagb-blockquote cite.uagb-blockquote__author {

  color: var(--wp--preset--color--tertiary-darker, black);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--wp--preset--color--tertiary-darker), var(--wp--preset--color--tertiary-lighter));
  }
}

/* Spectra Cover block */
/* .wp-block-uagb-advanced-heading p.uagb-desc-text.rich-text, .wp-block-uagb-advanced-heading h2.uagb-heading-text {
 */
.block-color-primarylight {
  background-color: var(--wp--preset--color--primary-lighter, lightgreen);
  color: var(--text-on-light, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--primary-lighter), var(--wp--preset--color--primary-darker));
    color: light-dark(var(--text-on-light), var(--text-on-dark));
  }
}

/* Spectra Post Grid */
.uagb-post__cta {

  /* Read More link */
  float: right;
  margin-bottom: 15px;
}

/* Trailwind borders
border-collapse border-solid border-red-800 rounded-md border-8 (border-4)
*/

/* Spectra Layout Grid */

.uagb-layout-list ul.uagb-list-wrap {
  margin: 0 0 0 0.5em;
  padding: 0;
  display: flex;
  /* need display and flex-wrap, or doesn't wrap in columns */
  flex-wrap: wrap;
}


div.uagb-taxonomy__outer-wrap {
  margin: 0;
  display: flex;
}

.uagb-layout-list .uagb-tax-list {
  list-style: none;
  flex-basis: calc(1/6 * 100%);
  /* column-gap: 1em;  /* instead of margin */
  /* border-collapse border-2 divide-gray-400 border-collapse  */
  border-style: solid;
  border-width: 1px;
  border-color: var(--wp--preset--color--tertiary-dark);

  &> :not(:last-child) {
    border-color: var(--tertiary-dark);
  }
}

ul.uagb-list-wrap.grow.flex-row.flex-wrap {
  /* use with  ul class="uagb-list-wrap flex flex-row flex-wrap" Tailwind styles
    use with UAGB Taxonomy List: w-14  grow bg-accent-light
flex-row flex-wrap
Note: flex-basis on ul prevents wrapping
*/
  display: flex !important;
  /* override browser ul display block */
}

.uagb-layout-list .uagb-tax-list {
  /* use with li class="uagb-tax-list"
     use with outer wrapper div class="flex flex-wrap border-collapse"
  */
  list-style: none;
  flex-basis: calc(1/6 * 100%);
}

div.uagb-taxonomy__outer-wrap {
  margin-bottom: 20px;
  display: flex;
}

.uagb-taxonomy__outer-wrap.uagb-layout-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: var(--mdc-layout-grid-gutter-phone, 12px);
  grid-row-gap: var(--mdc-layout-grid-gutter-phone, 12px);
}

.uagb-taxomony-box {

  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-color: var(--wp--preset--color--tertiary-lighter, black);
  border-style: solid;
  display: grid;

  /* important override of div display block */
  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--wp--preset--color--tertiary-lighter), var(--wp--preset--color--tertiary-darker));
  }
}

div.uagb-layout-grid {
  margin-bottom: 1em;
}

.uagb-tax-link-wrap {
  margin: 0.25em;
}

.uagb-layout-grid .uagb-tax-link {

  pointer-events: visible;
  /* link should show different mouse pointer */
  padding: 0;
  /* prevent vertical line showing */
}

footer .uagb-taxomony-box {
  margin-bottom: 0.25em;
  /* when flex wraps, give space vertically */
}

/* taxonomy grid has text in a div within the link
    * element default has styling like .uagb-block-3d8b49e2.uagb-layout-grid .uagb-tax-link color 777
*/
.uagb-layout-grid .uagb-taxomony-box a.uagb-tax-link,
.uagb-layout-grid a.uagb-tax-link div,
.uagb-layout-grid .uagb-tax-link,
.uagb-layout-grid .uagb-tax-title,
div[class^="uagb-block-"].uagb-layout-grid .uagb-tax-title {

  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
    background-color: light-dark(var(--wp--preset--color--tertiary-dark), var(--wp--preset--color--tertiary-light)) !important;
  }

  pointer-events: auto;
  /* if none, link doesn't work! Where did "none" come from, that it was here? */
}

footer li.uagb-tax-list {
  display: inline-flex;
  /* set as list and this wraps it; or as Grid (columns D:6, T:4, M:1)
       but the UI won't accept over 4!
    */
  grid-template-columns: repeat(6, 1fr);

}

/* .uagb-block-3d8b49e2.uagb-taxonomy__outer-wrap.uagb-layout-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 6px;
    grid-row-gap: 3px;
} */

.uagb-layout-grid a.uagb-tax-link:hover,
.uagb-layout-grid a.uagb-tax-link:hover div {
  background-color: var(--wp--preset--color--accent-dark, lightgreen);
  color: var(--text-on-dark, black);

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--wp--preset--color--accent-dark), var(--wp--preset--color--accent-light));
    color: light-dark(var(--text-on-dark), var(--text-on-light));
  }
}


/* Spectra social share block */
.wp-block-uagb-social-share {

  background-color: var(--text-on-dark, lightgreen);

  @supports (color: light-dark(black, white)) {
    /* for the icons, want always light background */
    background-color: light-dark(var(--text-on-dark), var(--text-on-dark));
  }
}

[class*="uagb-block-"].uagb-social-share__outer-wrap {
  justify-content: center;
  align-items: center;
  display: inline-flex;
  /* without this, they stack vertically */
}


/* Spectra table of contents block
 * change List color to transparent, then reset
*/
.wp-block-uagb-table-of-contents ul.uagb-toc__list,
.wp-block-uagb-table-of-contents ol.uagb-toc__list {

  margin-left: 0;
}

.block-editor-block-list__block .uagb-toc__list-wrap li a {
  /* .block-editor-block-list__block .uagb-block-5bfdfd6d .uagb-toc__list-wrap li a */
  font-style: normal;
  text-decoration: underline;
  color: var(--text-on-light);
  background-color: var(--wp--preset--color--tertiary-lighter, lightgreen);

  @supports (color: light-dark(black, white)) {
    color: light-dark(var(--text-on-light), var(--text-on-dark));
    background-color: light-dark(var(--wp--preset--color--tertiary-lighter), var(--wp--preset--color--tertiary-darker));
  }
}

/* attribute whose value contains at least one occurrence of "wp-elements-" within the string */
footer[class*="wp-elements-"] a:where(:not(.wp-element-button)),
footer .uagb-layout-grid .uagb-taxomony-box a,
footer .uagb-layout-grid .uagb-tax-link {
  background-color: var(--tertiary-dark, lightgreen) !important;
  color: var(--text-on-dark, black) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--tertiary-dark), var(--tertiary-light)) !important;
    color: light-dark(var(--text-on-dark), var(--text-on-light)) !important;
  }

  pointer-events: auto;
  /* if "none" link doesn't work! */
  padding: 0.25em;
  line-height: 1.2;
  display: block;
  border-style: none;
  /* since hover has bottom border, width should match */
  border-width: 0.2em;
}


/* footer .uagb-layout-grid .uagb-taxomony-box a {
  padding: 0;
  margin: 0;
} */

.wp-block-table .has-fixed-layout {
  table-layout: fixed;
  max-width: 100%;
}

/* from Responsive flexbox tables, by David Miller https://codepen.io/Orangetronic/pen/pJgpXw
 * See also https://css-tricks.com/accessible-simple-responsive-tables/
*/
table.table {

  width: 100%;
}

tr,
.wp-block-table tr {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0.5em 0 1em;
  border: 2px solid var(--wp--preset--color--tertiary-lighter);
}

td,
th,
.wp-block-table td,
.wp-block-table th {
  flex: 1 1 250px;
  border: 1px solid var(--wp--preset--color--secondary-lighter);
  padding: .5em;
  display: inline-grid;
}

/* Zebra striping, from https://codepen.io/davidelrizzo/pen/BjXBrz  then View Compiled CSS
 * See main page https://css-tricks.com/accessible-simple-responsive-tables/
 *   ========================================================================== */
:root {
  --table--stripe--odd: var(--secondary-lighter);
  --table--stripe--even: var(--tertiary-lighter);
}

.is-striped,
figure.wp-block-table.is-striped {

  /* background-image: linear-gradient(0, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)); */
  background-image: var(--wp--preset--gradient--primary-gradient);
}

figure.wp-block-table.is-striped tr:nth-child(even),
table.is-striped tr:nth-child(even) {

  background-color: var(--table--stripe--even, lightgreen);

  /* if gradient, background-image: var(--table--stripe--even); */
  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--table--stripe--even), var(--table--stripe--even));
  }
}

figure.wp-block-table.is-striped tr:nth-child(odd),
table.is-striped tr:nth-child(odd) {

  background-color: var(--table--stripe--odd);
  /* background-image: var(--wp--preset--gradient--secondary-gradient) */
  /* background-image: linear-gradient(0, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)); */
}


/* Header styles */

/* Mobile responsive header and navigation */
@media screen and (max-width: 782px) {

  .wp-block-group,
  .wp-block-columns {
    gap: var(--wp--preset--spacing--30);
    padding: var(--wp--preset--spacing--30);
  }

  .wp-block-site-logo img {
    max-width: 80px;
  }

  .wp-block-site-title {
    font-size: var(--wp--preset--font-size--small);
  }

  .wp-block-navigation {
    font-size: var(--wp--preset--font-size--small);
  }

  .wp-block-navigation-item {
    padding: 0.25rem;
  }
}

@media screen and (max-width: 480px) {

  .has-global-padding {
    padding-right: 2px;
    padding-left: 2px;
  }

  .wp-block-group,
  .wp-block-columns {
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--20);
  }

  .wp-block-site-logo img {
    max-width: 60px;
  }

  .wp-block-site-title {
    font-size: var(--wp--preset--font-size--small);
  }

  /* Reduced padding for mobile */
  ul li,
  ol li {
    margin-left: 0.25em;
  }

  ul.is-style-checkmark-list li {
    padding-inline-start: 0.25ch;
  }

  /* Greenshift buttons - reduced padding for mobile */
  [id^="gspb_button-id-gsbp-"] .gspb-buttonbox-title,
  [id^="gspb_button-id-gsbp-"] .gspb-buttonbox-label {
    padding: 0.5em;
  }

  [id^="gspb_button-id-gsbp-"] .gspb-buttonbox {
    padding: 0.1em 0.5em 0.5em;
  }
}

/* Table responsive styles for mobile */
.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

figure.wp-block-table {
  overflow-x: auto;
}

/* Image styles */
.wp-block-image img {
  aspect-ratio: auto;
  height: auto;
  max-width: 100%;
}

/* Featured images - constrained height */
.wp-block-post-featured-image {
  overflow: hidden;
}

.wp-block-post-featured-image img {
  display: block;
  height: 40vh;
  margin-inline: auto;
  max-width: 100%;
  object-fit: contain;
  width: auto;
  /* natural is 6px 6px 9px rgba(0, 0, 0, 0.2) */
  box-shadow: 2px 2px 6px 6px light-dark(var(--primary-darker), var(--primary-lighter));
}

/* Mobile touch targets - larger tap areas for links and buttons */
@media screen and (max-width: 782px) {

  .wp-block-post-content a,
  .entry-content a {
    display: inline-block;
    padding: 0.5em 0.25em;
    margin: -0.25em;
    border-radius: 4px;
  }

  .wp-block-post-content a:active,
  .entry-content a:active {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }
}

/* Light/Dark mode toggle, https://github.com/glerner/wpwm-color-scheme-toggle.git
 * Add to site main menu as a custom link with class js-theme-toggle,
 * and optionally class has-primary-darker (sets background to --bg-primary-darker and color to --text-on-dark using light-dark() )
*/
li.js-theme-toggle {
  font-family: var(--wp--preset--font-family--wide-serif) !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  border: double var(--accent-darker) 0.4em;
  padding: 5px 0.5em !important;
  font-weight: bold;
}



/* Footer styles */

/* Theme Variation preview styles */
div.edit-site-global-styles-preview__wrapper div {
  /* override the filter: blur(60px); opacity: 0.1 in HTML on the Site Editor, Styles panel */
  filter: none !important;
}

/* Greenshift and Core Foundation styles */

:root,
.editor-styles-wrapper {
  --wp--preset--color--basecolor: var(--text-on-dark, #ffffff);
  --wp--preset--color--contrastcolor: var(--text-on-light, #000000);
  --bg-primary: var(--primary-dark);
  --bg-secondary: var(--secondary-dark);
  --bg-tertiary: var(--tertiary-dark);
  --bg-accent: var(--accent-dark);
}

.coreframework-panel .coreframework-class {
  /* make the interface list of classes display properly */
  background: var(--cf-accent-d-4) !important;
  color: var(--text-on-dark, black) !important;

  @supports (color: light-dark(black, white)) {
    background-color: light-dark(var(--accent-lighter), var(--accent-darker)) !important;
    color: light-dark(var(--text-on-dark, lightgreen), var(--text-on-dark, lightgreen)) !important;
  }
}

/* AI Toolkit button, so AI Toolkit and Accessibility Checker buttons aren't covering each other */
.mwai-chat.T9GqU1_HCj_oHtw9lgwt {

  position: fixed;
  right: 10px;
  bottom: 15px;
  width: 64px;
}

/* Accessibility Checker button */
.edac-highlight-panel {

  bottom: 19px !important;
  position: fixed !important;
  right: calc(64px + 15px) !important;
  width: auto;
}

/* Printing Styles */
/* In Edge or Chrome:
Open the Rendering tool (you can access it easily by using the Command menu and typing "Rendering").
Scroll down to the Emulate CSS media type drop-down.
Choose the Print option. */

@media print {
  body {
    background: #fff none !important;
    color: #000;
    margin: 1em 0.5em 2em 2em;
  }

  /* Don't print elements - assign class "no-print" to an element */
  .no-print,
  .no-print * {
    display: none !important;
  }

  a::after {
    content: " (" attr(href) ")";
  }

  figure a::after {
    content: none;
  }

  /* Prevent buttons and links from splitting across pages */
  .wp-block-button,
  .wp-block-button__link,
  .wp-element-button,
  a.wp-block-button__link {
    break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    white-space: nowrap;
  }

  /* Prevent orphaned button text */
  .wp-block-buttons {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #wrapper {

    clear: both !important;
    display: block !important;
    float: none !important;
    position: relative !important;
  }

  #header {

    border-bottom: 2pt solid #000;
    padding-bottom: 18pt;
  }

  #container,
  #header,
  #footer {

    margin: 0;
    width: 100%;
  }

  /* Headings - keep with following content, don't break inside */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .wp-block-heading {
    break-after: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }

  /* Paragraphs and text blocks - orphan/widow control */
  p,
  li,
  blockquote,
  .wp-block-quote,
  .wp-block-pullquote {
    orphans: 3;
    widows: 3;
  }

  /* Keep figures/images with their captions */
  figure,
  .wp-block-image,
  .wp-block-post-featured-image {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Keep tables together when possible */
  table,
  .wp-block-table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Keep code blocks together */
  pre,
  code,
  .wp-block-code {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* site title fill space without site header-menu */
  header.wp-block-template-part div,
  header.wp-block-template-part div div,
  header header,
  header p {

    margin: 0 !important;
    padding: 0 !important;
  }

  header p {

    font-size: 1.5rem;
  }

  header.wp-block-template-part header.pad-section--m {

    margin: 0;
    padding: 0;
  }

  .wp-block-uagb-container.uagb-is-root-container [class*="uagb-block-"] {
    max-width: 100% !important;
    width: 100%;
  }

  .wp-block-uagb-container[class*="uagb-block-"] {
    min-height: 1em;
    row-gap: 5px;
    column-gap: 10px;
  }

  main#wp--skip-link--target {

    margin-top: -.5em !important;
  }

  .wp-block-group {

    margin-top: 0.5em;
    margin-bottom: 0;
    min-height: 1em;
  }

  .entry-content {

    font-size: 14pt;
    line-height: 1.6em;
  }

  .entry-title {

    font-size: 21pt;
  }

  .has-large-font-size {

    font-size: 1.2em;
  }

  div.wp-block-cover p {

    color: var(--text-on-light);
    background: var(--primary-lighter, lightgray);
    opacity: .8;

    @supports (color: light-dark(black, white)) {
      color: light-dark(var(--text-on-light), var(--text-on-light));
    }
  }

  /* Hide unnecessary print items */
  #access,
  #branding img,
  #respond,
  nav.header-menu,
  .wp-block-uagb-container [class*="uagb-block-"],
  /* uagb-block-* is nav menu container */
  #edac-highlight-panel,
  #mwai-chatbot-default,
  div.wp-block-comments,
  footer.wp-block-template-part,
  .comment-edit-link,
  .edit-link,
  .navigation,
  .page-link,
  .widget-area,
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {

    display: none !important;
  }
}