/* ===========================================================
   Styles: Glen/Oma Chimney unified theme
   Palette tuned to hero: primary blue (#58AAFF), dark text, warm soft bg
   =========================================================== */

/* ---------- Root variables (brand system) ---------- */
:root{
    --primary: #58AAFF;        /* brand cabinet blue */
    --primary-700: #2f86e6;    /* darker blue for hover */
    --accent: #0f1720;         /* primary text */
    --muted: #6b6f74;          /* secondary text */
    --bg: #fbf9f7;             /* warm page background */
    --card: #ffffff;           /* card backgrounds */
    --accent2: #f07b2d;        /* secondary accent - sparing use */
    --radius: 12px;
    --container: 1100px;
    --shadow-1: 0 8px 24px rgba(18,24,30,0.04);
    --shadow-2: 0 14px 40px rgba(18,24,30,0.06);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color-scheme: light;
  }
  
  /* ---------- Reset & base ---------- */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-size:16px;
    line-height:1.5;
    background:var(--bg);
    color:var(--accent);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  .container{max-width:var(--container);margin:0 auto;padding:0 1rem}
  
  /* Accessible focus outline for keyboard users */
  :focus{outline:3px solid rgba(88,170,255,0.25);outline-offset:3px}
  a{color:inherit}
  
  /* ---------- Header & Nav ---------- */
  .site-header{
    position:sticky;top:0;z-index:999;
    background:#0b0b0b; color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .header-row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem}
  .site-logo{font-weight:900;color:var(--primary);text-decoration:none;font-size:1.25rem;letter-spacing:.02em}
  .site-logo span{color:#fff;margin-left:6px;font-weight:700}
  
  /* Menu toggle (mobile) */
  .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.25rem;cursor:pointer}
  
  /* Nav links */
  .main-nav{
    display:flex;gap:1.25rem;align-items:center;
  }
  .main-nav .nav-link{
    color:#fff;text-decoration:none;padding:.45rem .7rem;border-radius:8px;font-weight:600;transition:all .18s;
  }
  .main-nav .nav-link:hover{color:var(--primary);transform:translateY(-2px)}
  .main-nav .nav-link.active{
    background:linear-gradient(180deg, rgba(88,170,255,0.12), rgba(47,134,230,0.06));
    border:1px solid rgba(88,170,255,0.18);
    box-shadow:0 10px 30px rgba(47,134,230,0.08);
    color:var(--primary);
  }
  
  /* ---------- HERO (responsive single desktop + mobile images) ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;  /* centers content both axes */
  min-height:72vh;         /* desktop: adjust to taste (72vh works well) */
  overflow:hidden;
  background:var(--bg);    /* keeps warm page bg behind image if it fails to load */
}

/* picture/img background sizing */
.hero-picture,
.hero .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;        /* cover and crop where necessary */
  object-position:center 40%; /* desktop focal point; tune as needed */
  z-index:1;
}

/* Subtle dark overlay instead of white wash (keeps image vivid but text readable) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* soft dark overlay for contrast (not white) */
  background:linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.06));
  pointer-events:none;
  z-index:1;
}

/* content sits above the image */
.hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
  padding:2.5rem;
  text-align:left; /* desktop left aligned, change to center on small screens */
  margin-left:4%;
}

/* heading and sub */
.hero-title{
  margin:0 0 .6rem 0;
  font-size:clamp(2rem,5vw,3.6rem);
  color:var(--accent);
  font-weight:900;
  line-height:1.02;
}
.hero-sub{
  margin:0 0 1rem 0;
  color:var(--muted);
  font-weight:600;
  font-size:clamp(0.95rem,2.6vw,1.05rem);
}

/* CTAs */
.cta-group{display:flex;gap:0.9rem;flex-wrap:wrap}

