/*
Theme Name:   Hello Elementor Child — Coffee House Lane
Theme URI:    https://coffeehouselane.ie/
Description:  Lean child theme for the Coffee House Lane Elementor Pro + WooCommerce build. Holds design tokens, base reset, prose styles for dynamic content and form baselines. Component styles live in assets/css/.
Author:       Dockingstation Technologies
Author URI:   https://dockingstation.co.in/
Template:     hello-elementor
Version:      1.1.0
Requires PHP: 8.2
Text Domain:  hello-elementor-child
License:      GNU General Public License v2 or later
*/

/* ==========================================================================
   1. FONTS (self-hosted, latin subset)
   Fraunces is instanced at SOFT 100 / opsz 144 so no font-variation-settings
   are needed; weight stays variable (100–900).
   ========================================================================== */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-soft.woff2") format("woff2");
}
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/fraunces-soft-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/instrument-sans.woff2") format("woff2");
}

/* ==========================================================================
   2. DESIGN TOKENS
   Single source of truth = Elementor Site Settings (Global Colors).
   Each token reads the Elementor global first and falls back to the brand
   hex, so editing a global in Elementor updates theme CSS too.
   Declared on body as well, because Elementor prints its global vars on
   the .elementor-kit-{id} body class, not on :root.
   ========================================================================== */
:root,
body {
	/* Brand palette */
	--chl-ink:      var(--e-global-color-secondary, #0E0907);
	--chl-ink-2:    var(--e-global-color-chlink2, #1A110C);
	--chl-ink-3:    var(--e-global-color-chlink3, #2A1C14);
	--chl-cream:    var(--e-global-color-text, #F4EADB);
	--chl-cream-2:  var(--e-global-color-chlcream2, #E9DAC4);
	--chl-paper:    var(--e-global-color-chlpaper, #FBF6EE);
	--chl-copper:   var(--e-global-color-primary, #D99A4E);
	--chl-copper-2: var(--e-global-color-accent, #F2B866);
	--chl-ember:    var(--e-global-color-chlember, #FF7A2F);
	--chl-lilac:    var(--e-global-color-chllilac, #C7A6F0);
	--chl-sun:      var(--e-global-color-chlsun, #F6C744);
	--chl-sky:      var(--e-global-color-chlsky, #7FB6F2);
	--chl-muted:    var(--e-global-color-chlmuted, #A8957F);

	/* Roast card swatches */
	--chl-card-gold:  var(--e-global-color-chlcardgold, #EFB04D);
	--chl-card-sky:   var(--e-global-color-chlcardsky, #9CC6F2);
	--chl-card-sun:   var(--e-global-color-chlcardsun, #F6D04D);
	--chl-card-lilac: var(--e-global-color-chlcardlilac, #CFB2F2);

	/* Semantic aliases (SRS 4.2 naming) */
	--brand-primary:       var(--chl-ink);
	--brand-primary-hover: var(--chl-ink-3);
	--brand-accent:        var(--chl-copper);
	--brand-accent-hover:  var(--chl-copper-2);
	--text-main:           var(--chl-cream);
	--text-heading:        var(--chl-cream);
	--text-muted:          var(--chl-muted);
	--bg-surface:          var(--chl-ink);
	--bg-subtle:           var(--chl-ink-2);
	--border-color:        rgba(244, 234, 219, .14);
	--focus-ring:          var(--chl-copper-2);

	/* Typography */
	--font-family-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--font-family-base:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--text-xs:   .75rem;    /* 12 */
	--text-sm:   .875rem;   /* 14 */
	--text-base: 1.0625rem; /* 17 */
	--text-lg:   1.125rem;  /* 18 */
	--text-xl:   1.25rem;   /* 20 */
	--text-2xl:  1.5rem;    /* 24 */
	--text-3xl:  1.875rem;  /* 30 */
	--text-4xl:  2.25rem;   /* 36 */
	--text-h2:   clamp(2.875rem, 5.6vw, 6.75rem);   /* 46 → 108 */
	--text-display: clamp(3.5rem, 8.6vw, 10.5rem); /* 56 → 168 */

	/* Layout & spacing */
	--chl-pad:      clamp(16px, 5vw, 96px);
	--chl-max:      1720px;
	--spacing-unit: 8px;
	--section-y:    clamp(96px, 11vw, 170px);
	--radius-sm:    6px;
	--radius-md:    18px;
	--radius-lg:    28px;
	--radius-pill:  999px;

	/* Motion */
	--ease-out:          cubic-bezier(.2, .8, .2, 1);
	--transition-fast:   150ms ease-in-out;
	--transition-normal: 250ms ease-in-out;
}

/* ==========================================================================
   3. BASE RESET & TYPOGRAPHY
   Element selectors only — Elementor widget styles (higher specificity)
   always win, so the editor stays fully usable.
   ========================================================================== */
html {
	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--text-main);
	background-color: var(--bg-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1rem;
	font-family: var(--font-family-heading);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: inherit;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-h2); line-height: .92; letter-spacing: -.035em; }
h3 { font-size: var(--text-4xl); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

em { font-family: var(--font-family-heading); font-style: italic; }

p { margin: 0 0 1.25rem; line-height: 1.6; }

a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--chl-copper-2); }

img, svg, video { max-width: 100%; height: auto; }

/* Accessible focus state for keyboard users only */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   4. PROSE — unstructured HTML (posts, WooCommerce descriptions)
   ========================================================================== */
.entry-content ul,
.woocommerce-product-details__short-description ul,
.woocommerce-Tabs-panel ul { list-style: disc; margin: 0 0 1.25rem 1.5rem; padding: 0; }

.entry-content ol,
.woocommerce-product-details__short-description ol,
.woocommerce-Tabs-panel ol { list-style: decimal; margin: 0 0 1.25rem 1.5rem; padding: 0; }

.entry-content li,
.woocommerce-product-details__short-description li,
.woocommerce-Tabs-panel li { margin-bottom: .5rem; }

.entry-content a,
.woocommerce-Tabs-panel a { color: var(--chl-copper-2); text-decoration: underline; text-underline-offset: 3px; }

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--chl-copper);
	font-family: var(--font-family-heading);
	font-size: var(--text-2xl);
	line-height: 1.25;
}

.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel--description { font-size: var(--text-base); }

.woocommerce-product-details__short-description h2,
.woocommerce-Tabs-panel--description h2 {
	font-size: var(--text-2xl);
	line-height: 1.2;
	letter-spacing: -.01em;
	margin-top: 1.5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--border-color);
}

.entry-content table,
.woocommerce-Tabs-panel table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }

.entry-content th, .entry-content td,
.woocommerce-Tabs-panel th, .woocommerce-Tabs-panel td {
	padding: .75rem;
	border: 1px solid var(--border-color);
	text-align: left;
}
.entry-content th,
.woocommerce-Tabs-panel th { background: var(--bg-subtle); font-weight: 600; }

/* ==========================================================================
   5. FORM BASELINES
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], input[type="url"], textarea, select {
	width: 100%;
	padding: .75rem 1rem;
	font-family: var(--font-family-base);
	font-size: 1rem; /* ≥16px stops iOS zoom */
	color: inherit;
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--chl-copper);
	box-shadow: 0 0 0 3px rgba(217, 154, 78, .2);
}
::placeholder { color: currentColor; opacity: .45; }

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}