/**
 * TTPixel Child Theme — Main Stylesheet
 *
 * Scope  : Global — loaded on every page.
 * Purpose: Site-wide foundational styles only.
 *          Keep this file lean. Heavy page-specific styles go elsewhere.
 *
 * Load order (guaranteed by enqueue.php):
 *   1. hello-elementor  (parent reset.css)
 *   2. hello-elementor-theme-style (parent theme.css)
 *   3. THIS FILE  ← ttpixel-main-style
 *   4. woocommerce.css  (WooCommerce pages only)
 *
 * Elementor Compatibility (Phase 5):
 *   - Heading selectors exclude .elementor-widget-container descendants.
 *   - Link colour scoped away from Elementor widget contexts.
 *   - SVG display kept as inline to preserve Elementor icon alignment.
 *   - No .elementor-* selectors are targeted in this file.
 *   - No layout containers (.site-main, .site-header) are constrained.
 *   - Elementor inline styles always win over our class-level rules (by design).
 *
 * Sections:
 *   1. CSS Custom Properties (Design Tokens)
 *   2. Global Base Resets
 *   3. Typography
 *   4. Images & Media
 *   5. Utility Classes
 *   6. Accessibility
 *   7. Elementor Compatibility Notes
 *
 * @package TTPixel_Child_Theme
 */

/* =============================================================================
   1. CSS Custom Properties — Design Tokens
   Centralised variables. Change here, propagates everywhere.
   ============================================================================= */

:root {

	/* Colours */
	--ttpixel-color-primary:      #2563eb;   /* Brand primary */
	--ttpixel-color-primary-dark: #1d4ed8;   /* Primary hover / active */
	--ttpixel-color-secondary:    #7c3aed;   /* Accent */
	--ttpixel-color-text:         #1f2937;   /* Body text */
	--ttpixel-color-text-light:   #6b7280;   /* Muted / secondary text */
	--ttpixel-color-border:       #e5e7eb;   /* Borders, dividers */
	--ttpixel-color-bg:           #ffffff;   /* Page background */
	--ttpixel-color-bg-alt:       #f9fafb;   /* Alternate section background */
	--ttpixel-color-success:      #16a34a;   /* Success / positive state */
	--ttpixel-color-error:        #dc2626;   /* Error / destructive state */
	--ttpixel-color-warning:      #d97706;   /* Warning state */

	/* Typography */
	--ttpixel-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--ttpixel-font-heading: var(--ttpixel-font-base);
	--ttpixel-font-size:    16px;
	--ttpixel-line-height:  1.6;

	/* Spacing scale */
	--ttpixel-space-xs:   0.25rem;   /*  4px */
	--ttpixel-space-sm:   0.5rem;    /*  8px */
	--ttpixel-space-md:   1rem;      /* 16px */
	--ttpixel-space-lg:   1.5rem;    /* 24px */
	--ttpixel-space-xl:   2rem;      /* 32px */
	--ttpixel-space-2xl:  3rem;      /* 48px */

	/* Border radius */
	--ttpixel-radius-sm:  4px;
	--ttpixel-radius-md:  8px;
	--ttpixel-radius-lg:  12px;
	--ttpixel-radius-full: 9999px;

	/* Transitions */
	--ttpixel-transition: 0.2s ease;

	/* Container */
	--ttpixel-container-max: 1200px;

}

/* =============================================================================
   2. Global Base Resets
   Minimal — the parent already handles the heavy reset.
   We only correct/extend where needed.
   ============================================================================= */

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

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