/* ---------- Mobile / small screens ---------- */
@media (max-width: 900px){
  .hero{min-height:60vh}
  .hero-picture, .hero .hero-bg { object-position: center 30%; } /* shift crop higher or lower */
  .hero-content{
    text-align:center;      /* center text on mobile */
    margin-left:0;
    padding:2rem 1rem;
  }
  .hero-title{font-size:clamp(1.6rem,6vw,2.4rem)}
  .cta-group{justify-content:center}
}

  
  /* ---------- Buttons (consistent system) ---------- */
  .btn{
    display:inline-block;position:relative;
    padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:800;
    cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;
  }
  
  /* Primary CTA: blue gradient + shine overlay */
  .btn-primary{
    background:linear-gradient(90deg,var(--primary),var(--primary-700));
    color:#fff;border:0;box-shadow:0 8px 24px rgba(47,134,230,0.14);
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
  .btn-primary::after{
    /* subtle shine overlay */
    content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    mix-blend-mode:overlay;opacity:0.95;
  }
  
  /* Outline CTA */
  .btn-outline{
    background:transparent;color:var(--primary);border:2px solid rgba(88,170,255,0.22)
  }
  .btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
  
  /* small button style (links) */
  .btn-small{padding:.35rem .6rem;border-radius:8px;font-weight:700}
  
  /* ---------- Sections ---------- */
  .section{padding:3.2rem 0}
  .section-light{background:#fff;border-top:1px solid rgba(0,0,0,0.03)}
  .section-title{font-size:1.6rem;margin-bottom:.6rem;font-weight:800}
  .section-sub{color:var(--muted);margin-bottom:1rem;font-weight:600}
  
  /* ---------- Stats (animated) ---------- */
  .section-stats{padding:2.2rem 0 3rem}
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;align-items:stretch}
  .stat-card{background:var(--card);padding:1.25rem;border-radius:12px;box-shadow:var(--shadow-1);text-align:center}
  .stat-num{font-size:2rem;font-weight:800;color:var(--primary)}
  .stat-label{color:var(--muted);margin-top:.4rem;font-weight:600}
  .stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
  }
  
  .stat-box {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
  }
  
  .stat-box:hover {
    transform: translateY(-5px);
  }
  
  .stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #1a73e8; /* same blue as your buttons */
    margin-bottom: 0.5rem;
  }
  
  
  /* ---------- Services (8 cards) ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
  .service-card{background:var(--card);padding:1.1rem;border-radius:12px;box-shadow:var(--shadow-1);min-height:170px;display:flex;flex-direction:column;gap:.5rem;transition:transform .18s,box-shadow .18s}
  .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
  .service-icon{width:48px;height:48px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem;font-size:1.2rem;border:1px solid rgba(15,23,32,0.03)}
  .service-card h3{margin:.2rem 0;font-size:1.05rem}
  .service-card p{color:var(--muted);font-size:.98rem}
  
  /* ---------- Products ---------- */
  .products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
  .product-card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:transform .25s}
  .product-card:hover{transform:translateY(-6px)}
  .product-media{width:100%;position:relative;padding-bottom:70%;background:#f6f4f2;overflow:hidden}
  .product-media .product-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .product-info{padding:1rem}
  .product-brand{color:var(--primary);font-weight:700;font-size:0.85rem;text-transform:uppercase}
  .product-name{font-weight:700;margin:0.4rem 0}
  .product-price{color:var(--primary);font-weight:800;margin-bottom:0.6rem}
  .product-ctas{display:flex;gap:0.6rem}
  
  /* product buttons alignment */
  .product-ctas .btn{padding:.55rem .8rem;border-radius:8px;font-size:.95rem}
  
  /* ---------- Blog ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
  .blog-card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:.6rem}
  .blog-card h3{margin:0;font-size:1.05rem}
  .blog-card p{color:var(--muted);margin:0.4rem 0}
  
  /* Read More as button style */
  .blog-card a.btn-outline{width:max-content}
  
  /* ---------- Testimonials ---------- */
  .testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
  .testimonial-card{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:.6rem}
  .testimonial-text{font-style:italic;color:var(--accent);margin-bottom:.6rem}
  .testimonial-meta{display:flex;gap:.8rem;align-items:center}
  .avatar{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem}
  
  /* Soft pastel avatar palette (fallback inline styles allowed too) */
  .avatar.bg1{background:#ffd6d6}
  .avatar.bg2{background:#d6eeff}
  .avatar.bg3{background:#d6f5e6}
  .avatar.bg4{background:#fff1d6}
  .avatar.bg5{background:#e8d6ff}
  .avatar.bg6{background:#ffdede}
  
  /* ---------- Contact / Form / Map ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
  .contact-card,.contact-form{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow-1)}
  label{display:block;margin:.6rem 0 .2rem;font-weight:700;color:var(--accent)}
  input,textarea,select{width:100%;padding:.75rem;border-radius:8px;border:1px solid #ece9e6;background:#fff;font-size:1rem;color:var(--accent)}
  .form-actions{display:flex;gap:.6rem;margin-top:.8rem;align-items:center}
  .form-status{margin-top:.8rem;font-weight:700}
  
  /* opening hours list styling */
  .hours-list{list-style:none;padding:0;margin:0;color:var(--muted)}
  .hours-list li{padding:.15rem 0}
  
  /* Map wrapper */
  .map-wrap iframe{width:100%;height:260px;border:0;border-radius:10px;display:block}
  
  /* ---------- Floating Call button ---------- */
  .floating-call{position:fixed;bottom:24px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--primary-700);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:20px;box-shadow:0 12px 30px rgba(47,134,230,0.18);z-index:999;transition:transform .18s}
  .floating-call:hover{transform:translateY(-6px)}
  
  /* ---------- Footer ---------- */
  .site-footer{padding:1.25rem 0;text-align:center;color:#666;border-top:1px solid rgba(0,0,0,0.03);background:transparent}
  
  /* ---------- Utility helpers ---------- */
  .row{display:flex;gap:1rem;flex-wrap:wrap}
  .center{text-align:center}
  
  /* ---------- Responsive rules ---------- */
  @media (max-width:1100px){
    .hero-content{max-width:680px;margin-left:3%}
  }
  @media (max-width:900px){
    .menu-toggle{display:block}
    .main-nav{position:fixed;right:12px;top:64px;background:#0b0b0b;padding:1rem;border-radius:8px;display:none;flex-direction:column}
    .main-nav.show{display:flex}
    .hero-content{margin-left:0;padding:2rem 1rem;text-align:center;max-width:100%}
    .contact-grid{grid-template-columns:1fr}
    .products-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  }
  
  @media (max-width:768px){
    .hero{min-height:60vh}
    .hero img.hero-bg{object-position:center 30%}
    .hero-title{font-size:clamp(1.6rem,6vw,2.4rem)}
    .hero-sub{font-size:0.95rem}
    .site-logo{font-size:1.1rem}
    .product-media{padding-bottom:66%}
  }
  
  /* ---------- Minor accessibility tweaks ---------- */
  /* ensure nav links have a visible focus ring on keyboard */
  .main-nav .nav-link:focus{outline:3px solid rgba(88,170,255,0.22);outline-offset:3px;border-radius:8px}
  
  /* ensure buttons have sufficient hit area on mobile */
  .btn, input[type="submit"], button{min-height:44px}
  
  /* avoid overly-contrasting tiny text */
  small, .author-location{color:var(--muted);font-size:.92rem}
  
  /* ---------- End of styles ---------- */