/* ==========================================================================
   PatioHeat Lab — B2B Outdoor Heating Theme  v3.0.0
   "Forged Ember" Design System
   ========================================================================== */

/*
Theme Name: PatioHeat Lab
Author: PatioHeat Lab
Description: B2B classic theme for commercial outdoor patio heating — inquiry-first WooCommerce.
Version: 3.0.0
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: phlab
*/

/* ==========================================================================
   2. Design Tokens — "Forged Ember" v3.0 — Warm Dark Professional
   Unified warm-dark palette: no more "heavy header + bright content" split.
   Entire site uses a cohesive warm-charcoal family with amber/copper accents.
   Optimised for B2B scanning speed and long-session reading comfort.
   ========================================================================== */

:root {
	/* ---- Motion Tokens ---- */
	--phlab-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--phlab-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--phlab-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
	--phlab-ease-out:       cubic-bezier(0, 0, 0.2, 1);
	--phlab-dur-fast:   130ms;
	--phlab-dur-normal: 240ms;
	--phlab-dur-slow:   400ms;
	--phlab-dur-entrance: 600ms;

	/* ---- Color: Surface Family (warm charcoal, unified across site) ---- */
	/* Base background — deep warm charcoal, never pure black           */
	--phlab-bg-base:      #282420;
	/* Section alternate — slightly lighter for rhythmic variation     */
	--phlab-bg-alt:       #2e2a24;
	/* Card / panel surface — lifted above base by ~5 oklch steps     */
	--phlab-surface-card: #36312a;
	/* Elevated surface (hover states, dropdowns, modals)             */
	--phlab-surface-elevated: #3d3831;

	/* ---- Color: Text (warm off-white, WCAG AA compliant) ---- */
	/* Primary text — warm white, 11:1 contrast on base bg  ✓        */
	--phlab-text-primary:  #e8e4dc;
	/* Muted text — warm medium gray, 5.5:1 contrast on base bg  ✓  */
	--phlab-text-muted:    #a89e92;
	/* Dim text — subtle info, 4.6:1 contrast on card bg  ✓         */
	--phlab-text-dim:      #8a8178;
	/* Fade text — footer / fine print                              */
	--phlab-text-fade:     #6e6660;

	/* ---- Color: Accent (amber + copper — harmonious with warm bg) ---- */
	/* Primary amber — stands out clearly on warm charcoal          */
	--phlab-accent-fire:   #e87830;
	/* Deep amber — hover / active states                          */
	--phlab-accent-ember:  #d06828;
	/* Glow — focus rings, subtle highlights                       */
	--phlab-accent-glow:   #f09050;
	/* Copper — secondary accent, premium / certification badges    */
	--phlab-accent-copper: #c49a2c;

	/* ---- Color: Semantic ---- */
	--phlab-success:  #52c48a;
	--phlab-error:    #e06060;

	/* ---- Color: Borders (visible but unobtrusive on dark bg) ---- */
	--phlab-border-grid:    #423d37;
	--phlab-border-subtle:  #3b3530;

	/* ---- Typography ---- */
	--phlab-font-display: 'Outfit', system-ui, sans-serif;
	--phlab-font-body:    'DM Sans', system-ui, sans-serif;

	/* ---- Typographic Scale (perfect-fourth: 1.333) ---- */
	--phlab-text-xs:   0.75rem;    /* 12px */
	--phlab-text-sm:   0.875rem;   /* 14px */
	--phlab-text-base: 1rem;       /* 16px */
	--phlab-text-md:   1.125rem;   /* 18px */
	--phlab-text-lg:   1.333rem;   /* 21px */
	--phlab-text-xl:   1.777rem;   /* 28px */
	--phlab-text-2xl:  2.369rem;   /* 38px */
	--phlab-text-3xl:  clamp(2.369rem, 5vw + 1rem, 3.5rem);

	/* ---- Spacing (base 4px, 8px rhythm) ---- */
	--phlab-space-1: 0.25rem;
	--phlab-space-2: 0.5rem;
	--phlab-space-3: 0.75rem;
	--phlab-space-4: 1rem;
	--phlab-space-5: 1.25rem;
	--phlab-space-6: 1.5rem;
	--phlab-space-8: 2rem;
	--phlab-space-10: 2.5rem;
	--phlab-space-12: 3rem;
	--phlab-space-16: 4rem;

	/* ---- Layout ---- */
	--phlab-container-max: 1440px;
	--phlab-content-width: 65ch;
	--phlab-gap: 1.5rem;

	/* ---- Borders & Radii ---- */
	--phlab-radius-xs: 4px;
	--phlab-radius-sm: 6px;
	--phlab-radius:    10px;
	--phlab-radius-lg: 14px;
	--phlab-radius-xl: 20px;

	/* ---- Header Height ---- */
	--phlab-header-h: 72px;

	/* ---- Depth (shadows calibrated for dark backgrounds) ---- */
	--phlab-shadow-card:      0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
	--phlab-shadow-elevated:  0 4px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2);
	--phlab-shadow-dropdown:  0 16px 48px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
	/* Amber glow for CTA / featured elements */
	--phlab-shadow-glow: 0 0 24px rgba(232,120,48,0.15), 0 0 8px rgba(232,120,48,0.1);
}

