/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

/* Reference Chart: https://my.girlscouts.org/content/dam/girlscoutsaz/documents/volunteer-resources/brand-pr-marketing/graphic-guidelines_2021.pdf */

:root {
  --girl-scout-color-black: 0, 0, 0;
  --girl-scout-color-white: 255, 255, 255;

  --girl-scout-color-stone: 168, 168, 168;
  --girl-scout-color-cloud: 217, 217, 217;

  --girl-scout-color-forest-green: 0, 180, 81;
  --girl-scout-color-girl-scouts-green: 0, 180, 81;
  --girl-scout-color-star-green: 213, 242, 103;

  --girl-scout-color-ocean: 0, 73, 135;
  --girl-scout-color-river: 20, 150, 212;
  --girl-scout-color-sky: 160, 222, 241;

  --girl-scout-color-deep-purple: 92, 31, 139;
  --girl-scout-color-violet: 158, 95, 214;
  --girl-scout-color-lilac: 204, 179, 250;

  --girl-scout-color-plum: 173, 0, 97;;
  --girl-scout-color-bubblegum: 247, 171, 214;

  --girl-scout-color-cherry: 156, 0, 0;
  --girl-scout-color-poppy: 238, 49, 36;
  --girl-scout-color-peach: 255, 185, 157;

  --girl-scout-color-brown: 118, 58, 22;
  --girl-scout-color-flame: 255, 120, 24;
  --girl-scout-color-kahki: 213, 202, 159;

  --girl-scout-color-desert: 192, 102, 22;
  --girl-scout-color-gold: 247, 190, 0;
  --girl-scout-color-sunshine: 255, 244, 65;



  --gs-color-black: var(--girl-scout-color-black);
  --gs-color-white: var(--girl-scout-color-white);
  --gs-color-gs-green: 0, 174, 88;
  --gs-color-gs-green-80: 47, 181, 106;
  --gs-color-gs-green-50: 138, 204, 156;
  --gs-color-gs-green-15: 218, 237, 221;
  --gs-color-khaki: 213, 202, 159;
  --gs-color-khaki-65: 225, 217, 187;
  --gs-color-khaki-45: 233, 226, 205;
  --gs-color-khaki-25: 239, 236, 223;
  --gs-color-lime: 178, 210, 53;
  --gs-color-lime-50: 204, 223, 120;
  --gs-color-lime-50: 215, 230, 155;
  --gs-color-lime-20: 237, 244, 213;
  --gs-color-magenta: 236, 0, 139;
  --gs-color-magenta-75: 240, 103, 166;
  --gs-color-magenta-45: 245, 164, 199;
  --gs-color-magenta-15: 252, 223, 235;
  --gs-color-navy: 0, 78, 154;
  --gs-color-navy-80: 60, 101, 168;
  --gs-color-navy-50: 124, 143, 194;
  --gs-color-navy-10: 221, 225, 240;
  --gs-color-cookie-red: 238, 49, 36;
  --gs-color-cookie-red-75: 243, 110, 74;
  --gs-color-cookie-red-50: 247, 155, 123;
  --gs-color-cookie-red-15: 253, 223, 207;
  --gs-color-cookie-purple: 110, 41, 141;
  --gs-color-cookie-purple-80: 130, 80, 157;
  --gs-color-cookie-purple-50: 165, 134, 188;
  --gs-color-cookie-purple-15: 224, 213, 234;
  --gs-color-cookie-yellow: 253, 221, 0;
  --gs-color-cookie-yellow-50: 255, 234, 150;
  --gs-color-cookie-yellow-20: 253, 246, 210;
  --gs-color-grade-ambassadors: 250, 126, 26;
  --gs-color-grade-ambassadors-65: 253, 194, 111;
  --gs-color-grade-ambassadors-40: 255, 216, 161;
  --gs-color-grade-ambassadors-20: 255, 234, 204;
  --gs-color-grade-brownies: 133, 69, 0;
  --gs-color-grade-brownies-80: 155, 95, 41;
  --gs-color-grade-brownies-50: 192, 145, 104;
  --gs-color-grade-brownies-20: 228, 204, 182;
  --gs-color-grade-cadettes: var(--gs-color-cookie-red);
  --gs-color-grade-cadettes-75: var(--gs-color-cookie-red--75);
  --gs-color-grade-cadettes-50: var(--gs-color-cookie-red--50);
  --gs-color-grade-cadettes-15: var(--gs-color-cookie-red--15);
  --gs-color-grade-daisies: 0, 171, 230;
  --gs-color-grade-daisies-80: 62, 183, 234;
  --gs-color-grade-daisies-50: 144, 206, 241;
  --gs-color-grade-daisies-15: 220, 237, 250;
  --gs-color-grade-juniors: var(--gs-color-cookie-purple);
  --gs-color-grade-juniors-80: var(--gs-color-cookie-purple-80);
  --gs-color-grade-juniors-50: var(--gs-color-cookie-purple-50);
  --gs-color-grade-juniors-15: var(--gs-color-cookie-purple-15);
  --gs-color-grade-seniors: 243, 112, 33;
  --gs-color-grade-seniors-70: 247, 151, 91;
  --gs-color-grade-seniors-50: 250, 179, 131;
  --gs-color-grade-seniors-20: 254, 222, 199;
  --gs-color-grade-volunteers: 199, 200, 202;
  --gs-color-grade-volunteers-65: 217, 218, 220;
  --gs-color-grade-volunteers-55: 222, 223, 225;
  --gs-color-grade-volunteers-25: 238, 239, 240;
  --font-avenir-next: 'Avenir Next LT Pro', Helvetica, sans-serif;
  --font-open-sans: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
  --color-deep-brown: 47, 24, 0;
  --color-dark-brown: 73, 38, 0;
}

