/*
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.9
Requires PHP: 8.0
Version: 6.4.4
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Helper Classes
# WordPress Blocks
# Header
# Content
# Footer
# Location Section
# Contact Section
# Animations
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Custom Properties
--------------------------------------------------------------*/
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);
	--cta1: var(--wp--preset--color--cta-1);
	--cta2: var(--wp--preset--color--cta-2);
	--cta3: var(--wp--preset--color--cta-3);


	/* Text */
	--title-font: var(--wp--preset--font-family--title);
	--title-color: var(--wp--preset--color--primary);

	--content-font: var(--wp--preset--font-family--content), sans-serif;
	--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:has(.ios) { overscroll-behavior: none; }
html { font-size: clamp(125%, 1vw, 240%); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; min-width: 15rem; }
iframe, img, svg, video {vertical-align: middle;max-width: 100vw;}
img {object-fit: cover;width: -webkit-fill-available;}
img:not([src*=".png"], [src*=".gif"], [src*=".svg"]) { background: var(--grey); }
picture[style*="width"] { display: flex; }
a {text-decoration: none;color: var(--accent-color);transition: color 300ms, background-color 300ms;}
button { transition: color 300ms, background-color 300ms; }
a[href^="tel:"] { white-space: nowrap; }
a:hover {color: var(--accent-color);}
[hidden] { display: none; }

@media only screen and (min-width: 68.5em) {
	*[id] { scroll-margin-top: 3rem; }
}

	
/*--------------------------------------------------------------
# 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; }
.text-center { text-align: center; }

@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); }
	.align-items-center-on-mobile { align-items: center; }
	.margin-center-on-mobile { margin-left: auto; margin-right: auto; }
	.stack-on-mobile { flex-direction: column; }
	.full-width-on-mobile { width: 100%; max-width: 100%; }
	.wrap-on-mobile { flex-wrap: wrap; }
}

.zebra > *:not(tbody):nth-child(odd) { background-color: var(--zebra, var(--grey)); }
.toggle-content:has(.zebra) { padding: 0; }

/* 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;opacity: 0;}
:has(> .cover-link) { position: relative; }


/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
@media (max-width: 37.49em) {
	:where(.alignleft, .alignright):not(.wp-block-query .wp-block-post-featured-image) { float: none; margin: 0 auto 1rem; }
}

@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 { transition: top 0.3s ease; }
	body:has(header.show-sticky) .is-position-sticky { top: 4rem; }
}

/* Button hover/focus styles */
:root :where(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible) { background-color: var(--white); color: var(--wp--preset--color--accent); }
.wp-block-button.is-style-outline .wp-element-button:is(:hover, :focus-visible) { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--white); }

@media (max-width: 68.49em) {
	.entry-content .wp-block-buttons {
		/* Center buttons on mobile but not in menu */
		/* justify-content: var(--center-on-mobile); */
	}
}

/* Search block */
.wp-block-search__input {border-color: var(--accent-color);color: var(--black);background: none;outline: 0;border-radius: 0.3rem 0 0 0.3rem;}
.wp-block-search__button {margin-left: -0.1rem;border-radius: 0;}
.wp-block-search__button:is(:hover, :focus-visible) { background: var(--search-button-bg, var(--white)); color: var(--search-white, var(--accent-color)); }


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
@media (max-width: 68.49em) {
	.show-sticky .wp-block-group:has( > .fuel6-walker-menu):not(:has(.depth-0 > .menu-link[aria-expanded="true"])) { bottom: calc((var(--menu-height) + env(safe-area-inset-bottom) + 0.05rem) * -1); }
}

.header-logo svg, .footer-logo svg { 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: var(--wp--preset--color--menu-hover-bg); }
.header-logo .main-logo-container {display: block;opacity: 1;margin: 0;text-align: center;}
.header-logo .main-logo-container img {height: clamp(4.25rem, 3.532rem + 3.592vw, 5.5rem);background: none;width: auto !important;}

@media (min-width: 68.5em) {
	.header:not(.block-editor-block-list__block) { position: sticky; top: calc(var(--headerHeight, 11.7rem) * -1); z-index: 999; transition: top 0.5s ease; }
	body:not(.js-active) .header:not(.block-editor-block-list__block), .header:has(.depth-0 > .menu-link[aria-expanded="true"]), .header.show-sticky:not(.block-editor-block-list__block) { --menuTop: calc(var(--headerHeight, 11.7rem) - var(--menu-height, 3.2rem)); top: calc(var(--menuTop, 8.5rem) * -1); }
	.header > .wp-block-columns {padding-left: 1rem !important;}
	.header-logo .main-logo-container { display: inline-block; }
	.header-logo .main-logo-container img {height: auto !important;}
	.header-quicklinks .wp-block-fuel-wrapper-block {background: rgba(219, 197, 161, 0.35);font-size: 0.8rem;white-space: nowrap;}
	.header-quicklinks .wp-block-fuel-wrapper-block:is(:hover, :focus-visible) { background: var(--primary-color); }
	.header-number { line-height: 1; }
	.header-number svg { color: var(--accent-color); width: 2rem; vertical-align: -0.45rem; }
}

