/*
Theme Name: MGK Home Support Pro
Author: OpenAI
Version: 2.0
Description: Multi-page responsive WordPress theme for MGK Home Support
*/

:root{
 --navy:#0b2345;
 --green:#6c8f6d;
 --gold:#c3922e;
 --light:#f8f8f5;
 --text:#444;
}

*{box-sizing:border-box;}

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

.container{
 width:90%;
 max-width:1200px;
 margin:auto;
}

header{
 background:#fff;
 box-shadow:0 2px 8px rgba(0,0,0,.05);
 position:sticky;
 top:0;
 z-index:1000;
}

.header-inner{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:18px 0;
}

.logo img{
 height:85px;
}

nav ul{
 list-style:none;
 display:flex;
 gap:22px;
 padding:0;
 margin:0;
}

nav a{
 text-decoration:none;
 color:var(--navy);
 font-weight:bold;
}

nav a:hover{
 color:var(--gold);
}

.hero{
 padding:80px 0;
 background:white;
}

.hero-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 align-items:center;
}

.hero h1{
 color:var(--navy);
 font-size:58px;
 line-height:1.1;
}

.btn{
 display:inline-block;
 background:var(--green);
 color:#fff;
 padding:14px 26px;
 text-decoration:none;
 border-radius:8px;
 margin-top:10px;
}

.btn.secondary{
 background:var(--gold);
}

.hero img, .featured-image{
 width:100%;
 border-radius:14px;
}

.section{
 padding:70px 0;
}

.section-title{
 text-align:center;
 color:var(--navy);
 font-size:42px;
 margin-bottom:15px;
}

.cards{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:30px;
 margin-top:40px;
}

.card{
 background:white;
 padding:30px;
 border-radius:12px;
 box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.card h3{
 color:var(--navy);
}

.banner{
 background:linear-gradient(90deg,var(--green),#7fa57f);
 color:white;
 text-align:center;
 padding:60px 20px;
}

.page-hero{
 background:var(--navy);
 color:white;
 padding:60px 0;
 text-align:center;
}

.page-content{
 background:white;
 padding:60px;
 border-radius:14px;
 margin-top:-40px;
 margin-bottom:60px;
 box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.two-col{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:40px;
 align-items:center;
}

footer{
 background:var(--navy);
 color:white;
 padding:50px 0 20px;
}

.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:30px;
}

footer a{
 color:white;
 text-decoration:none;
}

.copyright{
 text-align:center;
 margin-top:30px;
 opacity:.8;
}

@media(max-width:900px){
 .hero-grid,.two-col{
  grid-template-columns:1fr;
 }
 .hero h1{
  font-size:42px;
 }
 nav ul{
  flex-wrap:wrap;
  justify-content:center;
 }
 .header-inner{
  flex-direction:column;
  gap:20px;
 }
 .page-content{
  padding:30px;
 }
}