/*
Theme Name: Agencija MB
Theme URI: https://agencijamb.rs
Author: Agencija MB
Description: Prilagođena tema za sajt agencije za čišćenje i održavanje, sa podrškom za glavni meni koji se uređuje kroz Izgled > Meniji.
Version: 1.0
Text Domain: agencija-mb
*/


  :root{
    --navy:#09202e;
    --navy-2:#102d40;
    --green:#7fb245;
    --green-light:#a7d465;
    --ink:#182933;
    --muted:#66757b;
    --line:#dbe2df;
    --bg-soft:#f1f4f1;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:'Inter',Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:'Poppins',Arial,sans-serif;line-height:1.15;margin:0}
  .wrap{width:min(100% - 40px,1120px);margin:auto}
  a{color:inherit;text-decoration:none}
  ul{margin:0}

  /* Top bar */
  .top{background:var(--navy);color:#d7e1e3;font-size:12.5px;padding:9px 0}
  .top .wrap{display:flex;justify-content:space-between}
  .top a{font-weight:600;color:#fff}

  /* Nav */
  .nav{height:84px;display:flex;align-items:center;gap:28px;position:relative}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.4px;white-space:nowrap}
  .logo .badge{display:grid;place-items:center;flex:none;width:42px;height:42px;border:2px solid var(--green);border-radius:50%;font-size:13px;font-family:'Poppins',Arial,sans-serif}
  .logo .name{display:flex;flex-direction:column;line-height:1.15}
  .logo .name span:last-child{font-weight:800}
  .links{margin-left:auto;display:flex;gap:26px;color:#3c474c;font-size:13.5px;font-weight:600;list-style:none;padding:0}
  .links li{display:flex}
  .links a{position:relative;padding:4px 0}
  .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--green);transition:right .2s ease}
  .links a:hover::after{right:0}
  .btn{display:inline-block;background:var(--green);padding:12px 18px;font-size:13.5px;font-weight:700;color:#0c1f14;border-radius:3px;transition:background .18s ease, transform .18s ease}
  .btn:hover{background:var(--green-light);transform:translateY(-1px)}
  .burger{display:none;margin-left:auto;width:26px;height:20px;position:relative;background:none;border:0;cursor:pointer;padding:0}
  .burger span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.2s ease}
  .burger span:nth-child(1){top:0}
  .burger span:nth-child(2){top:9px}
  .burger span:nth-child(3){top:18px}
  .burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .mobile-panel{display:none;position:absolute;top:84px;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 12px 24px rgba(9,32,46,.08);padding:10px 0;z-index:20}
  .mobile-panel.open{display:block}
  .mobile-menu-list{list-style:none;margin:0;padding:0}
  .mobile-panel a{display:block;padding:12px 20px;font-weight:600;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
  .mobile-panel .btn{margin:12px 20px 4px;text-align:center}

  /* Hero */
  .hero{height:560px;color:#fff;position:relative;background:
    linear-gradient(100deg,rgba(6,20,30,.94),rgba(6,20,30,.72) 45%,rgba(6,20,30,.25)),
    url('assets/mb-cleaning-lobby.png') center 25%/cover;
    background-attachment:fixed,fixed}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(#0000,#fff)}
  .hero .wrap{padding-top:108px;position:relative}
  .kicker{margin:0 0 14px;color:var(--green-light);font-weight:700;letter-spacing:2px;font-size:11px;text-transform:uppercase}
  h1{font-size:54px;letter-spacing:-1px}
  h1 em{color:var(--green-light);font-style:normal}
  .hero p:not(.kicker){width:460px;max-width:100%;font-size:16.5px;line-height:1.6;color:#dfe7e9;margin:18px 0 0}
  .actions{display:flex;gap:24px;align-items:center;margin-top:28px;flex-wrap:wrap}
  .call{font-size:14px;font-weight:600}
  .call a{font-weight:800;font-size:16px;color:var(--green-light)}

  /* Intro */
  .intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:88px 0}
  h2{font-size:36px;letter-spacing:-.5px}
  .intro>div:last-child{color:var(--muted);padding-top:24px;line-height:1.65;font-size:15px}
  .intro .link-more{display:inline-block;margin-top:16px;font-weight:700;color:var(--navy)}

  /* Services */
  .services{padding:84px 0;background:var(--bg-soft)}
  .heading{display:flex;justify-content:space-between;gap:60px;align-items:flex-end;margin-bottom:40px}
  .heading>p{max-width:320px;color:var(--muted);font-size:14.5px;line-height:1.6}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--line);border-radius:8px;overflow:hidden}
  .service{min-height:250px;background:#fff;padding:26px;position:relative;transition:background .2s ease}
  .service:hover{background:#fbfdf8}
  .service small{color:var(--green);font-weight:800;font-size:12.5px;letter-spacing:.5px}
  .service h3{font-size:16.5px;margin:36px 0 12px;font-weight:600}
  .service p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
  .service .arrow{position:absolute;bottom:20px;right:22px;color:var(--green);font-size:20px;transition:transform .2s ease}
  .service:hover .arrow{transform:translateX(5px)}

  /* About */
  .about{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
  .photo{background:url('assets/mb-cleaning-lobby.png') center 22%/cover;background-attachment:fixed}
  .copy{padding:80px 54px}
  .copy>p:not(.kicker){color:var(--muted);line-height:1.65;font-size:15px}
  .copy ul{list-style:none;padding:0}
  .copy li{padding:14px 0;border-top:1px solid var(--line);font-size:13.5px}
  .copy li b{font-weight:700}
  .copy li span{display:block;color:var(--muted);margin-top:3px;font-weight:400}

  /* Footer */
  .footer{background:var(--navy);color:#b9c8cb;padding:56px 0 18px}
  .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:45px;padding-bottom:40px}
  .footer h3{font-size:13px;color:#fff;margin:10px 0 14px;text-transform:uppercase;letter-spacing:.5px;font-family:'Inter',Arial,sans-serif;font-weight:700}
  .footer p,.footer li{font-size:13px;line-height:1.9;margin:0}
  .footer ul{padding:0;list-style:none}
  .footer .logo{color:#fff;margin-bottom:18px}
  .footer .contact-line{display:flex;align-items:center;gap:8px}
  .footer .contact-line svg{flex:none;opacity:.8}
  .bottom{border-top:1px solid #29404c;padding-top:18px;font-size:12px;color:#80949a;display:flex;justify-content:space-between}
  .bottom-menu-inline{list-style:none;margin:0;padding:0}
  .bottom-menu-inline li{display:inline}
  .bottom-menu-inline li:not(:last-child)::after{content:" · ";margin:0 2px}
  .bottom-menu-inline a{color:#80949a}

  /* Generička unutrašnja stranica (za nove stranice dodate u WP-u) */
  .page-hero{background:var(--navy);color:#fff;padding:70px 0 46px}
  .page-hero h1{font-size:34px;color:#fff}
  .page-content{padding:60px 0 90px;max-width:760px;margin:0 auto}
  .page-content p{color:var(--muted);line-height:1.75;font-size:15.5px;margin:0 0 18px}
  .page-content h2{font-size:24px;margin:34px 0 14px}
  .page-content h3{font-size:19px;margin:26px 0 10px}
  .page-content img{max-width:100%;height:auto;border-radius:8px;margin:18px 0}
  .page-content ul,.page-content ol{color:var(--muted);line-height:1.75;font-size:15.5px;padding-left:22px}
  .page-content a{color:var(--navy);font-weight:700;text-decoration:underline}

  .van-banner{background:var(--navy);color:#fff;padding:40px 0}
  .van-banner-inner{display:flex;align-items:center;gap:28px}
  .van-icon{flex:none;width:64px;height:64px;border-radius:50%;background:rgba(167,212,101,.12);display:flex;align-items:center;justify-content:center;color:var(--green-light)}
  .van-text{flex:1}
  .van-text h2{font-size:24px;color:#fff;margin:2px 0 6px}
  .van-text p:not(.kicker){color:#b9c8cb;font-size:14px;line-height:1.6;margin:0;max-width:560px}
  .van-banner .btn{flex:none}

  @media(max-width:760px){
    .van-banner-inner{flex-direction:column;text-align:center;gap:16px}
    .van-text p:not(.kicker){max-width:100%}
  }
  @media(max-width:900px){
    .grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){
    .links{display:none}
    .burger{display:block}
    h1{font-size:40px}
    .hero{height:500px;background-attachment:scroll,scroll}
    .hero p:not(.kicker){width:100%}
    .intro,.about{grid-template-columns:1fr;gap:26px}
    .intro{padding:60px 0}
    .heading{display:block}
    .heading>p{max-width:100%;margin-top:10px}
    .photo{height:280px;background-attachment:scroll}
    .copy{padding:50px 22px}
    .footer-grid{grid-template-columns:1fr;gap:26px}
    .bottom{display:block;line-height:2}
  }

/* Services section - standalone version for inner pages */
.services {
  padding: 84px 0;
  background: var(--bg-soft);
}

.services .wrap {
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
}

.services .heading {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: flex-end;
  margin-bottom: 40px;
}

.services .heading > div {
  flex: 1;
}

.services .heading > p {
  max-width: 320px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.services .kicker {
  margin: 0 0 14px;
  color: var(--green-light);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
}

.services .heading h2 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0;
}

.services .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.services .service-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.services .service {
  min-height: 250px;
  background: #fff;
  padding: 26px;
  position: relative;
  transition: background .2s ease;
}

.services .service:hover {
  background: #fbfdf8;
}

.services .service small {
  color: var(--green);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .5px;
}

.services .service h3 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.15;
  margin: 36px 0 12px;
  font-weight: 600;
}

.services .service p {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.services .service .arrow {
  position: absolute;
  bottom: 20px;
  right: 22px;
  color: var(--green);
  font-size: 20px;
  transition: transform .2s ease;
}

.services .service:hover .arrow {
  transform: translateX(5px);
}

/* Tablet */
@media (max-width: 900px) {
  .services .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .services {
    padding: 60px 0;
  }

  .services .heading {
    display: block;
  }

  .services .heading > p {
    max-width: 100%;
    margin-top: 10px;
  }

  .services .grid {
    grid-template-columns: 1fr;
  }

  .services .service {
    min-height: 250px;
  }
}