/* =========================
   LAYOUT.CSS — Header + Footer globais (carregar por ÚLTIMO)
   ========================= */

:root{
  --footer-h: 50px;

  --bg: #f6f7f9;
  --text: #6a5340;
  --shadow: 1px 1px 4px rgba(0,0,0,.1);

  --hover: #aec98ae3;
  --active-bg: #dfe0e5;
  --accent: #6C8747;
  --icon-hover: #8cb258;
}

body{
  padding-bottom: var(--footer-h); /* espaço para o footer fixed */
  overflow-x: clip; /* ajuda a matar scroll horizontal por 1px */
}

/* =========================
   HEADER — centrado em desktop, hamburger ok em mobile
   ========================= */

.header{
  background-color: var(--bg);
  box-shadow: var(--shadow);
  width: 100%;
  z-index: 50;
  position: relative;
}

.header ul{
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--bg);
}

/* links */
.header li a{
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text);
  font-family: "Akatab", sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

/* hover do header (só desktop) */
@media (min-width: 992px) and (hover:hover) and (pointer:fine){
  .header li a:hover{
    background-color: var(--hover);
  }
}

/* active */
.header li.active a,
.header li a.active{
  background: var(--active-bg);
  border-bottom: 2px solid var(--accent);
}

/* hamburger (base) */
.header .menu{
  clear: both;
  max-height: 0;
  overflow: hidden;
}
.header .menu-btn{ display: none; }

.header .menu-icon{
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon{
  background: #333;
  display: block;
  height: 2px;
  width: 18px;
  position: relative;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after{
  background: #333;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all .2s ease-out;
}

.header .menu-icon .navicon:before{ top: 5px; }
.header .menu-icon .navicon:after{ top: -5px; }

/* abre menu no mobile */
.header .menu-btn:checked ~ .menu{
  max-height: 100vh;              /* melhor que 100% */
  overflow: auto;                 /* se tiver mais links, não corta */
}
.header .menu-btn:checked ~ .menu-icon .navicon{ background: transparent; }
.header .menu-btn:checked ~ .menu-icon .navicon:before{ transform: rotate(-45deg); top: 0; }
.header .menu-btn:checked ~ .menu-icon .navicon:after{ transform: rotate(45deg); top: 0; }

/* mobile hamburger alinhado */
@media (max-width: 48em){
  .header{ min-height: 50px; }

  .header .menu-icon{
    position: absolute !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 10px;
    margin: 0;
    float: none !important;
  }

  .header .menu-icon .navicon{ width: 20px; }
}

/* DESKTOP: tabs centradas e SEM espaço entre elas */
@media (min-width: 48em){
  .header .menu-icon{ display: none; }

  .header .menu{
    max-height: none;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 !important;          /* sem espaço */
    float: none !important;     /* mata floats antigos */
  }

  .header li{ float: none !important; }
  .header li a{ margin: 0 !important; }

  /* se estiveres a usar Bootstrap grid dentro do header */
  .header .row{ justify-content: center; }
  .header .col-8{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}


/* =========================
   FOOTER — FIX definitivo (sem scroll horizontal no mobile)
   ========================= */
/* ===== FOOTER (limpo, sem causar overflow) ===== */
:root{ --footer-h: 50px; }

html, body{
  width: 100% !important;
  overflow-x: hidden !important; /* corta scroll do documento */
}

body{
  padding-bottom: var(--footer-h);
}

footer.footer{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;

  height: var(--footer-h) !important;
  background-color:#f6f7f9 !important;
  box-shadow: 1px 1px 4px rgba(0,0,0,.1) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  box-sizing: border-box !important;
  padding: 0 16px !important;  /* margem lateral REAL */
  overflow: hidden !important;  /* nada sai fora do footer */
}

footer.footer .container-fluid,
footer.footer .row{
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  --bs-gutter-x: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

footer.footer .connect-block{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important; /* <<< não empurra os ícones para fora */
  min-width: 0 !important;
}

footer.footer .connect{
  margin: 0 0 2px !important;
  font-size: .8rem !important;
  font-style: italic !important;
  line-height: 1 !important;
  color: #6a5340 !important;

  white-space: nowrap !important;
}

footer.footer .footer-icons{
  display: flex !important;
  gap: 10px !important;
}

footer.footer .footer-icons a,
footer.footer .footer-icons a:visited{
  color:#6a5340 !important;
  text-decoration:none !important;
}

footer.footer .footer-icons a i{
  color: inherit !important;
  transition: transform .2s ease, color .2s ease;
}

@media (min-width: 992px) and (hover:hover) and (pointer:fine){
  footer.footer .footer-icons a:hover i{
    color:#8cb258 !important;
    transform: translateY(-2px);
  }
}