/* ==========================================================================
   3. Base Reset & Typography
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--phlab-font-body);
	font-weight: 400;
	font-size: var(--phlab-text-base);
	line-height: 1.65;
	color: var(--phlab-text-primary);
	background: var(--phlab-bg-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--phlab-text-primary);
	text-decoration: none;
	transition: color var(--phlab-dur-fast) var(--phlab-ease-out-quart);
	position: relative;
}

/* Animated underline on inline links */
a:not(.phlab-button):not(.phlab-logo):not(.phlab-nav__list a):not(.phlab-card__image):not(.phlab-header__basket) {
	background-image: linear-gradient(var(--phlab-accent-fire), var(--phlab-accent-fire));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--phlab-dur-normal) var(--phlab-ease-out-expo),
	            color var(--phlab-dur-fast) var(--phlab-ease-out-quart);
	padding-bottom: 1px;
}

a:not(.phlab-button):not(.phlab-logo):not(.phlab-nav__list a):not(.phlab-card__image):not(.phlab-header__basket):hover {
	color: var(--phlab-accent-fire);
	background-size: 100% 1px;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--phlab-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.75em;
	color: var(--phlab-text-primary);
}

h1 { font-size: var(--phlab-text-3xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--phlab-text-2xl); font-weight: 700; }
h3 { font-size: var(--phlab-text-xl); font-weight: 600; }
h4 { font-size: var(--phlab-text-lg); font-weight: 600; }

/* ---- Paragraphs ---- */
p {
	margin: 0 0 1rem;
}

p:last-child {
	margin-bottom: 0;
}

/* ---- Selection ---- */
::selection {
	background: var(--phlab-accent-fire);
	color: #ffffff;
}

/* ---- Focus (keyboard) ---- */
:focus-visible {
	outline: 2px solid var(--phlab-accent-fire);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Scrollbar (dark custom) ---- */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--phlab-bg-alt);
}

::-webkit-scrollbar-thumb {
	background: var(--phlab-border-grid);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--phlab-text-fade);
}

/* ==========================================================================
   4. Layout Primitives
   ========================================================================== */

.phlab-container {
	width: 100%;
	max-width: var(--phlab-container-max);
	margin: 0 auto;
	padding: 0 var(--phlab-space-6);
}

@media (min-width: 768px) {
	.phlab-container {
		padding: 0 var(--phlab-space-8);
	}
}

@media (min-width: 1280px) {
	.phlab-container {
		padding: 0 var(--phlab-space-12);
	}
}

/* ---- Section ---- */
.phlab-section {
	padding: var(--phlab-space-16) 0;
}

.phlab-section--alt {
	background: var(--phlab-bg-alt);
}

/* Section entrance animation */
.phlab-section[data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--phlab-dur-entrance) var(--phlab-ease-out-expo),
	            transform var(--phlab-dur-entrance) var(--phlab-ease-out-expo);
}

.phlab-section[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Section title */
.phlab-section__title {
	font-size: var(--phlab-text-2xl);
	font-weight: 700;
	text-align: center;
	margin-bottom: var(--phlab-space-3);
	letter-spacing: -0.02em;
}

.phlab-section__subtitle {
	color: var(--phlab-text-muted);
	text-align: center;
	max-width: 40rem;
	margin: 0 auto var(--phlab-space-12);
	font-size: var(--phlab-text-md);
	line-height: 1.6;
}

/* ---- Grid ---- */
.phlab-grid {
	display: grid;
	gap: var(--phlab-gap);
}

.phlab-grid--collections,
.phlab-product-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.phlab-grid--collections,
	.phlab-product-grid,
	.phlab-grid--features {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.phlab-grid--collections,
	.phlab-product-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	.phlab-grid--features {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- Skip Link ---- */
.phlab-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
}

.phlab-skip-link:focus {
	left: var(--phlab-space-4);
	top: var(--phlab-space-4);
	z-index: 9999;
	background: var(--phlab-accent-fire);
	color: #ffffff;
	padding: var(--phlab-space-2) var(--phlab-space-4);
	border-radius: var(--phlab-radius-sm);
	font-weight: 600;
}

/* ---- Rich content (the_content wrapper) ---- */
.phlab-content {
	max-width: var(--phlab-content-width);
	margin: 0 auto;
}

.phlab-content h2 {
	margin-top: var(--phlab-space-12);
}

.phlab-content h3 {
	margin-top: var(--phlab-space-8);
}

.phlab-content p,
.phlab-content li {
	color: var(--phlab-text-muted);
	line-height: 1.75;
}

.phlab-content ul,
.phlab-content ol {
	margin: var(--phlab-space-4) 0;
	padding-left: 1.25rem;
}

.phlab-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--phlab-space-6) 0;
	font-size: var(--phlab-text-sm);
}

.phlab-content th {
	text-align: left;
	font-family: var(--phlab-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--phlab-text-xs);
	color: var(--phlab-text-primary);
	padding: var(--phlab-space-3) var(--phlab-space-4);
	border-bottom: 2px solid var(--phlab-border-grid);
	background: var(--phlab-bg-alt);
}

.phlab-content td {
	padding: var(--phlab-space-3) var(--phlab-space-4);
	border-bottom: 1px solid var(--phlab-border-subtle);
	color: var(--phlab-text-muted);
}

.phlab-content tr:hover td {
	background: var(--phlab-bg-alt);
}

/* ==========================================================================
   5. Motion: Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}