/* styles.css - shared theme */
:root{
  --brown-1: #5C4033;
  --brown-2: #8B4513;
  --tan: #D2B48C;
  --green-1: #228B22;
  --green-2: #6B8E23;
  --light: #f7f7f6;
}

/* reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#1f2937; background:var(--light);}

/* header */
.header {
  background: linear-gradient(90deg, rgba(210,180,140,0.12), rgba(36,85,36,0.04));
  backdrop-filter: blur(4px);
}
.nav-link { color:var(--green-1); font-weight:600; transition:color .18s, transform .18s; }
.nav-link:hover { color:var(--green-2); transform:translateY(-2px); }

/* hero / huge sections */
.hero-large {
  position:relative;
  width:100%;
  min-height:78vh; /* tall hero */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 1rem;
  overflow:hidden;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

/* video background */
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter: contrast(1.05) saturate(1.02) brightness(0.84);
}

/* dark overlay so text is readable */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(3,37,18,0.28), rgba(92,64,51,0.22));
}

/* hero content */
.hero-content {
  position:relative; z-index:2;
  max-width:1200px; width:100%;
  color:white;
  text-align:left;
  display:flex; gap:2rem; align-items:center; padding:2rem;
}
.hero-text { flex:1; }
.hero-eyebrow { display:inline-block; padding:.25rem .6rem; border-radius:999px; background:rgba(255,255,255,0.06); color: #dcefdc; font-weight:700; letter-spacing:.02em; font-size:.9rem; margin-bottom:1rem;}
.hero-title { font-size:2.25rem; line-height:1.02; font-weight:800; margin-bottom:.6rem;}
@media(min-width:768px){ .hero-title{ font-size:3.3rem; } }

/* pill CTA */
.btn-primary {
  display:inline-block;
  background:linear-gradient(90deg,var(--brown-2),var(--brown-1));
  color:white; padding:.85rem 1.4rem; border-radius:999px; font-weight:700; box-shadow:0 8px 30px rgba(36,50,30,0.15);
  transition:transform .12s, box-shadow .12s;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(36,50,30,0.2); }

/* content sections */
.container { max-width:1200px; margin:0 auto; padding:3rem 1rem; }
.card-grid { display:grid; grid-template-columns:1fr; gap:1.25rem;}
@media(min-width:992px){ .card-grid { grid-template-columns:repeat(3,1fr); } }
.card { background:white; border-radius:12px; padding:1.4rem; box-shadow:0 8px 30px rgba(16,24,32,0.06); }

/* product listing */

.product { display:flex; gap:1rem; align-items:center; }
.product img{ width:120px; height:120px; object-fit:cover; border-radius:8px; }

/* big page sections with matching hero look (for other pages) */
.page-hero {
  background:linear-gradient(180deg, rgba(34,139,34,0.12), rgba(92,64,51,0.06));
  min-height:48vh;
  display:flex; align-items:center; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  padding:2.2rem 1rem;
}

/* form */
.form-card { background:white; padding:1.2rem; border-radius:12px; box-shadow:0 16px 40px rgba(3,37,18,0.06); }
.form-field { width:100%; padding:.9rem; border-radius:8px; border:1px solid #e6e6e5; margin-bottom:.8rem; }

/* footer */
.site-footer { background:var(--brown-1); color:white; padding:2rem 1rem; margin-top:2rem; text-align:center; border-top-left-radius:8px; border-top-right-radius:8px; }

/* small helpers */
.kicker { color:var(--brown-1); font-weight:700; }
.lead { color:rgba(15,23,42,0.85); font-size:1.05rem; line-height:1.6; }

/* --- Hero title adjustments for desktop vs mobile --- */
.hero-title {
  white-space: nowrap; /* Keep in one line on desktop */
}

@media (max-width: 768px) {
  .hero-title {
    white-space: normal; /* Allow wrapping on mobile */
    font-size: 2rem !important;
  }
}

/* --- Full-height hero video for all devices --- */
.hero-large {
  min-height: 100vh !important; /* Full screen on desktop */
}

@media (max-width: 768px) {
  .hero-large {
    min-height: 80vh !important;
  }
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .hero-eyebrow {
    font-size: 0.8rem;
  }
  .hero-title {
    font-size: 2rem;
  }
  .btn-primary {
    font-size: 1rem;
    padding: 0.75rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
  }
  .btn-primary {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }
}
/* --- OUR FRANCHISE PAGE STYLES --- */

/* Hero section for franchise */
.franchise-hero {
  background: linear-gradient(180deg, rgba(139,69,19,0.12), rgba(34,139,34,0.06));
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.franchise-hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--brown-1);
  margin-bottom: 1rem;
}

.franchise-hero p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.2rem;
  color: rgba(15,23,42,0.85);
  line-height: 1.6;
}

/* Franchise info grid */
.franchise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .franchise-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.franchise-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(16,24,32,0.06);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.franchise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(16,24,32,0.1);
}

.franchise-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-1);
  margin-bottom: 0.8rem;
}

.franchise-card p {
  font-size: 1rem;
  color: rgba(15,23,42,0.8);
  line-height: 1.5;
}

/* Call-to-action section */
.franchise-cta {
  background: var(--green-1);
  color: white;
  padding: 3rem 1rem;
  text-align: center;
  border-radius: 12px;
  margin-top: 3rem;
}

.franchise-cta h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.franchise-cta p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.franchise-cta .btn-primary {
  background: linear-gradient(90deg, var(--tan), var(--brown-2));
  color: var(--brown-1);
}
.social-media-container {
  display: flex;
  gap: 10px; /* Reduced gap for smaller logos */
  align-items: center;
}

.social-media-container img {
  width: 28px; /* The size of the logos */
  height: auto;
}