/* City Gate Mixed Farm — shared design system.
   Extracted from index.html's original inline redesign, consolidated, and
   extended so every page shares the same look. Load after responsive.css. */

:root {
   --farm-green: #2F5D3A;
   --farm-green-dark: #1F3F27;
   --cream: #FAF7F0;
   --earth: #C9A978;
   --charcoal: #1A1A1A;
   --white: #FFFFFF;
   --soft-shadow: 0 4px 14px rgba(26, 26, 26, 0.08);
   --cta-green: #C9A978;
}

* { box-sizing: border-box; }

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   color: var(--charcoal);
   background: var(--cream);
   overflow-x: hidden;
}

/* ============ Header CTA pill (Book a Visit) ============ */
.btn-book-visit,
.nav-link.btn[href="bookings.html"] {
   background: var(--cta-green) !important;
   color: var(--charcoal) !important;
   border-radius: 100px;
   font-weight: 600;
}
.btn-book-visit:hover,
.nav-link.btn[href="bookings.html"]:hover {
   background: var(--earth) !important;
   color: var(--charcoal) !important;
}

/* ============ Buttons ============ */
.modern-btn {
   padding: 16px 32px;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 1px;
   text-decoration: none;
   transition: all 0.3s ease;
   cursor: pointer;
   border: none;
   display: inline-block;
}
.modern-btn-primary {
   background: var(--cream);
   color: var(--farm-green);
}
.modern-btn-primary:hover {
   background: var(--white);
   transform: translateY(-2px);
   color: var(--farm-green);
}
.modern-btn-outline {
   background: transparent;
   color: var(--cream);
   border: 2px solid var(--cream);
}
.modern-btn-outline:hover {
   background: var(--cream);
   color: var(--farm-green);
}
.modern-btn-solid {
   background: var(--farm-green);
   color: var(--cream);
}
.modern-btn-solid:hover {
   background: var(--farm-green-dark);
   color: var(--cream);
   transform: translateY(-2px);
}

/* ============ Section basics ============ */
.section-pad { padding: 90px 0; }
.section-eyebrow {
   font-size: 12px;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: var(--earth);
   margin-bottom: 16px;
   font-weight: 600;
}
.section-title {
   font-size: clamp(32px, 4vw, 48px);
   font-weight: 700;
   color: var(--charcoal);
   margin-bottom: 16px;
}
.section-sub {
   font-size: 17px;
   line-height: 1.7;
   color: #666;
}
.section-head-center {
   max-width: 720px;
   margin: 0 auto 48px;
   text-align: center;
}

/* ============ Stats strip ============ */
.stats-strip {
   background: var(--farm-green);
   padding: 64px 0;
}
.stats-strip-inner {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   text-align: center;
}
.stat-item { color: var(--cream); }
.stat-number {
   font-size: clamp(36px, 5vw, 56px);
   font-weight: 700;
   line-height: 1;
   margin-bottom: 8px;
}
.stat-label {
   font-size: 14px;
   opacity: 0.8;
   letter-spacing: 1px;
   text-transform: uppercase;
}

/* ============ Sector / feature cards ============ */
.sectors-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   margin-top: 48px;
}
.sector-card {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   aspect-ratio: 3/4;
   cursor: pointer;
   display: block;
   text-decoration: none;
}
.sector-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}
.sector-card:hover img { transform: scale(1.08); }
.sector-card-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(47, 93, 58, 0.9) 0%, rgba(47, 93, 58, 0.3) 60%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 32px;
}
.sector-card-label {
   font-size: 14px;
   color: var(--cream);
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 8px;
}
.sector-card-promise {
   font-size: 20px;
   font-weight: 600;
   color: var(--white);
}

/* ============ Pillars (value props) ============ */
.pillars-row { background: var(--cream); padding: 90px 0; }
.pillars-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 48px;
   margin-top: 64px;
}
.pillar-item { text-align: center; padding: 32px; }
.pillar-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 24px;
   background: var(--farm-green);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--cream);
   font-size: 24px;
}
.pillar-title { font-size: 24px; font-weight: 600; margin-bottom: 16px; color: var(--charcoal); }
.pillar-desc { font-size: 16px; line-height: 1.7; color: #666; }

/* ============ Product cards ============ */
.products-section { padding: 90px 0; background: var(--white); }
.products-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
   margin-top: 48px;
}
.product-card {
   background: var(--cream);
   border-radius: 12px;
   overflow: hidden;
   transition: all 0.3s ease;
}
.product-card:hover { transform: translateY(-8px); box-shadow: var(--soft-shadow); }
.product-card-img { aspect-ratio: 4/3; overflow: hidden; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 24px; }
.product-card-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--charcoal); }
.product-card-price { font-size: 20px; font-weight: 700; color: var(--farm-green); margin-bottom: 16px; }
.product-card-btn {
   display: block;
   width: 100%;
   padding: 12px;
   text-align: center;
   background: var(--farm-green);
   color: var(--cream);
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   border-radius: 4px;
   transition: background 0.3s ease;
}
.product-card-btn:hover { background: var(--charcoal); color: var(--cream); }

