/*
Theme Name: Triangle Septic Tank Cleaning Service
Theme URI: https://www.triangleseptic.ae
Author: Go Digital Global
Description: Custom theme for Triangle Septic Tank Cleaning Service — septic, sewage, drain and water tank cleaning across Dubai and Sharjah. Includes Home, About Us, Contact Us, Blog, and 8 dedicated service page templates with SEO heading hierarchy and FAQ schema.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: triangle-septic
*/

/* =========================================================
   TRIANGLE SEPTIC TANK CLEANING SERVICE — Design System
   Palette pulled from brand mark: deep navy + leaf green
   Signature motif: the triangle (clip-path frames, markers,
   step dividers) echoing the logo's triangular photo window.
   ========================================================= */

:root{
  --navy-900:#0B2244;
  --navy-800:#0F2C56;
  --navy-700:#153868;
  --navy-600:#1C4A88;
  --green-600:#3F8E22;
  --green-500:#5CAE33;
  --green-100:#E6F3DE;
  --sky-100:#EAF4FB;
  --sand-50:#F7F9FA;
  --ink-900:#152030;
  --ink-600:#45566B;
  --ink-400:#7488A0;
  --amber-500:#F2A93B;
  --white:#FFFFFF;
  --line:#E1E7EE;

  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --radius:10px;
  --shadow-sm:0 2px 10px rgba(11,34,68,.06);
  --shadow-md:0 12px 32px rgba(11,34,68,.12);
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;color:var(--ink-600);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{padding:72px 0;}
.section-alt{background:var(--sand-50);}
.section-navy{background:var(--navy-900);color:var(--white);}
.section-navy h2,.section-navy h3{color:var(--white);}
.section-navy p{color:#C9D6E8;}

/* Eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-600);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:10px solid var(--green-600);
}
.section-navy .eyebrow{color:var(--amber-500);}
.section-navy .eyebrow::before{border-bottom-color:var(--amber-500);}

.lede{font-size:1.08rem;max-width:640px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:8px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green-600);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-500);box-shadow:var(--shadow-md);}
.btn-outline{background:transparent;border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--navy-900);}
.btn-navy{background:var(--navy-900);color:var(--white);}
.btn-navy:hover{background:var(--navy-700);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}

/* ===== HEADER ===== */
.topbar{
  background:var(--navy-900);color:#C9D6E8;font-size:.82rem;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.topbar a{color:#C9D6E8;}
.topbar .topbar-links{display:flex;gap:18px;align-items:center;}
.topbar .topbar-links span{color:var(--amber-500);}

header.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:56px;width:auto;}
.brand-text{font-family:var(--font-display);line-height:1.1;}
.brand-text .name{font-weight:800;font-size:1.05rem;color:var(--navy-900);letter-spacing:.01em;}
.brand-text .tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--green-600);text-transform:uppercase;}

nav.main-nav{display:flex;align-items:center;gap:26px;}
nav.main-nav > ul{display:flex;gap:24px;align-items:center;}
nav.main-nav > ul > li{position:relative;}
nav.main-nav a.nav-link{
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  color:var(--navy-900);padding:8px 0;
}
nav.main-nav a.nav-link:hover{color:var(--green-600);}
.has-sub:hover .submenu{display:block;}
.submenu{
  display:none;position:absolute;top:100%;left:-16px;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow-md);padding:10px;min-width:280px;
  z-index:60;
}
.submenu li a{
  display:block;padding:9px 12px;border-radius:6px;font-size:.87rem;
  font-family:var(--font-body);font-weight:500;color:var(--ink-900);
}
.submenu li a:hover{background:var(--green-100);color:var(--green-600);}
.header-cta{display:flex;align-items:center;gap:12px;}
.header-cta .btn{padding:11px 20px;font-size:.88rem;}
.menu-toggle{display:none;}

/* Mobile nav */
@media(max-width:960px){
  .menu-toggle{
    display:block;background:none;border:none;font-size:1.6rem;color:var(--navy-900);cursor:pointer;
  }
  nav.main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 24px 20px;
    box-shadow:var(--shadow-md);
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  nav.main-nav > ul > li{border-bottom:1px solid var(--line);}
  .submenu{display:block;position:static;box-shadow:none;border:none;padding:0 0 8px 12px;min-width:0;}
  .has-sub .submenu{display:none;}
  .has-sub.open .submenu{display:block;}
  .header-cta{margin-top:14px; display:none;}
  .topbar .topbar-links{display:none;}
}

