/**
 * Gulf Coast Artists — homepage typography.
 *
 * Loaded only on the front page (see gca_child_enqueue_home_styles() in
 * functions.php). Everything here is scoped to `.page-id-108 .elementor-108`
 * so it cannot leak onto any other page.
 *
 * Why CSS instead of editing the widgets in Elementor: the page's type sizes
 * live in ~30 separate per-widget settings inside _elementor_data. Changing
 * them there means a rewrite of that JSON blob and a CSS regeneration, and it
 * is not reversible in one step. A scoped stylesheet gives the same result,
 * is diffable, and is undone by deleting one file.
 *
 * Specificity note: Elementor writes
 *   .elementor-108 .elementor-element.elementor-element-XXX .elementor-heading-title
 * which is four classes. Selectors below deliberately carry at least four
 * classes plus a tag so they win on the cascade without !important.
 *
 * The scale is fluid — clamp(min, preferred, max) — so phones get a sensible
 * size rather than the desktop size crammed into 390px.
 */

:root {
	/* Pulled from the Elementor global kit + the hero's existing gold. */
	--gca-ink: #10344b;        /* headings — a darker Secondary (#165A88) */
	--gca-body: #4a5a65;       /* body copy — replaces the low-contrast #7A7A7A */
	--gca-gold: #f4a902;       /* accent — same gold as the hero H1 */
	--gca-sky: #60cee6;        /* kit Primary */
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

/* Eyebrow — "Welcome to Gulf Coast Artists…" */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-bee42aa .elementor-heading-title {
	font-size: clamp(1rem, 0.86rem + 0.62vw, 1.375rem);
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* Headline — "Gulf Coast Artists" */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-dc78084 .elementor-heading-title {
	font-size: clamp(2.75rem, 1.55rem + 3.7vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4);
}

/* Standfirst paragraph. Elementor sets the size on the widget wrapper here,
   not on the inner <p>, hence the wrapper selector. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-567bdf7 {
	font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
	line-height: 1.6;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

body.page-id-108 .elementor-108 .elementor-element.elementor-element-567bdf7 p {
	max-width: 46ch;
	margin-inline: auto;
}

/* The headline's tight leading closed the gap to the standfirst; put it back. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-567bdf7 {
	margin-top: 0.75rem;
}

/* ==========================================================================
   2. Section headings
   Every section title on the page is an h2 in Playfair Display at 30px.
   ========================================================================== */

body.page-id-108 .elementor-108 .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(2rem, 1.4rem + 1.9vw, 3.25rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--gca-ink);
}

/* Gold rule under each centred section title. */
body.page-id-108 .elementor-108 .elementor-widget-heading h2.elementor-heading-title::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 0.6em auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gca-gold), var(--gca-sky));
}

/* "Gulf Coast Artists – A Trusted Art Marketplace…" in the About block is an
   h1, is left-aligned, and sits in a narrower column — so it gets the same
   treatment with a left-aligned rule and a slightly smaller ceiling. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-116fb9e .elementor-heading-title {
	font-size: clamp(1.875rem, 1.35rem + 1.65vw, 2.875rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--gca-ink);
}

body.page-id-108 .elementor-108 .elementor-element.elementor-element-116fb9e .elementor-heading-title::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 0.55em 0 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gca-gold), var(--gca-sky));
}

/* "ABOUT US" kicker above it. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-8f45324 .elementor-heading-title {
	font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ==========================================================================
   3. Section lead paragraphs (the text-editor widgets under each heading)
   ========================================================================== */

body.page-id-108 .elementor-108 .elementor-element.elementor-element-b6094cb,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-c263375,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-587638a,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-f6b8bcd {
	font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
	line-height: 1.68;
	color: var(--gca-body);
}

/* Those four widgets each carry margin-top:-15px, which was tuned against a
   30px heading. The headings are taller now, so pull the gap back to zero and
   let the heading's own gold rule provide the separation. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-b6094cb,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-c263375,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-587638a,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-f6b8bcd {
	margin-top: 0;
}

/* Keep the centred intros to a comfortable measure instead of one long line. */
body.page-id-108 .elementor-108 .elementor-element.elementor-element-b6094cb .elementor-widget-container,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-c263375 .elementor-widget-container,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-587638a .elementor-widget-container {
	max-width: 68ch;
	margin-inline: auto;
}

/* ==========================================================================
   4. Cards
   ========================================================================== */

/* "Why Us" lottie icon boxes. */
body.page-id-108 .elementor-108 .elementor-widget .bdt-lottie-icon-box-title {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.3;
	color: var(--gca-ink);
}

body.page-id-108 .elementor-108 .elementor-widget .bdt-lottie-icon-box-description {
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
	line-height: 1.7;
	color: var(--gca-body);
}

/* Product and category titles in the Art Categories grid and the Featured
   Artwork carousel. */
body.page-id-108 .elementor-108 .elementor-widget .bdt-wc-product-title,
body.page-id-108 .elementor-108 .elementor-widget .elementskit-product-title {
	font-size: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
	line-height: 1.35;
}

body.page-id-108 .elementor-108 .elementor-widget .price,
body.page-id-108 .elementor-108 .elementor-widget .woocommerce-Price-amount {
	font-size: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
	font-weight: 600;
	color: var(--gca-ink);
}

/* Featured Artists review cards. */
body.page-id-108 .elementor-108 .elementor-widget .bdt-ep-review-card-grid-name {
	font-size: clamp(1.1875rem, 1.11rem + 0.36vw, 1.4375rem);
	line-height: 1.3;
}

body.page-id-108 .elementor-108 .elementor-widget .bdt-ep-review-card-grid-text,
body.page-id-108 .elementor-108 .elementor-element.elementor-element-7bbd875 .bdt-ep-review-card-grid-content p {
	font-size: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
	line-height: 1.65;
	color: var(--gca-body);
}

/* Founders' testimonial in the About block. */
body.page-id-108 .elementor-108 .elementor-widget .elementor-testimonial-content {
	font-size: clamp(1rem, 0.95rem + 0.28vw, 1.1875rem);
	line-height: 1.7;
	color: var(--gca-body);
}

body.page-id-108 .elementor-108 .elementor-widget .elementor-testimonial-name {
	font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
	color: var(--gca-ink);
}

/* ==========================================================================
   5. Small screens
   The clamp() minimums already handle sizing; these just stop the larger
   headings from crowding the sections they sit in.
   ========================================================================== */

@media (max-width: 767px) {
	body.page-id-108 .elementor-108 .elementor-widget-heading h2.elementor-heading-title::after,
	body.page-id-108 .elementor-108 .elementor-element.elementor-element-116fb9e .elementor-heading-title::after {
		width: 56px;
		height: 3px;
	}

	body.page-id-108 .elementor-108 .elementor-element.elementor-element-567bdf7 p {
		max-width: none;
	}
}