/*
 * r7-header.css
 * Extraído do <style> inline do header.php.
 * Antes: ~9-10KB de CSS eram reenviados no HTML em TODA página, sem cache de navegador/CDN.
 * Agora: arquivo estático, versionável e cacheável (browser cache + CDN edge cache).
 * Coloque este arquivo em: /wp-content/themes/comidinhas-do-chef/css/r7-header.css
 */

.visually-hidden {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

#r7-header .r7-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row
}

#r7-header .r7-menu__item {
  list-style: none;
  position: relative;
  margin: 0
}

@media screen and (max-width:1023px) {
  #r7-header .r7-menu__item:nth-child(n+5):not(#r7-header .r7-menu__item:last-child):not(#r7-header .r7-menu__item--responsive) {
    display: none
  }
}

@media screen and (max-width:620px) {
  #r7-header .r7-menu__item:nth-child(n+4):not(#r7-header .r7-menu__item:last-child):not(#r7-header .r7-menu__item--responsive) {
    display: none
  }
}

@media only screen and (max-width:520px) {
  #r7-header .r7-menu__item {
    display: none
  }
}

#r7-header .r7-menu__item--responsive {
  width: 50%;
  display: none
}

@media screen and (max-width:1023px) {
  #r7-header .r7-menu__item--responsive:nth-child(n+5) {
    display: flex
  }
}

@media screen and (max-width:620px) {
  #r7-header .r7-menu__item--responsive:nth-child(n+4) {
    display: flex
  }
}

@media only screen and (max-width:520px) {
  #r7-header .r7-menu__item--responsive {
    display: flex;
    width: 100%
  }
}

#r7-header .r7-menu__item--dropdown {
  display: none
}

@media screen and (max-width:1023px) {
  #r7-header .r7-menu__item--dropdown {
    display: block
  }
}

@media only screen and (min-width:1023px) {
  #r7-header .r7-menu__item--hasSubmenu:hover .r7-submenu__list {
    display: block
  }

  #r7-header .r7-menu__item--hasSubmenu:hover .r7-submenu__list--responsive {
    display: flex
  }
}

#r7-header .r7-menu__item--hasSubmenu:nth-child(n+7) .r7-submenu__list {
  right: 0
}

#r7-header .r7-menu__item--hasSubmenu:nth-child(n+7) {
  font-size: inherit
}

@media only screen and (min-width:1023px) {
  #r7-header .r7-menu__item--hasSubmenu:hover::after {
    left: 50%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-width: 8px 11px 0 11px;
    top: 38px;
    margin-left: -10px;
    border-top-color: inherit;
    z-index: 99999999
  }
}

#r7-header .r7-menu__link {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px;
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  outline: none
}

#r7-header .r7-menu__link:hover {
  color: #0071bd;
  text-decoration: underline
}

@media only screen and (max-width:1023px) {
  #r7-header .r7-menu__link:hover {
    text-decoration: none
  }
}

#r7-header .r7-menu__sub {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1
}

#r7-header .r7-submenu {
  font-family: "Open Sans", sans-serif
}

#r7-header .r7-submenu__wrapper-group {
  display: flex;
  padding-bottom: 10px
}

#r7-header .r7-submenu__group-list {
  background-color: #fafafa;
  list-style: none;
  padding: 0
}

#r7-header .r7-submenu__list {
  display: none;
  position: absolute;
  background: #fff;
  -webkit-box-shadow: 0px 1px 9px 7px #d3d0d0;
  box-shadow: 0px 1px 9px 7px #d3d0d0;
  padding: 0;
  padding-top: 5px;
  z-index: 99999999;
  text-align: initial
}

#r7-header .r7-submenu__list--responsive {
  flex-wrap: wrap;
  width: 440px;
  padding-left: 40px
}

#r7-header .r7-submenu__list--responsive.active {
  display: flex;
  border-bottom: 1px solid #0071bd;
  right: 0;
  z-index: 9999999999
}

@media only screen and (max-width:520px) {
  #r7-header .r7-submenu__list--responsive.active {
    margin-top: 12px;
    width: 310px
  }
}

#r7-header .r7-submenu__item {
  background-color: #fff;
  width: 130px;
  margin: 10px;
  list-style: none
}

#r7-header .r7-submenu__item--column {
  padding: 10px 30px 0px 10px;
  border-right: 1px solid #e1e1e1;
  margin: 0
}

#r7-header .r7-submenu__link {
  text-decoration: none;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0px;
  font-family: "Open Sans", sans-serif
}

#r7-header .r7-submenu__link:hover {
  text-decoration: underline
}

#r7-header {
  height: auto !important;
  max-width: calc(100vw - 60px) !important;
  width: 100% !important
}

/*
 * Fix de stacking context: a tag <header> em si não tinha position/z-index,
 * então o z-index:99999999 do .r7-header (abaixo) só valia DENTRO do header,
 * não contra o conteúdo da página (título, breadcrumb) que vem depois no DOM.
 * Ao dar position + z-index diretamente na tag <header>, criamos um contexto
 * de empilhamento próprio que fica acima de qualquer coisa fora dele —
 * inclusive o submenu dropdown, que agora aparece corretamente por cima do título.
 */
header {
  position: relative;
  z-index: 999999;
}

.r7-header {
  background-color: #fff;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #0071bd;
  align-items: center;
  padding: initial;
  width: auto;
  margin-left: auto;
  margin-top: auto;
  position: relative;
  z-index: 99999999
}

@media(max-width:520px) {
  .r7-header {
    justify-content: space-between;
    padding-right: 30px;
    padding-left: 30px
  }
}

.r7-logo {
  fill: #0071bd;
  margin: 0;
  align-items: center;
  display: flex;
  width: 24px;
  margin-right: 16px
}

.r7-dropdown-button {
  text-transform: uppercase;
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0071bd;
  background-color: transparent;
  border: transparent;
  outline: none
}

.r7-dropdown-button__arrow {
  height: 10px;
  fill: #0071bd;
  width: 25px;
  margin-right: 25px;
  pointer-events: none
}

.r7-dropdown-button::before {
  content: "Mais"
}

@media only screen and (max-width:1023px) {
  .r7-dropdown-button::before {
    display: inline-block;
    padding-right: 7px;
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    outline: none;
    color: #0071bd
  }
}

@media only screen and (max-width:520px) {
  .r7-dropdown-button::before {
    content: "Navegar"
  }
}

.r7-dropdown-button.r7-menu__link:hover {
  text-decoration: none
}

.r7-dropdown-button.active .r7-dropdown-button__arrow {
  transform: rotate(180deg)
}

.adsbygoogle {
  opacity: 1 !important;
  transition: none !important;
}

/* Anúncio topo — evita CLS reservando altura, sem depender de JS/setTimeout */
.r7-anuncio.r7-new {
  background-color: #fff;
  height: 50px;
  opacity: 0;
  animation: r7-anuncio-fade 0.8s ease 10s forwards;
}

@keyframes r7-anuncio-fade {
  to { opacity: 1; }
}