/* ===== HERO ===== */
.hero{
  background:linear-gradient(120deg,var(--navy-900) 46%, var(--navy-800) 100%);
  color:var(--white);position:relative;overflow:hidden;
}
.hero .container{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-top:76px;padding-bottom:76px;
}
.hero h1{color:var(--white);}
.hero .lede{color:#C9D6E8;}
.hero-badges{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;}
.hero-badges div{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#DCE7F5;font-weight:600;}
.hero-badges .dot{width:8px;height:8px;background:var(--amber-500);
  clip-path:polygon(50% 0,100% 100%,0 100%);}

.tri-frame{
  position:relative;aspect-ratio:1/1;
/*   clip-path:polygon(50% 2%, 100% 96%, 0% 96%); */
  background:var(--navy-700);
}
.tri-frame img{width:100%;height:100%;object-fit:cover;}

@media(max-width:860px){
  .hero .container{grid-template-columns:1fr;padding-top:44px;padding-bottom:44px;}
  .tri-frame{max-width:340px;margin:0 auto;}
}

/* ===== TRUST STRIP ===== */
.trust-strip{background:var(--green-600);color:var(--white);padding:14px 0;}
.trust-strip .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--font-display);font-weight:600;font-size:.85rem;}
.trust-strip span{display:flex;align-items:center;gap:8px;}

/* ===== SERVICE / FEATURE CARDS ===== */
.grid{display:grid;gap:26px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card .icon-tri{
  width:46px;height:46px;background:var(--green-600);
  clip-path:polygon(50% 6%, 96% 92%, 4% 92%);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  font-family:var(--font-display);font-weight:800;margin-bottom:16px;font-size:1rem;
}
.card h3{margin-bottom:8px;font-size:1.05rem;}
.card p{font-size:.92rem;margin-bottom:14px;}
.card a.more{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--navy-700);}
.card a.more:hover{color:var(--green-600);}

/* Service page hero-style header block */
.service-hero{
  background:var(--sky-100);border-bottom:1px solid var(--line);
}
.service-hero .container{padding-top:44px;padding-bottom:44px;}
.breadcrumb{font-size:.82rem;color:var(--ink-400);margin-bottom:14px;}
.breadcrumb a{color:var(--navy-700);font-weight:600;}

/* Numbered/triangle process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:8px;}
.step .num{
  font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--white);
  width:52px;height:52px;background:var(--navy-800);
  clip-path:polygon(50% 4%, 96% 92%, 4% 92%);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.step h3{font-size:1rem;}
.step p{font-size:.9rem;}

/* Triangle bullet list */
ul.tri-list li{
  position:relative;padding-left:26px;margin-bottom:12px;color:var(--ink-600);font-size:.96rem;
}
ul.tri-list li::before{
  content:"";position:absolute;left:0;top:6px;
  width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:9px solid var(--green-600);
}

/* Two column content + sidebar */
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start;}
@media(max-width:900px){.content-grid{grid-template-columns:1fr;}}
.side-card{
  background:var(--sand-50);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;position:sticky;top:100px;
}
.side-card h3{font-size:1rem;margin-bottom:14px;}
.side-card .area-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.side-card .area-tags span{
  background:var(--green-100);color:var(--green-600);font-size:.78rem;font-weight:700;
  padding:5px 10px;border-radius:20px;
}
.side-card .cta-block{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
}
.other-services li a{
  display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--navy-800);
}
.other-services li a:hover{color:var(--green-600);}
.other-services li a.active{color:var(--green-600);}

/* Testimonials */
.testi-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);
}
.testi-card .stars{color:var(--amber-500);letter-spacing:2px;margin-bottom:10px;font-size:.9rem;}
.testi-card p{font-size:.94rem;font-style:italic;}
.testi-card .who{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:.88rem;margin-top:14px;}
.testi-card .who span{display:block;font-family:var(--font-body);font-weight:400;color:var(--ink-400);font-size:.8rem;}

