/*
Theme Name: Fuel6
Theme URI: https://fuelmedical.com
Author: Fuel Medical
Description: A Fuel Medical block theme (2024)
Requires at least: 6.5
Tested up to: 6.8.1
Requires PHP: 8.0
Version: 6.4.0
Text Domain: fuel6
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Animations
# Helper Classes
# WordPress Blocks
# Forms - Moved to css/gravity-forms.css
# Header
# Content
# Footer
# Contact Section
# Location Section
# Button Block
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Custom Properties
Note: WordPress declares its variables in the body, so do the same to avoid scope issues.
--------------------------------------------------------------*/
body {
/* Structure - 1100px - for use outside of contain class */
--contain-padding: clamp(1rem, calc(50vw - 29.93rem), 19rem);
/* Design - Change in theme.json */
--primary-color: var(--wp--preset--color--primary);
--accent-color: var(--wp--preset--color--accent);
--white: var(--wp--preset--color--white);
--grey: var(--wp--preset--color--grey);
--black: var(--wp--preset--color--black);
--color1: var(--wp--preset--color--color-1);
--color2: var(--wp--preset--color--color-2);
--color3: var(--wp--preset--color--color-3);
--color4: var(--wp--preset--color--color-4);
--brand-gradient: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);
--secondary-gradient: linear-gradient(97deg, #004F70 0%, #834B50 100%);
--vertical-secondary-gradient: linear-gradient(165deg, #004F70 0%, #834B50 100%);
/* Top Level Primary Menu Colors - now managed on the block level */
--wp--preset--color--menu-background: inherit;
--wp--preset--color--menu-color: var(--white);
--wp--preset--color--menu-hover-color: var(--white);
--wp--preset--color--menu-hover-bg: var(--wp--preset--color--color-2);
/* Sub Menu Colors */
--wp--preset--color--sub-menu-background: var(--white);
--wp--preset--color--sub-menu-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-bg: var(--wp--preset--color--color-3);
/* Text */
--title-font: var(--wp--preset--font-family--title);
--title-color: var(--primary-color);
--content-font: var(--wp--preset--font-family--content);
--content-color: var(--wp--preset--color--content);
}
/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { font-size: clamp(125%, 1vw, 240%); line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; min-width: 15rem; }
iframe, img, svg, audio, video, embed { vertical-align: middle; max-width: 100%; }
img { object-fit: cover; }
img:not([src*=".png"], [src*=".gif"], [src*=".svg"]) {/* background: var(--grey); */}
a, button { text-decoration: none; color: var(--accent-color); transition: color 300ms, background-color 300ms; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--primary-color); }
[hidden] { display: none; }
@media only screen and (min-width: 68.5em) {
*[id] { scroll-margin-top: 3rem; }
}
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(var(--spin-rotation, 360deg)); }
}
@keyframes fadein {
0% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
100% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
}
@keyframes fadeout {
0% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
100% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
}
@keyframes point {
0% { transform: translate(0, 0); }
50% { transform: translate(var(--x, 1rem), var(--y, 0)); }
100% { transform: translate(0, 0); }
}
@keyframes line-reveal {
0% { clip-path: polygon(0 0,0 0,0 100%,0% 100%) }
100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%) }
}
@keyframes expandout {
0% { clip-path: inset(50% 50% 50% 50%); opacity: 0; }
100% { clip-path: inset(0% 0% 0% 0%); opacity: 1; }
}
@keyframes back-and-forth {
0% { transform: translateX(0); }
50% { transform: translateX(-0.5rem); }
100% { transform: translateX(0); }
}
/* popAnimation Example: https://jsfiddle.net/KTC_88/8xkLv520/ */
@keyframes popAnimation {
0% { transform: scale(0.5); opacity: 0; }
80% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
/**
* Animation helper classes.
*/
@media (prefers-reduced-motion:no-preference) {
/* Transition Delay */
.delay-200 { --delay: 200ms; }
.delay-300 { --delay: 300ms; }
.delay-400 { --delay: 400ms; }
.delay-500 { --delay: 500ms; }
.delay-600 { --delay: 600ms; }
.delay-750 { --delay: 750ms; }
.delay-800 { --delay: 800ms; }
.delay-900 { --delay: 900ms; }
.delay-1000 { --delay: 1000ms; }
.delay-1200 { --delay: 1200ms; }
.delay-1500 { --delay: 1500ms; }
/* Transition Time */
.time-300 { --time: 300ms; }
.time-500 {--time: 500ms;}
.time-750 { --time: 750ms; }
.time-1000 { --time: 1000ms; }
.time-1500 { --time: 1500ms; }
/* Add to wrappers to animate children */
.popin>* { transform: scale(0.5); opacity: 0; }
.popin.js-intersected>* { --delay: calc(var(--i, 0) * 200ms); animation: popAnimation 400ms ease var(--delay) forwards }
.fadein-items>* { opacity: 0; transform: translateY(0); }
.fadein-items.js-intersected>* { --delay: calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards; }
/* Add directly to element that will be affected */
.fadein { opacity: 0; transform: translateY(0); --y1: 0; }
.fadeup { opacity: 0; transform: translateY(5rem); display: block;}
.fadedown { opacity: 0; transform: translateY(-5rem); --y1: -5rem; }
.fadeleft { opacity: 0; transform: translateX(-5rem); --x1: -5rem; --y1: 0; }
.faderight { opacity: 0; transform: translateX(5rem); --x1: 5rem; --y1: 0; }
.js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 500ms) var(--easing, ease) var(--delay, 0s) forwards; }
.js-intersected .expandout { animation: expandout var(--time, 500ms) var(--easing, ease) var(--delay, 0s) forwards; }
}
/* Used to make images in links grow when link is hovered - simply add .hover-img-grow to link or image block */
figure.hover-img-grow, .hover-img-grow figure { overflow: hidden; }
.hover-img-grow img { transition: transform var(--time, 0.3s); }
a:has(+ .hover-img-grow):is(:hover, :focus-visible)+figure img, a:has(.hover-img-grow):is(:hover, :focus-visible) img, a.hover-img-grow:is(:hover, :focus-visible) img { transform: scale(var(--scale, 1.1)); }
/*--------------------------------------------------------------
# Helper Classes
--------------------------------------------------------------*/
.contain { --contain-padding: clamp(var(--mobile-padding, 1rem), calc(50vw - 29.93rem), var(--desktop-padding, 19rem)); display: block; position: relative; margin: auto; padding-right: var(--contain-padding); padding-left: var(--contain-padding); width: 100%; }
.icon-item { display: block; position: relative; margin: 1em 0; padding: 0 0 0 1.8em; }
.icon-item svg { position: absolute; top: 0.15em; left: 0; width: 1.2em; height: 1.2em; }
@media (min-width: 68.5em) {
.mobile-only { display: none !important; }
}
@media (max-width: 68.49em) {
.desktop-only {display: none !important;}
body { --center-on-mobile: center; }
.text-center-on-mobile { text-align: var(--center-on-mobile); }
.center-on-mobile { justify-content: var(--center-on-mobile); }
}
.zebra > *:not(tbody):nth-child(odd) { background-color: var(--zebra, var(--grey)); }
/* Use on query loops to help change the order every other column */
.stagger > :nth-child(odd) .wp-block-columns { flex-direction: row-reverse; }
/* Use to make link fill entire block - use when you can't wrap blocks with anchor tag */
.cover-link { position: absolute !important; inset: 0; width: 100%; z-index: 1; background: none !important; }
:has(> .cover-link) { position: relative; }
/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
@media (min-width: 37.5em) {
:where(.alignleft, .alignright):not(.wp-block-query .wp-block-post-featured-image) { max-width: 48% }
}
@media (min-width: 68.5em) {
.is-position-sticky { top: 4rem; }
}
@media (max-width: 68.49em) {
/* Center buttons on mobile but not in menu */ }
.entry-content .wp-block-buttons { justify-content: var(--center-on-mobile);
}
@media (max-width: 68.49em) {
/* Search block */
.wp-block-search { --search-white: var(--white); --search-button-bg: var(--primary-color); }
.wp-block-media-text__media {position: relative;}
}
.wp-block-search__input {padding-left: 1rem;border: 1px solid var(--accent-color);border-radius: 0.2rem 0 0 0.2rem !important;color: var(--accent-color);outline: 0;}
.wp-block-search__button { margin-left: -0.1rem; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background: var(--search-white, var(--accent-color)); color: var(--search-button-bg, white); border-color: var(--search-white, var(--accent-color)); }
.wp-block-search__button:is(:hover, :focus-visible) { background: var(--search-button-bg, var(--white)); color: var(--search-white, var(--accent-color)); }
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header-columns { background-color: unset !important; }
.header-logo-link { width: fit-content; }
.header-logo svg, .footer-logo svg { width: auto; height: clamp(4.25rem, 3.532rem + 3.592vw, 5rem); transition: transform 0.3s ease; }
.header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.header-quicklinks a:is(:hover, :focus-visible) {--wp--preset--color--primary: rgba(0,0,0,0.15);}
@media (max-width: 68.49em) {
.header {position: relative;z-index: 1;}
.header-logo { display: flex ; justify-content: center; }
.header-quicklinks {display: none !important;}
}
@media (min-width: 68.5em) {
.header:not(.block-editor-block-list__block) { position: sticky; top: -8.5rem; z-index: 999; }
.header-quicklinks { background: var(--primary-color); }
.header-quicklinks > a { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.header-quicklinks > a:last-of-type { background-color: rgba(0, 0, 0, 0.15) !important; }
.header-quicklinks > a:last-of-type:is(:hover, :focus-visible) {background-color: var(--white) !important;color: var(--primary-color) !important;}
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-block-template-part { margin: 0; }
#main { margin: 0; font-size: var(--wp--preset--font-size--content); }
.entry-content .wp-block-list li {margin: 1em 0 0 0;}
.entry-content .wp-block-list li::marker {color: var(--color2);}
.colored-letters { background-image: linear-gradient(90deg, #D86746 0%, #E7C74C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Location card loop - Used in content, and menu */
/* If a grid has only one column, make it full width */
.location-cta .wp-block-post-template.is-layout-grid:not(:has(li:nth-child(2))) { grid-template-columns: 1fr }
/* If a grid has three columns, make it flex */
.location-cta .wp-block-post-template.is-layout-grid:has(li:nth-child(3)) {
display: flex; flex-wrap: wrap;
& .wp-block-post { flex: 1 1 15rem; }
}
.location-card svg { vertical-align: bottom; }
.sub-menu .location-card {
background: none !important; padding-top: 0 !important;
& .wp-block-post-title {
padding-bottom: 0.5rem; font-size: var(--wp--preset--font-size--content); font-family: var(--content-font); font-weight: bold; }
& > .wp-block-group:first-of-type { margin-top: 1.3rem; }
}
@media (max-width: 68.49em) {
.sub-menu {
& .location-cta svg { color: var(--white); }
& .location h3 { margin-left: -1rem !important; width: calc(100% + 2rem); }
}
}
/* Bio grid custom loop */
.bio-list .bio-box { display: grid; grid-template-areas: "img label"; justify-content: start; }
.bio-list .bio-image {grid-area: img;width: 2.2rem;height: 2.8rem;margin-right: 0.5rem;overflow: hidden;border-radius: 0 5px 0 5px;position: relative;}
.bio-list .bio-image:before {content: '';position: absolute;inset: 0.1rem;border-radius: 0 5px 0 5px;padding: 0.05rem;background: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.bio-list img {width: 100%;height: 100%;}
.bio-list .bio-label { grid-area: label; line-height: normal; display: flex; flex-wrap: wrap; align-content: center; }
.bio-list .bio-label span { flex: 1 1 100%; }
.bio-list .bio-cred { font-size: 0.8rem; }
@media (max-width: 68.49em) {
#main .bio-list .bio-box { padding: 0.3rem 1rem; margin-left: -1rem; width: calc(100% + 2rem); }
#main .bio-list .bio-box:nth-child(odd) { background: rgba(0, 0, 0, 0.1); }
.sub-menu .bio-box::after, #main .bio-box::after { content: ''; --link-svg: url('data:image/svg+xml,'); background-color: currentColor; -webkit-mask: var(--link-svg); mask: var(--link-svg); position: absolute; inset: 0 8vw 0 auto; width: 0.9rem; height: 0.9rem; margin: auto; transition: background-color 0.3s ease; }
.sub-menu .bio-list .bio-box:not(:hover, :focus-visible):nth-child(even) { background: rgba(255, 255, 255, 0.1); }
.sub-menu .bio-list .bio-box.bio-box { padding: 0.2rem 1rem; }
}
@media (min-width: 68.5em) {
.bio-list { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.bio-list .bio-box { grid-template-areas: "img" "label"; flex: 0 1 calc(25% - 1rem); min-width: 7.5rem; /* Adjust to prevent names from wrapping */ text-align: center; }
.sub-menu .bio-list .bio-box {flex: 0 1 calc(33% - 1rem);}
.bio-list.bio-list .bio-box:is(:hover, :focus-visible) { background: none; }
.bio-list .bio-image {display: block;width: 100%;height: auto;aspect-ratio: 1 / 1.2;border-bottom: 0.4rem solid var(--primary-color);margin-bottom: 0.8rem;}
.bio-list .bio-image img { transition: transform 0.3s; }
.bio-list .bio-box:is(:hover, :focus-visible) .bio-image img { transform: scale(1.1); }
.bio-list .bio-cred { color: var(--content-color); }
}
/* Soundwave Animation */
.soundwaves, .soundwaves_3 {animation-name: line-reveal;animation-duration: 2s;animation-fill-mode: both;animation-play-state: paused;}
.js-intersected .soundwaves, .js-intersected .soundwaves_3 { animation-play-state: running; }
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {position: relative;overflow: hidden;}
.footer:before {content: '';position: absolute;right: 0;top: -0.1rem;left: 0;z-index: 1;width: 105%;height: 4rem;background-size: 100%;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.footer:after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;background-size: contain;background-position: bottom left;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.footer-content {padding-top: 3rem;z-index: 1;}
#foot_content {justify-content: center;}
.footer a { display: block; width: fit-content; background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px; transition: background-size 350ms; }
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:not(.footer-logo):is(:hover, :focus-visible) { background-size: 100% 2px; color: var(--white); }
.footer-logo svg {height: clamp(4.25rem, 3.532rem + 3.592vw, 5.5rem);}
.footer-socials a {position: relative;}
.footer-socials a svg { position: absolute; left: -1.5rem; }
#footer-quick-links {
max-width: 20rem;
.wp-block-heading { position: relative; }
.wp-block-heading:after { content: ''; height: 1px; width: 2rem; background: var(--white); position: absolute; bottom: -0.6rem; left: 0; }
}
#menu-footer { gap: 0.5rem; }
#menu-footer li a {position: relative;/* white-space: nowrap; */background: none;}
#menu-footer li a:after {content: url('data:image/svg+xml,');right: -1.25rem;position: absolute;}
#menu-footer li a:is(:hover, :focus):after {animation: back-and-forth 900ms ease infinite;}
@media (min-width: 68.5em) {
.footer-content { padding-top: 6rem; }
#foot_content { gap: 0 3rem; }
.amarillo-hc-logo-link { margin-left: 0 !important; }
.amarillo-hc-logo-link:is(:hover, :focus) {background-size: 0 !important;}
.amarillo-hc-logo-link svg { transition: 300ms ease; }
.amarillo-hc-logo-link:is(:hover, :focus) svg { transform: scale(1.05); }
}
@media (min-width: 82.5em) {
#foot_content { gap: 0 6rem; }
}
/* Footer Copyright Section */
.copyright-wrapper { position: relative; z-index: 1; }
/* 850px - Mobile breakpoint for copyright section */
@media only screen and (max-width: 53.125em) {
.copyright-wrapper { flex-direction: column; text-align: center; }
.policy-menu { justify-content: center; }
}
/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.6rem; }
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#contact_section {position: relative;padding-top: 0;padding-bottom: 5rem;}
#contact_section:after {content: '';animation-name: line-reveal;animation-duration: 2s;animation-fill-mode: both;animation-play-state: paused;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;background-size: contain;background-repeat: no-repeat;background-position: left top;background-image: url('data:image/svg+xml,');}
.js-intersected#contact_section:after { animation-play-state: running; }
.contact-section-container {background: none;z-index: 1;}
.contact-section-columns {justify-content: center;}
.contact-section-form-col {max-width: 22.5rem;}
.contact-section-form-col p { font-size: 0.7rem; }
.contact-section-form-col .gfield { border-radius: 0; }
.contact-section-form-col .gfield:nth-child(1) { border-color: var(--primary-color); }
.contact-section-form-col .gfield:nth-child(2) { border-color: var(--color3); }
.contact-section-form-col .gfield:nth-child(3) { border-color: var(--color4); }
.contact-section-img-col {max-width: 22.4rem;}
.contact-section-img-col-container {width: clamp(13.1rem,40.9vw,22.4rem);height: clamp(18.2rem,56.7vw,31.1rem);position: relative;margin: auto;}
.cf-top-img {display: inline-block;border-radius: 0 1.6rem 0 0;overflow: hidden;width: clamp(9.4rem,29.6vw,16.2rem);position: absolute;top: 0;right: 0;z-index: 2;}
.cf-top-img:before {content: '';position: absolute;z-index: 2;inset: 0.4rem;border-radius: 0 1.4rem 0 0;padding: .05em;background: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.cf-bottom-img {display: inline-block;border-radius: 0 0 0 1.6rem;overflow: hidden;width: clamp(9.9rem,31vw,17rem);position: absolute;bottom: 0;left: 0;z-index: 1;}
.cf-bottom-img:before {content: '';position: absolute;z-index: 2;inset: 0.4rem;border-radius: 0 0 0 1.4rem;padding: .05em;background: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.cf-top-img img, .cf-bottom-img img { transition: 500ms ease; clip-path: inset(25% 25% 25% 25%); opacity: 0; }
.js-intersected .cf-top-img img {clip-path: inset(0% 0% 0% 0%);opacity: 1;}
.js-intersected .cf-bottom-img img {clip-path: inset(0% 0% 0% 0%);opacity: 1;transition-delay: 750ms;}
@media (min-width: 48.875em) { /* 782px */
.contact-section-columns {gap: 0 clamp(2rem, 9.3vw, 7.4rem);}
}
@media (min-width: 68.5em) {
#contact_section {padding-top: 4rem;}
.contact-section-form-col p { font-size: 0.9rem; }
}
@media (min-width: 82.5em) {
#contact_section:after { background-size: 75%; }
}
/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/
.location-section-block { border: 1px solid;border-image: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);border-image-slice: 1;padding: 0.4rem !important;background: none;}
.map-filter-panel.map-sidebar {
border-bottom: none !important;
summary {background: var(--primary-color) !important;color: var(--white);}
summary:after {content: "";clip-path: unset;width: 1.2rem;height: 1.2rem;border-radius: 50%;background: none;background-image: url('data:image/svg+xml,');}
summary:is(:hover,:focus-visible)::after, &[open] summary::after {
background-image: url('data:image/svg+xml,');
}
&[open] summary:after {transform: rotate(45deg); background-color: unset !important;}
.filter-controls {color: var(--accent-color);font-size: 0.6rem;};
}
.map-nav-panel.map-sidebar { background: var(--white); border-top: none !important; border-left: 4px solid var(--primary-color);
.hours.icon-item { padding-left: 0; }
.icon-item {margin-top:0.4rem}
.icon-item svg { display: none; }
.hours-day, .hours-time {display: block;color: var(--primary-color);font-size: 0.9rem;margin: 0.25rem 0;transition: 300ms ease;}
}
.map-nav-item {border-color: var(--primary-color);height: 25%;align-content: center;position: relative;border-image: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%); border-image-slice: 1;}
.map-nav-item:after {content: '';width: 0.4rem;height: 0.8rem;position: absolute;top: 0;right: 1rem;bottom: 0;margin: auto;transition: 500ms ease;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.map-nav-item:has(.map-nav-item-btn:is(:hover,:focus,.map-active)):after {animation: back-and-forth 900ms ease infinite; }
.map-nav-item-btn {color: var(--accent-color);height: 100%;}
.map-nav-item-btn:is(:hover,:focus,.map-active) {color: var(--primary-color);background: var(--white);}
.map-nav-item-btn:is(:hover,:focus,.map-active) .hours-day, .map-nav-item-btn:is(:hover,:focus,.map-active) .hours-time {/* color: var(--white); */}
.map-mobile-view-bar {background: var(--primary-color);color: var(--white);border-top: 1px solid var(--white) !important;}
.map-mobile-view-bar:is(:hover,:focus-visible) { background: var(--color2); }
.map-info-panel.map-sidebar {
background: var(--white);
.map-back { background: var(--primary-color); }
.map-back:is(:hover,:focus,.map-active) { background: var(--color2); }
.map-loc-header { background: none; color: var(--accent-color) !important; }
.map-quick-links { background: var(--primary-color); }
.map-quick-links a { color: var(--white) !important; }
.map-quick-links a:is(:hover,:focus-visible) svg { color: var(--color4); }
.map-quick-links a svg { color: var(--white); }
.map-quick-links a svg path:last-of-type { fill: var(--primary-color); }
.infoPanel-padding:has(h3) { border-left: 4px solid var(--primary-color);
.infoPanel-padding .icon-item { color: var(--accent-color) !important; }
}
.map-info .map-loc-info svg {color: var(--primary-color);}
/*--------------------------------------------------------------
# Button Block
--------------------------------------------------------------*/
.wp-block-buttons { justify-content: var(--center-on-mobile); /* Center buttons on mobile */ }
.button, .wp-block-file__button, a.wp-block-post-excerpt__more-link, .wp-block-buttons .wp-element-button, .wp-block-buttons .wp-block-button__link.wp-block-button__link, .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button, .gform_wrapper.gravity-theme .gform_footer button {background: transparent;border: none;color: var(--accent-color);font-weight: 400;line-height: normal;padding: 0.8rem 3rem 0.8rem 1.6rem;position: relative;border-radius: 0 0.4rem;transition: 350ms ease;z-index: 1;}
.button:before, .wp-block-file__button:before, .wp-block-post-excerpt__more-link:before, .wp-block-buttons .wp-element-button:before, .wp-block-buttons .wp-block-button__link.wp-block-button__link:before, .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button:before, .gform_wrapper.gravity-theme .gform_footer button:before {content: "";position: absolute;inset: 0;border-radius: 0 0.4rem 0 0.4rem;padding: .05em;background: linear-gradient(90deg, #489FC3 2.3%, #D03743 57.25%, #E7C74C 106.21%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.button:after, .wp-block-post-excerpt__more-link:after, .wp-block-buttons .wp-element-button:after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:after, .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button:after, .gform_wrapper.gravity-theme .gform_footer button:after {content: '';width: 1.05rem;height: 0.45rem;position: absolute;top: 0;right: 1.5rem;bottom: 0;margin: auto;transition: 400ms ease;background-image: url('data:image/svg+xml,');}
/* Button Hover State */
.button:is(:hover, :focus-visible), .wp-block-file__button:is(:hover, :focus-visible), .wp-block-post-excerpt__more-link:is(:hover, :focus-visible), .wp-block-buttons .wp-element-button:is(:hover, :focus-visible),.wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible), .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button:is(:hover, :focus-visible), .gform_wrapper.gravity-theme .gform_footer button:is(:hover, :focus-visible) {background: var(--primary-color) !important;color: var(--white);}
.button:is(:hover, :focus-visible):before, .wp-block-file__button:is(:hover, :focus-visible):before, .wp-block-post-excerpt__more-link:is(:hover, :focus-visible):before, .wp-block-buttons .wp-element-button:is(:hover, :focus-visible):before, .wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible):before, .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button:is(:hover, :focus-visible):before, .gform_wrapper.gravity-theme .gform_footer button:is(:hover, :focus-visible):before { background: var(--primary-color); }
.button:is(:hover, :focus-visible):after, .wp-block-file__button:is(:hover, :focus-visible):after, .wp-block-post-excerpt__more-link:is(:hover, :focus-visible):after, .wp-block-buttons .wp-element-button:is(:hover, :focus-visible):after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible):after, .wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link.wp-element-button:is(:hover, :focus-visible):after, .gform_wrapper.gravity-theme .gform_footer button:is(:hover, :focus-visible):after {transform: translateX(0.5rem);background-image: url('data:image/svg+xml,');}
/* File Download Button/Link */
.wp-block-file *+.wp-block-file__button:is(:hover, :focus-visible) { color: var(--white); }
.wp-block-file a:first-of-type:is(:hover, :focus-visible) {text-decoration: underline;}
/* Button block - outline */
.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link {color: var(--white);}
.wp-block-button.is-style-outline .wp-element-button:is(:hover, :focus-visible) {/* background: var(--primary-color) !important; *//* color: var(--white); */}
/*
* iPhone bug fix
* https://www.notion.so/fueldigital/iPhone-button-contrast-fix-47918141a741472fbc1fba3aa5919ca4
*/
@supports (-webkit-touch-callout: none) {
.entry-content a.wp-block-button__link { transition: none; }
}
/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
* { background: transparent !important; color: initial !important; --wp--preset--color--white: initial !important; }
.main-header { all: unset; }
.main-title { margin: 1rem auto !important; padding-bottom: 1rem; border-bottom: 2px solid #000;}
nav, #sidebar, .header, .footer, .pagination, .wp-prev-next, .main-header img, .wp-block-cover__image-background, .wp-block-cover__background, main + * { display: none !important; }
}
/*--------------------------------------------------------------
# Safari 15.3 fallbacks
Safari 15.3 and under bug fixes - welcome to the new IE
--------------------------------------------------------------*/
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
/* Hide Dialog (not supported) */
dialog { display: none; background-color: var(--white); z-index: 9999; }
dialog[open] { display: block; }
/* menu fixes */
.js-active .sub-menu-trigger[aria-expanded=true]+.sub-menu .sub-animate>* { background: var(--white); }
.primary-menu .menu-label:hover { color: var(--white); }
}
}
/*
* iPhone bug fix for buttons
* https://www.notion.so/fueldigital/iPhone-button-contrast-fix-47918141a741472fbc1fba3aa5919ca4
*/
@supports (-webkit-touch-callout: none) {
.entry-content a.wp-block-button__link{ transition: none; }
}