body {
	font-family: var(--ttpixel-font-base);
	font-size: var(--ttpixel-font-size);
	line-height: var(--ttpixel-line-height);
	color: var(--ttpixel-color-text);
	background-color: var(--ttpixel-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   3. Typography

   Elementor Compatibility:
   Heading rules exclude .elementor-widget-container so Elementor's own
   typography controls (set via the builder or kit CSS variables) are not
   overridden. Elementor inline styles have higher specificity anyway, but
   scoping prevents bleed-through on widgets with no custom typography set.
   ============================================================================= */

/*
 * Headings — scoped AWAY from Elementor widget containers.
 * :not(.elementor-widget-container) prevents our font-weight / colour from
 * overriding the parent theme default (500) inside builder widgets.
 */
h1:not(.elementor-widget-container h1),
h2:not(.elementor-widget-container h2),
h3:not(.elementor-widget-container h3),
h4:not(.elementor-widget-container h4),
h5:not(.elementor-widget-container h5),
h6:not(.elementor-widget-container h6) {
	font-family: var(--ttpixel-font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ttpixel-color-text);
	margin-top: 0;
}

/*
 * Heading scope for non-Elementor content contexts.
 * Applies to standard WordPress content: posts, pages (non-builder),
 * WooCommerce pages, widgets, comments.
 */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce h5,
.woocommerce h6 {
	font-family: var(--ttpixel-font-heading);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
}

p {
	margin-top: 0;
	margin-bottom: var(--ttpixel-space-md);
}

/*
 * Links — scoped AWAY from Elementor widget containers.
 * Elementor manages link colours via its own kit variables and widget settings.
 * Global link colour applies to standard WP content and WooCommerce only.
 *
 * Contexts where our link colour applies:
 *   - .entry-content (standard WP posts/pages)
 *   - .widget (sidebar widgets)
 *   - .woocommerce (WC pages — further refined in woocommerce.css)
 *   - .comments-area (comment threads)
 *   - Navigation menus (nav a)
 *
 * Contexts intentionally excluded:
 *   - .elementor-widget-container (Elementor builder manages these)
 *   - .elementor-section (Elementor section links)
 */
.entry-content a,
.widget a,
.comments-area a:not(.comment-reply-link),
.woocommerce a:not(.button):not(.wc-forward) {
	color: var(--ttpixel-color-primary);
	text-decoration: none;
	transition: color var(--ttpixel-transition);
}

.entry-content a:hover,
.entry-content a:focus,
.widget a:hover,
.widget a:focus,
.comments-area a:not(.comment-reply-link):hover,
.comments-area a:not(.comment-reply-link):focus {
	color: var(--ttpixel-color-primary-dark);
	text-decoration: underline;
}

/* =============================================================================
   4. Images & Media

   Elementor Compatibility:
   SVGs are intentionally kept as 'display: inline' (browser default).
   Elementor icon widgets render SVGs inline inside flex/inline containers.
   Setting svg { display: block } breaks icon alignment in those widgets.
   Images and videos are set to block — this is safe and expected.
   ============================================================================= */

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

/*
 * SVG: keep as inline (browser default).
 * Elementor icon widgets embed SVGs inline inside flex containers.
 * display:block would break icon vertical alignment in those widgets.
 * Only override display on SVGs that are standalone content images.
 */
svg {
	max-width: 100%;
}

/*
 * Native lazy loading support.
 * WordPress adds loading="lazy" to images. This ensures no layout shift.
 */
img[loading="lazy"] {
	display: block;
}

/* =============================================================================
   5. Utility Classes
   Lightweight, single-purpose helpers.
   ============================================================================= */

/* Screen reader only — hide visually but accessible to assistive technologies */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip to main content link — keyboard navigation */
.skip-link {
	position: absolute;
	left: -9999px;
	top: var(--ttpixel-space-sm);
	z-index: 9999;
	padding: var(--ttpixel-space-sm) var(--ttpixel-space-md);
	background: var(--ttpixel-color-primary);
	color: #fff;
	border-radius: var(--ttpixel-radius-sm);
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	left: var(--ttpixel-space-md);
}

/* =============================================================================
   6. Accessibility
   ============================================================================= */

/* Ensure focus is always visible — do not suppress outline globally */
:focus-visible {
	outline: 2px solid var(--ttpixel-color-primary);
	outline-offset: 2px;
}

/* Remove focus ring only for mouse/touch users (pointer events) */
:focus:not(:focus-visible) {
	outline: none;
}

/* =============================================================================
   7. Elementor Compatibility — Intentional Non-Overrides

   This section documents why certain selectors are NOT styled here.
   It serves as the single source of truth for compatibility decisions.
   ============================================================================= */

/*
 * .elementor-*  → Never targeted. Elementor manages all its own classes.
 *
 * .site-main    → Never constrained with max-width or padding here.
 *                 The parent theme scopes .site-main constraints to
 *                 body:not([class*=elementor-page-]) — Elementor pages
 *                 are already excluded. We do not add additional constraints.
 *
 * .site-header,
 * .site-footer  → Never modified here. Elementor Pro's Theme Builder
 *                 replaces these with its own header/footer templates.
 *                 Child theme does not interfere.
 *
 * body font,
 * body colour   → Set on body element (lowest specificity).
 *                 Elementor's kit CSS variables override these via
 *                 --e-global-color-* and inline styles — by design.
 *
 * a (global)    → Scoped to content contexts (.entry-content, .widget, etc.)
 *                 in Section 3. Elementor widget links are excluded.
 *
 * h1–h6 (global)→ Scoped away from .elementor-widget-container in Section 3.
 *                 Elementor typography settings always take precedence.
 *
 * Elementor
 * Full Width    → body.elementor-page classname is added by Elementor.
 *                 The parent's theme.css already excludes those pages from
 *                 .site-main max-width constraints. No child override needed.
 *
 * Elementor
 * Canvas        → body.elementor-page-{id} classname. Header and footer
 *                 are hidden by Elementor Pro when canvas template is used.
 *                 Child theme does not add header/footer — no conflict.
 */