/*
Theme Name:        PWD Elementor Theme Pro
Theme URI:         https://prowebdesign.co.za/product/pwd-elementor-theme-pro/
Description:       A professional standalone Elementor theme. Includes a built-in Header/Footer Theme Builder (no Elementor Pro required), sticky header with scroll effects, equal-height sections, advanced font management (system, Google, and custom uploaded fonts), colour palette management with full Elementor integration, and a suite of powerful Elementor widgets: Elite Header Elements (fullscreen search, off-canvas account, off-canvas WooCommerce cart), WooCommerce Product Archive Pro, and Blog Post Archive Pro — all bundled natively with zero plugin dependencies.
Author:            Pro Web Design
Author URI:        https://prowebdesign.co.za/
Version:           1.3.0
Requires at least: 6.0
Tested up to:      7.0
Requires PHP:      7.4
WC requires at least: 7.0
WC tested up to:   10.8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       pwd-elementor-theme-pro
Tags:              elementor, woocommerce, custom-header, custom-footer, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   PWD Elementor Theme Pro — Base Styles
   Add global overrides here. Per-page styles go in the
   child theme or via the Elementor editor.
   ============================================================ */

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

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var( --pwd-font-body, system-ui, -apple-system, sans-serif );
	font-size: 1rem;
	line-height: 1.6;
	color: var( --pwd-color-text, #1a1a1a );
	background-color: var( --pwd-color-background, #ffffff );
	-webkit-font-smoothing: antialiased;
}

a {
	color: var( --pwd-color-primary, #5c3d1e );
	text-decoration: none;
}

a:hover {
	color: var( --pwd-color-secondary, #f97316 );
}

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

/* Skip link */
.pwd-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 99999;
	padding: 8px 16px;
	background: var( --pwd-color-primary, #5c3d1e );
	color: #fff;
	font-size: 0.875rem;
	transition: top 0.2s;
}
.pwd-skip-link:focus {
	top: 0;
}

/* Site wrapper */
#pwd-site-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#pwd-site-content {
	flex: 1;
}

/* ── Elementor resets ───────────────────────────────────────── */
.elementor-page-title,
.entry-title {
	margin: 0;
}

/* ── Default header (shown before Theme Builder template is set) ─── */
.pwd-default-header {
	background-color: var( --pwd-color-background, #ffffff );
	border-bottom: 1px solid rgba(0,0,0,0.08);
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
}
.pwd-default-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 32px;
	max-width: 1400px;
	margin: 0 auto;
}
.pwd-default-header-brand { flex-shrink: 0; }
.pwd-site-name {
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	color: var( --pwd-color-primary, #5c3d1e );
}
.pwd-default-header-brand .custom-logo-link img { max-height: 60px; width: auto; }
.pwd-default-header-nav { flex: 1; }
.pwd-default-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.pwd-default-menu li { margin: 0; }
.pwd-default-menu a {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
	padding: 6px 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.pwd-default-menu a:hover,
.pwd-default-menu .current-menu-item > a {
	color: var( --pwd-color-secondary, #f97316 );
	border-bottom-color: var( --pwd-color-secondary, #f97316 );
}
.pwd-default-header-search { flex-shrink: 0; }
.pwd-default-search-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: inherit;
	display: flex;
	align-items: center;
	border-radius: 4px;
	transition: color 0.2s ease;
}
.pwd-default-search-toggle:hover { color: var( --pwd-color-secondary, #f97316 ); }
.pwd-default-search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 6px;
	padding: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	min-width: 280px;
	z-index: 1000;
}
.pwd-default-search-panel .search-form { display: flex; gap: 8px; }
.pwd-default-search-panel .search-field {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.9rem;
}
.pwd-default-search-panel .search-submit {
	padding: 8px 14px;
	background: var( --pwd-color-secondary, #f97316 );
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
@media ( max-width: 768px ) {
	.pwd-default-header-inner { padding: 12px 16px; flex-wrap: wrap; }
	.pwd-default-header-nav { order: 3; width: 100%; }
	.pwd-default-menu { justify-content: flex-start; }
}

/* ── Default footer ─────────────────────────────────────────────── */
.pwd-default-footer {
	background-color: #1a1a1a;
	color: #ffffff;
	padding: 24px 32px;
	text-align: center;
	margin-top: auto;
}
.pwd-default-footer-inner { max-width: 1400px; margin: 0 auto; }
.pwd-default-footer-credit { margin: 0; font-size: 0.875rem; line-height: 1.6; }
.pwd-default-footer a { color: #f97316; text-decoration: none; }
.pwd-default-footer a:hover { text-decoration: underline; }

/* ── Default search toggle JS helper ────────────────────────────── */
.pwd-default-search-panel[hidden] { display: none; }
.pwd-default-search-panel.pwd-open { display: block; }

/* ── Skip link ──────────────────────────────────────────────────── */
.pwd-skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 99999;
	padding: 8px 16px;
	background: var( --pwd-color-primary, #5c3d1e );
	color: #fff;
	transition: top 0.2s;
}
.pwd-skip-link.screen-reader-text:focus { top: 0; }

/* ── Elementor Popup compatibility ──────────────────────────────────────────
 *
 * When an Elementor popup opens, Elementor adds padding-right to <body> equal
 * to the scrollbar width to prevent layout shift as the scrollbar disappears.
 * This causes #pwd-site-wrapper (a block element) to shift right.
 *
 * Elementor adds the class 'elementor-popup-modal--in' to body (or uses
 * dialog[data-elementor-popup]) as the popup enters. We compensate by
 * negating the padding-right shift with a negative margin on the wrapper,
 * matching Elementor's own compensation pattern.
 *
 * Additionally: any position:fixed sticky header must not inherit body
 * padding-right — it is already full-viewport via left:0/width:100%.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Prevent fixed sticky header from being affected by popup scrollbar
   compensation — it is positioned relative to the viewport, not the body. */
.elementor-popup-modal--in [data-pwd-sticky].pwd-sticky-active,
body.e-popup--active [data-pwd-sticky].pwd-sticky-active {
	right: 0;
}

/* Ensure body overflow and padding cleanup doesn't leave residual shift.
   Elementor manages these itself but some themes interfere — we stay neutral. */
html,
body {
	overflow-x: hidden;
}

/* ── Elementor Full Width template (elementor_header_footer) compatibility ──
 *
 * When using the "Elementor Full Width" page template, Elementor calls
 * get_header() / get_footer() but does NOT output a <main> wrapper.
 * Content goes directly into #pwd-site-wrapper between header and footer.
 * We add flex:1 to the Elementor content container so the footer still
 * sticks to the bottom on short pages.
 * ─────────────────────────────────────────────────────────────────────────── */
.elementor-template-full-width .elementor-section-wrap,
.elementor-template-full-width #elementor-app-root {
	flex: 1;
}

/* ── Elementor Canvas template ──────────────────────────────────────────────
 *
 * Canvas uses its own full <!DOCTYPE html> — the theme is bypassed entirely.
 * No rules needed here. Listed for documentation only.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Elementor Theme template compatibility ─────────────────────────────────
 *
 * Theme template uses singular.php → outputs header, <main>, footer normally.
 * #pwd-site-content flex:1 ensures footer sticks to bottom. No extra rules
 * needed beyond what is already in the base styles above.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Popup slide-in: prevent horizontal scrollbar flash ─────────────────────
 *
 * Elementor popups that slide in from the side temporarily cause a horizontal
 * overflow flash. Clamp at viewport width.
 * ─────────────────────────────────────────────────────────────────────────── */
.elementor-popup-modal {
	overflow: hidden;
}

/* ── Ensure #pwd-site-wrapper does not interfere with popup overlay ──────────
 *
 * The wrapper's flex layout must not create a new stacking context that
 * competes with the popup overlay (z-index managed by Elementor).
 * isolation:isolate would break popup z-index layering — we explicitly
 * avoid it and keep the wrapper as a plain flex column.
 * ─────────────────────────────────────────────────────────────────────────── */
#pwd-site-wrapper {
	isolation: auto;
}