html,
body {
  --solo-font: var(--font-open-sans);
  min-width: 280px;
}

.page-wrapper {
  --r-br: rgb(var(--gs-color-grade-volunteers));
  --r-bg: rgb(var(--gs-color-khaki-25));
}

#page-wrapper .animate-site-girl-scouts,
#header.animate-site-girl-scouts a.site-name-link,
#page-wrapper.animate-title-girl-scouts .page-title-text,
#page-wrapper.animate-title-girl-scouts .page-title-text span {
  background: linear-gradient(
    45deg,
    rgb(var(--gs-color-grade-daisies)),
    rgb(var(--gs-color-grade-brownies)),
    rgb(var(--gs-color-grade-juniors)),
    rgb(var(--gs-color-grade-cadettes)),
    rgb(var(--gs-color-grade-seniors)),
    rgb(var(--gs-color-grade-ambassadors)),
    rgb(var(--gs-color-grade-volunteers)),
    rgb(var(--gs-color-gs-green)),
    rgb(var(--gs-color-grade-volunteers)),
    rgb(var(--gs-color-grade-ambassadors)),
    rgb(var(--gs-color-grade-seniors)),
    rgb(var(--gs-color-grade-cadettes)),
    rgb(var(--gs-color-grade-juniors)),
    rgb(var(--gs-color-grade-brownies)),
    rgb(var(--gs-color-grade-daisies))
  );
}

#page-wrapper .animate-site-girl-scouts,
#header.animate-site-girl-scouts a.site-name-link,
#page-wrapper.animate-title-girl-scouts .page-title-text,
#page-wrapper.animate-title-girl-scouts .page-title-text span {
  background-size: 200% 200%;
  animation: animateSiteName 10s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
}

.page-wrapper .solo-outer.system-messages {
  /* Important used because base style used it .... */
  --r-bg: rgb(var(--gs-color-grade-volunteers-25)) !important;
}

.messages,
.webform-message .messages.messages-webform {
  background-color: rgb(var(--girl-scout-color-sunshine)) !important;
}

.messages.messages--status {
  background: linear-gradient(135deg, rgb(var(--girl-scout-color-girl-scouts-green)) 0%, rgb(var(--girl-scout-color-sunshine)) 3%, rgb(var(--girl-scout-color-sunshine)) 100%);
}

.branding-wrapper .site-name a {
  display: grid;
  grid-template-areas:
    "top"
    "mid"
    "bot";
  grid-template-columns: 1fr;
  gap: 0;
}

.conwaytroop25-branding .site-name-link .unit_city,
.conwaytroop25-branding .site-name-link .unit_name,
.conwaytroop25-branding .site-name-link .unit_state {
  display: block;
  line-height: 1.8rem;
}

.conwaytroop25-branding .site-name-link .unit_city {
  font-size: 1.4rem;
  grid-area: top;
}

.conwaytroop25-branding .site-name-link .unit_name {
  font-size: 2.4rem;
  grid-area: mid;
  padding-left: 2rem;
}

.conwaytroop25-branding .site-name-link .unit_state {
  font-size: 1.4rem;
  grid-area: bot;
  padding-left: 4rem;
}

.page-wrapper .main-navigation-wrapper {
  z-index: 2;
}

.primary-menu,
.footer-container,
.footer-menu {
  border: none;
  border-bottom: 5px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    45deg,
    rgb(var(--gs-color-gs-green)) 3%,
    rgb(var(--gs-color-grade-daisies)) 8%,
    rgb(var(--gs-color-grade-daisies)) 16%,
    rgb(var(--gs-color-grade-brownies)) 21%,
    rgb(var(--gs-color-grade-brownies)) 29%,
    rgb(var(--gs-color-grade-juniors)) 34%,
    rgb(var(--gs-color-grade-juniors)) 42%,
    rgb(var(--gs-color-grade-cadettes)) 47%,
    rgb(var(--gs-color-grade-cadettes)) 55%,
    rgb(var(--gs-color-grade-seniors)) 60%,
    rgb(var(--gs-color-grade-seniors)) 68%,
    rgb(var(--gs-color-grade-ambassadors)) 73%,
    rgb(var(--gs-color-grade-ambassadors)) 81%,
    rgb(var(--gs-color-grade-volunteers)) 86%,
    rgb(var(--gs-color-grade-volunteers)) 91%,
    rgb(var(--gs-color-gs-green)) 98%,
    rgb(var(--gs-color-gs-green)) 100%
  );
}

