/*
Theme Name: TroveFinch
Theme URI: https://trovefinch.com
Author: Harinda Fernando
Description: TroveFinch block theme for WooCommerce. Hand-picked finds, honest delivery dates, no fake urgency. Needs the TroveFinch Core must-use plugin (wp-content/mu-plugins/trovefinch-core/) for the shop blocks. See TROVEFINCH.md in the site root.
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trovefinch
Tags: e-commerce, block-styles, full-site-editing, wide-blocks
*/

/*
  Brand layer for the TroveFinch block theme. Colors, fonts, spacing and
  sizes live in theme.json (from the Shopify theme's brand-kit/brand.json).
  This file only holds what theme.json can't express: the color schemes
  used as block styles, focus rings and a few small refinements.
*/

:root {
	--tf-radius-sm: 6px;
	--tf-radius-md: 10px;
	--tf-radius-lg: 16px;
	--tf-radius-pill: 999px;
	--tf-shadow-sm: 0 1px 2px rgba(31, 42, 40, 0.06), 0 1px 3px rgba(31, 42, 40, 0.08);
	--tf-shadow-md: 0 4px 12px rgba(31, 42, 40, 0.08);
	--tf-duration-fast: 150ms;
	--tf-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Scheme variables. Every TroveFinch block reads these, so a block placed
	   inside a Christmas group turns Christmas too. */
	--tf-scheme-bg: var(--wp--preset--color--background);
	--tf-scheme-text: var(--wp--preset--color--text);
	--tf-scheme-muted: var(--wp--preset--color--muted);
	--tf-scheme-link: var(--wp--preset--color--brand);
	--tf-scheme-button: var(--wp--preset--color--brand);
	--tf-scheme-button-text: var(--wp--preset--color--on-brand);
	--tf-scheme-accent: var(--wp--preset--color--brand);
	--tf-scheme-card: var(--wp--preset--color--surface);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--tf-duration-fast: 0ms;
	}
}

/* ---------- Color schemes (block styles, see functions.php) ---------- */

/* Surface (linen): cards, trust bar, bundles. */
.is-style-tf-surface {
	--tf-scheme-bg: var(--wp--preset--color--surface);
	--tf-scheme-card: var(--wp--preset--color--background);
}

/* Brand teal: email signup. */
.is-style-tf-brand {
	--tf-scheme-bg: var(--wp--preset--color--brand);
	--tf-scheme-text: #ffffff;
	--tf-scheme-muted: #ffffff;
	--tf-scheme-link: #ffffff;
	--tf-scheme-button: var(--wp--preset--color--background);
	--tf-scheme-button-text: var(--wp--preset--color--brand);
	--tf-scheme-accent: #ffffff;
	--tf-scheme-card: rgba(255, 255, 255, 0.1);
}

/* Dark: footer. */
.is-style-tf-dark {
	--tf-scheme-bg: var(--wp--preset--color--text);
	--tf-scheme-text: var(--wp--preset--color--background);
	--tf-scheme-muted: #c9d1ce;
	--tf-scheme-link: var(--wp--preset--color--brand-on-dark);
	--tf-scheme-button: var(--wp--preset--color--background);
	--tf-scheme-button-text: var(--wp--preset--color--text);
	--tf-scheme-accent: var(--wp--preset--color--brand-on-dark);
	--tf-scheme-card: rgba(255, 255, 255, 0.06);
}

/* Christmas (Shopify Scheme 7). Only on the Christmas hero, the Christmas
   finds section and the Christmas announcement. Contrast on #24473b:
   cream text 8.7:1, gold link 6.3:1. */
.is-style-tf-christmas {
	--tf-scheme-bg: var(--wp--preset--color--christmas);
	--tf-scheme-text: var(--wp--preset--color--christmas-text);
	--tf-scheme-muted: var(--wp--preset--color--christmas-text);
	--tf-scheme-link: var(--wp--preset--color--christmas-gold);
	--tf-scheme-button: var(--wp--preset--color--christmas-text);
	--tf-scheme-button-text: var(--wp--preset--color--christmas);
	--tf-scheme-accent: var(--wp--preset--color--christmas-gold);
	--tf-scheme-card: rgba(244, 235, 221, 0.08);
}

