/*
Theme Name:   TAT Child
Theme URI:    https://tatconstruction.com/
Description:  Thin child theme of Hello Elementor for TAT Construction: design tokens, English, Persian and Spanish fonts, RTL. Layouts are built in Elementor.
Author:       TAT Construction Company LLC
Template:     hello-elementor
Version:      0.5.0
Requires at least: 6.9
Requires PHP: 8.2
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  tat-child
*/

/*
 * Design system (PROMPT.md §11, "hybrid": Classical editorial structure on navy
 * + gold).
 *
 * The tokens below read the Elementor Kit's Global Colors and Fonts (Site
 * Settings), with the brief's values as fallbacks, so editing the Kit restyles
 * the theme, the estimator and the site widgets together. They are declared on
 * body because Elementor defines its variables on the Kit class there. No dark
 * mode in v1 (docs/DECISIONS.md).
 */

/* Fonts: self-hosted woff2 subsets (assets/fonts/README.md). */
@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/inter-400.woff2) format("woff2");
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(assets/fonts/inter-500.woff2) format("woff2");
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(assets/fonts/inter-600.woff2) format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(assets/fonts/cormorant-garamond-500.woff2) format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(assets/fonts/cormorant-garamond-600.woff2) format("woff2");
}

@font-face {
	font-family: Vazirmatn;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/vazirmatn-400.woff2) format("woff2");
}

@font-face {
	font-family: Vazirmatn;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(assets/fonts/vazirmatn-500.woff2) format("woff2");
}

@font-face {
	font-family: Vazirmatn;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(assets/fonts/vazirmatn-600.woff2) format("woff2");
}

