/*
Theme Name: Fuel6
Theme URI: https://fuelmedical.com
Author: Fuel Medical
Description: A Fuel Medical block theme (2023)
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 8.0
Version: 6.2.0
Text Domain: fuel6
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Custom Elements
# WordPress Blocks
# Forms
## Search Form
# Header
# Content
# Footer
# Map
# Animations
## Page Transition
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Custom Properties
--------------------------------------------------------------*/

body {
	/**
	 * Note: WordPress declares its variables in the body, so do the same to avoid scope issues.
	 */
	
	 /* Structure - 1100px - for use outside on 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);

	/* Top Level Primary Menu Colors */
	--wp--preset--color--menu-background: var(--primary-color);
	--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), sans-serif;
	--content-color: var(--wp--preset--color--content);

	--wp--preset--color--h-1: var(--white);
	--wp--preset--color--h-2: var(--wp--preset--color--color-1);
	--wp--preset--color--h-3: var(--primary-color);
	--wp--preset--color--footer: var(--white);
}


/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html {font-size: 125%;line-height: 1.9;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;scrollbar-gutter: stable;position: relative;min-width: 18rem;}
ul, ol {padding-left: clamp(1.5rem, 3vw, 2rem);padding-left: 1.2rem;}
li { margin: 1em 0 0 0; }
iframe, img, svg, audio, canvas, video, object, embed { vertical-align: middle; max-width: 100%; }
img { object-fit: cover; }
img[src*=".jpg"] { background: var(--grey); }
blockquote, figcaption { font-style: italic; }
small { font-size: 0.75em; }
sub, sup { font-size: 0.75em; line-height: 0; }
a { 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); }

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


/*--------------------------------------------------------------
# Custom Elements
--------------------------------------------------------------*/
.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: 38.5em) { 
    .list-col-2 { column-count: 2; column-gap: 2em; margin-left: 1rem; }
}


/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
.alignleft, .alignright { width: 100% }
#main .alignleft { float: left; margin: 0 1em 0.2em 0; }
#main .alignright { float: right; margin: 0 0 0.2em 1em; }
.entry-content *:has(.alignright, .alignleft) { display: flow-root; }

@media (min-width: 37.5em) { 
    .alignleft, .alignright { max-width: 48% }
}

.wp-block-cover__inner-container { position: relative; }
.entry-content { container-type: inline-size; container-name: content; }

@container content (max-width: 25rem) { 
    #main .alignright, #main .alignleft { float: none; margin: 1.5em 0 0.2em; min-width: 100%; }
}


/*--------------------------------------------------------------
# Forms - Moved to css/gravity-forms.css
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header { position: relative; z-index: 9999; }
.header .wp-block-columns.contain { --contain-padding: clamp(2rem, 5vw, 3rem); }
.header-logo { padding-top: clamp(0.8rem, 3vw, 1.5rem); padding-bottom: clamp(0.8rem, 3vw, 1.5rem); }
.header-logo svg, .footer-logo svg { transition: transform 0.3s ease; height: clamp(4.26rem, 6vw, 5.5rem); }
.header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }

@media (max-width: 68.49em) { 
    .header { z-index: 998; }
    .header-logo { text-align: center; }
    .header-right { display: none; }
}

.header-right { text-align: right; }
.header-quicklinks.header-quicklinks .menu-label {background: var(--wp--preset--color--ten-pct-primary);color: var(--wp--preset--color--primary);padding: 0.65rem 1.6rem;font-size: clamp(0.9rem, 2vw - 0.5rem, 1.1rem);border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;line-height: 1.364;text-decoration: none;}
.header-quicklinks .menu-label:is(:hover, :focus-visible) {background: var(--wp--preset--color--primary);color: var(--white);}
.header-quicklinks svg {width: 0.9rem;height: 0.9rem;margin-right: 0.25rem;transform: translateY(-0.2rem);}
.header-quicklinks svg path { transition: fill 300ms; }
.header-quicklinks .menu-label:is(:hover, :focus-visible) svg path { fill: #fff; }

/* Delete this CSS and block if not using header phone number */ 
.header-number {font-size: clamp(1rem, 3vw, 2rem);font-weight: 700;margin-top: clamp(0.9rem, 4vw - 2rem, 1.5rem) !important;display: inline-block;text-decoration: none;}
.header-number svg { width: 2rem; height: 2rem; margin-right: 0.4rem; }

