/* Apollo Pest Control — apollopest.ca
 Clean, modern, professional theme. */

:root {
 --c-primary: #1e40af;
 --c-primary-dark: #1e3a8a;
 --c-accent: #22c55e;
 --c-accent-dark: #16a34a;
 --c-text: #1f2937;
 --c-muted: #6b7280;
 --c-bg: #ffffff;
 --c-bg-alt: #f5f7f6;
 --c-border: #e5e7eb;
 --c-danger: #b91c1c;
 --radius: 8px;
 --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
 --shadow-md: 0 6px 18px rgba(0,0,0,.08);
 --container: 1140px;
 --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--c-text); background: var(--c-bg); line-height: 1.6; font-size: 16px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: #0f172a; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.65rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* Top bar */
.topbar { background: var(--c-primary-dark); color: #fff; font-size: .9rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px; }
.topbar a { color: #fff; }
.topbar-phone-wrap { position: relative; }
.topbar-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 6px 4px; cursor: pointer; }
.topbar-phone .caret { font-size: 0.7em; opacity: 0.9; }
.topbar-dropdown {
 display: none; position: absolute; right: 0; top: 100%;
 background: #fff; min-width: 220px; border: 1px solid var(--c-border);
 border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
 z-index: 200; overflow: hidden;
}
.topbar-dropdown a {
 display: block; padding: 10px 16px; color: var(--c-text);
 font-weight: 500; font-size: .95rem; border-bottom: 1px solid var(--c-bg-alt);
}
.topbar-dropdown a:last-child { border-bottom: 0; }
.topbar-dropdown a:hover { background: var(--c-bg-alt); color: var(--c-primary); text-decoration: none; }
.topbar-phone-wrap:hover .topbar-dropdown,
.topbar-phone-wrap:focus-within .topbar-dropdown { display: block; }

/* Header */
.site-header {
 background: #fff; border-bottom: 1px solid var(--c-border);
 position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.logo a {
 display: flex; align-items: center; gap: 12px;
 font-weight: 800; font-size: 1.15rem; color: var(--c-primary); text-decoration: none;
}
.logo a:hover { text-decoration: none; }
.logo img.logo-img { height: 100px !important; width: auto; display: block; }
.logo .logo-text { display: none; }
@media (max-width: 640px) {
 .logo img.logo-img { height: 60px !important; }
}

/* Nav */
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav li { position: relative; }
.main-nav > ul > li > a {
 display: block; padding: 10px 14px; color: var(--c-text);
 font-weight: 600; border-radius: 6px;
}
.main-nav > ul > li > a:hover { background: var(--c-bg-alt); color: var(--c-primary); text-decoration: none; }
.main-nav li.has-sub > a::after { content: " \25BE"; font-size: .75em; color: var(--c-muted); }
.dropdown {
 display: none; position: absolute; top: 100%; left: 0; min-width: 260px;
 background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
 box-shadow: var(--shadow-md); padding: 8px 0; z-index: 200;
}
.main-nav li.has-sub:hover .dropdown,
.main-nav li.has-sub:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 8px 16px; color: var(--c-text); font-weight: 500; }
.dropdown a:hover { background: var(--c-bg-alt); color: var(--c-primary); text-decoration: none; }

.btn { display: inline-block; padding: 10px 18px; border-radius: 6px; font-weight: 700; cursor: pointer; border: 0; font-size: 1rem; }
.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-accent-dark); text-decoration: none; }
.btn-outline { background: transparent; color: var(--c-primary); border: 2px solid var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color: #fff; text-decoration: none; }
.btn-lg { padding: 14px 26px; font-size: 1.1rem; }

/* Mobile nav */
.nav-toggle { display: none; background: transparent; border: 0; font-size: 1.6rem; color: var(--c-primary); padding: 6px 10px; cursor: pointer; }
@media (max-width: 960px) {
 .nav-toggle { display: inline-block; }
 .main-nav { display: none; width: 100%; }
 .main-nav.open { display: block; }
 .site-header .container { flex-wrap: wrap; }
 .main-nav ul { flex-direction: column; width: 100%; gap: 0; }
 .main-nav > ul > li > a { padding: 12px 8px; border-bottom: 1px solid var(--c-border); border-radius: 0; }
 .dropdown { position: static; box-shadow: none; border: 0; padding-left: 16px; }
 .main-nav li.has-sub .dropdown { display: none; }
 .main-nav li.has-sub.open .dropdown { display: block; }
 .header-cta { display: none; }
}

/* Hero (legacy hero) */
.hero { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%); color: #fff; padding: 70px 0; }
.hero h1 { color: #fff; font-size: 2.6rem; }
.hero p.lead { font-size: 1.2rem; opacity: .95; max-width: 700px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-sub { background: var(--c-bg-alt); padding: 40px 0; border-bottom: 1px solid var(--c-border); }
.hero-sub h1 { font-size: 2.1rem; }
.hero-sub .breadcrumb { color: var(--c-muted); font-size: .9rem; }
.hero-sub .breadcrumb a { color: var(--c-muted); }

/* ============ Hero with background image (sub-pages) ============ */
.hero-img {
 position: relative; min-height: 520px;
 background-size: cover; background-position: center;
 display: flex; align-items: flex-end; color: #fff; margin-bottom: 0;
}
.hero-img::after {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
}
.hero-img .container { position: relative; z-index: 2; padding: 80px 20px 60px; }
.hero-img .breadcrumb { color: rgba(255,255,255,0.92); font-size: .92rem; margin-bottom: 14px; }
.hero-img .breadcrumb a { color: rgba(255,255,255,0.92); }
.hero-img h1 {
 color: #ffffff; font-size: clamp(2rem, 4vw, 3.4rem);
 margin: 0; line-height: 1.1;
 text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
 .hero-img { min-height: 380px; }
 .hero-img .container { padding: 50px 20px 36px; }
}

/* Sections */
section.section { padding: 60px 0; }
section.section.alt { background: var(--c-bg-alt); }
.section-title { text-align: center; margin-bottom: 30px; }
.section-title h2 { font-size: 2rem; }
.section-title p { color: var(--c-muted); max-width: 720px; margin: 0 auto; }

/* Cards grid */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
 .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
 .hero { padding: 50px 0; }
 .hero h1 { font-size: 2rem; }
}
.card {
 background: #fff; border: 1px solid var(--c-border);
 border-radius: var(--radius); padding: 22px;
 box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-top: 0; }
.card a.more { font-weight: 600; }

/* Content / article */
article.content { max-width: 780px; margin: 0 auto; padding: 40px 20px 60px; }
article.content h2 { margin-top: 1.6em; }
article.content ul { padding-left: 1.25em; }
article.content li { margin: .25em 0; }
article.content .meta { color: var(--c-muted); font-size: .9rem; margin-bottom: 1.5em; }

/* Two-col page (main + sidebar) */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 50px 0; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.sidebar { background: var(--c-bg-alt); padding: 24px; border-radius: var(--radius); }
.sidebar h3 { margin-top: 0; }
.sidebar ul { list-style: none; padding: 0; margin: 0 0 1em; }
.sidebar li { border-bottom: 1px solid var(--c-border); }
.sidebar li:last-child { border-bottom: 0; }
.sidebar li a { display: block; padding: 8px 0; color: var(--c-text); }
.sidebar li a:hover { color: var(--c-primary); text-decoration: none; }

/* ============ Form section (bottom of every page) ============ */
.form-section {
 background: var(--c-bg-alt); padding: 60px 0 70px;
 border-top: 1px solid var(--c-border);
}
.form-section .container { max-width: 720px; }
.form-section h2 { text-align: center; font-size: 2rem; margin: 0 0 8px; color: var(--c-primary); }
.form-section > .container > p { text-align: center; color: var(--c-muted); margin: 0 0 28px; font-size: 1.05rem; }
.form-mount {
 background: #fff; padding: 32px; border-radius: 10px;
 box-shadow: 0 4px 18px rgba(0,0,0,0.06); border: 1px solid var(--c-border);
}
.contact-form label {
 display: block; font-weight: 600; margin: 14px 0 6px;
 color: var(--c-text); font-size: .95rem;
}
.contact-form input, .contact-form select, .contact-form textarea {
 width: 100%; padding: 10px 12px; border: 1px solid var(--c-border);
 border-radius: 6px; font-family: inherit; font-size: 1rem;
 background: #fff; box-sizing: border-box;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
 outline: none; border-color: var(--c-primary);
 box-shadow: 0 0 0 3px rgba(30,64,175,0.15);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .contact-form .field-row { grid-template-columns: 1fr; gap: 0; } }
.contact-form button[type="submit"] {
 margin-top: 22px; display: block; width: 100%;
 background: var(--c-accent); color: #fff;
 font-weight: 700; font-size: 1.05rem; padding: 14px 28px;
 border: 0; border-radius: 6px; cursor: pointer;
 transition: background .15s ease;
}
.contact-form button[type="submit"]:hover { background: var(--c-accent-dark); }

/* Legacy cta-strip (hidden — replaced by form-section) */
.cta-strip { display: none; }

/* FAQ */
details.faq-item {
 background: #fff; border: 1px solid var(--c-border);
 border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
}
details.faq-item summary { cursor: pointer; font-weight: 600; outline: none; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item[open] summary { color: var(--c-primary); }
details.faq-item p { margin-top: 10px; }

/* Footer */
footer.site-footer { background: #0f172a; color: #cbd5e1; padding: 50px 0 0; margin-top: 60px; }
footer.site-footer h4 { color: #fff; font-size: 1rem; margin-top: 0; }
footer.site-footer a { color: #cbd5e1; }
footer.site-footer a:hover { color: #fff; }
footer.site-footer .footer-grid {
 display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; align-items: start;
}
@media (max-width: 900px) { footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { footer.site-footer .footer-grid { grid-template-columns: 1fr; } }
footer.site-footer ul { list-style: none; padding: 0; margin: 0 0 14px 0; }
footer.site-footer li { margin-bottom: 6px; font-size: .92rem; }
footer.site-footer .bottom {
 border-top: 1px solid #1e293b; margin-top: 30px; padding: 18px 0;
 text-align: center; font-size: .85rem; color: #94a3b8;
}

/* Small helpers */
.text-center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--c-muted); }
ul.checks { list-style: none; padding: 0; }
ul.checks li { padding-left: 26px; position: relative; margin: 6px 0; }
ul.checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-primary); font-weight: 800; }

/* Areas list */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
@media (max-width: 700px) { .areas { grid-template-columns: 1fr 1fr; } }
.areas a {
 display: block; padding: 12px 14px; background: #fff;
 border: 1px solid var(--c-border); border-radius: 6px;
 color: var(--c-text); text-align: center; font-weight: 500;
}
.areas a:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }

/* Inline figures */
figure.inline-img { margin: 28px 0 32px; }
figure.inline-img img {
 width: 100%; max-height: 380px; object-fit: cover;
 border-radius: 12px; display: block;
 box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
figure.inline-img figcaption {
 margin-top: 8px; font-size: .88rem;
 color: var(--c-muted); text-align: center;
}

/* Image strip 3-up */
.img-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 32px; }
.img-strip img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; }
@media (max-width: 700px) {
 .img-strip { grid-template-columns: 1fr 1fr; }
 .img-strip img { height: 140px; }
}

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .96rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.data-table th { background: var(--c-bg-alt); color: var(--c-primary); font-weight: 700; }
.data-table tr:last-child td { border-bottom: 0; }

/* ========== DROPDOWN OVERFLOW FIX ==========
   Long dropdowns (Service Areas with Gulf Islands, Services with 14 items)
   were running off the bottom of the viewport with no way to scroll.
   This makes the dropdown scroll internally when it exceeds available height. */
.dropdown {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dropdown::-webkit-scrollbar { width: 6px; }
.dropdown::-webkit-scrollbar-track { background: transparent; }
.dropdown::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18); border-radius: 3px;
}
.dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* On mobile, the nav is stacked vertically inside the header — so the dropdown isn't
   a floating panel, it's part of the page flow. No height limit needed there. */
@media (max-width: 960px) {
  .dropdown {
    max-height: none;
    overflow-y: visible;
  }
}