/* 2026 Trellis Subtheme
****************************************************************************/



/* = Site Variables
-------------------------------------------------------------- */
:root {
	--trellis-green:#80A140;
	--trellis-green30:#D4DBBA;

	--trellis-sky: #00AED7;
	--trellis-sky30: #C2E1F1;

	--trellis-stone:#53554C;
	--trellis-stone30: #BCBBB7;

	--trellis-rose: #E34485;
	--trellis-rose30:#F5C7D3;

	--trellis-honeysuckle: #F1C318;
	--trellis-honeysuckle30: #FBE9BB;

	--trellis-black:#2c2d2a;
	--trellis-heather:#842890;
	--trellis-ivy: #287339;

}


/*** Fonts	
	******************************************************/
  @font-face {
    font-family: "Body";
    src: url("../fonts/Helvetica.ttf");
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Head";
    src: url("../fonts/Inkfree.ttf");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "Tertiary";
    src: url("../fonts/LilitaOne-Regular.ttf");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Bold";
    src: url("../fonts/Helvetica-Bold.ttf");
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: "Italic";
    src: url("../fonts/Helvetica-Oblique.ttf");
    font-weight: 400;
    font-style: normal;
  }


/*** Type
	******************************************************/
body {
    font-family: "Body", sans-serif;
    line-height: 2;
    font-size: 1.6rem;
    color: var(--dark-stone);
}
h1, h2, h3, h4, h5, h6,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
	font-family: "Head", sans-serif;
}

h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1em;}
h6 {font-size: 0.75em;}

strong {font-family: "Bold", sans-serif;}
em {font-family: "Italic", sans-serif;}
label {font-family: "Bold", sans-serif;}


#block-bootstrap5-trellis-page-title {color: var(--trellis-green);}
a {color: var(--trellis-heather);}
a:hover{color: var(--trellis-sky);}

.navbar-brand img {
	height: 100px;

}

.navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* = Menus
-------------------------------------------------------------- */

/* = Call to action */

#block-bootstrap5-trellis-calltoactionmenu li.nav-item {
    border-radius: 15px;
    font-size: 1.5em;
	font-family: "Head", sans-serif; 
    border: 5px solid  var(--trellis-green);
	background-color: var(--trellis-green);
	margin-right: 15px;
	line-height: 1.2em;
}


#block-bootstrap5-trellis-calltoactionmenu li.nav-item a {
	color: white;
}

#block-bootstrap5-trellis-calltoactionmenu li.nav-item:hover {
    border: 5px solid  var(--trellis-rose);
	background-color: var(--trellis-rose);
}


/* = Footer
-------------------------------------------------------------- */
footer.mt-auto {
	background-color: var(--trellis-stone);
	color: white;
	font-size: 0.9em;
}

#block-bootstrap5-trellis-footercontactinfo h2 {
	font-family: "Head", sans-serif; 	
	font-size: 1.7em;
}

#block-bootstrap5-trellis-footercontactinfo {
	font-size: 0.9em;}

@media (min-width: 700px) {
footer .region-footer {
    display: flex;
    flex-direction: row;
}
}
#block-bootstrap5-trellis-account-menu h5,
#block-bootstrap5-trellis-socialmedia h5 {
	font-size: 1.7em;
}

#block-bootstrap5-trellis-account-menu li,
#block-bootstrap5-trellis-socialmedia li {
	font-size: 0.9em;
}

#block-bootstrap5-trellis-account-menu li.nav-item,
#block-bootstrap5-trellis-socialmedia li.nav-item {
    line-height: 1.5;
	padding-left: 25px;
}

#block-bootstrap5-trellis-account-menu li.nav-item:hover,
#block-bootstrap5-trellis-socialmedia li.nav-item:hover {
	color: var(--trellis-sky30);
	text-decoration: underline;
}

/* = Buttons
-------------------------------------------------------------- */

.btn-primary, .paragraph--type--call-to-action-button .field--name-field-link a, .paragraph--type--content-reference a.btn.btn-primary {
    font-weight: 500;
    border-radius: 15px;
    font-size: 1.5em;
    margin: 1em 0;
    padding: 0.8rem;
	font-family: "Head", sans-serif; 
}	
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--trellis-sky);
    --bs-btn-border-color: var(--trellis-sky);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--trellis-rose);
    --bs-btn-hover-border-color: var(--trellis-rose);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--trellis-honeysuckle);
    --bs-btn-active-border-color: var(--trellis-honeysuckle);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--trellis-stone);
    --bs-btn-disabled-border-color: var(--trellis-stone);
}

.btn:last-child, .node-preview-container .node-preview-backlink:last-child, button.link:last-child, .button:last-child {
    --bs-btn-bg: var(--trellis-green);	
    --bs-btn-border-color: var(--trellis-green);
}

.btn:first-child, .node-preview-container .node-preview-backlink:first-child, button.link:first-child, .button:first-child {
    --bs-btn-bg: var(--trellis-sky);
    --bs-btn-border-color: var(--trellis-sky);
}