/* Phone Tree - delete CSS and block if not using phone tree */ 
.header-right .dialog-trigger { display: none; /* change to block to unhide */ transform: translateY(1.5rem); }
.dialog-box .phone-tree { --wp--style--global--content-size: 24rem; max-width: var(--wp--style--global--content-size); width: 90vw; }
.phone-tree a { display: flex; color: var(--primary-color); margin-bottom: 0.8rem; text-align: left; }
.phone-tree a:last-child { margin-bottom: 0; }
.phone-tree a strong { flex: auto; position: relative; overflow: hidden; }
.phone-tree a strong::after { content: ''; position: absolute; bottom: 0.15rem; height: 1em; width: 100%; margin-left: 0; background: radial-gradient(var(--primary-color) 1px,transparent 0) left bottom/8px 8px repeat-x; }
.phone-tree a svg { margin-right: .3rem; margin: 0.4rem 0.3rem 0 0.45rem; }


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-site-blocks { margin: auto; }
#main { margin: 0 0 2em; font-size: var(--wp--preset--font-size--content); }

/* Bio grid loop */ 
.bio-list .bio-box { display: grid; grid-template-areas: "img label"; justify-content: start; }
.bio-list .bio-image {grid-area: img;width: 2.5rem;height: 2.5rem;margin-right: 0.5rem;overflow: hidden;}
.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); }
}

@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% - 1.3rem);min-width: 7.5rem; /* Adjust to prevent names from wrapping */max-width: 12.8rem;text-align: center;color: var(--wp--preset--color--primary);}
    .bio-list.bio-list .bio-box:is(:hover, :focus-visible) {background: none;color: var(--wp--preset--color--accent);}
    .bio-list .bio-image {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); }
}

/* Location card loop - Used in footer, content, and menu */ 
body .location-list-detailed { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(0.8rem, 4vw, 3rem); max-width: 100%; margin: 0; }
.footer .location-list-detailed {gap: 0 2rem;}
.location-list-detailed .location-box {min-width: 15rem;flex: 1 1 calc(33.3% - 2rem);container-type: inline-size;container-name: loc-box;}
.location-box .loc-left {margin: 0;}
#main .location-list-detailed .location-box { background: var(--grey); padding: 1.3rem clamp(1.2rem, 2.2vw, 2rem) 2.3rem; }
#main .location-box .loc-title { border-bottom: 1px solid var(--wp--preset--color--h-3); padding-bottom: 0.9rem; margin-top: 0; }
#main .location-list-detailed a {color: var(--content-color);background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;background-position-x: 1.6rem;width: fit-content;text-decoration: none;}
#main .location-list-detailed a:is(:hover, :focus-visible) { background-size: 100% 2px; }
.location-box p, .location-box .icon-item {margin-top: 0;font-style: normal;}
.sub-menu .location-box a.icon-item {margin-left: -0.5rem;padding-left: 2.3rem !important;text-decoration: none;}
.sub-menu .location-box a.icon-item svg { left: 0.5rem }
.location-box svg { width: 0.9rem; height: 0.9rem; transform: translateY(0.2rem); }
#main .location-box svg { color: var(--accent-color); }
#main .location-box img { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); }

@media only screen and (min-width: 37.5em) { 
    .location-box {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0 1rem;}
    .location-box .loc-title {flex: 0 0 100%;}
    .location-box:only-child .loc-left {flex: 0 0 12rem;}
    .location-box .loc-left {flex: 0 0 10rem;}
    .location-box .hours { flex: 0 0 13rem; }
    .location-box .map-link { flex: 1 0 10rem; }
}

/* Apply styles when there is only one locations-card */ 
.location-list-detailed .location-box:only-child {justify-content: start;}
.location-list-detailed .location-box:only-child img { width: 100% }

@media (min-width: 51.25em) { 
    .location-list-detailed .location-box:only-child .map-link { width: calc(100% - 25rem) }
}

/* Location Card Animations */ 
@media (prefers-reduced-motion:no-preference) { 
    #main .location-list-detailed > .location-box { opacity: 0; transform: translateY(0); }
    #main .location-list-detailed.js-intersected > .location-box { --delay:calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards }
    .location-box:nth-child(1) { --i: 0; }
    .location-box:nth-child(2) { --i: 1; }
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { color: var(--white); background: var(--primary-color); padding-top: clamp(1.2rem, 2vw, 2.8rem); margin: 0; }
.footer a, .footer h3 { color: var(--white); }
.footer a, .location-list-names a { text-decoration: none; display: block; width: fit-content; background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px; transition: background-size 350ms; font-size: var(--wp--preset--font-size--footer); }
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:is(:hover, :focus-visible) { background-size: 100% 2px; }
#foot_content { justify-content: space-between; font-size: var(--wp--preset--font-size--footer); gap: 6%; }
#foot_content .wp-block-column {flex: 0.5 1 auto;flex-basis: fit-content !important;margin-bottom: 1rem;}
.footer .footer-logo {max-width: 13.3rem;margin: auto;}
.footer .footer-logo:is(:hover, :focus-visible) { background-size: 0; }
.footer-logo path { fill: var(--white); }
.footer-socials { margin-top: 1rem; margin-block-end: 1rem !important; }
.footer-socials .social-menu { justify-content: center; }
.footer-socials a { transition: transform 0.3s ease; }
.footer-socials a:is(:hover, :focus) { background: none; transform: scale(1.2); }
.footer #footer-locations {flex: 2 0 auto;}
.footer .wp-block-heading { font-size: clamp(1.1rem, 2vw, 1.2rem); border-bottom: 1px solid var(--white); padding-bottom: 0.6rem; margin: 0; }
.footer .wp-block-heading + * {margin-top: 1rem;}
.footer .location-box > .hours {margin: 1rem 0 0;}

@media only screen and (max-width: 68.49em) { 
    #foot_content { flex-wrap: wrap !important; justify-content: center; }
    #footer-locations { flex-basis: 100% !important; }
    #footer-quick-links { display: none; }
}

@media only screen and (min-width: 68.5em) { 
	#footer-quick-links .wp-block-navigation .wp-block-navigation-item__content { line-height: 1.6; }
}

.copyright-wrapper { padding-top: 1.2rem; padding-bottom: 5rem; background: rgba(0,0,0,0.1); text-align: center; }
.policy-menu li { margin: 0; }
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.6rem; }
.policy-menu a { font-size: var(--wp--preset--font-size--copyright); }

