/**
 * Theme Name:        Dixon Health
 * Description:       Dixon Health Wordpress Theme (Child of 2025)
 * Version:           1.0.1
 * Author:            Dorset Web Design
 * Author URI:        https://dorsetwebdesign.co/
 * Text Domain:       dwd-2025-child
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Template:          twentytwentyfive
 */

/* Background colour of site */
body {
	background-color: var(--wp--preset--color--custom-dixon-light-grey);
}

/* Unset underline on links */
a:not([class]) {
	text-decoration: none;
}


/* Archive pages - core fix for loop images sometimes being wider than containers */
.archive .wp-block-post-featured-image {
	max-width: 100% !important;
	/*img {
		border-radius: 0 40px;
	}*/
}
/* Core fix for list items displayed as flex */
.archive .entry-content li {
	display: list-item;
}


/* Button styles */
.wp-element-button {
    padding: 0.25rem 3.5rem !important;
    border: 2px solid var(--wp--preset--color--custom-dixon-orange);
}
.wp-element-button:hover {
    background-color: var(--wp--preset--color--custom-dixon-orange);
}


/* Footer image */
.footer-wave,
.footer-wave > img {
	width: 100%;
	margin-bottom: -1px;
}
.footer-logos {
	@media (max-width: 550px) {
		gap: 1rem;
	}
}
.footer-logos img {
   object-fit: contain !important;
}
/* footer layout */
.footer-links {
	margin-left: auto !important;
}
.footer-content {
	@media (max-width: 1200px) {
		padding-top: var(--wp--preset--spacing--30) !important;
	}
}


/* Team members slider on homepage */
.team-slider,
.clinic-slider {
	overflow: hidden;
	
	ul {
		display: flex;
		width: fit-content;
		overflow-x: scroll;
		padding-bottom: 1rem;
	}
	ul::before,
	ul::after {
		content: url('/wp-content/uploads/2025/03/arrow.svg');
		display: flex;
		height: 150px;
		align-items: center;
		width: calc(var(--wp--preset--spacing--40) + 16px);
		padding: 0 8px;
	}
	ul::before {
		transform: rotate(180deg);
	}
	li {
		display: block;
		flex-shrink: 0;
		width: 150px;
		height: 150px;
		margin: 0 var(--wp--preset--spacing--20);
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid var(--wp--preset--color--custom-dixon-dark-blue);
	}
	
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
	background-color: var(--wp--preset--color--custom-dixon-light-blue);
  }
  ::-webkit-scrollbar {
	width: 8px;
	background-color: #F5F5F5;
  }
  ::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--custom-dixon-mid-blue);
  }
}


/* Fewer team members per clinic so show job title and short bio and wider card */
.clinic-slider {
    /* Uncomment to activate scroll-snap
    ul {
        scroll-snap-type: x mandatory;
        scroll-padding: calc(var(--wp--preset--spacing--40) + 8px);
    }
    ul::before {
        position: sticky;
        left: 0;
        background-color: var(--wp--preset--color--custom-dixon-light-grey);
        z-index: 3;
    }*/
    ul::before,
	ul::after {
        height: unset;
    }
    li {
        scroll-snap-align: start;
        width: calc(24% - var(--wp--preset--spacing--40));
        min-width: min(calc(100% - var(--wp--preset--spacing--20)), 340px);
        height: auto;
        margin: 0 var(--wp--preset--spacing--20);
		overflow: hidden;
		border: none;
		border-radius: 0;
		background-image: linear-gradient(var(--wp--preset--color--custom-dixon-light-grey) 75px, var(--wp--preset--color--custom-dixon-light-blue) 75px);
		
		img {
    		border-radius: 50%;
    		overflow: hidden;
    		border: 2px solid var(--wp--preset--color--custom-dixon-dark-blue);
        }
	}
	.entry-content {
		text-align: center;
	}
}



/* Team members - cards on clinic page */
.team-cards {
	ul {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		
		@media (max-width: 1341px) {
	        flex-wrap: wrap;
			gap: var(--wp--preset--spacing--40);
		}
	}
	li {
		display: inline-flex;
		width: 100%;
		margin-block-start: 0;
		background-image: linear-gradient(var(--wp--preset--color--custom-dixon-light-grey) 75px, var(--wp--preset--color--custom-dixon-light-blue) 75px);
		
		@media (min-width: 600px) and (max-width: 900px) {
	        width: calc((100% - var(--wp--preset--spacing--40)) / 2);
	    }
		@media (min-width: 901px) and (max-width: 1340px) {
	    	width: calc((100% - var(--wp--preset--spacing--40) * 2) / 3);
		}
		@media (min-width: 1341px) {
	    	width: 24%;
		}
	}
	li img {
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid var(--wp--preset--color--custom-dixon-dark-blue);
	}
	.entry-content {
		text-align: center;
	}
}
/* Team member cards on archive page */
.archive .team-cards {
    ul {
        flex-wrap: wrap;
    }
}


/* Team members - single post */
/* Make profile picture circular */
.team-member-image {
	text-align: center;
	> img {
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		max-width: 560px;
	}
}


/* Gravityforms styles - contact form */
#gform_1 {
	container: form-container / inline-size;
	
	--gf-form-gap-y: 1.5rem;
}
#gform_1 label {
	--gf-local-font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}
#gform_submit_button_1 {
	--gf-ctrl-btn-radius: 2rem;
	--gf-local-font-size: var(--wp--preset--font-size--medium);
	--gf-local-padding-y: 0.25rem;
	--gf-local-padding-x: 3.5rem;
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--custom-dixon-orange);
	--gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--custom-dixon-orange);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--custom-dixon-orange);
	--gf-ctrl-btn-border-width-primary: 2px;
	margin: auto;
}
/* Make name, email and phone appear on same line */
@container form-container (width > 560px) {
	#field_1_4 { /* Name */
		grid-column-start: 1;
		grid-column-end: 5;
	}
	#field_1_2 { /* Email */
		grid-column-start: 5;
		grid-column-end: 9;	
	}
	#field_1_6 { /* Phone */
		grid-column-start: 9;
		grid-column-end: 13;
	}
}
#input_1_4,
#input_1_2,
#input_1_6 {
	inline-size: auto;
	width: 100%;
}
#input_1_3 {
	height: 4.5em;
	min-block-size: 4.5em;
}


/* Test hide first letter of name on team member sliders */ 
/*
 * h2 > a::first-letter {
	color: red;
	font-size: 0;
}
*/