/* ===== GLOBAL STYLES - RESPONSIVE FOUNDATION ===== */

/* CSS Custom Properties for consistent theming */
:root{
 /* Color palette */
 --primary-color:#0066cc;
 --secondary-color:#67b52b;
 --accent-color:#ff4444;
 --text-primary:#333333;
 --text-secondary:#777777;
 --text-muted:#999999;
 --bg-primary:#ffffff;
 --bg-secondary:#f5f5f5;
 --bg-tertiary:#f8f9fa;
 --border-color:#e0e0e0;
 --shadow-light:rgba(0, 0, 0, 0.05);
 --shadow-medium:rgba(0, 0, 0, 0.1);
 --shadow-dark:rgba(0, 0, 0, 0.2);
 
 /* Typography */
 --font-family-primary:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
 --font-family-secondary:'Roboto Slab', Georgia, serif;
 --font-weight-light:300;
 --font-weight-normal:400;
 --font-weight-medium:500;
 --font-weight-bold:700;
 
 /* Spacing */
 --spacing-xs:0.25rem;
 --spacing-sm:0.5rem;
 --spacing-md:1rem;
 --spacing-lg:1.5rem;
 --spacing-xl:2rem;
 --spacing-xxl:3rem;
 
 /* Border radius */
 --radius-sm:0.25rem;
 --radius-md:0.375rem;
 --radius-lg:0.5rem;
 --radius-xl:0.75rem;
 
 /* Transitions */
 --transition-fast:0.15s ease;
 --transition-normal:0.3s ease;
 --transition-slow:0.5s ease;
 
 /* Z-index scale */
 --z-dropdown:1000;
 --z-sticky:1020;
 --z-fixed:1030;
 --z-modal-backdrop:1040;
 --z-modal:1050;
 --z-popover:1060;
 --z-tooltip:1070;
}

/* Base typography and layout */
html{
 font-size:16px;
 line-height:1.5;
 -webkit-text-size-adjust:100%;
 -ms-text-size-adjust:100%;
 -webkit-tap-highlight-color:transparent;
 scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){
 html{
 scroll-behavior:auto;
}
}

body{
 font-family:'Roboto', sans-serif;
 background-color:#ffffff;
 color:#333;
 line-height:1.6;
 margin:0;
 margin-top:40px;/* Space for fixed green header */
 padding:0;
 overflow-x:hidden;
 min-height:100vh;
 display:flex;
 flex-direction:column;
 /* Ensure header elements are visible and not cut off */
 position:relative;
 padding-top:0;/* Ensure no default padding pushes content down */
}

/* Ensure main content area takes available space */
#main-content{
 flex:1;
}

/* Responsive typography scale */
h1, h2, h3, h4, h5, h6{
 font-family:var(--font-family-primary);
 font-weight:var(--font-weight-medium);
 line-height:1.2;
 margin-top:0;
 margin-bottom:var(--spacing-md);
 color:var(--text-primary);
}

h1{
 font-size:clamp(1.75rem, 5vw, 3rem);
 font-weight:var(--font-weight-bold);
}

h2{
 font-size:clamp(1.5rem, 4vw, 2.5rem);
 font-weight:var(--font-weight-bold);
}

h3{
 font-size:clamp(1.25rem, 3vw, 2rem);
}

h4{
 font-size:clamp(1.125rem, 2.5vw, 1.5rem);
}

h5{
 font-size:clamp(1rem, 2vw, 1.25rem);
}

h6{
 font-size:clamp(0.875rem, 1.5vw, 1.125rem);
}

p, li, span, div{
 font-size:clamp(0.875rem, 1.2vw, 1rem);
 line-height:1.6;
 margin-bottom:var(--spacing-md);
}

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

a:hover, a:focus{
 color:var(--accent-color);
 text-decoration:underline;
}

a:focus{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
}

/* Button base styles */
.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:var(--spacing-sm) var(--spacing-md);
 border:1px solid transparent;
 border-radius:var(--radius-md);
 font-family:inherit;
 font-size:clamp(0.875rem, 1vw, 1rem);
 font-weight:var(--font-weight-medium);
 line-height:1.4;
 text-align:center;
 text-decoration:none;
 cursor:pointer;
 transition:all var(--transition-fast);
 min-height:44px;/* Touch-friendly */
 user-select:none;
}

.btn:focus{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
}

.btn:disabled{
 opacity:0.6;
 cursor:not-allowed;
}

