/*
Theme Name:  Breatheazy Child
Theme URI:   https://breatheazy.in
Description: Child theme for the Breatheazy e-commerce platform. Built on Astra for deep WooCommerce integration, Elementor compatibility, and extensive Customizer options for easy client management. Implements the Breatheazy healthcare brand palette, Inter typography, and mobile-first responsive design for the Indian market.
Author:      Hi-Tech Healthcare
Author URI:  https://breatheazy.in
Template:    astra
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breatheazy-child
Tags:        e-commerce, woocommerce, healthcare, india
*/

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Brand colors — configurable via Customizer > Breatheazy Brand Colors */
	--color-primary:         #0D9488;
	--color-primary-dark:    #0B7C72;
	--color-primary-light:   #14B8A6;
	--color-secondary:       #1E3A5F;
	--color-secondary-dark:  #152C49;
	--color-secondary-light: #2A4F7F;
	--color-accent:          #F97316;
	--color-accent-dark:     #EA580C;
	--color-accent-light:    #FB923C;
	--color-bg:              #FFFFFF;
	--color-surface:         #F8FAFC;
	--color-text:            #1E293B;
	--color-text-muted:      #64748B;
	--color-border:          #E2E8F0;
	--color-success:         #22C55E;
	--color-error:           #EF4444;

	/* Legacy aliases — used by product page CSS (inc/woocommerce.php) */
	--breatheazy-primary:      var(--color-primary);
	--breatheazy-primary-dark: var(--color-primary-dark);
	--breatheazy-secondary:    var(--color-secondary);
	--breatheazy-accent:       var(--color-accent);
	--breatheazy-accent-dark:  var(--color-accent-dark);
	--breatheazy-surface:      var(--color-surface);
	--breatheazy-text:         var(--color-text);
	--breatheazy-text-muted:   var(--color-text-muted);
	--breatheazy-border:       var(--color-border);

	/* Typography */
	--font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-family-heading: var(--font-family-base);
	--font-size-base:      16px;
	--font-size-sm:        14px;
	--font-size-lg:        18px;
	--font-size-xl:        20px;
	--font-size-2xl:       24px;
	--font-size-3xl:       30px;
	--font-size-4xl:       36px;
	--line-height-base:    1.6;
	--line-height-heading: 1.25;

	/* Spacing scale */
	--spacing-xs:  4px;
	--spacing-sm:  8px;
	--spacing-md:  16px;
	--spacing-lg:  24px;
	--spacing-xl:  40px;
	--spacing-2xl: 64px;

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

	/* Shadows */
	--shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
}

/* ==========================================================================
   2. Base Overrides
   ========================================================================== */

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	font-weight: 700;
	line-height: var(--line-height-heading);
	color: var(--color-text);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: 600;
	line-height: 1;
	color: #FFFFFF;
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
	min-height: 44px;
	min-width: 44px;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus {
	color: #FFFFFF;
	background-color: var(--color-accent-dark);
	transform: translateY(-1px);
}

.button:active,
button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
}

/* Secondary / outline button variant */
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--color-primary);
}

.button.alt:hover,
.button.alt:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus {
	background-color: var(--color-primary-dark);
	color: #FFFFFF;
}

/* ==========================================================================
   5. Header & Navigation
   ========================================================================== */

/* Override Astra header colors */
.ast-primary-header-bar,
.main-header-bar {
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

/* Contain header content within the Astra container */
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

/* Site title styling */
.site-title a,
.ast-site-identity .site-title a {
	color: var(--color-secondary);
	font-family: var(--font-family-heading);
	font-weight: 700;
}

.site-title a:hover,
.ast-site-identity .site-title a:hover {
	color: var(--color-primary);
}

/* Navigation links */
.main-header-menu a,
.ast-header-sections-navigation a {
	color: var(--color-text);
	font-weight: 500;
	transition: color var(--transition-fast);
}

.main-header-menu a:hover,
.main-header-menu a:focus,
.main-header-menu .current-menu-item > a {
	color: var(--color-primary);
}

/* Mobile hamburger menu */
.ast-mobile-menu-trigger {
	min-width: 44px;
	min-height: 44px;
}

/* ==========================================================================
   6. Placeholder Text Logo
   ========================================================================== */

.breatheazy-text-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.breatheazy-logo-text {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}

.breatheazy-text-logo:hover .breatheazy-logo-text,
.breatheazy-text-logo:focus .breatheazy-logo-text {
	color: var(--color-primary-dark);
}

/* Dark background variant — add class .logo-on-dark to parent container */
.logo-on-dark .breatheazy-logo-text {
	color: #FFFFFF;
}

.logo-on-dark .breatheazy-text-logo:hover .breatheazy-logo-text {
	color: var(--color-primary-light);
}

/* ==========================================================================
   7. WooCommerce Overrides
   ========================================================================== */

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-secondary);
	font-weight: 700;
	font-size: var(--font-size-2xl);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--color-text-muted);
	font-weight: 400;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	color: var(--color-secondary);
}

