/*====================================================
  1. Palette Definitions
====================================================*/
:root {
  /* Mid Green - Deep Purple */
  --dp-bg:    #509E2F;
  --dp-text:  #fff;

  /* Pale Green - Pale Purple */
  --pp-bg:    #E0EC89;
  --pp-text:  #041204;

  /* Deep Green - Orange */
  --or-bg:    #041204;
  --or-text:  #fff;

  /* Dark Green - Bright Purple (B-P) */
  --bp-bg:    #257226;
  --bp-text:  #fff;

  /* Dark Green - Medium Purple (M-P) */
  --mp-bg:    #257226;
  --mp-text:  #fff;

  /* Light Green - Light Purple (L-P) */
  --lp-bg:    #B7DB57;
  --lp-text:  #041204;

  /* New Orange - Pink */
  --pk-bg:    #FF8F1C;
  --pk-text:  #fff;

  /* White */
  --wp-bg:    #fff;
  --wp-text:  #041204;

/* NEW --- add these to all the but, box, and bg styles --->

  /* “None” / clear */
  --none-bg:  transparent;
  --none-text: #000;

    /* Deep Green*/
  --deep-bg:    #257226;
  --deep-text:  #fff;

      /* Primary Green */
  --primary-bg:    #509e2f;
  --primary-text:  #fff;

      /* Light Green */
  --light-bg:    #e0ec89;
  --light-text:  #000;

      /* Bright Green */
  --bright-bg:    #b7db57;
  --bright-text:  #000;

      /* Dark Green */
  --dark-bg:    #175018;
  --dark-text:  #fff;

      /* Subtle Green*/
  --subtle-bg:    #e9f4cc;
  --subtle-text:  #000;

      /* Khaki Green*/
  --khaki-bg:    #e1e5cc;
  --khaki-text:  #000;

    /* Onyx Green*/
  --onyx-bg:    #041204;
  --onyx-text:  #fff;


}

/*====================================================
  2. Base theme class styling
     (explicit class selectors ensure multi-class elems work)
====================================================*/
/* Assign theme variables for each flavour */
.dpbg, .dpbox, .dpbut   { --theme-bg: var(--dp-bg);  --theme-text: var(--dp-text); }
.ppbg, .ppbox, .ppbut   { --theme-bg: var(--pp-bg);  --theme-text: var(--pp-text); }
.orbg, .orbox, .orbut   { --theme-bg: var(--or-bg);  --theme-text: var(--or-text); }
.bpbg, .bpbox, .bpbut   { --theme-bg: var(--bp-bg);  --theme-text: var(--bp-text); }
.mpbg, .mpbox, .mpbut   { --theme-bg: var(--mp-bg);  --theme-text: var(--mp-text); }
.lpbg, .lpbox, .lpbut   { --theme-bg: var(--lp-bg);  --theme-text: var(--lp-text); }
.pkbg, .pkbox, .pkbut   { --theme-bg: var(--pk-bg);  --theme-text: var(--pk-text); }
.wpbg, .wpbox, .wpbut   { --theme-bg: var(--wp-bg);  --theme-text: var(--wp-text); }
.none, .gridtitle.none  { --theme-bg: var(--none-bg); --theme-text: var(--none-text); }
.deepbg, .deepbox, .deepbut         { --theme-bg: var(--deep-bg);    --theme-text: var(--deep-text); }
.primarybg, .primarybox, .primarybut { --theme-bg: var(--primary-bg);--theme-text: var(--primary-text); }
.lightbg, .lightbut      { --theme-bg: var(--light-bg);   --theme-text: var(--light-text); }
.brightbg, .brightbox, .brightbut   { --theme-bg: var(--bright-bg);  --theme-text: var(--bright-text); }
.darkbg, .darkbox, .darkbut         { --theme-bg: var(--dark-bg);    --theme-text: var(--dark-text); }
.subtlebg, .subtlebox, .subtlebut   { --theme-bg: var(--subtle-bg);  --theme-text: var(--subtle-text); }
.khakibg, .khakibox, .khakibut      { --theme-bg: var(--khaki-bg);   --theme-text: var(--khaki-text); }
.onyxbg, .onyxbox, .onyxbut         { --theme-bg: var(--onyx-bg);    --theme-text: var(--onyx-text); }



