/*
Theme Name: Ellie Digital
Theme URI: https://ellie.digital/
Author: Ellie Fahimi
Author URI: https://ellie.digital/
Description: A custom block theme for Ellie Digital.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: ellie-digital
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

:root {
	--primary-deep-charcoal: #252525;
	--warm-coral: #DA8774;
	--accent: #4B5D26;
	--secondary-accent: #9BAF9D;
	--soft-bg-cream: #F6F2E9;
}

a {
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.clickable-group {
	cursor: pointer;
}

.wp-site-blocks>footer {
	margin-top: auto;
}

.home-banner {
	/* background-image: url("assets/images/hero-base.jpg"); */
	/* background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 78%; */
	background-color: var(--soft-bg-cream);
}

.underline-line {
	position: relative;
	display: inline-block;
	font-weight: 700;
}

.underline-line::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%) rotate(-1deg);
	bottom: -10px;
	width: 92%;
	height: 4px;
	background: #aeb596;
	border-radius: 999px;
}

.home-banner a.wp-block-button__link,
header .wp-block-button__link {
	transition: background-color 0.4s ease, border-color 0.4s ease;
}

.home-banner a.wp-block-button__link:hover,
header .wp-block-button__link {
	background-color: var(--warm-coral) !important;
	border: 2px solid var(--warm-coral) !important;
}

header .wp-block-button__link:hover {
	background-color: var(--primary-deep-charcoal) !important;
	border: 2px solid var(--primary-deep-charcoal) !important;
}

.home-services .wp-block-column {
	padding: 24px;
	border-right-color: lightgray !important;
}

.home-affiliate a.wp-block-button__link.wp-element-button::after,
.select-work a::after,
.contact-section a::after {
	content: "→";
	font-size: 25px;
	margin-left: 8px;
	display: inline-block;
	transition: transform 0.2s ease;
}

.home-affiliate a.wp-block-button__link.wp-element-button,
.select-work a,
.contact-section a {
	transition: transform 0.2s ease;
}

.home-affiliate a.wp-block-button__link.wp-element-button:hover::after,
.home-affiliate a.wp-block-button__link.wp-element-button:hover,
.select-work a:hover::after,
.select-work a:hover,
.contact-section a:hover,
.contact-section a:hover::after {
	transform: translateX(4px);
	color: var(--accent);
}

.home-affiliate a.wp-block-button__link.wp-element-button,
.select-work a,
.contact-section a {
	align-items: center;
	display: flex;
}

.expertise-pills p,
p.expertise-pills {
	background-color: rgb(157 176 159 / 35%);
	border-radius: 50px;
	padding: 2px 20px;
	font-size: 16px;
}

p.expertise-pills {
	font-size: 12px;
}

/* tools card clickable */
.tool-card {
	position: relative;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.tool-card:hover {
	transform: translateY(-4px);
	border-color: #da8774;
	box-shadow: 0 10px 25px rgba(37, 37, 37, 0.08);
}

/* featured label */
.upstack-featured-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
}

.upstack-featured-wrap .featured-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	flex: 0 0 auto;

	color: #da8774;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;

	padding-right: 14px;
	border-right: 1px solid #da8774;
}

.select-work.grid .wp-block-columns {
	flex-direction: column-reverse;
}

.select-work.grid figure.wp-block-image.size-full {
	text-align: center;
}

form#fluentform_1 button.ff-btn.ff-btn-submit {
	font-family: "DM Serif Display", serif;
	padding: 10px 25px;
}

@media(max-width:768px) {
	header img.custom-logo {
		width: 120px !important;
	}

	body.home .home-intro,
	body.home .services-section,
	body.home .selected-work-section,
	body.home .home-affiliate,
	body.home .contact-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.home .expertise-pills {
		flex-wrap: wrap;
		gap: 7px;
	}

	body.home .select-work,
	body.home .contact-section .wp-block-group {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	body.home .home-services {
		flex-direction: column;
	}

	body.home .pill-flex-parent {
		display: none !important;
	}

	body.home .home-banner {
		min-height: 50vh !important;
		padding: 50px 10px;
	}

	body.home .home-banner {
		background-position: 10% 100% !important;
	}

	.banner-columns {
		flex-direction: column-reverse;
	}

	.banner-columns img {
		width: 70%;
		max-width: 300px;
	}

	.banner-columns figure.wp-block-image.size-full,
	.banner-columns .wp-block-column,
	.banner-columns h1.wp-block-heading,
	.banner-columns p {
		text-align: center !important;
	}

	.banner-columns .wp-block-buttons {
		justify-content: center;
	}

	.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__container,
	.wp-block-navigation__responsive-dialog {
		display: flex !important;
		justify-content: center !important;
		text-align: center;
	}

	header .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex {
		display: none;
	}

	/* service columns */
	#services .services-cols .wp-block-column {
		flex-basis: 48% !important;
	}

	#tools.home-affiliate .is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#services .home-services .wp-block-column:nth-child(even) {
		border-right: none !important;
	}
}

@media (min-width: 769px) and (max-width:991px) {

	body.home .home-intro,
	body.home .services-section,
	body.home .selected-work-section,
	body.home .home-affiliate,
	body.home .contact-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* service columns */
	#services .services-cols .wp-block-column {
		flex-basis: 32.3% !important;
	}

	#work .select-work.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {

	body.home .home-intro,
	body.home .services-section,
	body.home .selected-work-section,
	body.home .home-affiliate,
	body.home .contact-section {
		padding-left: 20px;
		padding-right: 20px;
	}
}