/* Sale badge */
.woocommerce span.onsale {
	background-color: var(--color-accent);
	color: #FFFFFF;
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: 4px 10px;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
}

/* Product cards on shop/archive pages */
.woocommerce ul.products li.product {
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--color-text);
	font-size: var(--font-size-base);
	font-weight: 600;
}

/* Add to Cart button in product grid */
.woocommerce ul.products li.product .button {
	background-color: var(--color-primary);
	border-radius: var(--radius-md);
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--color-primary-dark);
}

/* Single product Add to Cart */
.woocommerce div.product form.cart .button {
	background-color: var(--color-accent);
	font-size: var(--font-size-lg);
	padding: 14px 32px;
	min-height: 48px;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--color-accent);
}

/* Checkout & cart notice messages */
.woocommerce-message {
	border-top-color: var(--color-success);
}

.woocommerce-error {
	border-top-color: var(--color-error);
}

.woocommerce-info {
	border-top-color: var(--color-primary);
}

/* ==========================================================================
   8. Trust Badges & Utility Classes
   ========================================================================== */

.breatheazy-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	padding: var(--spacing-lg) 0;
}

.breatheazy-trust-badge {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.breatheazy-trust-badge svg,
.breatheazy-trust-badge img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Section backgrounds */
.breatheazy-section-surface {
	background-color: var(--color-surface);
}

.breatheazy-section-primary {
	background-color: var(--color-primary);
	color: #FFFFFF;
}

.breatheazy-section-secondary {
	background-color: var(--color-secondary);
	color: #FFFFFF;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.site-footer,
.ast-footer-overlay {
	background-color: var(--color-secondary);
	color: rgba(255, 255, 255, 0.8);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer a:hover,
.site-footer a:focus {
	color: #FFFFFF;
}

.site-footer .widget-title {
	color: #FFFFFF;
}

/* ==========================================================================
   10. Responsive Overrides (Mobile-First)
   ========================================================================== */

/* Base styles are mobile-first (already defined above).
   Media queries progressively enhance for larger screens. */

/* --- Small screens (phones, < 544px) --- */
@media (max-width: 543px) {
	:root {
		--font-size-4xl: 28px;
		--font-size-3xl: 24px;
		--font-size-2xl: 20px;
	}

	/* Ensure all interactive elements have 44px minimum tap targets */
	.button,
	button,
	input[type="button"],
	input[type="submit"],
	.woocommerce a.button,
	.woocommerce button.button,
	a.button {
		min-height: 44px;
		min-width: 44px;
		padding: 12px 20px;
	}

	/* Stack trust badges vertically on small screens */
	.breatheazy-trust-badges {
		flex-direction: column;
	}
}

/* --- Tablets (544px – 921px) --- */
@media (min-width: 544px) and (max-width: 921px) {
	:root {
		--font-size-4xl: 32px;
		--font-size-3xl: 26px;
	}
}

/* --- Desktop (922px+) --- */
@media (min-width: 922px) {
	/* Wider content area for product pages */
	.woocommerce div.product {
		max-width: 1200px;
	}
}

/* ==========================================================================
   11. Print Styles
   ========================================================================== */

@media print {
	body {
		color: #000000;
		background: #FFFFFF;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	.site-header,
	.site-footer,
	.ast-mobile-menu-trigger {
		display: none;
	}
}