/* ===== Core theme ===== */
:root{ --brand-green:#1B5E20; --header-h:70px; }
html,body{margin:0;padding:0;overflow-x:hidden;font-family:"Times New Roman",Times,serif;color:#222;}

/* ===== Header (desktop) ===== */
header.site-header{
position:fixed; top:0; left:0; right:0; height:var(--header-h);
background:var(--brand-green); color:#fff; z-index:10000;
display:flex; align-items:center; gap:16px; padding:0 12px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}
header.site-header *{ color:#fff; }
header .brand{ flex:0 0 auto; display:flex; align-items:center; }
header .site-logo, header .logo{ height:44px; width:auto; display:block; }
header .main-nav{
flex:1 1 auto; display:flex; align-items:center; gap:14px;
justify-content:flex-start; white-space:nowrap;
}
header .main-nav a{ text-decoration:none; font-weight:700; font-size:18px; }
header .main-nav a:hover{ text-decoration:underline; }
header .contact-info{
flex:0 1 auto; display:flex; align-items:center; gap:8px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:1200px){
header .contact-info a[href^="mailto"], header .contact-info span{ display:none !important; }
}

/* Push page content below fixed header (all pages) */
main, .wrap, .pricing-page, .about-page, .contact-page, .gallery-page{
padding-top: calc(var(--header-h) + 40px);
}

/* ===== Header (mobile ≤768px) — logo left, tabs INSIDE green bar ===== */
@media (max-width:768px){
header.site-header{ height:64px; padding:0 8px; }
header .brand{ position:absolute; left:10px; top:50%; transform:translateY(-50%); }
header .site-logo{ height:36px; width:auto; }
header .main-nav{
position:absolute; top:0; left:64px; right:6px; height:64px;
display:flex; align-items:center; justify-content:flex-start;
gap:6px; margin:0; padding:0; white-space:nowrap; overflow:hidden;
}
header .main-nav a{ font-size:14px; line-height:1; }
header .contact-info{ display:none !important; }
/* push page content below the fixed bar on mobile */
.home .hero, main, .wrap, .pricing-page, .about-page, .contact-page, .gallery-page{
margin-top:64px !important; padding-top:0 !important;
}
}

/* ===== HERO (one source of truth) ===== */
.hero{
background:url("/assets/images/hero.jpg") no-repeat center 40% / cover;
min-height:calc(100vh - var(--header-h));
margin-top:var(--header-h);
display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero .hero-content{ padding:0 16px; }
.hero .hero-content h1, .hero .hero-content p, .hero h1, .hero p{
color:#fff; text-shadow:1px 1px 4px rgba(0,0,0,.6);
}
@media (max-width:1024px){ .hero{ background-position:center 45%; } }
@media (max-width:600px){ .hero{ background-position:center 50%; } }

/* CTA button */
.cta-button, .hero a{
background:var(--brand-green); color:#fff; font-weight:700;
padding:10px 18px; border-radius:6px; text-decoration:none; display:inline-block;
}

/* ===== Services images (cap size + border) ===== */
.service-item img{
width:100%; max-width:280px; height:auto;
border:3px solid var(--brand-green); border-radius:10px; box-sizing:border-box;
}
@media (min-width:1100px){ .service-item img{ max-width:320px; } }

/* ===== Center the main page headings on subpages ===== */
.page-title, .contact-title, .about-page .about-intro > h1, .wrap > h1{
text-align:center; display:block; margin:40px auto 20px; font-weight:700;
font-size:clamp(24px,5vw,36px); color:var(--brand-green);
}
.rule{ margin-left:auto; margin-right:auto; }
/* === Gallery Layout & Title Fix === */
.gallery-page {
max-width: 1200px;
margin: 0 auto;
padding: calc(var(--header-h, 70px) + 30px) 16px 60px;
}

/* Center the page title visually in the middle area */
.gallery-page .page-title {
text-align: center !important;
color: #000 !important;
font-weight: 700;
font-size: clamp(26px, 5vw, 40px);
margin: 80px auto 40px !important; /* drops it more visibly below the bar */
display: block;
}

/* 5 equal columns per row (auto-wraps smaller on tablet/mobile) */
.gallery-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 columns on desktop */
gap: 14px;
justify-items: center;
align-items: center;
}

/* Images — keep same size, square, and neat */
.gallery-grid img {
width: 100%;
max-width: 190px; /* same as before */
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
border: 2px solid #1B5E20;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: transform 0.15s ease-in-out;
}
.gallery-grid img:hover {
transform: scale(1.03);
}

/* Adjust for tablets and mobile so layout stays balanced */
@media (max-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid img {
max-width: 150px;
}
}
}
* === FORCE SUB PAGE HEADERS TO BLACK === */
.page-title,
.contact-title,
.about-page .about-intro > h1,
.wrap > h1,
.gallery-page h1 {
color: #000 !important; /* black text */
text-align: center !important;
margin-top: 100px !important; /* keeps them clear of green bar */
font-weight: 700;
font-size: clamp(24px, 5vw, 36px);
}
/* --- Sub-headers: center + always black --- */
:root { --header-h: 70px; }

h1.page-title,
.contact-title,
.about-page .about-intro > h1,
.wrap > h1 {
color: #000 !important;
text-align: center !important;
margin: calc(var(--header-h) + 24px) auto 20px !important;
font-weight: 700;
}

/* Gallery title sat too high – nudge it down a bit more */
body.gallery .page-title,
.gallery-page .page-title {
margin-top: calc(var(--header-h) + 40px) !important;
}

/* Gallery grid: make images smaller & tidy */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
padding: 0 16px 32px;
}
.gallery-grid img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* === GALLERY IMAGES — smaller, tidy grid === */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* smaller tiles */
gap: 10px; /* tighter spacing */
padding: 0 16px 40px;
justify-items: center;
}

.gallery-grid img {
width: 100%;
max-width: 200px; /* smaller than services images */
height: auto;
border-radius: 8px;
border: 2px solid #1B5E20; /* thin green outline for consistency */
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
object-fit: cover;
transition: transform 0.2s ease-in-out;
}

/* Nice subtle hover zoom */
.gallery-grid img:hover {
transform: scale(1.03);
}

/* Responsive tweak — on mobile, make them a touch smaller */
@media (max-width: 600px) {
.gallery-grid img {
max-width: 160px;
}
/* === Consistent centered page titles across all sub-pages === */
.page-title,
.about-page .about-intro > h1,
.wrap > h1,
.contact-title {
text-align: center !important;
color: #000 !important;
font-weight: 700 !important;
font-size: clamp(24px, 5vw, 36px);
display: block !important;
margin: calc(var(--header-h, 70px) + 30px) auto 24px !important;
}

/* Optional: make any decorative divider line stay centered */
.rule {
margin-left: auto !important;
margin-right: auto !important;
}
/* === Services: center the section headings only === */
.service-item .service-text h2 {
text-align: center !important;
margin: 0 auto 10px !important;
font-weight: 700;
}

/* optional: add a short green underline below each h2 (match page rule) */
.service-item .service-text h2::after {
content: "";
display: block;
width: 80px;
height: 3px;
background: var(--brand-green);
margin: 8px auto 12px;
}
/* Center the three Services section headings */
.service-title {
text-align: center !important;
display: block !important;
width: 100% !important;
margin: 0 auto 12px !important;
font-weight: 700;
}

/* optional: small green underline, remove if you don't want it */
.service-title::after {
content: "";
display: block;
width: 80px;
height: 3px;
background: #1B5E20;
margin: 8px auto 12px;
}