body {

	/* Colors (Kit: Primary, Secondary, Text, Accent and the TAT custom colors). */
	--tat-navy-900: var(--e-global-color-primary, #0f1b2d);
	--tat-navy-700: var(--e-global-color-secondary, #24344d);
	--tat-ink: var(--e-global-color-text, #3a4658);
	--tat-gold-500: var(--e-global-color-accent, #b68235);
	--tat-muted: var(--e-global-color-tat_muted, #5b6676);
	--tat-ground: var(--e-global-color-tat_ground, #f3f2f2);
	--tat-surface: var(--e-global-color-tat_surface, #fff);
	--tat-surface-2: var(--e-global-color-tat_surface_2, #eae9e9);
	--tat-divider: var(--e-global-color-tat_divider, #0f1b2d24);
	--tat-gold-400: var(--e-global-color-tat_gold_400, #e1ad66);
	--tat-gold-700: var(--e-global-color-tat_gold_700, #7d5411);
	--tat-gold-100: var(--e-global-color-tat_gold_100, #fff3e4);
	--tat-success: var(--e-global-color-tat_success, #127a5a);
	--tat-warning: var(--e-global-color-tat_warning, #b4531a);
	--tat-error: var(--e-global-color-tat_error, #b3261e);

	/* Fonts (Kit: Primary = display, Text = body). */
	--tat-font-display: var(--e-global-typography-primary-font-family, "Cormorant Garamond"), georgia, "Times New Roman", serif;
	--tat-font-body: var(--e-global-typography-text-font-family, inter), system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
	--tat-font-fa: vazirmatn, tahoma, sans-serif;

	/* Rhythm. */
	--tat-section-y: 92px;
	--tat-gutter: 32px;
	--tat-max: 1280px;
	--tat-max-estimator: 1440px;
	--tat-radius: 6px;
	--tat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tat-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 10px 28px rgba(15, 27, 45, 0.08);

	overflow-x: clip; /* A too-wide element never zooms the phone page out. */
	background-color: var(--tat-ground);
	color: var(--tat-ink);
	font-family: var(--tat-font-body);
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 767px) {

	body {
		--tat-section-y: 56px;
		--tat-gutter: 16px;
	}
}

/*
 * Persian: Vazirmatn for everything, line-height 1.9, no letter-spacing, no
 * uppercase (PROMPT.md §11). The Kit's typography variables are overridden, so
 * every Elementor widget bound to a global font switches too.
 */
html[lang^="fa"] body {
	--tat-font-display: var(--tat-font-fa);
	--tat-font-body: var(--tat-font-fa);
	--e-global-typography-primary-font-family: vazirmatn;
	--e-global-typography-secondary-font-family: vazirmatn;
	--e-global-typography-text-font-family: vazirmatn;
	--e-global-typography-accent-font-family: vazirmatn;
	--e-global-typography-tat_h1-font-family: vazirmatn;
	--e-global-typography-tat_h2-font-family: vazirmatn;
	--e-global-typography-tat_h3-font-family: vazirmatn;
	--e-global-typography-tat_h4-font-family: vazirmatn;
	--e-global-typography-tat_lead-font-family: vazirmatn;
	--e-global-typography-tat_small-font-family: vazirmatn;
	--e-global-typography-text-line-height: 1.9;
	--e-global-typography-tat_lead-line-height: 1.9;
	line-height: 1.9;
}

html[lang^="fa"] body * {
	letter-spacing: 0 !important; /* Persian letters join; spacing breaks them. */
	text-transform: none !important;
}

html[lang^="fa"] :where(h1, h2, h3, h4, h5, h6) {
	font-weight: 600;
	line-height: 1.5;
}

/* Base elements (low specificity, so Elementor's Kit styles win where set). */
:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 0.5em;
	color: var(--tat-navy-900);
	font-family: var(--tat-font-display);
	font-weight: 500;
}

:where(h1) {
	font-size: 56px;
	line-height: 1.08;
}

:where(h2) {
	font-size: 40px;
	line-height: 1.15;
}

:where(h3) {
	font-size: 28px;
	line-height: 1.25;
}

:where(h4) {
	font-size: 22px;
	line-height: 1.3;
}

@media (max-width: 767px) {

	:where(h1) {
		font-size: 38px;
	}

	:where(h2) {
		font-size: 30px;
	}
}

:where(a) {
	color: var(--tat-gold-700);
	text-underline-offset: 3px;
}

:where(a:hover) {
	color: var(--tat-navy-900);
}

/* Links in running text are underlined, not marked by color alone (1.4.1). */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-text-editor a:not(.elementor-button):visited {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:where(small, .tat-small) {
	font-size: 13px;
}

/* Prices and quantities line up (PROMPT.md §11). */
.tat-num,
.tat-price,
[data-tat-num] {
	font-variant-numeric: tabular-nums;
}

/* Focus: 2px gold-700, offset 2px (PROMPT.md §16). */
:focus-visible {
	outline: 2px solid var(--tat-gold-700);
	outline-offset: 2px;
}

/* Skip link. */
.skip-link.screen-reader-text:focus {
	z-index: 100000;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	padding: 12px 18px;
	border-radius: var(--tat-radius);
	background: var(--tat-navy-900);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/*
 * Buttons. Primary: solid gold with navy text (Kit button settings), 48px high;
 * hover gold-400; pressed gold-700 with white text. Add the CSS class "tat-btn-
 * secondary" (navy outline) or "tat-btn-ghost" (gold-700 text) to an Elementor
 * Button widget under Advanced → CSS Classes.
 */
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	transition: background-color 150ms var(--tat-ease), color 150ms var(--tat-ease), border-color 150ms var(--tat-ease);
}

.elementor-button:active {
	background-color: var(--tat-gold-700) !important;
	color: #fff !important;
}

.tat-btn-secondary .elementor-button {
	border: 1.5px solid var(--tat-navy-900);
	background-color: transparent;
	color: var(--tat-navy-900);
}

.tat-btn-secondary .elementor-button:hover,
.tat-btn-secondary .elementor-button:focus {
	background-color: var(--tat-navy-900);
	color: #fff;
}

.tat-btn-ghost .elementor-button {
	padding-inline: 4px;
	border: 0;
	background-color: transparent;
	color: var(--tat-gold-700);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tat-btn-ghost .elementor-button:hover,
.tat-btn-ghost .elementor-button:focus {
	background-color: transparent;
	color: var(--tat-navy-900);
}

/* Hello Elementor's reset colors generic buttons pink; give them the TAT
   primary style. */
:where(button, [type="button"], [type="submit"], [type="reset"]):not([class*="tat-"]):not([class*="elementor"]):not([class*="components-"]) {
	min-block-size: 44px;
	border: 1px solid var(--tat-gold-500);
	border-radius: var(--tat-radius);
	background-color: var(--tat-gold-500);
	color: var(--tat-navy-900);
	font-weight: 600;
}

:where(button, [type="button"], [type="submit"], [type="reset"]):not([class*="tat-"]):not([class*="elementor"]):not([class*="components-"]):hover,
:where(button, [type="button"], [type="submit"], [type="reset"]):not([class*="tat-"]):not([class*="elementor"]):not([class*="components-"]):focus {
	border-color: var(--tat-gold-400);
	background-color: var(--tat-gold-400);
	color: var(--tat-navy-900);
}

/* Editorial structure: hairlines, plates, cards (add the class on a container
   or widget). */
.tat-hairline-top {
	border-block-start: 1px solid var(--tat-divider);
}

.tat-hairline-bottom {
	border-block-end: 1px solid var(--tat-divider);
}

.tat-plate img,
img.tat-plate {
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid var(--tat-divider);
	background: var(--tat-surface-2);
}

.tat-card-box {
	border: 1px solid var(--tat-divider);
	border-radius: var(--tat-radius);
	background: var(--tat-surface);
	transition: box-shadow 200ms var(--tat-ease);
}

.tat-card-box:hover,
.tat-card-box:focus-within {
	box-shadow: var(--tat-shadow);
}

/* Long lists in two columns from 768px (class on a Text Editor widget). */
.tat-list-columns ul {
	margin: 0;
	padding-inline-start: 1.2em;
}

.tat-list-columns li {
	break-inside: avoid;
	margin-block-end: 6px;
}

@media (min-width: 768px) {

	.tat-list-columns ul {
		column-gap: 48px;
		columns: 2;
	}
}

/* A short note under a list or a table. */
.tat-note {
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--tat-gold-500);
}

.tat-eyebrow {
	color: var(--tat-gold-700);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Long English paragraphs are justified on desktop only (PROMPT.md §11). */
@media (min-width: 1025px) {

	html[lang^="en"] .tat-longform p {
		hyphens: auto;
		text-align: justify;
	}
}

/* Elementor full-width pages get a main landmark from tat-site-core; keep it
   neutral. */
.tat-main {
	display: block;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}