/*
Theme Name:     Hello Child
Theme URI:      https://pediredisupply.com
Description:    CSS-first child theme for Elementor v4 readiness. Design system managed via tokens.css, utilities.css, and components.css for WooCommerce storefront kits.
Author:         Todd Wilson
Author URI:     https://icreativepro.com
Template:       hello-elementor
Version:        0.1.53
Text Domain:    hello-child
*/

/**
 * CSS Architecture:
 * 1. style.css (this file) - Theme header + base overrides
 * 2. tokens.css - Design tokens (colors, typography, spacing, etc.)
 * 3. utilities.css - Layout helpers, typography utilities, responsive classes
 * 4. components.css - BEM-based component primitives (buttons, cards, badges, etc.)
 * 
 * Load order is managed in functions.php via wp_enqueue_style dependencies.
 * Elementor Global Colors/Fonts map to tokens for single source of truth.
 */

/* ============================================
   BASE RESETS & OVERRIDES
   ============================================ */

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

/* Remove default margins on common elements
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}
 */

/* Smooth scrolling for anchor links */
html {
	scroll-behavior: smooth;
}

/* Improve text rendering */
body {
	font-family: var(--font-primary);
	font-size: 1.125rem; /* 18px base size for mobile */
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Add padding for fixed vertical navigation between tablet and desktop */
@media (min-width: 768px) {
	body {
		font-size: 1.8125rem; /* 29px base size for desktop */
		padding-left: calc(var(--space-24) - 1px); /* 6rem - 1px = 95px */
	}
}

/* Bold text - Aptos Bold */
strong,
b {
	font-weight: 700;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
	font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* ============================================
   ELEMENTOR INTEGRATION
   ============================================ */

/* Ensure Elementor containers respect design system */
.elementor-section,
.elementor-container {
	/* Let tokens handle spacing */
}

/* Remove Elementor's default column gaps in favor of design system */
.elementor-column-gap-default
	> .elementor-column
	> .elementor-element-populated {
	/* Override with token-based padding if needed */
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */

/* Ensure WooCommerce elements use design system colors */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	/* These will inherit from .btn component classes */
}

/* Product grid alignment */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		gap: var(--space-8);
	}
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Stylized headings */
h2.stylized,
.heading-stylized {
	font-family: var(--font-secondary);
	font-weight: 600;
	font-style: italic;
}

/* ============================================
   CUSTOM OVERRIDES
   Add project-specific overrides below
   ============================================ */

/* Example: Ensure Elementor widgets respect focus states */
.elementor-widget:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Hide Custom color checkbox below add to cart button */
.woocommerce-variation-add-to-cart .custom-color {
	display: none;
}

.woocommerce-variation-price {
	margin-bottom: var(--space-6);
}

/* Hide Custom color checkbox spans both columns on its own row */
.woocommerce-variation-add-to-cart .custom-color {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 0.5rem;
	display: none;
}

.woocommerce-variation {
	text-wrap-mode: wrap;
}

/* optional PO number field on checkout for business cards */
label[for="virtualmerchant_customer_code"]::after {
	content: " (Optional)";
}

.elementor-widget-woocommerce-checkout-page #ship-to-different-address span {
	font-family: var(--font-primary);
	font-size: 1rem;
}

label[for="virtualmerchant_customer_code"] .required {
	display: none !important;
}

/* Keep SkyVerge/WooCommerce payment card icons inline on checkout */
.woocommerce-checkout .sv-wc-payment-gateway-card-icons {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-1);
	vertical-align: middle;
}

.woocommerce-checkout .sv-wc-payment-gateway-card-icons img {
	display: inline-block;
	width: auto;
	max-width: none;
	height: 1.35em;
	margin: 0;
	vertical-align: middle;
}

/* coupon notices */
/* Modern Card Coupon Design - Option 2 */
blockquote.coupon {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 20px;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

blockquote.coupon p {
	margin: 0;
	line-height: 1.6;
	color: var(--color-text);
}

blockquote.coupon .label-success {
	display: inline-block;
	color: white;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	vertical-align: middle;
}

blockquote.coupon .coupon.code {
	display: inline-block;
	background: var(--color-primary);
	color: white;
	padding: 4px 12px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: scale 0.2s ease;
}

blockquote.coupon .coupon.code:hover {
	scale: 1.1;
}

blockquote.coupon .discount {
	font-weight: var(--font-weight-semibold);
}

/* ============================================
   LAYOUT
   ============================================ */

.site-main {
	min-height: 70vh;
	padding-top: var(--space-12);
	padding-bottom: var(--space-20);
}

/* ============================================
   COLOR CLASSES FOR TABLE ROWS
   Applied to variation table rows for visual feedback
   ============================================ */

/* color variables - PMS > HEX (http://www.sharperbrand.com/support/pantone_colors) */

/* Table row color classes */
.variations tr.color-aqua {
	background-color: #0cc6de;
	color: #fff;
}
.variations tr.color-blue {
	background-color: #00b9e4;
	color: #fff;
}
.variations tr.color-light-blue {
	background-color: #a1dee9;
}
.variations tr.color-blue-grey {
	background-color: #7685b6;
	color: #fff;
}
.variations tr.color-green {
	background-color: #a1db87;
	color: #fff;
}
.variations tr.color-light-green {
	background-color: #cfe89c;
}
.variations tr.color-green-blue {
	background-color: #47d5cd;
}
.variations tr.color-orange {
	background-color: #ffa952;
	color: #fff;
}
.variations tr.color-light-orange {
	background-color: #fbce92;
}
.variations tr.color-red {
	background-color: #f15a7d;
	color: #fff;
}
.variations tr.color-peach {
	background-color: #fbce92;
}
.variations tr.color-pink {
	background-color: #ff77a8;
	color: #fff;
}
.variations tr.color-light-pink {
	background-color: #fcb8c4;
}
.variations tr.color-purple {
	background-color: #de81d3;
	color: #fff;
}
.variations tr.color-light-purple {
	background-color: #dc9ddd;
}
.variations tr.color-root-beer {
	background-color: #83334a;
	color: #fff;
}
.variations tr.color-yellow {
	background-color: #fada63;
}
.variations tr.color-light-yellow {
	background-color: #f2df74;
}
.variations tr.color-golden-yellow {
	background-color: #fadc41;
}
.variations tr.color-white,
.variations tr.color-no-dye-white {
	background-color: #fff;
}