/*
  Custom styles for EcoFlex Expandable Homes
  This stylesheet defines the layout, typography and responsive behaviour
  for the one‑page website without relying on external frameworks. Colours
  are defined via CSS variables for easy adjustments.
*/

/* Colour palette */
:root {
  --primary: #007bff;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;
  --dark: #1f1f1f;
  --light-bg: #f9f9fa;
  --text-dark: #2b2b2b;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background: #ffffff;
}

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

a:hover {
  text-decoration: underline;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Navbar */
.navbar {
  background: var(--dark);
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.brand {
  font-weight: 700;
  font-size: 1.4rem;
  color: #ffffff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.6rem;
  cursor: pointer;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.nav-menu li a {
  color: #ffffff;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-menu li a:hover {
  color: var(--primary);
}

/* Responsive navigation */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    display: none;
    padding: 1rem 0;
  }
  .nav-menu.open {
    display: flex;
  }
  .nav-menu li {
    padding: 0.5rem 1rem;
  }
  .nav-menu li a {
    display: block;
  }
}

/* Hero section */
.hero {
  min-height: 90vh;
  background-image: url('images/heroo.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: #ffffff;
  padding: 0 1rem;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #0056b3;
}

/* Sections */
.section {
  padding: 4rem 0;
}

.light {
  background: var(--light-bg);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-header p {
  color: #666666;
  font-size: 1rem;
  margin: 0;
}

/* Grid system */
.row {
  display: flex;
  flex-wrap: wrap;
}

.gap {
  gap: 1.5rem;
}

.col {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 calc(50% - 1.5rem);
  }
}

@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 calc(25% - 1.5rem);
  }
  .col-lg-4 {
    flex: 0 0 calc(33.333% - 1.5rem);
  }
}

/* Cards */
.card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-body {
  padding: 1.5rem;
  flex: 1;
}

.card-body h5 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.card-body p.small {
  font-size: 0.9rem;
  color: #555555;
  margin: 0;
}

/* Icon wrappers */
.icon-wrapper {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 40px;
  height: 40px;
}

.icon-primary { color: var(--primary); }
.icon-success { color: var(--success); }
.icon-warning { color: var(--warning); }
.icon-danger { color: var(--danger); }
.icon-info { color: var(--info); }

/* Benefits */
.benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.benefit h6 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 700;
}

.benefit p.small {
  margin: 0;
  font-size: 0.85rem;
  color: #555555;
}

/* Video frame / image ratio */
.video-frame {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.video-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  padding: 0.6rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Footer */
.footer {
  background: var(--dark);
  color: #aaaaaa;
  padding: 2rem 0;
  font-size: 0.9rem;
}

.footer p {
  margin: 0.2rem 0;
}

.footer .sources {
  margin-top: 0.5rem;
}

.footer .sources span {
  margin-right: 0.5rem;
}

.footer a {
  color: #888888;
  margin-left: 0.3rem;
  font-size: 0.85rem;
}

.footer a:hover {
  color: var(--primary);
}

/* Utility classes */
.small {
  font-size: 0.9rem;
  color: #555555;
}

.muted {
  color: #777777;
}

.text-center {
  text-align: center;
}

.align-center {
  align-items: center;
}