/*
Theme Name: Remote Access Control – Cape Town Modern
Theme URI: https://remoteaccesscontrol.co.za/
Author: Remote Access Control
Description: Modern black and #3EB650 responsive WordPress theme for Remote Access Control.
Version: 1.1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: remote-access-control
*/
:root{--green:#3EB650;--black:#000;--panel:#050706;--white:#fff;--muted:#ddd;--line:rgba(62,182,80,.9)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}
.site-header{position:sticky;top:0;z-index:50;width:calc(100% - 92px);max-width:1455px;margin:5px 12px 0 40px;background:linear-gradient(110deg,#000 0%,#030603 58%,#00350f 100%);border-bottom:1px solid #19351e;border-radius:2px 2px 0 0}
.nav-wrap{width:100%;min-height:108px;display:flex;align-items:center;padding:7px 30px;gap:28px}.brand{width:250px;flex:0 0 250px}.brand img{width:220px;height:auto;display:block}.nav{display:flex;align-items:center;justify-content:center;gap:36px;flex:1;min-width:0}.nav a{font-size:16px;font-weight:600;white-space:nowrap}.nav a:hover,.nav a.active{color:var(--green)}.nav a.active{border-bottom:3px solid var(--green);padding-bottom:14px}
.wa{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;flex:0 0 auto}.wa-icon{width:52px;height:52px;display:grid;place-items:center;color:#fff}.wa-icon svg{width:52px;height:52px;display:block}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:30px}
.mobile-nav{display:none}
.page-wrap{width:calc(100% - 92px);max-width:1455px;margin:0 12px 0 40px;background:#000}
.hero{position:relative;width:100%;display:grid;grid-template-columns:47% 53%;min-height:350px;background:#000;overflow:hidden}.hero-copy{min-width:0;padding:26px 18px 22px 48px;position:relative;z-index:2;background:linear-gradient(90deg,#000 0%,#000 72%,rgba(0,0,0,.65) 100%)}.eyebrow{color:var(--green);letter-spacing:6px;font-weight:700;font-size:20px}.hero h1{font-size:51px;line-height:1.02;margin:4px 0 12px;letter-spacing:-1px;white-space:nowrap}.hero h1 span{color:var(--green)}.hero .lead{font-size:21px;font-weight:600;margin:0 0 12px}.rule{height:2px;width:220px;background:var(--green);margin:11px 0 14px}.hero p{font-size:17px;color:#f0f0f0;margin:7px 0;max-width:700px}.hero-art{min-width:0;min-height:350px;background-image:linear-gradient(90deg,#000 0%,transparent 23%),url('assets/hero.jpg');background-size:cover;background-position:center right}.location{position:absolute;right:21%;bottom:27px;z-index:4}.loc-card{border:2px solid var(--green);background:rgba(0,13,4,.96);border-radius:20px;padding:11px 22px;display:flex;align-items:center;gap:20px;min-width:400px;box-shadow:0 0 22px rgba(62,182,80,.12)}.loc-pin{font-size:34px;color:var(--green);line-height:1}.loc-card .big{font-size:20px;font-weight:700;white-space:nowrap}.loc-card .small{color:#ddd;white-space:nowrap}.loc-divider{height:46px;border-left:1px solid var(--green)}
.section{width:100%;margin:14px auto 0;padding:0}.panel{border:1px solid var(--line);background:linear-gradient(120deg,#020403,#080b09);border-radius:17px}.section-title{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--green);font-size:25px;letter-spacing:1px;margin:0;padding:10px 0 7px}.section-title:before,.section-title:after{content:"";height:2px;background:var(--green);width:180px}.services{padding:8px 27px 16px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:17px}.service{text-align:center;min-width:0}.icon-box{height:84px;width:104px;max-width:100%;border:1px solid var(--green);border-radius:15px;display:grid;place-items:center;margin:auto auto 8px;background:#020403}.icon-box svg{width:58px;height:58px;stroke:#fff;fill:none;stroke-width:2}.service span{font-size:15px;line-height:1.18;display:block}
.triple{display:grid;grid-template-columns:1.15fr .85fr 1.1fr;gap:20px;margin-top:14px}.info{min-width:0;padding:15px 25px;min-height:270px;border:1px solid #253029;border-radius:9px;background:linear-gradient(145deg,#030504,#080a09)}.info h2{color:var(--green);font-size:25px;margin:0 0 3px}.sub{margin:0 0 11px;font-size:15px}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.why-item{display:grid;grid-template-columns:48px 1fr;gap:9px;align-items:start;min-width:0}.why-icon{width:42px;height:42px;border-radius:50%;background:var(--green);color:#000;display:grid;place-items:center;font-weight:900}.why-item strong{display:block;font-size:16px}.why-item p{margin:1px 0;font-size:13px;color:#ddd}.checks{padding:0;margin:10px 0;list-style:none}.checks li{margin:11px 0;font-size:14px}.checks li:before{content:'✓';display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--green);color:#000;font-weight:900;margin-right:10px}.faq details{border:1px solid #2a312c;border-radius:8px;margin:7px 0;background:#050706}.faq summary{cursor:pointer;padding:8px 11px;font-size:14px;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'⌄';float:right;color:var(--green);font-size:20px}.faq details[open] summary:after{transform:rotate(180deg)}.faq p{padding:0 12px 12px;color:#ddd;font-size:13px}
#products{margin-bottom:0}.footer{width:100%;display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr auto;gap:18px;align-items:center;border-top:1px solid #1b251e;padding:13px 35px 9px;background:#000}.footer img{width:175px}.foot-item{font-size:14px;color:#ddd;min-width:0}.footer-wa{display:inline-grid;vertical-align:middle;width:30px;height:30px;margin-right:6px;color:var(--green);place-items:center}.footer-wa svg{width:30px;height:30px}.fb{width:40px;height:40px;border-radius:50%;background:var(--green);color:#000;display:grid;place-items:center;font-weight:900;font-size:22px}.copyright{text-align:center;color:#aaa;font-size:12px;padding:0 0 12px;background:#000}
@media(max-width:1250px){.site-header,.page-wrap{width:calc(100% - 60px);margin-left:28px;margin-right:32px}.nav{gap:20px}.brand{width:210px;flex-basis:210px}.brand img{width:190px}.nav a{font-size:15px}.wa{font-size:14px}.wa-icon,.wa-icon svg{width:46px;height:46px}.hero-copy{padding-left:34px}.hero h1{font-size:43px}.location{right:8%}.services{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:900px){.site-header,.page-wrap{width:calc(100% - 40px);margin-left:20px;margin-right:20px}.nav{gap:12px}.nav a{font-size:13px}.brand{width:175px;flex-basis:175px}.brand img{width:165px}.wa{display:none}.nav-wrap{padding:8px 18px}.hero{grid-template-columns:1fr .9fr}.hero-copy{padding-left:24px}.hero h1{font-size:37px}.hero .lead{font-size:18px}.hero p{font-size:15px}.location{right:5%;bottom:15px}.loc-card{min-width:390px}.triple{grid-template-columns:1fr 1fr;gap:14px;padding:0 14px}.triple .faq{grid-column:1/-1}.section{padding:0 14px}.footer{grid-template-columns:1fr 1fr 1fr;padding:18px}}
@media(max-width:760px){.site-header,.page-wrap{width:calc(100% - 20px);margin-left:8px;margin-right:12px}.site-header{position:relative;margin-top:3px}.nav-wrap{min-height:78px;padding:8px 15px;justify-content:space-between}.brand,.brand img{width:165px;flex-basis:auto}.nav{display:none}.menu-toggle{display:block}.mobile-nav{display:none;background:#050706;border-top:1px solid #17301c;padding:8px 18px}.mobile-nav.open{display:block}.mobile-nav a{display:block;padding:11px 0;border-bottom:1px solid #162019}.hero{display:block;min-height:0}.hero-copy{padding:22px 17px 9px;background:#000}.hero h1{font-size:33px;white-space:normal}.hero .lead{font-size:18px}.hero p{font-size:15px}.hero-art{min-height:220px;background-position:center;border-radius:0}.location{position:relative;right:auto;bottom:auto;margin:-20px 15px 16px}.loc-card{min-width:0;width:100%;padding:11px 15px;justify-content:center;gap:13px}.loc-pin{font-size:28px}.loc-card .big{font-size:18px}.loc-card .small{font-size:14px}.loc-divider{height:40px}.section{padding:0 10px}.services{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 12px 16px}.section-title{font-size:21px}.section-title:before,.section-title:after{width:42px}.triple{grid-template-columns:1fr;gap:12px;padding:0}.triple .faq{grid-column:auto}.info{min-height:auto;padding:16px 18px}.why-grid{grid-template-columns:1fr}.footer{grid-template-columns:1fr 1fr;padding:18px 15px}.footer .brand-foot{grid-column:1/-1}.footer img{width:150px}}

/* Refined section spacing: keep the encircled WHAT WE DO and LOCAL SERVICE panels slightly inset from the page edges. */
@media (min-width: 761px){
  #what-we-do,
  #products{
    width:calc(100% - 70px);
    margin-left:auto;
    margin-right:auto;
  }
}

/* Repair-only updates: remove mobile Facebook overlap and keep email contained. */
@media (max-width:760px){.footer .foot-item{overflow-wrap:anywhere;word-break:break-word}.footer .fb{justify-self:end;align-self:start;margin-top:8px;margin-right:8px}.footer .foot-item:nth-of-type(4){min-width:0}}


/* Contact form styled to match the supplied reference. */
.contact-section{width:100%;margin:18px auto 0;background:#ece9df;padding:30px 32px;color:#222}
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:42px;max-width:1100px;margin:0 auto;align-items:start}
.contact-info{background:#12151a;color:#fff;border-radius:2px;padding:20px 20px 24px}
.contact-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #2c3035;font-family:monospace}
.contact-row span{color:#9ca6b0;letter-spacing:1px}.contact-row strong{font-family:Arial,Helvetica,sans-serif;font-size:14px;text-align:right}
.contact-note{font:12px/1.45 monospace;color:#aaa;margin:16px 0 0}
.contact-form{display:grid;gap:10px}.contact-form label{font-size:12px;color:#555;display:grid;gap:5px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #ddd;background:#fff;border-radius:2px;padding:9px 12px;font:14px Arial,Helvetica,sans-serif;color:#222}.contact-form textarea{min-height:96px;resize:vertical}.contact-form button{border:0;background:#cf8c26;color:#111;font-weight:700;padding:11px;border-radius:2px;cursor:pointer}.contact-form button:hover{filter:brightness(1.05)}
@media(max-width:760px){.contact-section{padding:20px 12px}.contact-grid{grid-template-columns:1fr;gap:18px}.contact-row{font-size:12px}.contact-row strong{font-size:12px}.contact-form input,.contact-form select,.contact-form textarea{font-size:16px}.contact-form button{padding:13px}.footer{grid-template-columns:1fr 1fr}.footer .foot-item{min-width:0}.footer .fb{justify-self:end;align-self:end;margin:0 8px 0 0}.footer .brand-foot{grid-column:1/-1}}

/* Dedicated Contact page: preserves the existing contact-form design while giving it a proper page container. */
.contact-page{min-height:420px;background:#000;padding:18px 0 24px}.contact-page .contact-section{margin:0 auto;max-width:1455px}.contact-success,.contact-error{max-width:805px;margin:0 auto 14px;padding:10px 14px;border-radius:4px;text-align:center}.contact-success{border:1px solid #3EB650;background:#071108;color:#fff}.contact-error{border:1px solid #b33;background:#160707;color:#fff}


/* Contact page layout matched to the supplied reference image. */
body.page-template-page-contact{background:#ece9df;color:#222}
body.page-template-page-contact .contact-page{background:#ece9df;min-height:470px;padding:0}
body.page-template-page-contact .contact-section{width:871px;max-width:100%;margin:0;padding:37px 32px 15px;background:#ece9df;color:#222;min-height:450px}
body.page-template-page-contact .contact-grid{width:805px;max-width:100%;margin:0;grid-template-columns:328px 435px;gap:42px;align-items:start}
body.page-template-page-contact .contact-info{width:328px;background:#12151a;border-radius:2px;padding:20px 18px 24px;color:#fff}
body.page-template-page-contact .contact-row{padding:9px 0;font-size:12px}
body.page-template-page-contact .contact-row span{font-size:12px;letter-spacing:1.4px;color:#9ca6b0}
body.page-template-page-contact .contact-row strong{font-size:13px}
body.page-template-page-contact .contact-note{font-size:11px;line-height:1.45;margin-top:15px}
body.page-template-page-contact .contact-form{width:435px;gap:10px}
body.page-template-page-contact .contact-form label{font-size:11px;color:#555;gap:4px}
body.page-template-page-contact .contact-form input,
body.page-template-page-contact .contact-form select{height:35px;padding:7px 11px;font-size:13px}
body.page-template-page-contact .contact-form textarea{height:96px;min-height:96px;padding:8px 11px;font-size:13px}
body.page-template-page-contact .contact-form button{height:37px;padding:8px 11px;background:#cf8c26;font-size:12px}
@media(max-width:900px){
  body.page-template-page-contact .contact-section{width:100%;padding:24px 20px 28px}
  body.page-template-page-contact .contact-grid{width:100%;grid-template-columns:1fr;gap:18px}
  body.page-template-page-contact .contact-info,
  body.page-template-page-contact .contact-form{width:100%}
}

/* Desktop menu visibility repair: keep the full navigation visible and ensure the green active/hover styling is not clipped. */
@media (min-width: 901px){
  .site-header, .nav-wrap, .nav { overflow: visible !important; }
  .nav { display:flex !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:70; align-items:center; flex:1 1 auto; min-width:0; }
  .nav a { display:inline-flex !important; visibility:visible !important; opacity:1 !important; align-items:center; justify-content:center; color:#fff; position:relative; z-index:71; }
  .nav a:hover, .nav a.active { color:var(--green) !important; }
  .nav a.active { border-bottom:3px solid var(--green); padding-bottom:14px; }
}


/* Final desktop header visibility fix: match the approved reference header. */
@media (min-width: 901px){
  .site-header{color:#fff !important;}
  .nav-wrap{display:flex !important;align-items:center !important;}
  .nav{display:flex !important;align-items:center !important;justify-content:center !important;gap:40px !important;visibility:visible !important;opacity:1 !important;flex:1 1 auto !important;min-width:0 !important;}
  .nav a,
  .nav a:link,
  .nav a:visited{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:none !important;
    visibility:visible !important;
    opacity:1 !important;
    display:inline-flex !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  .nav a:hover,
  .nav a.active{
    color:#3EB650 !important;
    -webkit-text-fill-color:#3EB650 !important;
  }
  .nav a.active{border-bottom:3px solid #3EB650 !important;padding-bottom:14px !important;}
  .wa,
  .wa:link,
  .wa:visited,
  .wa span{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    visibility:visible !important;
    opacity:1 !important;
    display:flex !important;
  }
  .wa{font-size:16px !important;font-weight:700 !important;}
  .wa-icon,.wa-icon svg{visibility:visible !important;opacity:1 !important;}
}

/* Contact-page desktop header repair: keep the complete top navigation visible on the Contact page only. */
@media (min-width: 901px){
  body.page-template-page-contact .site-header{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin-left:10px !important;
    margin-right:10px !important;
    overflow:visible !important;
  }
  body.page-template-page-contact .nav-wrap{
    display:grid !important;
    grid-template-columns:240px minmax(0,1fr) 250px !important;
    align-items:center !important;
    gap:18px !important;
    padding:7px 30px !important;
    overflow:visible !important;
  }
  body.page-template-page-contact .brand{
    width:240px !important;
    flex:none !important;
  }
  body.page-template-page-contact .brand img{width:220px !important;}
  body.page-template-page-contact .nav{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(18px,2.2vw,38px) !important;
    overflow:visible !important;
  }
  body.page-template-page-contact .nav a,
  body.page-template-page-contact .nav a:link,
  body.page-template-page-contact .nav a:visited{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:16px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    flex:none !important;
  }
  body.page-template-page-contact .nav a:hover,
  body.page-template-page-contact .nav a.active{
    color:#3EB650 !important;
    -webkit-text-fill-color:#3EB650 !important;
  }
  body.page-template-page-contact .wa{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    justify-content:flex-start !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    white-space:nowrap !important;
    min-width:0 !important;
  }
  body.page-template-page-contact .wa span{color:#fff !important;-webkit-text-fill-color:#fff !important;}
}


/* Contact page header: force the desktop navigation and WhatsApp label to render exactly like the Home page. */
@media (min-width:901px){
  body.page-template-page-contact .site-header,
  body.page-template-page-contact .site-header *{
    text-rendering:auto;
  }
  body.page-template-page-contact .site-header .nav{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    mix-blend-mode:normal !important;
    filter:none !important;
  }
  body.page-template-page-contact .site-header .nav a,
  body.page-template-page-contact .site-header .nav a:link,
  body.page-template-page-contact .site-header .nav a:visited{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 0 0 #fff !important;
    background:transparent !important;
    mix-blend-mode:normal !important;
    filter:none !important;
  }
  body.page-template-page-contact .site-header .nav a:hover,
  body.page-template-page-contact .site-header .nav a:focus,
  body.page-template-page-contact .site-header .nav a.active{
    color:#3EB650 !important;
    -webkit-text-fill-color:#3EB650 !important;
    text-shadow:0 0 0 #3EB650 !important;
  }
  body.page-template-page-contact .site-header .wa,
  body.page-template-page-contact .site-header .wa-label{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    text-shadow:0 0 0 #fff !important;
    background:transparent !important;
    mix-blend-mode:normal !important;
    filter:none !important;
  }
  body.page-template-page-contact .site-header .wa-label{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    line-height:1.35 !important;
    white-space:nowrap !important;
    font-size:16px !important;
    font-weight:700 !important;
  }
  body.page-template-page-contact .site-header .wa-icon,
  body.page-template-page-contact .site-header .wa-icon svg{
    visibility:visible !important;
    opacity:1 !important;
  }
}

.footer-contact-link{color:#ddd;text-decoration:none}.footer-contact-link:hover{color:var(--green)}