.is-style-tf-surface,
.is-style-tf-brand,
.is-style-tf-dark,
.is-style-tf-christmas {
	background-color: var(--tf-scheme-bg);
	color: var(--tf-scheme-text);
}

:where(.is-style-tf-brand, .is-style-tf-dark, .is-style-tf-christmas) a:where(:not(.wp-element-button)) {
	color: var(--tf-scheme-link);
}

:where(.is-style-tf-brand, .is-style-tf-dark, .is-style-tf-christmas) :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

:where(.is-style-tf-surface, .is-style-tf-brand, .is-style-tf-dark, .is-style-tf-christmas) .wp-element-button,
:where(.is-style-tf-surface, .is-style-tf-brand, .is-style-tf-dark, .is-style-tf-christmas) .wp-block-button__link {
	background-color: var(--tf-scheme-button);
	color: var(--tf-scheme-button-text);
}

:where(.is-style-tf-brand, .is-style-tf-dark, .is-style-tf-christmas) .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: currentColor;
	color: var(--tf-scheme-link);
}

/* ---------- Focus: solid, brand-colored, visible on every scheme ---------- */
:focus-visible {
	outline: 2px solid var(--tf-scheme-link);
	outline-offset: 3px;
}

/* ---------- Buttons: darken on hover on any scheme ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-image var(--tf-duration-fast) var(--tf-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}

/* ---------- Text ---------- */
h1,
h2,
h3 {
	text-wrap: balance;
}

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

/* ---------- Header ---------- */
.tf-announcement {
	padding-block: 8px;
}

.tf-announcement p {
	margin: 0;
	letter-spacing: 0.04em;
}

.tf-header {
	padding-block: 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-site-logo img,
.tf-logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Main and footer ---------- */
/* Header, main and footer sit edge to edge (colored bands touch). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.tf-main {
	padding-block: var(--wp--preset--spacing--50);
}

/* The homepage sections bring their own spacing. */
main.wp-block-group:not(.tf-main) {
	margin-block-start: 0;
}

main.wp-block-group:not(.tf-main) > * + * {
	margin-block-start: 0;
}

.tf-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.tf-footer > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tf-footer__tagline {
	max-width: 28ch;
	color: var(--tf-scheme-muted);
}

/* Bottom row: delivery note and credit, set apart by a hairline. */
.tf-footer__bottom {
	gap: 8px 32px;
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--tf-scheme-muted);
}

.tf-footer__bottom > * {
	margin: 0;
}

/* CrestLabs credit: their mark, then the name; brand blue on hover. */
.tf-footer__credit {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tf-footer__credit a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tf-scheme-text);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: color 0.15s ease;
}

.tf-footer__credit a::before {
	content: "";
	width: 1.25em;
	height: 1.25em;
	background: url(assets/images/crestlabs-mark.svg) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.tf-footer__credit a:hover {
	color: #7c97ff;
}

.tf-footer__credit a:hover::before {
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.tf-footer__credit a,
	.tf-footer__credit a::before {
		transition: none;
	}
}

/* ---------- Hero ---------- */
.tf-hero {
	padding-block: var(--wp--preset--spacing--60);
}

.tf-hero .wp-block-image img {
	border-radius: var(--tf-radius-lg);
}

.tf-hero h1 {
	color: inherit;
}

/* Tech hero: centered text on a soft teal-to-linen wash (dark text, 12:1 or more). */
.tf-hero--tech {
	padding-block: clamp(48px, 8vw, 96px);
	background: linear-gradient(160deg, var(--wp--preset--color--brand-tint) 0%, var(--wp--preset--color--background) 70%);
}

.tf-hero--tech h1 {
	margin-block: 12px 16px;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	text-wrap: balance;
}

.tf-hero--tech .tf-hero__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tf-hero--tech .wp-block-buttons {
	margin-top: 28px;
	gap: 12px;
}


/* Skip link target */
.skip-link.screen-reader-text:focus {
	z-index: 100000;
}

/* ---------- Navigation: 44px tap targets (WCAG 2.5.5 target size) ---------- */
.wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 10px;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation-submenu__toggle {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}