/* ============ CTA band ============ */
.cta-band { background: var(--farm-green); padding: 80px 0; text-align: center; }
.cta-band-text { font-size: clamp(24px, 3vw, 36px); font-weight: 600; color: var(--cream); margin-bottom: 32px; }
.cta-band .modern-btn { background: var(--cream); color: var(--farm-green); }
.cta-band .modern-btn:hover { background: var(--white); color: var(--farm-green); }

/* ============ Blog cards ============ */
.blog-section { padding: 90px 0; background: var(--cream); }
.blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   margin-top: 48px;
}
.blog-card { background: var(--white); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; text-decoration: none; display: block; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--soft-shadow); }
.blog-card-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 24px; }
.blog-card-date { font-size: 12px; color: var(--earth); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.blog-card-title { font-size: 18px; font-weight: 600; color: var(--charcoal); line-height: 1.4; }

/* ============ Newsletter / dark band ============ */
.newsletter-section { background: var(--charcoal); padding: 80px 0; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.newsletter-text { color: var(--cream); }
.newsletter-text h3 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.newsletter-text p { opacity: 0.7; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input { padding: 16px 24px; border: none; border-radius: 4px; font-size: 16px; min-width: 300px; }
.newsletter-form button {
   padding: 16px 32px;
   background: var(--farm-green);
   color: var(--cream);
   border: none;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.3s ease;
}
.newsletter-form button:hover { background: var(--earth); color: var(--charcoal); }

/* ============ Interior page banner (replaces stock bannerSec) ============ */
.cg-page-banner {
   position: relative;
   background: linear-gradient(120deg, rgba(31, 63, 39, 0.94), rgba(47, 93, 58, 0.86)), url('../images/gallary/rooster-farm.jpg');
   background-size: cover;
   background-position: center;
   padding: 64px 0 40px;
   color: var(--white);
   text-align: center;
}
.cg-page-banner .section-eyebrow { color: var(--earth); }
.cg-page-banner h1 {
   font-size: clamp(30px, 4.5vw, 46px);
   font-weight: 700;
   color: var(--white);
   margin: 8px 0 14px;
   letter-spacing: -0.5px;
}
.cg-page-banner .breadcrumb {
   justify-content: center;
   margin: 0;
   font-size: 14px;
}
.cg-page-banner .breadcrumb-item,
.cg-page-banner .breadcrumb-item a {
   color: rgba(255, 255, 255, 0.75);
}
.cg-page-banner .breadcrumb-item.active { color: var(--earth); }
.cg-page-banner .breadcrumb-item + .breadcrumb-item::before {
   color: rgba(255, 255, 255, 0.5);
}

/* ============ Cards (generic reusable — services, team, FAQ, gallery) ============ */
.cg-card {
   background: var(--white);
   border-radius: 12px;
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
}
.cg-card:hover { transform: translateY(-6px); box-shadow: var(--soft-shadow); }

/* ============ Footer reskin (structure unchanged, just recolored) ============ */
footer.footer,
footer.footerBg1 {
   background: var(--charcoal) !important;
}
footer .footerPara,
footer .footerMenuLink a,
footer .contactInfoTxt p,
footer .footerCopyRightInner p {
   color: rgba(250, 247, 240, 0.65) !important;
}
footer .footerMenuHeading h4,
footer .contactInfoTxt h6 {
   color: var(--cream) !important;
}
footer .footerMenuLink a:hover {
   color: var(--earth) !important;
}
footer .contactInfoIcon i,
footer .socialMediaIcon a {
   color: var(--earth) !important;
}
footer .needOurSupport {
   background: var(--farm-green-dark) !important;
}
footer .needOurSupportTxt h2 {
   color: var(--cream) !important;
}
footer .subscriptionBtn {
   background: var(--earth) !important;
   color: var(--charcoal) !important;
}
footer .hrLine {
   border-color: rgba(250, 247, 240, 0.15) !important;
}

@media (max-width: 1024px) {
   .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pillars-grid { grid-template-columns: 1fr; gap: 32px; }
   .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .blog-grid { grid-template-columns: 1fr; }
   .stats-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 768px) {
   .section-pad { padding: 56px 0; }
   .pillars-row { padding: 56px 0; }
   .products-section { padding: 56px 0; }
   .blog-section { padding: 56px 0; }
   .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
   .sector-card { aspect-ratio: 1/1; border-radius: 10px; }
   .sector-card-overlay { padding: 14px; }
   .sector-card-label { font-size: 10px; letter-spacing: 1px; margin-bottom: 4px; }
   .sector-card-promise { font-size: 13px; line-height: 1.3; }
   .products-grid { grid-template-columns: 1fr; }
   .newsletter-inner { text-align: center; justify-content: center; }
   .newsletter-form { flex-direction: column; width: 100%; }
   .newsletter-form input { min-width: 100%; }
   .cg-page-banner { padding: 48px 0 30px; }
}

@media (max-width: 420px) {
   .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
   .sector-card-overlay { padding: 10px; }
}