@media only screen and (min-width: 68.5em) { 
    .copyright-wrapper { text-align: left; padding-bottom: 1.2rem; }
    .policy-menu { justify-content: end; }
}


/*--------------------------------------------------------------
# Map
--------------------------------------------------------------*/
.fm-map { position: relative; width: 100%; height: 30rem; max-height: calc(90vh - 3.2rem); background: var(--grey); margin-bottom: 2rem; }
.map-list-button { font-size: 1rem; }
.map-list-button, .map-show-list, .map-show-map { background: none; }
.map-show-map, .map-show-list { font-size: 0.8rem; }
[hidden] { display: none; }


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

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

@media (prefers-reduced-motion:no-preference) {
    .delay-100 { animation-delay: 100ms; }
    .delay-150 { animation-delay: 150ms; }
    .delay-200 { animation-delay: 200ms; }
    .delay-250 { animation-delay: 250ms; }
    .delay-300 { animation-delay: 300ms; }
    .delay-350 { animation-delay: 350ms; }
    .delay-400 { animation-delay: 400ms; }
    .delay-450 { animation-delay: 450ms; }
    .delay-500 { animation-delay: 500ms; }
    .delay-600 { animation-delay: 600ms; }
    .delay-700 { animation-delay: 700ms; }
    .delay-800 { animation-delay: 800ms; }
    .delay-900 { animation-delay: 900ms; }
    .delay-1000 { animation-delay: 1000ms; }
    .delay-1100 { animation-delay: 1100ms; }
    .delay-1200 { animation-delay: 1200ms; }
    .delay-1300 { animation-delay: 1300ms; }
    .delay-1400 { animation-delay: 1400ms; }
    .delay-1500 { animation-delay: 1500ms; }
    .delay-1600 { animation-delay: 1600ms; }
}


/**
 * 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 */ 
    .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; }
    .js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight)  { animation: fadein var(--time, 300ms) var(--easing, ease) forwards; }
}


/*--------------------------------------------------------------
## Page Transition
# @see https://css-tricks.com/animating-with-clip-path/
# @see https://www.uplabs.com/posts/clip-path-generator
--------------------------------------------------------------*/
.page-transition { display: none; }

/*
 * Page transition bug:
 * Mobile, page transition: Something to take note on. Whenever I click to a page, 
 * then press back on my iPhone, the page transition is locked and I only see the green background color over my whole screen. 
 * I can’t navigate from that point at all anymore.
 */

/*
@media (prefers-reduced-motion:no-preference) {
	.page-transition {
		display: block;
		will-change: transform;
		background-color: var(--wp--preset--color--menu-hover-bg);
		pointer-events: none;
	}

	.transition-in {
		animation: 0.3s slidein-left forwards;
	}

	.transition-out {
		animation: 0.3s slideout-right 0.3s  forwards;
	}

	@keyframes slidein-left {
		0% { clip-path: inset(0% 100% 0% 0%); }
		100% { clip-path: inset(0% 0% 0% 0%); }
	}

	@keyframes slideout-right {
		0% { clip-path: inset(0% 0% 0% 0%); }
		100% { clip-path: inset(0% 0% 0% 100%); }
	}
}
*/

/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
    @page { margin: 0.5cm; }
    * { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
    a, a:visited { color: #444 !important; text-decoration: underline; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    p, h1, h2, h3 { orphans: 3; widows: 3; }
    h1, h2, h3 { page-break-after: avoid; }
    .main-header { padding-top: 0 !important; padding-bottom: 0 !important; }
    .main-title { margin: 0; padding-bottom: 1rem; border-bottom: 2px solid #000; }
    .primary-menu, #sidebar, .header, .footer, .page-navigation, .pagination, .wp-prev-next, .respond-form { 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); }
	}
}