/* ============================================================
   WagePress — shared site chrome (homepage header + footer)
   Scoped so it can sit on top of the Bootstrap "mega_bot" theme
   pages without disturbing their body styles.
   ============================================================ */
:root{
  --green:#16d998;
  --green-2:#0eb47c;
  --green-ink:#12c78c;
  --navy:#0d1822;
  --ink:#0a0f14;
  --white:#ffffff;
  --grad-green:linear-gradient(100deg,#1ce4a2 0%,#0bb37c 100%);
  --maxw:1240px;
  --font-head:"Poppins",sans-serif;
  --font-body:"Manrope",sans-serif;
}

/* --- scoped normalization (only inside our header/footer) --- */
.site-header *,.site-footer *{box-sizing:border-box}
.site-header ul,.site-footer ul{list-style:none;margin:0;padding:0;display:block}
.site-header .nav__links{display:flex}
.site-footer li{display:block;float:none;width:auto}
.site-header a,.site-footer a{text-decoration:none}
.site-header img,.site-footer img{display:block;max-width:100%}
.site-footer p{margin:0}

/* ---------------- Buttons ---------------- */
.site-header .btn,.site-footer .btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;
  letter-spacing:.6px;text-transform:uppercase;
  padding:15px 30px;border-radius:10px;cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.site-header .btn--green,.site-footer .btn--green{background:var(--grad-green);color:#04231a;box-shadow:0 12px 26px rgba(16,190,130,.32)}
.site-header .btn--green:hover,.site-footer .btn--green:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(16,190,130,.42);color:#04231a}
.site-header .btn--pill{border-radius:30px;padding:14px 30px}

/* ============================================================
   NAV (black pill)
   ============================================================ */
.site-header{position:sticky;top:14px;z-index:1000;padding:14px 24px 0}
.site-header .nav{
  max-width:var(--maxw);margin:0 auto;
  background:#000;border-radius:46px;
  padding:12px 20px 12px 26px;
  display:flex;flex-wrap:nowrap;align-items:center;gap:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}
.site-header .nav__logo img{height:40px;width:auto}
.site-header .nav__links{display:flex;flex-wrap:nowrap;gap:34px;margin:0 auto;align-items:center}
.site-header .nav__links>li{margin:0}
.site-header .nav__links a{
  color:#f2f4f3;font-weight:500;font-size:16px;font-family:var(--font-body);
  padding:6px 2px;transition:color .18s ease;
}
.site-header .nav__links a:hover{color:var(--green)}
.site-header .nav__links a.is-active{color:var(--green);font-weight:600}
.site-header .nav__actions{display:flex;gap:12px}
.site-header .nav__actions .btn{font-size:14px;padding:12px 26px}
.site-header .nav__toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.site-header .nav__toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}

/* --- Services dropdown --- */
.site-header .nav__item--dropdown{position:relative}
.site-header .nav__dropdown-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.site-header .nav__caret{font-size:10px;line-height:1;transition:transform .22s ease}
.site-header .nav__item--dropdown:hover .nav__caret,
.site-header .nav__item--dropdown:focus-within .nav__caret{transform:rotate(180deg)}
.site-header .nav__item--dropdown::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:20px}
.site-header .nav__submenu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(8px);
  background:#000;border-radius:16px;padding:10px;min-width:230px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 18px 42px rgba(0,0,0,.34);z-index:70;
}
.site-header .nav__item--dropdown:hover .nav__submenu,
.site-header .nav__item--dropdown:focus-within .nav__submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.site-header .nav__submenu a{
  display:block;padding:11px 16px;border-radius:10px;
  color:#e9ecec;font-family:var(--font-body);font-weight:500;font-size:15px;white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.site-header .nav__submenu a:hover{background:rgba(22,217,152,.14);color:var(--green)}
.site-header .nav__submenu a.is-active{color:var(--green);font-weight:600}

/* ============================================================
   FOOTER (green/navy, light background)
   ============================================================ */
.site-footer{
  position:relative;overflow:hidden;
  background:#fbfdfc url("../assets/footer-bg.png") center / cover no-repeat;
  padding:70px 24px 40px;
}
.site-footer::before,.site-footer::after{
  content:"";position:absolute;top:0;bottom:0;width:190px;background:no-repeat;background-size:contain;z-index:0;pointer-events:none;
}
.site-footer::before{left:0;background-image:url("../assets/footer-leaf-l.png");background-position:left center}
.site-footer::after{right:0;background-image:url("../assets/footer-leaf-r.png");background-position:right center}
.site-footer .footer__top,.site-footer .footer__social,.site-footer .footer__rule,.site-footer .footer__bottom{position:relative;z-index:1;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.site-footer .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:40px}
.site-footer .footer__logo{height:48px;width:auto;margin-bottom:20px}
.site-footer .footer__brand p{font-family:var(--font-body);font-weight:500;color:#3f4645;font-size:16px;line-height:1.7;max-width:380px}
.site-footer .footer__tag{display:block;margin-top:22px;padding-top:18px;border-top:2px solid #1a201e;font-family:var(--font-body);font-weight:600;color:#1a201e;font-size:16px;max-width:360px}
.site-footer .footer__col h4{font-family:var(--font-head);font-weight:700;font-size:22px;margin-bottom:20px;color:#0f1512}
.site-footer .footer__col li{margin-bottom:12px}
.site-footer .footer__col a{font-family:var(--font-body);font-weight:500;color:#3f4645;font-size:16px;transition:color .18s}
.site-footer .footer__col a:hover{color:var(--green-ink)}
.site-footer .footer__badges{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.site-footer .footer__badges img{height:64px;width:auto}
.site-footer .footer__social{display:flex;align-items:center;gap:16px;margin-top:44px}
.site-footer .footer__follow{font-family:var(--font-body);font-weight:600;font-size:17px;color:#141a18}
.site-footer .footer__social a{width:38px;height:38px;display:grid;place-items:center}
.site-footer .footer__social a img{height:26px;width:auto}
.site-footer .footer__built{font-family:var(--font-body);font-weight:500;color:#2b3231;font-size:16px;margin-left:8px;display:flex;align-items:center;gap:6px}
.site-footer .footer__rule{border:0;border-top:1.5px solid #b9c0be;margin:30px auto}
.site-footer .footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--font-body);color:#2b3231;font-size:16px}
.site-footer .footer__bottom>span{margin:0}
.site-footer .footer__legal a{margin-left:22px;color:#2b3231}
.site-footer .footer__legal a:hover{color:var(--green-ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .site-header .nav__links{gap:22px}
}
@media (max-width:900px){
  .site-header .nav__toggle{display:flex}
  .site-header .nav__links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:#000;border-radius:22px;flex-direction:column;gap:6px;
    padding:18px 22px;margin:0;display:none;box-shadow:0 20px 40px rgba(0,0,0,.3);
  }
  .site-header .nav__links.open{display:flex}
  .site-header .nav__caret{display:none}
  .site-header .nav__item--dropdown::after{display:none}
  .site-header .nav__submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;box-shadow:none;padding:2px 0 4px 16px;min-width:0;gap:0;
    border-left:1px solid rgba(255,255,255,.18);margin:4px 0 4px 4px;
  }
  .site-header .nav__submenu a{padding:8px 10px;color:#cfd4d3;font-size:14px}
  .site-header .nav__actions{margin-left:auto}
  .site-header .nav__actions .btn{padding:10px 18px;font-size:13px}
  .site-footer .footer__top{grid-template-columns:1fr 1fr;gap:34px}
  .site-footer::before,.site-footer::after{display:none}
}
@media (max-width:600px){
  .site-header{padding:10px 12px 0}
  .site-header .nav{padding:10px 12px 10px 16px}
  .site-header .nav__logo img{height:32px}
  .site-footer .footer__top{grid-template-columns:1fr}
  .site-footer .footer__bottom{flex-direction:column;align-items:flex-start}
  .site-footer .footer__legal a{margin-left:0;margin-right:20px}
}

/* ============================================================
   CONTENT / LEGAL PAGES — homepage-like light background
   Overrides mega_bot dark body so pages match index.html
   ============================================================ */
body.inner-bg{
  background:
    radial-gradient(90% 70% at 18% 12%, rgba(22,217,152,.12) 0%, rgba(22,217,152,0) 55%),
    radial-gradient(80% 60% at 88% 8%, rgba(14,180,124,.10) 0%, rgba(14,180,124,0) 50%),
    linear-gradient(180deg,#f7f9f9 0%,#eef2f3 45%,#ffffff 100%) !important;
  color:#1a201e;
  min-height:100vh;
}
body.inner-bg:after{
  background-image:none !important;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 18px,
      rgba(14,180,124,.035) 18px 19px
    ),
    repeating-linear-gradient(
      -115deg,
      transparent 0 22px,
      rgba(22,217,152,.028) 22px 23px
    ) !important;
  opacity:.55 !important;
  background-attachment:fixed !important;
  background-size:auto !important;
  z-index:0 !important;
  pointer-events:none;
}
body.inner-bg > *:not(.site-header){position:relative;z-index:1}
body.inner-bg .site-header{z-index:1000}

/* Breadcrumb hero — soft light panel like homepage hero */
body.inner-bg .breadcrumb-section{
  background:
    radial-gradient(120% 90% at 80% 0%, #e7f7f1 0%, rgba(231,247,241,0) 55%),
    linear-gradient(180deg,#f6f8f8 0%,#eef2f3 100%) !important;
  background-image:none !important;
  border-bottom:1px solid rgba(16,24,32,.06);
  padding-top:140px;
}
body.inner-bg .breadcrumb-section .breadcrumb-content h2{
  color:#0bb47c !important;
}
body.inner-bg .breadcrumb-section .breadcrumb-content p,
body.inner-bg .breadcrumb-section .breadcrumb-content p i{
  color:#2c3432 !important;
}

/* Main legal content — readable on light bg */
body.inner-bg .ratio_40,
body.inner-bg .blog-details,
body.inner-bg .blog-main-content{
  background:transparent !important;
}
body.inner-bg .blog-main-content h3{
  color:#0bb47c !important;
}
body.inner-bg .blog-main-content h3 img{
  filter:none;
}
body.inner-bg .blog-main-content p,
body.inner-bg .blog-main-content li,
body.inner-bg .blog-main-content td,
body.inner-bg .blog-main-content th,
body.inner-bg .blog-main-content span,
body.inner-bg .blog-main-content strong{
  color:#1a201e !important;
}
body.inner-bg .blog-main-content a{color:#0bb47c !important}
body.inner-bg .blog-main-content .table,
body.inner-bg .blog-main-content table{
  color:#1a201e;
  background:#fff;
}
body.inner-bg .blog-main-content .table th,
body.inner-bg .blog-main-content table th{
  background:#eafaf3;
  color:#0a0f14 !important;
}
body.inner-bg .blog-main-content .table td,
body.inner-bg .blog-main-content .table th,
body.inner-bg .blog-main-content table td,
body.inner-bg .blog-main-content table th{
  border-color:#d7e3de !important;
}

/* Soft card feel for dense legal text */
body.inner-bg .blog-main-content{
  background:#ffffffcc !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(16,24,32,.06);
  border-radius:22px;
  padding:36px 40px 48px;
  box-shadow:0 18px 50px rgba(18,40,35,.06);
}
@media (max-width:767px){
  body.inner-bg .blog-main-content{padding:24px 18px 32px;border-radius:16px}
  body.inner-bg .breadcrumb-section{padding-top:110px}
}

/* Broader content sections (service / contact / pricing pages) */
body.inner-bg section:not(.ready-cta-section):not(.hero-slider):not(.cta),
body.inner-bg .section-b-space,
body.inner-bg .service-section,
body.inner-bg .pricing-section,
body.inner-bg .contact-section,
body.inner-bg .faq-section,
body.inner-bg .error-section{
  background:transparent !important;
}
body.inner-bg h1,
body.inner-bg h2,
body.inner-bg h3,
body.inner-bg h4,
body.inner-bg h5{
  color:#0a0f14;
}
body.inner-bg h2.title,
body.inner-bg .title,
body.inner-bg .section-title,
body.inner-bg .contact-title,
body.inner-bg .pricing-title{
  color:#0bb47c !important;
}
body.inner-bg p,
body.inner-bg li,
body.inner-bg label,
body.inner-bg .sub-title,
body.inner-bg .content p{
  color:#2c3432;
}
body.inner-bg .card,
body.inner-bg .service-box,
body.inner-bg .pricing-box,
body.inner-bg .contact-box,
body.inner-bg .faq-box,
body.inner-bg .form-sec,
body.inner-bg .error-main{
  background:#fff !important;
  border:1px solid rgba(16,24,32,.08) !important;
  color:#1a201e !important;
  box-shadow:0 14px 40px rgba(18,40,35,.06);
}
body.inner-bg .card h3,
body.inner-bg .card h4,
body.inner-bg .service-box h3,
body.inner-bg .pricing-box h3,
body.inner-bg .contact-box h3{
  color:#0a0f14 !important;
}
body.inner-bg .card p,
body.inner-bg .service-box p,
body.inner-bg .pricing-box p{
  color:#2c3432 !important;
}
body.inner-bg input,
body.inner-bg textarea,
body.inner-bg select{
  background:#fff !important;
  color:#0a0f14 !important;
  border-color:#d0d8d5 !important;
}
body.inner-bg .hero-slider__title,
body.inner-bg .hero-slider__text,
body.inner-bg .hero-slider__text span,
body.inner-bg .hero-slider__text li{
  color:#fff !important;
}
body.inner-bg .error-content h2{color:#0bb47c !important}
body.inner-bg .error-content p{color:#2c3432 !important}