/*
Theme Name: Joydea Base
Theme URI: https://joydea.com
Author: Joydea LLC
Author URI: https://joydea.com
Description: The Joydea base block theme. Every Joydea client site starts here and is styled per client through a small child theme that overrides colors, fonts, and a few settings.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joydea-base
*/

/* Most styling lives in theme.json. This file holds the few rules that theme.json cannot express. */

:root {
	--jd-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18);
	--jd-radius: var(--wp--custom--radius, 12px);
}

html {
	scroll-behavior: smooth;
}

/* Cards: any group with the "jd-card" class */
.jd-card {
	border-radius: var(--jd-radius);
	box-shadow: var(--jd-shadow);
	transition: transform 160ms ease, box-shadow 160ms ease;
}
.jd-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.25);
}

/* Buttons */
.wp-block-button__link {
	transition: filter 120ms ease, transform 120ms ease;
}
.wp-block-button__link:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}
.is-style-outline .wp-block-button__link {
	border-width: 2px;
}

/* Header */
.jd-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.jd-header .wp-block-site-title a {
	text-decoration: none;
	letter-spacing: -0.01em;
}
.jd-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Hero */
.jd-hero {
	overflow: hidden;
}
.jd-hero .wp-block-heading {
	text-wrap: balance;
}

/* Eyebrow label above headings */
.jd-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 600;
}

/* Images */
.wp-block-image img,
.wp-block-cover {
	border-radius: var(--jd-radius);
}

/* Forms (Fluent Forms and core) */
.jd-form input[type="text"],
.jd-form input[type="email"],
.jd-form input[type="tel"],
.jd-form textarea,
.jd-form select {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--neutral-300);
	border-radius: 8px;
	font: inherit;
	background: var(--wp--preset--color--base);
}
.jd-form input:focus,
.jd-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

/* Footer */
.jd-footer a {
	text-decoration: none;
}
.jd-footer a:hover {
	text-decoration: underline;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jd-card, .wp-block-button__link { transition: none; }
	.jd-card:hover, .wp-block-button__link:hover { transform: none; }
}

/* Utility */
.jd-max-text {
	max-width: 62ch;
}
.jd-center-text {
	margin-left: auto;
	margin-right: auto;
}

/* Sticky header shadow once scrolled */
.jd-header.is-scrolled {
	box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.25);
}

/* Call to action band: force light text and an inverted button regardless of element defaults */
.jd-cta,
.jd-cta .wp-block-heading,
.jd-cta p {
	color: var(--wp--preset--color--base);
}
.jd-cta .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}
.jd-cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

/* Header call-to-action button: hide on small screens, the menu has Contact anyway */
@media (max-width: 640px) {
	.jd-header-cta { display: none; }
}

/* Fluent Forms: match the theme buttons */
.jd-form .ff-btn-submit,
.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 0.8rem 1.6rem !important;
	font-weight: 600 !important;
}
.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

/* Mobile navigation overlay (core navigation block, overlayMenu: mobile) */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem 1.5rem 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
	gap: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.35rem;
	font-weight: 600;
	padding: 0.5rem 0;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: inherit;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}