/* = Webforms
-------------------------------------------------------------- */
.progress-step.is-active .progress-marker::before {
    background-color: var(--trellis-sky);
	padding: 25px;
	margin-bottom: 10px;
}
.webform-progress-tracker .progress-step.is-complete .progress-marker::before, 
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before {
    background-color: var(--trellis-stone);
	padding: 25px;
	margin-bottom: 10px;
}

.progress-step .progress-marker::before {
    background-color: var(--trellis-stone30);
	padding: 25px;
	margin-bottom: 10px;
	font-family: "Bold", sans-serif;
}

.webform-progress-tracker.progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
    background-color: var(--trellis-stone);
	margin-top: 15px
}

.progress-title {font-family: "Bold", sans-serif;}
.webform-options-display-buttons input:checked:focus + label.webform-options-display-buttons-label {box-shadow: 0 0 5px var(--trellis-stone30);}
.webform-element-more--link  {font-family: "Bold", sans-serif;}
.form-control {font-size: 1.5rem;}

.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label {
    color:  var(--trellis-black);
    border-color: var(--trellis-green);
	font-family: "Bold", sans-serif;
}

.webform-options-display-buttons label.webform-options-display-buttons-label {
    color:  var(--trellis-stone);
    border: 5px solid  var(--trellis-green30);
    border-radius: 15px;
}

.webform-type-fieldset .fieldset-legend {
	font-family: "Bold", sans-serif;
	font-size: 2em;
	padding: 0 15px 0 15px;
}

.webform-type-fieldset .fieldset-wrapper {
	padding: 0 15px 0 15px;
    border: 5px solid  var(--trellis-green30);	
}

.webform-type-fieldset legend {
    margin-bottom: 0rem;
	background-color: var(--trellis-green30);
}

.form-composite > legend, .label {
	font-family: "Bold", sans-serif;
	font-size: 1em;
}

label.option {
	font-family: "Body", sans-serif;
}

#wf-crm-billing-items caption {
    background-color: var(--trellis-green30);	
	font-family: "Bold", sans-serif;
    color: var(--trellis-black);
	padding: 0 15px 0 15px;
}


/* = CiviCRM Event Information and Registration Page Styles
-------------------------------------------------------------- */

#crm-container, .crm-container {
    color: var(--trellis-black);
	font-family: "Head", sans-serif;
}

.form-layout-compressed {
    color: var(--trellis-black);
	font-family: "Bold", sans-serif;
	font-size: 1.5em;
}

.crm-container table {
	font-size: 1.2em;
}


.crm-container fieldset {
    border-top: none;
}

.labels.font-light {
    color: var(--trellis-black);
	font-family: "Bold", sans-serif;
}

.crm-register-button {
    padding: 0.6em 1.8em!important;
    background: var(--trellis-green);
    color: #fff;
    border-radius: 15px;
    display: inline-block;
	text-shadow: none;
}

.crm-register-button:hover {  
    background: var(--trellis-rose);
	border: solid  var(--trellis-rose);
}


#crm-container a.button, #crm-container a.button:link, #crm-container a.button:visited, #crm-container .ui-dialog-buttonset .ui-button, #crm-container .crm-button {
    padding: 0.5em 1.0em!important;
    background: var(--trellis-green);
	border: solid  var(--trellis-green);
    color: #fff;
    border-radius: 0px!important;
    font-size: 1.1em;
    display: inline-block;
	text-shadow: none;
	font-family: "Head", sans-serif;
}

#crm-container .crm-button:hover {  
    background: var(--trellis-rose);
	border: solid  var(--trellis-rose);
}


.crm-section .label {
	font-family: "Head", sans-serif;
    color: var(--trellis-black);
	font-size: 0.8em!important;
	line-height: 1.7!important;
}

.crm-section .content {
	color: var(--trellis-black);
	font-family: "Body", sans-serif;
}

.fee_block-table {
    color: var(--trellis-black);
	font-family: "Body", sans-serif;
	font-size: 1.0em!important;	
}

.crm-profile legend {
	font-family: "Head", sans-serif;
    color: var(--trellis-black);

	font-size: 1.6em!important;
	float: none;
}

.crm-container .help {
	background-color:var(--trellis-green30);
	border-radius: 15px!important;
	border-color:var(--trellis-green30);
	font-size: 0.8em;
	padding: 10px;
	font-family: "Body", sans-serif;
}

#crm-container.crm-public input[type="text"] {
	border-radius: 0px;
}


#crm-container.crm-public .price-set-row .crm-price-amount-label {
    color: var(--trellis-black);
	font-size: 1.3em;
}

.crm-container .crm-multiple-checkbox-radio-options .crm-option-label-pair {
	font-size: 1.3em;
}


#crm-container.crm-public .calc-value, #crm-container.crm-public .content {
    padding-top: 6px;
    font-size: 0.5;
}


.crm-profile.crm-profile-id-159.crm-profile-name-Gift_Aid {margin-top: 35px;}

.crm-public-form-item.crm-section.is_recur-section {display: none;}


.small-text {font-size: 1em;}