/* ==========================================================================
   dynamic.css  -  loads AFTER style.css + responsive.css
   Everything the mockup did with inline style="" / hard-coded url() lives
   here as classes, so the PHP templates can stay 100% inline-CSS free.
   ========================================================================== */

.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Hero: ACF image is a real <img>, not a CSS url() ---------- */
.hero{background:var(--teal-900);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;max-width:none}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1))}

/* ---------- Service cards: image is a real <img> ---------- */
.scard,a.scard{background:var(--teal-900);isolation:isolate}
.scard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;max-width:none}
.scard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 20%,rgba(8,51,47,.92))}

/* ---------- Google logo colours (were inline colour spans) ---------- */
.glg-b{color:#4285F4}.glg-r{color:#DB4437}.glg-y{color:#F4B400}.glg-g{color:#0F9D58}

/* ---------- Footer extras ---------- */
.copy .legal-menu{display:inline}
.copy .legal-menu li{display:inline;list-style:none}
.copy .legal-menu li+li::before{content:"|";margin:0 10px;opacity:.6}
.copy .legal-menu a,.copy a{color:#fff}
.footer .contact-line li{float:none;padding:0 0 10px}
.footer .contact-line i{margin-right:6px}

/* ---------- Mobile navigation (mockup had its burger commented out) ---------- */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px;order:3}
.menu-toggle .bar-line{display:block;width:24px;height:2px;background:var(--ink);transition:.25s ease}
.menu-toggle[aria-expanded="true"] .bar-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bar-line:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .bar-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  .header-wrap{gap:12px;flex-wrap:nowrap;padding:8px 0}
  .logo{width:auto;flex:0 0 auto}
  .logo img{height:56px;width:auto}
  .menu-toggle{display:flex}
  .header-info{order:2;width:auto;margin-left:auto}
  .contact{padding:14px 22px;margin-right:0;align-self:center;border-radius:6px}
  .topmenu{position:static;width:auto}
  .topmenu .navigation{display:none}
  .topmenu.is-open .navigation{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;padding:6px 5% 18px;box-shadow:0 14px 24px rgba(8,51,47,.12);max-height:calc(100vh - 100px);overflow-y:auto}
  .topmenu ul.menu{display:block;width:100%}
  .topmenu ul.menu li{display:block}
  .topmenu ul.menu li+li{border-left:0;border-top:1px solid var(--line)}
  .topmenu ul.menu li a{line-height:1.4;padding:14px 4px;text-align:left}
  .topmenu ul.menu li.parent>a:before,.topmenu ul.menu li.menu-item-has-children>a:before{display:none}
  .topmenu ul.menu ul,.topmenu ul.menu li:hover>ul{display:block;position:static;width:100%;box-shadow:none;background:transparent;padding:0 0 6px 14px}
  .topmenu ul.menu ul li a{font-size:14px;padding:10px 4px;line-height:1.4}
  .topbar .bar{padding:0 12px}
}
@media(max-width:520px){
  .contact{padding:12px 14px;font-size:.8rem}
  .logo img{height:46px}
  .hero-in{padding:44px 20px}
  .hero{min-height:0}
  .trust-wrap{margin-top:-30px}
  .ctasec{padding:30px 20px}
  .footer-logo img{height:110px}
  .topbar .bar{font-size:.72rem}
}
@media(min-width:1001px){.menu-toggle{display:none!important}}

/* ---------- Inner pages (page.php / index.php / single.php / 404.php) ---------- */
.page-hero{background:linear-gradient(120deg,var(--teal-700),var(--teal-900));color:#fff;padding:64px 20px 56px}
.page-hero .wrapper{max-width:1100px}
.page-hero h1{color:#fff;margin:0;font-size:clamp(28px,4vw,44px)}
.page-hero .crumbs{margin-top:12px;font-size:.85rem;opacity:.85}
.page-hero .crumbs a{color:#fff;text-decoration:underline}
.page-body{padding:64px 20px 80px}
.page-body .wrapper{max-width:1100px}
.entry{color:var(--ink)}
.entry h2,.entry h3,.entry h4{margin:1.6em 0 .6em}
.entry p,.entry ul,.entry ol{margin-bottom:1.1em}
.entry ul{list-style:disc;padding-left:1.4em}
.entry ol{list-style:decimal;padding-left:1.4em}
.entry img{border-radius:var(--radius);margin:1em 0}
.entry a{text-decoration:underline}
.entry table{width:100%;border-collapse:collapse;margin-bottom:1.2em}
.entry th,.entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card .pc-body{padding:20px}
.post-card h2{font-size:20px;margin-bottom:8px}
.post-card h2 a{color:var(--ink)}
.post-card .meta{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.pagination,.wp-pagenavi{margin-top:36px;display:flex;gap:8px;flex-wrap:wrap}
.wp-pagenavi a,.wp-pagenavi span{padding:8px 14px;border:1px solid var(--line);border-radius:8px}
.wp-pagenavi .current{background:var(--teal);color:#fff;border-color:var(--teal)}
@media(max-width:900px){.post-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-list{grid-template-columns:1fr}.page-hero{padding:44px 20px 38px}.page-body{padding:40px 20px 56px}}

/* Contact Form 7 inside any page */
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea,.wpcf7 select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.wpcf7 input[type=submit]{background:var(--teal);color:#fff;border:0;border-radius:8px;padding:13px 28px;font-weight:600;cursor:pointer}
.wpcf7 input[type=submit]:hover{background:var(--teal-900)}

/* ---------- Gallery lightbox (moved out of functions.php, was an inline <style> in wp_footer) ---------- */
        /* Lightbox Overlay */
.ns-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ns-lightbox-overlay.active {
    display: flex;
}

/* Main lightbox container */
.ns-lightbox-content {
    position: relative;
    width: auto;
    height: auto;
    max-width: 800px;      /* width limit */
    max-height: 575px;     /* height limit */
    margin: 0 auto;
}

/* Image sizing */
.ns-lightbox-content img {
    width: auto;
    height: auto;
    max-width: 800px;      /* force 800px width max */
    max-height: 575px;     /* force 575px height max */
    object-fit: contain;   /* maintain aspect ratio properly */
    display: block;
    margin: 0 auto;
}

/* Close / Prev / Next Buttons */
.ns-lightbox-close,
.ns-lightbox-prev,
.ns-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 20px;
}

.ns-lightbox-close {
    top: 1%;
    right: 2px;
    transform: none;
    font-size: 26px;
}

.ns-lightbox-prev {
    left: -45px;
}

.ns-lightbox-next {
    right: -45px;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .ns-lightbox-content,
    .ns-lightbox-content img {
        max-width: 95vw;
        max-height: 80vh;
    }

    .ns-lightbox-prev {
        left: 10px;
    }
    .ns-lightbox-next {
        right: 10px;
    }
}
    
.btn-center{text-align:center;margin-top:30px}