.footer-container {
  border-bottom: none;
  border-top: 2px solid transparent;
}

.footer-menu {
  border-bottom: none;
  border-top: 5px solid transparent;
}

.page-wrapper .login-button-open,
.page-wrapper .hamburger-icon button,
.page-wrapper .main-navigation-wrapper,
.page-wrapper .main-navigation-wrapper ul,
.page-wrapper .main-navigation-wrapper li,
.page-wrapper .header li.nav__menu-item>a,
.page-wrapper .main-navigation-wrapper li>a,
.page-wrapper .header li.nav__menu-item>button,
.page-wrapper .main-navigation-wrapper li>button {
  --r-bg: rgb(var(--gs-color-khaki-25));
  --r-br: rgb(var(--gs-color-cookie-purple));
  --r-tx: rgb(var(--gs-color-navy));
}

.page-wrapper .login-button-open:hover,
.page-wrapper .hamburger-icon button:hover,
.page-wrapper .header li.nav__menu-item>a:hover,
.page-wrapper .main-navigation-wrapper li>a:hover,
.page-wrapper .header li.nav__menu-item>button:hover,
.page-wrapper .main-navigation-wrapper li>button:hover {
  --r-bg: rgb(var(--gs-color-grade-daisies-15));
  --r-tx: rgb(var(--gs-color-navy));
}

.page-wrapper .solo-input {
  --r-br: rgb(var(--gs-color-navy));
}

.page-wrapper .solo-input:focus {
  --r-br: rgb(var(--gs-color-navy));
}

h1 {
  --r-tx: rgb(var(--gs-color-gs-green));
  font-family: Omnes, sans-serif;
  text-align: center;
}

h1.page-title-text {
  margin-bottom: 0;
  padding-bottom: 0;
}

h1 > span {
  margin-inline: auto;
}

h2, h3, .site-name, .site-slogan {
  --r-tx: rgb(var(--gs-color-grade-brownies));
  font-family: var(--font-avenir-next);
}

.breadcrumb {
  --r-bg: rgb(var(--gs-color-grade-volunteers-25));
  --r-tx: rgb(var(--gs-color-navy-80));
}

.page-wrapper .breadcrumb a {
  --r-tx: rgb(var(--gs-color-navy-80));
  text-decoration: underline;
}

.page-title .page-title-inner {
  padding: 0;
}

.main-container {
  --r-tx: rgb(var(--color-dark-brown));
  --r-bg: rgb(var(--gs-color-grade-volunteers-25));
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content),
.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):link,
.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):visited {
  --r-tx: rgb(var(--gs-color-navy-80));
  border-bottom: 1px dotted rgb(var(--gs-color-navy-80));
}

.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):hover,
.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):hover,
.main-container a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):active {
  --r-tx: rgb(var(--gs-color-navy));
}

.welcome-text,
.main-container .main-box {
  --r-bg: transparent;
}

div.page-title.lone {
  --r-bg: rgb(var(--gs-color-grade-volunteers-25));
}

.block-page-title-block h1,
.block-page-title-block h1.page-title-text {
  padding-top: 0;
}

.page-wrapper ul.tabs.primary li a:hover,
.page-wrapper ul.tabs.primary li a:active {
  --r-bg: rgb(var(--gs-color-navy-80));
}

.main-container ul.tabs.primary li a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):hover,
.main-container ul.tabs.primary li a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):hover,
.main-container ul.tabs.primary li a:not(.nav__menu-link, .button, .site-name-link, .site-logo, h1 a, h2 a, h3 a, a#main-content):active {
  --r-tx: rgb(var(--gs-color-white));
}

#fixed-search-block .hamburger-icon button {
  --r-bg: rgb(var(--gs-color-grade-volunteers-55));
}

.page-wrapper .search-button-close button:hover {
  --r-br: rgb(var(--gs-color-cookie-red));
}

.page-wrapper form input.button.form-submit {
  --r-bg: rgb(var(--gs-color-navy));
  --r-tx: rgb(var(--gs-color-grade-volunteers-25));
}

.page-wrapper form input.button.form-submit:hover {
  --r-bg: rgb(var(--gs-color-lime-20));
  --r-br: rgb(var(--gs-color-gs-green));
  --r-tx: rgb(var(--gs-color-navy));
  animation: none;
}

#footer-menu .footer-menu-inner nav,
#footer-menu .footer-menu-inner nav ul {
  margin-bottom: 0;
  margin-top: 0;
}

#copyright .copyright-inner {
  --r-tx: rgb(var(--color-dark-brown));
  padding-top: 0;
}

#copyright .copyright-inner p:last-child {
  margin-block: 0;
}

.admin-toolbar .toolbar-button {
  display: flex;
}