@media (min-width: 82.5em) {
	.header-quicklinks .wp-block-fuel-wrapper-block { font-size: 1rem; }
}

@media (min-width: 100em) { /* 1600px */
	.header > .wp-block-columns {padding-left: calc(50% - 35.5rem) !important;}
	.header-quicklinks p { font-size: 1.2rem; }
}


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer a {width: fit-content;background: linear-gradient(0deg, var(--black), var(--black)) 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(--black);}
.footer-socials a {transition: transform 0.3s ease;font-size: 1.2rem;gap: 0;}
.footer-socials a:is(:hover, :focus-visible) { background: none; transform: scale(1.2); }
.footer .icon-item svg { color: var(--accent-color); } 
ul:has(.footer-location-col-container) { display: flex; gap: 0 0; }
ul:has(.footer-location-col-container) > li { width: 100%; }
#menu-footer { gap: 0.5rem 0; }

@media (min-width: 38.5em) { /* 616px */
	.footer-location-col-container { display: grid; grid-template-areas: 'top top' 'bottom-left bottom-right'; }
	.footer-location-col-title { grid-area: top; }
	.footer-location-col-left { grid-area: bottom-left; }
	.footer-location-col-right { grid-area: bottom-right; }
}

@media (min-width: 82.5em) {
	#foot_content { gap: 0 3.8rem; }
}


/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.7rem; }


/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/
.location-section-title {position: relative;}
.location-section-title:after {content: '';background: var(--color1);height: 1px;width: 8rem;position: absolute;right: 0;bottom: -1.05rem;left: 0;margin: auto;}
.location-card {
	background-color: #DBC5A133 !important;
	> .wp-block-group {gap: 2.5rem;}
	.wp-block-group:has(>.address,>.phone,>.hours) svg { margin-top: 0.4rem; }
	.address, .phone {color: var(--black); }
	.address:is(:hover, :focus-visible), .phone:is(:hover, :focus-visible) {color: var(--accent-color);text-decoration: underline;}
	.cover-link {font-size: 0.1px;};
}

@media (min-width: 68.5em) {
	#location_section { margin-top: 6rem !important; margin-bottom: 6.3rem !important; }
	.location-section-title { margin-bottom: 5.2rem !important; }
	.location-section-title:after { bottom: -1.45rem; }
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact-section-title {position: relative;}
.contact-section-title:after {content: '';background: var(--color1);height: 1px;width: 8rem;position: absolute;right: 0;bottom: -1.05rem;left: 0;margin: auto;}

@media (min-width: 68.5em) {
	.contact-section-container {padding-top: 2.8rem !important;padding-bottom: 1.8rem !important;}
	.contact-section-title {margin-bottom: 3.2rem !important;}
	.contact-section-title:after { bottom: -1.45rem; }
}


/*--------------------------------------------------------------
# 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 reveal {
	0% { opacity: var(--o1, 0); clip-path: inset(var(--reveal, 25%)); }
	100% { opacity: var(--o2, 1); clip-path: inset(var(--reveal, 0%)); }
}

@keyframes point {
	0% { transform: translate(0, 0); }
	50% { transform: translate(var(--x, 1rem), var(--y, 0)); }
	100% { transform: translate(0, 0); }
}

/* popAnimation Example: https://jsfiddle.net/KTC_88/8xkLv520/ */
@keyframes popAnimation {
	0% { transform: scale(0.5); opacity: 0; }
	60% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}

/**
 * Animation helper classes.
 */
@media (prefers-reduced-motion:no-preference) {

	/* 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 */z-index: ;
	.fadein { opacity: 0; transform: translateY(0); --y1: 0; }
	.fadeup { opacity: 0; transform: translateY(5rem); }
	.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; }
	.reveal { opacity: 0; clip-path: inset(25%); }

	body:not(.js-active) .js-intersect:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight), /* NO JS */
	.js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 300ms) var(--easing, ease) var(--delay, 0s) forwards; }

	body:not(.js-active) .js-intersect.reveal, /* NO JS */
	.js-intersected.reveal { animation: reveal var(--time, 300ms) var(--easing, ease) var(--delay, 0s) forwards; }
}


.i2 {--i: 2}
.i3 {--i: 3}
.i4 {--i: 4}
.i5 {--i: 5}
.i6 {--i: 6}
.i7 {--i: 7}
.i8 {--i: 8}
.i9 {--i: 9}
.i10 {--i: 10}

.delay500 {--delay: 500ms}
.delay1000 {--delay: 1s}
.delay1500 {--delay: 1.5s}
.delay2000 {--delay: 2s}

/* 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)); }


/*--------------------------------------------------------------
# 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; }
}