/* Form elements */
input, textarea, select{
 font-family:inherit;
 font-size:clamp(0.875rem, 1vw, 1rem);
 line-height:1.4;
 border:1px solid var(--border-color);
 border-radius:var(--radius-md);
 padding:var(--spacing-sm) var(--spacing-md);
 background-color:var(--bg-primary);
 color:var(--text-primary);
 transition:border-color var(--transition-fast);
 min-height:44px;/* Touch-friendly */
}

input:focus, textarea:focus, select:focus{
 outline:none;
 border-color:var(--primary-color);
 box-shadow:0 0 0 2px rgba(0, 102, 204, 0.2);
}

/* Image optimization */
img{
 max-width:100%;
 height:auto;
 display:block;
}

/* Screen reader only content */
.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 link for accessibility */
.skip-link{
 position:absolute;
 top:-40px;
 left:6px;
 background:var(--bg-primary);
 color:var(--text-primary);
 padding:8px;
 text-decoration:none;
 border-radius:var(--radius-md);
 z-index:var(--z-tooltip);
}

.skip-link:focus{
 top:6px;
}

/* Focus management */
.focus-trap{
 outline:none;
}

/* Smooth scrolling for anchors */
@media (prefers-reduced-motion:no-preference){
 html{
 scroll-behavior:smooth;
}
}

/* High contrast mode support */
@media (prefers-contrast:high){
:root{
 --border-color:#000000;
 --shadow-light:rgba(0, 0, 0, 0.8);
 --shadow-medium:rgba(0, 0, 0, 0.9);
 --shadow-dark:rgba(0, 0, 0, 1);
}
 
 .btn, input, textarea, select{
 border-width:2px;
}
}

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

/* Print styles */
@media print{
:root{
 --bg-primary:white;
 --bg-secondary:white;
 --bg-tertiary:white;
 --text-primary:black;
 --text-secondary:black;
 --border-color:black;
}
 
 body{
 background:white !important;
 color:black !important;
 font-size:12pt;
 line-height:1.4;
}
 
 .btn{
 border:1px solid black;
 background:white;
 color:black;
}
 
 a{
 color:black;
 text-decoration:underline;
}
 
 h1, h2, h3, h4, h5, h6{
 page-break-after:avoid;
 color:black;
}
 
 img{
 max-width:100% !important;
 page-break-inside:avoid;
}
}

/* Container queries support (progressive enhancement) */
@supports (container-type:inline-size){
 .responsive-container{
 container-type:inline-size;
}
 
 @container (max-width:300px){
 .responsive-text{
 font-size:0.8rem;
}
}
 
 @container (min-width:600px){
 .responsive-text{
 font-size:1.1rem;
}
}
}

/* Modern layout support */
@supports (display:grid){
 .grid-container{
 display:grid;
 gap:var(--spacing-md);
}
}

@supports (display:flex){
 .flex-container{
 display:flex;
 gap:var(--spacing-md);
}
}

/* Animation performance */
.animate{
 will-change:transform, opacity;
 backface-visibility:hidden;
 perspective:1000px;
}

/* Loading states */
.loading{
 pointer-events:none;
 opacity:0.7;
}

.loading::after{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:20px;
 height:20px;
 margin:-10px 0 0 -10px;
 border:2px solid var(--border-color);
 border-top-color:var(--primary-color);
 border-radius:50%;
 animation:spin 1s linear infinite;
}

@keyframes spin{
 to{transform:rotate(360deg);}
}

/* Custom scrollbar (webkit browsers) */
::-webkit-scrollbar{
 width:8px;
 height:8px;
}

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

::-webkit-scrollbar-thumb{
 background:var(--border-color);
 border-radius:var(--radius-sm);
}

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

/* Selection styles */
::selection{
 background-color:var(--primary-color);
 color:white;
}

::-moz-selection{
 background-color:var(--primary-color);
 color:white;
}

/* Global Styles */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

/* Ensure main container has white background */
.page-body-container-bs{
 background-color:#ffffff;
}

/* Container wrapper for consistent white background */
.container{
 background-color:transparent;
}

/* ==========================================================================
 CLS Fix - Prevent layout shift for images
 ========================================================================== */

/* Product card images - maintain 1:1 aspect ratio */
.product-card-image,
.product-card-image-container img{
 aspect-ratio:1 / 1;
 object-fit:contain;
 width:100%;
 height:auto;
}

/* Generic product images */
.product-image img{
 aspect-ratio:1 / 1;
 object-fit:contain;
}