/* Apply background & text-colour explicitly */
.dpbg, .dpbox, .dpbut,
.ppbg, .ppbox, .ppbut,
.orbg, .orbox, .orbut,
.bpbg, .bpbox, .bpbut,
.mpbg, .mpbox, .mpbut,
.lpbg, .lpbox, .lpbut,
.pkbg, .pkbox, .pkbut,
.wpbg, .wpbox, .wpbut,
.none,
.deepbg, .deepbox, .deepbut,
.primarybg, .primarybox, .primarybut,
.lightbg, .lightbut,
.brightbg, .brightbox, .brightbut,
.darkbg, .darkbox, .darkbut,
.subtlebg, .subtlebox, .subtlebut,
.khakibg, .khakibox, .khakibut,
.onyxbg, .onyxbox, .onyxbut {
  background-color: var(--theme-bg) !important;
  color:            var(--theme-text) !important;
}

/*====================================================
  3. Force descendants to use the theme text colour
====================================================*/
.dpbg *, .dpbox *, .dpbut *,
.ppbg *, .ppbox *, .ppbut *,
.orbg *, .orbox *, .orbut *,
.bpbg *, .bpbox *, .bpbut *,
.mpbg *, .mpbox *, .mpbut *,
.lpbg *, .lpbox *, .lpbut *,
.pkbg *, .pkbox *, .pkbut *,
.wpbg *, .wpbox *, .wpbut *,
.none *,
.deepbg *, .deepbox *, .deepbut *,
.primarybg *, .primarybox *, .primarybut *,
.lightbg *, .lightbut *,
.brightbg *, .brightbox *, .brightbut *,
.darkbg *, .darkbox *, .darkbut *,
.subtlebg *, .subtlebox *, .subtlebut *,
.khakibg *, .khakibox *, .khakibut *,
.onyxbg *, .onyxbox *, .onyxbut *
{
  color: var(--theme-text) !important;
}

/*====================================================
  4. Grid titles & banners
====================================================*/
/* Grid titles */
.gridtitle {
  background-color: var(--theme-bg) !important;
  color:            var(--theme-text) !important;
}
.gridtitle.bpbg { --theme-text: var(--bp-text); }
.gridtitle.dpbg { --theme-text: var(--dp-text); }
.gridtitle.lpbg { --theme-text: var(--lp-text); }
.gridtitle.mpbg { --theme-text: var(--mp-text); }
.gridtitle.ppbg { --theme-text: var(--pp-text); }
.gridtitle.orbg { --theme-text: var(--or-text); }
.gridtitle.pkbg { --theme-text: var(--pk-text); }
.gridtitle.wpbg { --theme-text: var(--wp-text); }
.gridtitle.deepbg     { --theme-text: var(--deep-text); }
.gridtitle.primarybg { --theme-text: var(--primary-text); }
.gridtitle.lightbg   { --theme-text: var(--light-text); }
.gridtitle.brightbg  { --theme-text: var(--bright-text); }
.gridtitle.darkbg    { --theme-text: var(--dark-text); }
.gridtitle.subtlebg  { --theme-text: var(--subtle-text); }
.gridtitle.khakibg   { --theme-text: var(--khaki-text); }
.gridtitle.onyxbg    { --theme-text: var(--onyx-text); }
/* Contact-banner wrapper & text */
.contact-banner {
  /* theme-based background */
  background-color: var(--theme-bg) !important;
}
.contact-banner .banner-text {
  color:            var(--theme-text) !important;
}
.contact-banner.bpbg { --theme-text: var(--bp-text); }
.contact-banner.dpbg { --theme-text: var(--dp-text); }
.contact-banner.lpbg { --theme-text: var(--lp-text); }
.contact-banner.mpbg { --theme-text: var(--mp-text); }
.contact-banner.ppbg { --theme-text: var(--pp-text); }
.contact-banner.orbg { --theme-text: var(--or-text); }
.contact-banner.pkbg { --theme-text: var(--pk-text); }
.contact-banner.wpbg { --theme-text: var(--wp-text); }
.contact-banner.deepbg     { --theme-text: var(--deep-text); }
.contact-banner.primarybg { --theme-text: var(--primary-text); }
.contact-banner.lightbg   { --theme-text: var(--light-text); }
.contact-banner.brightbg  { --theme-text: var(--bright-text); }
.contact-banner.darkbg    { --theme-text: var(--dark-text); }
.contact-banner.subtlebg  { --theme-text: var(--subtle-text); }
.contact-banner.khakibg   { --theme-text: var(--khaki-text); }
.contact-banner.onyxbg    { --theme-text: var(--onyx-text); }