/* Why choose us */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-item{display:flex;gap:16px;align-items:flex-start;}
.why-item .icon-tri{flex-shrink:0;width:40px;height:40px;font-size:.25px;}

/* FAQ */
.faq-item{
  border-bottom:1px solid var(--line);padding:18px 0;
}
.faq-item summary{
  cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--navy-900);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";font-size:1.4rem;color:var(--green-600);flex-shrink:0;font-weight:400;
}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px;font-size:.94rem;}

/* CTA band */
.cta-band{
  background:linear-gradient(100deg,var(--green-600),var(--green-500));
  color:var(--white);text-align:center;
}
.cta-band h2{color:var(--white);}
.cta-band p{color:#EAF6E2;}
.cta-band .btn-row{justify-content:center;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--navy-900);}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);
  font-size:.94rem;background:var(--white);
}
.form-field textarea{resize:vertical;min-height:120px;}
.contact-info-card{background:var(--navy-900);color:var(--white);border-radius:var(--radius);padding:32px;}
.contact-info-card h3{color:var(--white);}
.contact-info-card .row{display:flex;gap:14px;margin-bottom:20px;align-items:flex-start;}
.contact-info-card .row .lbl{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--amber-500);text-transform:uppercase;letter-spacing:.04em;}
.contact-info-card .row p{color:#C9D6E8;margin:4px 0 0;}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:24px;}
.map-embed iframe{width:100%;height:280px;border:0;display:block;}

/* Blog */
.blog-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm);}
.blog-card .thumb{
    height:220px;
    overflow:hidden;
    background:var(--sky-100);
}

.blog-card .thumb a,
.blog-card .thumb img{
    display:block;
    width:100%;
    height:100%;
}

.blog-card .thumb img{
    object-fit:cover;
}
.blog-card .thumb .icon-tri{margin:0;width:60px;height:60px;font-size:1.3rem;}
.blog-card .body{padding:22px;}
.blog-card .meta{font-size:.75rem;color:var(--green-600);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.blog-card h3{font-size:1.05rem;}
.blog-card p{font-size:.9rem;}

/* Service icon overview grid on services */
.overview-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);}
.overview-row{
  display:grid;grid-template-columns:60px 1fr auto;gap:20px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--line);
}
.overview-row .icon-tri{margin:0;}
.overview-row h3{margin:0 0 4px;font-size:1.05rem;}
.overview-row p{margin:0;font-size:.88rem;}
@media(max-width:640px){
  .overview-row{grid-template-columns:44px 1fr;}
  .overview-row .btn{grid-column:1/-1;justify-self:start;margin-top:10px;}
}

/* Page header (about/contact/blog simple) */
.page-header{background:var(--navy-900);color:var(--white);padding:56px 0;}
.page-header h1{color:var(--white);margin-bottom:8px;}
.page-header .breadcrumb{color:#8FA4C2;}
.page-header .breadcrumb a{color:#C9D6E8;}

/* Footer */
footer.site-footer{background:var(--navy-900);color:#B9C8DE;padding-top:64px;}
footer.site-footer .container{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;}
@media(max-width:860px){footer.site-footer .container{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){footer.site-footer .container{grid-template-columns:1fr;}}
footer.site-footer h4{color:var(--white);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;}
footer.site-footer .fbrand{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
footer.site-footer .fbrand img{height:48px;}
footer.site-footer .fbrand .name{font-family:var(--font-display);font-weight:800;color:var(--white);}
footer.site-footer p{color:#8FA4C2;font-size:.88rem;}
footer.site-footer ul li{margin-bottom:10px;}
footer.site-footer ul li a{font-size:.88rem;color:#B9C8DE;}
footer.site-footer ul li a:hover{color:var(--green-500);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:.8rem;color:#7C90AC;}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 24px;}

/* Floating WhatsApp */
.whatsapp-float{
  position:fixed;bottom:22px;right:22px;z-index:80;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  color:var(--white);font-size:1.6rem;
}

/* Utility */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.small-note{font-size:.82rem;color:var(--ink-400);}


function triangle_register_menus() {
    register_nav_menus(array(
        'primary'          => __('Primary Menu'),
        'footer_services'  => __('Footer Services'),
        'footer_company'   => __('Footer Company'),
    ));
}
add_action('after_setup_theme', 'triangle_register_menus');