/* Responsive CSS Base: variables, reset, layout and utilities */

/* CSS variables */
:root{
  --max-width: 1200px;
  --container-padding: 16px;
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --base-font-size: 16px;
  --heading-color: #111;
  --text-color: #333;
  --muted: #666;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0; font-family:var(--font-family); font-size:var(--base-font-size); color:var(--text-color); -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none}

/* Container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
}

/* Typography */
h1,h2,h3,h4,h5{color:var(--heading-color); margin:0 0 0.5rem 0; line-height:1.2}
p{margin:0 0 1rem 0; line-height:1.6}

/* Header */
.site-header{
  background: #fff;
  border-bottom:1px solid #eee;
  position:relative;
  z-index:20;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}

/* Nav */
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.site-nav li{margin:0}

/* Footer */
.site-footer{border-top:1px solid #eee; padding:24px 0; font-size:0.9rem; color:var(--muted)}

/* Accessibility helpers */
.screen-reader-text{position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden}

/* Utilities */
.row{display:flex; flex-wrap:wrap; gap:1rem}
.col{flex:1 1 0%}

/* Responsive breakpoints */
@media (max-width: 1024px){
  :root{--container-padding: 14px}
  .site-nav ul{gap:0.75rem}
}

@media (max-width: 768px){
  :root{--container-padding: 12px; --base-font-size:15px}
  .header-inner{flex-direction:column; align-items:flex-start; gap:8px}
  .site-nav ul{flex-direction:column; width:100%}
  .site-nav li{padding:6px 0}
  .row{flex-direction:column}
}

/* Utility helpers for Elementor */
.elementor-section{padding:0}
.elementor-container{max-width:100%}

/* Small helper for full-width templates */
.full-width{width:100%; margin:0; padding:0}