/* ===================================================================
   site-common.css
   Shared styles for header, footer, nav, and back-to-top button.
   Loaded on every page via <link rel="stylesheet" href="site-common.css">
   Edit this ONE file to change header/footer look across the whole site.
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
:root{
  --red: #EB1000;
  --green: #336532;
  --green-dark: #244a23;
  --dark: #2b2b2b;
  --gray: #6b6b6b;
  --light-bg: #f7f7f7;
  --header-h: 92px;
  --header-h-mobile: 72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{ overflow-x:hidden; }
body{
  margin:0;
  font-family: 'Roboto', sans-serif;
  color:var(--dark);
  background:#fff;
  padding-top:var(--header-h);
}

/* ===== Header ===== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  background:#fff;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  height:var(--header-h);
  display:flex;
  align-items:center;
}
.header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  gap:24px;
}
.logo-group{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.site-header img.logo{ height:54px; }
.site-header img.partner-badge{ height:40px; }

.main-nav > ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px; }
.main-nav{ display:flex; }
.header-right{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  color:var(--dark);
  text-decoration:none;
  font-size:14.5px;
  font-weight:600;
  padding:10px 0;
  display:inline-block;
  letter-spacing:.2px;
}
.main-nav > ul > li > a:hover{ color:var(--red); }
.has-submenu{ position:relative; }
.has-submenu > a::after{ content:"▾"; font-size:10px; margin-left:5px; display:inline-block; }
.submenu{
  position:absolute;
  top:100%; left:0;
  width:300px;
  background:#fff;
  list-style:none;
  margin:0; padding:0;
  box-shadow:0 14px 30px rgba(0,0,0,.14);
  border-radius:4px;
  opacity:0; visibility:hidden;
  transform:translateY(6px);
  transition:all .18s ease;
}
.has-submenu:hover .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu li{ border-bottom:1px solid #eee; }
.submenu li:last-child{ border-bottom:none; }
.submenu li a{ display:block; padding:16px 22px; font-size:14.5px; font-weight:600; white-space:nowrap; color:var(--dark); }
.submenu li a:hover{ background:var(--green); color:#fff; }
.nav-contact-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.btn-contact{
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:10px 22px;
  border-radius:3px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.3px;
  transition:background .2s ease;
  white-space:nowrap;
}
.btn-contact:hover{ background:var(--green-dark); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px; height:34px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:var(--dark); transition:all .2s ease; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  body{ padding-top:var(--header-h-mobile); }
  .site-header{ height:var(--header-h-mobile); }
  .site-header img.logo{ height:40px; }
  .site-header img.partner-badge{ height:30px; }
  .header-inner{ gap:12px; }
  .logo-group{ gap:12px; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-contact{ display:none; }
  .nav-contact-mobile{ display:block; margin-top:6px; }
  .nav-contact-mobile a{
    background:var(--green);
    color:#fff !important;
    text-align:center;
    border-radius:3px;
    border-bottom:none !important;
    font-weight:600;
  }
  .nav-contact-mobile a:hover{ background:var(--green-dark); }
  .main-nav{
    position:fixed;
    top:var(--header-h-mobile); left:0; right:0;
    background:#fff;
    flex-direction:column;
    max-height:0;
    overflow:hidden;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:400px; }
  .main-nav > ul{ flex-direction:column; align-items:flex-start; gap:0; width:100%; padding:10px 5% 20px; }
  .main-nav > ul > li{ width:100%; }
  .main-nav a{ width:100%; padding:12px 0; border-bottom:1px solid #f0f0f0; }
  .has-submenu > a::after{ float:right; }
  .submenu{
    position:static;
    transform:none;
    opacity:1; visibility:visible;
    box-shadow:none;
    display:none;
    min-width:0;
    padding:0 0 0 16px;
    background:var(--light-bg);
  }
  .has-submenu.open .submenu{ display:block; }
  .has-submenu:hover .submenu{ display:none; }
  .has-submenu.open:hover .submenu{ display:block; }
}

/* ===== Breadcrumb (used on subpages) ===== */
.breadcrumb{padding:14px 8% 0;font-size:13px;color:var(--gray);}
.breadcrumb a{color:var(--red);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ===== Footer ===== */
footer{
  background:#336532;
  color:#ccc;
  padding:36px 8% 22px;
  text-align:center;
}
footer h3, footer h4{
  color:#fff;
  font-weight:600;
  margin-bottom:10px;
}
.contact-text{
  font-size:14px;
  color:#fff;
  margin:0 0 18px;
}
/* Links inside the footer contact line should look like the
   surrounding text, not the browser's default blue/purple link color. */
.contact-text a{
  color:#fff;
  text-decoration:none;
}
.contact-text a:hover{
  color:#fff;
  text-decoration:underline;
}
.social-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.social-row a{
  width:40px; height:40px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  transition:all .2s ease;
}
.social-row a svg{ width:18px; height:18px; }
.social-row a:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.copyright{ font-size:12.5px; color:rgba(255,255,255,.65); }

/* ===== Floating action buttons (Email / WhatsApp / Back to Top) ===== */
.floating-actions{
  position:fixed;
  right:0;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:3px;
  z-index:998;
}
.floating-actions a, .floating-actions button{
  width:48px; height:48px;
  border-radius:8px 0 0 8px;
  background:#01cc00;
  color:#fff;
  border:none;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  transition:opacity .18s ease;
}
.floating-actions a{ display:flex; }
.floating-actions a:hover, .floating-actions button:hover{ opacity:.9; }
.floating-actions svg{ width:22px; height:22px; }
.fa-backtotop{ display:none; }
@media (max-width:600px){
  .floating-actions{ bottom:14px; gap:2px; }
  .floating-actions a, .floating-actions button{ width:42px; height:42px; }
  .floating-actions svg{ width:19px; height:19px; }
}