/*
 Theme Name:   Wingfield Digital
 Theme URI:    https://wingfielddigital.com
 Description:  Custom GeneratePress child theme for Wingfield Digital
 Author:       Wingfield Digital
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   0. Theme Color Tokens & Design System
   ========================================================================== */
:root {
	--wd-blue: #16627a;
	--wd-light-blue: #d2e2e7;
	--wd-lighter-blue: #eff3f5;
	--wd-lightest-blue: #f7fbfc;
	--wd-orange: #d2400f;
	--wd-light-orange: #ff8055;
	--wd-dark-blue: #202d38;
	--black: #000000;
	--white: #ffffff;
}

/* ==========================================================================
   Table of Contents
   --------------------------------------------------------------------------
   1. Header Customizations
   2. Touch & Mobile Overrides
   3. Typography & Responsive Adjustments
   4. Splide Carousel Overrides
   5. Custom Gallery Layout
   6. Taxonomy Dropdown Filter
   7. Taxonomy List & Links (Pills with Orange Border)
   8. Blue Panel List (3-Column Horizontal Grid)
   9. Accessibility Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header & Footer Logo Customizations
   -------------------------------------------------------------------------- */
.global-header--logo {
	position: relative;
	z-index: 1000;
}

/* Buttery 0.35s cubic-bezier color ease for Header & Footer logos */
.global-header--logo a,
.global-header--logo img,
.global-header--logo svg,
.global-header--logo path,
.global-footer--logo,
.global-footer--logo a,
.global-footer--logo img,
.global-footer--logo svg,
.global-footer--logo path {
	transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
	            fill 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.global-footer--logo:hover,
.global-footer--logo:hover svg,
.global-footer--logo:hover path {
	color: var(--wd-orange);
	fill: var(--wd-orange);
}

.global-header--logo:has(+ .gb-navigation--open) {
	color: var(--white);
}

/* --------------------------------------------------------------------------
   Buttons & CTAs Smooth Hover Transitions
   -------------------------------------------------------------------------- */
.button--secondary,
a.button--secondary,
.button--primary,
a.button--primary,
.button--secondary *,
.button--secondary svg,
.button--secondary path,
.button--primary *,
.button--primary svg,
.button--primary path {
	transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            fill 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            stroke 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --------------------------------------------------------------------------
   2. Touch & Mobile Overrides
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
	.card-item::after {
		opacity: 1 !important;
	}

	.card-item .card-item--content,
	.card-item .card-item--title,
	.card-item .card-item--subtitle {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --------------------------------------------------------------------------
   3. Typography & Responsive Adjustments
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.main-navigation a {
	font-family: 'Anek Latin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

@media (max-width: 767px) {

	h1 br,
	h2 br {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   4. Splide Carousel Overrides
   -------------------------------------------------------------------------- */
.splide__pagination {
	bottom: -2rem;
}

.splide__pagination__page {
	background: var(--wd-blue);
}

.splide__pagination__page.is-active {
	background: var(--wd-orange);
}

/* --------------------------------------------------------------------------
   5. Custom Gallery Layout
   -------------------------------------------------------------------------- */
.custom-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.custom-gallery .custom-gallery--item {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-gallery .custom-gallery--item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(32, 45, 56, 0.15);
}

/* --------------------------------------------------------------------------
   6. Taxonomy Dropdown Filter
   -------------------------------------------------------------------------- */
.taxonomy-filter-wrapper {
	margin-bottom: 1.5rem;
}

.select-taxonomy {
	padding: 0.6rem 1.2rem;
	font-size: 1rem;
	font-weight: 500;
	border: 1px solid var(--wd-light-blue);
	border-radius: 6px;
	background-color: var(--white);
	color: var(--wd-dark-blue);
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select-taxonomy:focus,
.select-taxonomy:hover {
	border-color: var(--wd-blue);
	box-shadow: 0 0 0 3px rgba(22, 98, 122, 0.15);
}

/* --------------------------------------------------------------------------
   7. Taxonomy List & Links (Pills with Orange Border)
   -------------------------------------------------------------------------- */
.taxonomy-list,
div.taxonomy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-top: 1.25rem;
	margin-bottom: 1.75rem;
	align-items: center;
}

.taxonomy-list .taxonomy-link,
div.taxonomy-list a.taxonomy-link {
	display: inline-flex;
	align-items: center;
	padding: 0.65rem 1.25rem;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wd-orange);
	border: 1px solid var(--wd-orange);
	background-color: transparent;
	text-decoration: none;
	line-height: 1.2;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.taxonomy-list .taxonomy-link:hover,
.taxonomy-list .taxonomy-link:focus,
.taxonomy-list .taxonomy-link.active,
.taxonomy-list .taxonomy-link.is-active,
div.taxonomy-list a.taxonomy-link:hover {
	background-color: var(--wd-orange);
	color: var(--white);
	border-color: var(--wd-orange);
	text-decoration: none;
}

/* Text-Layout Modifier (Vertical White Link List for Dark Cards like 'What We Do') */
.taxonomy-list.text-layout,
div.taxonomy-list.text-layout {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}

.taxonomy-list.text-layout .taxonomy-link,
div.taxonomy-list.text-layout a.taxonomy-link {
	display: inline-block;
	padding: 0;
	font-size: 20px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--white);
	border: none;
	background: none;
	border-radius: 0;
	text-decoration: none;
	line-height: 1.35;
	transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

.taxonomy-list.text-layout .taxonomy-link:hover,
.taxonomy-list.text-layout .taxonomy-link:focus,
div.taxonomy-list.text-layout a.taxonomy-link:hover {
	background: none;
	color: var(--white);
	border: none;
	text-decoration: underline;
	opacity: 0.85;
}

.taxonomy-list:not(.text-layout) {
	margin-bottom: 4rem;
}

.taxonomy-list:not(.text-layout) .taxonomy-link {
	font-size: 1.3rem;
}

@media(max-width: 767px) {

	.taxonomy-list.text-layout,
	div.taxonomy-list.text-layout {
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   8. Blue Panel List (3-Column Horizontal Grid)
   -------------------------------------------------------------------------- */
.blue-panel--horizontal .blue-panel--list ul,
.blue-panel--list ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blue-panel--horizontal .blue-panel--list li,
.blue-panel--list li {
	color: var(--white);
	line-height: 1.4;
}

@media (max-width: 991px) {
	.blue-panel--horizontal .blue-panel--list ul,
	.blue-panel--list ul {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.blue-panel--horizontal .blue-panel--list ul,
	.blue-panel--list ul {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   9. Accessibility Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--white);
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--wd-dark-blue);
	display: block;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}