/* assets/style.css - Mirabel Energy simple template */
:root{
  --blue:#0b57a4;
  --light:#f6fbff;
  --muted:#6b7280;
  --dark-gray:#303030;
  --light-gray:#DDDDDD;
  --primary-red:#EB493A;
  --primary-red-hover: #B71C1C;
  --light-red:#FFBBBB;
}
*{box-sizing:border-box}
body{font-family:Inter, Arial, Helvetica, sans-serif; margin:0; color:#111; background:var(--light-gray)}
.header{background:var(--dark-gray); color: white; padding: 10px 0; border-bottom:5px solid var(--primary-red); position:sticky; top:0; z-index:1000;}
.container{max-width:1100px; margin:0 auto; padding:20px;}
.nav{display:flex; align-items:center; justify-content:space-between;}
.nav a {color: white;  font-weight: 600;}
.nav a:hover {color: var(--light-red);}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:44px;}
.nav-links{display:flex; gap:18px; align-items:center;}
.nav-links a{color:white; text-decoration:none; font-weight:600;}
.dropdown{position:relative;}
.dropdown-content{display:none; position:absolute; background:#cccccc; box-shadow:0 6px 18px rgba(11,87,164,0.08); padding:8px; border-radius:6px; top:36px;}
.dropdown-content a{display:block; padding:8px 12px; color:var(--primary-red-hover);}
.dropdown:hover .dropdown-content{display:block;}

.hero{background:rgba(44,44,44,0.2); padding:60px 0;}
.hero .grid{display:grid; grid-template-columns:1fr 420px; gap:40px; align-items:center;}
.card{background:white; border-radius:10px; padding:20px; box-shadow:0 6px 20px rgba(12,45,78,0.04);}

.cta{display:inline-block; background:var(--primary-red-hover); color:white; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700;}

.products-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px;}
.product{background:white; padding:16px; border-radius:8px; min-height:160px;}
.footer{margin-top:40px; padding:24px 0; background:var(--dark-gray);}
.footer p{margin:6px 0; color:white; font-size:14px;}

/* Responsive */
@media(max-width:800px){
  .hero .grid{grid-template-columns:1fr; padding:20px;}
  .nav-links{display:none}
}*/


/* ===== MOBILE NAV ===== */

.hamburger {
  display: none;
  font-size: 32px;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 768px) {

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Hide desktop nav by default */
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 12px;
    background: white;
    padding: 20px;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  /* Expand when open */
  .nav-links.open {
    display: flex;
  }

  .hamburger {
    display: block;
    padding: 10px;
  }

  /* Dropdown inside mobile nav */
  .dropdown-content {
    position: static;
    background: #f7f7f7;
    box-shadow: none;
    padding-left: 10px;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
}

/* Universal responsive product image */
.product-img {
  width: 100%;
  max-width: 450px;    /* limits size on large screens */
  height: auto;        /* maintain aspect ratio */
  display: block;
  margin: 10px auto;   /* center the image */
  object-fit: contain; /* prevent cropping */
}

/* Make product cards stack nicely on mobile */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.product {
  flex: 1 1 300px;  /* wraps on small screens */
  max-width: 500px;
}