/*====================================================
  5. Duo post content
====================================================*/
.duo-post-content.bpbg { background-color: var(--dp-bg); color: var(--dp-text); }
.duo-post-content.ppbg { background-color: var(--pp-bg); color: var(--pp-text); }
.duo-post-content.orbg { background-color: var(--or-bg); color: var(--or-text); }
.duo-post-content.bpbg { background-color: var(--bp-bg); color: var(--bp-text); }
.duo-post-content.mpbg { background-color: var(--mp-bg); color: var(--mp-text); }
.duo-post-content.lpbg { background-color: var(--lp-bg); color: var(--lp-text); }
.duo-post-content.pkbg { background-color: var(--pk-bg); color: var(--pk-text); }
.duo-post-content.wpbg { background-color: var(--wp-bg); color: var(--wp-text); }
.duo-post-content.deepbg     { background-color: var(--deep-bg);     color: var(--deep-text); }
.duo-post-content.primarybg { background-color: var(--primary-bg); color: var(--primary-text); }
.duo-post-content.lightbg   { background-color: var(--light-bg);   color: var(--light-text); }
.duo-post-content.brightbg  { background-color: var(--bright-bg);  color: var(--bright-text); }
.duo-post-content.darkbg    { background-color: var(--dark-bg);    color: var(--dark-text); }
.duo-post-content.subtlebg  { background-color: var(--subtle-bg);  color: var(--subtle-text); }
.duo-post-content.khakibg   { background-color: var(--khaki-bg);   color: var(--khaki-text); }
.duo-post-content.onyxbg    { background-color: var(--onyx-bg);    color: var(--onyx-text); }


/*====================================================
  6. Links in buttons & backgrounds
====================================================*/
a.dpbut, a.dpbg   { color: var(--dp-text) !important; }
a.ppbut, a.ppbg   { color: var(--pp-text) !important; }
a.orbut, a.orbg   { color: var(--or-text) !important; }
a.bpbut, a.bpbg   { color: var(--bp-text) !important; }
a.mpbut, a.mpbg   { color: var(--mp-text) !important; }
a.lpbut, a.lpbg   { color: var(--lp-text) !important; }
a.pkbut, a.pkbg   { color: var(--pk-text) !important; }
a.wpbut, a.wpbg   { color: var(--wp-text) !important; }
a.none            { color: var(--none-text) !important; }
a.deepbut, a.deepbg         { color: var(--deep-text) !important; }
a.primarybut, a.primarybg  { color: var(--primary-text) !important; }
a.lightbut, a.lightbg      { color: var(--light-text) !important; }
a.brightbut, a.brightbg    { color: var(--bright-text) !important; }
a.darkbut, a.darkbg        { color: var(--dark-text) !important; }
a.subtlebut, a.subtlebg    { color: var(--subtle-text) !important; }
a.khakibut, a.khakibg      { color: var(--khaki-text) !important; }
a.onyxbut, a.onyxbg        { color: var(--onyx-text) !important; }


/*====================================================
  7. Utility / clear classes
====================================================*/
.clearbox, .clearbut {
  background-color: transparent !important;
}

/*====================================================
  8. Plains & primary text overrides
====================================================*/
.acc_title, .plaintitle h3 {
  color: var(--theme-text) !important;
}
.primarytext p, .primarytext h1 {
  color: var(--theme-text) !important;
}


.primarytextdark {
  color: #000;
      text-shadow: 0px 2px 4px #ffffffa1;
}

.primarytextlight {
  color: #fff;
text-shadow: 0px 2px 4px #000000a1;
}

.primarytextgreen {
  color: #287024;
text-shadow: 0px 2px 4px #000000a1;
}