/*
 * Porecatu Header Institucional — Folha de Estilos Principal
 *
 * Arquitetura: Mobile-first, BEM, CSS Custom Properties
 * Compatível com WordPress 6.x + Elementor 3.x + Hello Elementor
 *
 * Índice
 * ───────────────────────────────────────────────────────────────────────────
 * 01. Tokens / Custom Properties
 * 02. Resets e base
 * 03. Top Bar
 * 04. Faixa Colorida
 * 05. Header Principal
 * 06. Logo + Brand
 * 07. Menu Desktop
 * 08. Dropdown / Sub-menu
 * 09. Selos Institucionais
 * 10. Busca (toggle)
 * 11. Botão CTA
 * 12. Hambúrguer
 * 13. Menu Mobile
 * 14. Overlay Mobile
 * 15. Sticky / Scroll behaviors
 * 16. Acessibilidade
 * 17. Animações
 * 18. Responsividade (tablet + desktop)
 * ───────────────────────────────────────────────────────────────────────────
 */

/* ── 01. TOKENS ─────────────────────────────────────────────────────────── */
.porecatu-header-wrap {
  --ph-primary:        #4120A6;
  --ph-secondary:      #F62D43;
  --ph-accent:         #05A936;
  --ph-white:          #ffffff;
  --ph-dark:           #1a0a5e;
  --ph-shadow:         rgba(0, 0, 0, 0.15);
  --ph-transition:     0.3s ease;
  --ph-radius:         4px;
  --ph-container:      1240px;
  --ph-topbar-h:       38px;
  --ph-header-h:       90px;
  --ph-faixa-h:        8px;
  --ph-z-header:       1000;
  --ph-z-menu:         1010;
  --ph-z-overlay:      1005;
  --ph-z-search:       1020;
}

/* ── 02. RESETS ─────────────────────────────────────────────────────────── */
.porecatu-header-wrap *,
.porecatu-header-wrap *::before,
.porecatu-header-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.porecatu-header-wrap ul {
  list-style: none;
}

.porecatu-header-wrap a {
  text-decoration: none;
  color: inherit;
  transition: color var(--ph-transition);
}

.porecatu-header-wrap img {
  display: block;
  max-width: 100%;
}

.porecatu-header-wrap button {
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 0;
}

/* ── 03. TOP BAR ────────────────────────────────────────────────────────── */
.porecatu-topbar {
  width: 100%;
  background-color: var(--ph-dark);
  min-height: var(--ph-topbar-h);
  display: flex;
  align-items: center;
}

.porecatu-topbar__inner {
  width: 100%;
  max-width: var(--ph-container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-end;
}

.porecatu-topbar__item {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ph-white);
  line-height: 1;
}

.porecatu-topbar__item a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ph-white);
  padding: 4px 2px;
  position: relative;
  border-radius: var(--ph-radius);
  transition: color var(--ph-transition);
}

.porecatu-topbar__item a:hover {
  color: var(--ph-secondary);
}

/* Separador entre itens */
.porecatu-topbar__item + .porecatu-topbar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 18px;
}

.porecatu-topbar__icon {
  display: inline-flex;
  align-items: center;
}

.porecatu-topbar__icon svg,
.porecatu-topbar__icon i {
  width: 13px;
  height: 13px;
  font-size: 13px;
}

/* ── 04. FAIXA COLORIDA ─────────────────────────────────────────────────── */
.porecatu-faixa {
  width: 100%;
  height: var(--ph-faixa-h);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.porecatu-faixa__block {
  display: block;
  height: 100%;
  transition: flex-grow 0.4s ease;
}

/* Ocultar no mobile */
@media (max-width: 1024px) {
  .porecatu-faixa--hide-mobile {
    display: none;
  }

  .porecatu-faixa--reduce-mobile {
    height: 4px;
  }
}

/* ── 05. HEADER PRINCIPAL ───────────────────────────────────────────────── */
.porecatu-header__main {
  width: 100%;
  background-color: var(--ph-primary);
  min-height: var(--ph-header-h);
  display: flex;
  align-items: center;
  position: relative;
  transition:
    background-color var(--ph-transition),
    box-shadow var(--ph-transition),
    min-height var(--ph-transition);
}

.porecatu-header__main.is-full-width .porecatu-header__inner {
  max-width: 100%;
  padding: 0 24px;
}

.porecatu-header__inner {
  width: 100%;
  max-width: var(--ph-container);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── 06. LOGO + BRAND ───────────────────────────────────────────────────── */
.porecatu-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}

.porecatu-header__logo {
  display: inline-block;
  flex-shrink: 0;
  transition: opacity var(--ph-transition);
}

.porecatu-header__logo:hover {
  opacity: 0.85;
}

.porecatu-header__logo img {
  width: 80px;
  height: auto;
  display: block;
}

.porecatu-header__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.porecatu-header__site-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ph-white);
  line-height: 1.2;
  white-space: nowrap;
}

.porecatu-header__site-subtitle {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
  white-space: nowrap;
}

/* ── 07. MENU DESKTOP ───────────────────────────────────────────────────── */
.porecatu-header__nav {
  flex: 1;
  display: none; /* Mobile-first: esconde por padrão */
}

.porecatu-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.porecatu-nav > li {
  position: relative;
}

.porecatu-nav > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  color: var(--ph-white);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: color var(--ph-transition);
}

/* Linha animada sob o item */
.porecatu-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background-color: var(--ph-secondary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ph-transition);
  border-radius: 2px;
}

.porecatu-nav > li > a:hover::after,
.porecatu-nav > li.current-menu-item > a::after,
.porecatu-nav > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.porecatu-nav > li > a:hover,
.porecatu-nav > li.current-menu-item > a,
.porecatu-nav > li.current-menu-ancestor > a {
  color: var(--ph-secondary);
}

/* Seta indicadora de sub-menu */
.porecatu-nav > li.menu-item-has-children > a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 4px;
  transition: transform var(--ph-transition);
}

.porecatu-nav > li.menu-item-has-children:hover > a::before {
  transform: rotate(180deg);
}

/* ── 08. DROPDOWN / SUB-MENU ────────────────────────────────────────────── */
.porecatu-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: #2a0e8a;
  border-top: 3px solid var(--ph-secondary);
  border-radius: 0 0 var(--ph-radius) var(--ph-radius);
  box-shadow: 0 8px 24px var(--ph-shadow);
  z-index: var(--ph-z-menu);
  padding: 8px 0;
  list-style: none;
  /* Controle via JS/data-dropdown */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--ph-transition),
    visibility var(--ph-transition),
    transform var(--ph-transition);
  pointer-events: none;
}

.porecatu-nav > li:hover > .sub-menu,
.porecatu-nav > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Animação "slide" override */
[data-dropdown="slide"] .porecatu-nav .sub-menu {
  transform: translateY(-10px);
}
[data-dropdown="slide"] .porecatu-nav > li:hover > .sub-menu,
[data-dropdown="slide"] .porecatu-nav > li:focus-within > .sub-menu {
  transform: translateY(0);
}

/* Animação "none" override */
[data-dropdown="none"] .porecatu-nav .sub-menu {
  transform: none;
  transition: opacity 0.15s, visibility 0.15s;
}

.porecatu-nav .sub-menu li a {
  display: block;
  padding: 9px 18px;
  color: var(--ph-white);
  font-size: 0.86rem;
  transition: background-color var(--ph-transition), color var(--ph-transition);
}

.porecatu-nav .sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ph-secondary);
}

/* Sub-sub-menu (nível 3) */
.porecatu-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  border-top: none;
  border-left: 3px solid var(--ph-secondary);
  border-radius: 0 var(--ph-radius) var(--ph-radius) 0;
}

/* ── 09. SELOS INSTITUCIONAIS ───────────────────────────────────────────── */
.porecatu-selos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

.porecatu-selos a,
.porecatu-selos span {
  display: inline-block;
  line-height: 0;
  transition: opacity var(--ph-transition), transform var(--ph-transition);
}

.porecatu-selos img {
  height: 50px;
  width: auto;
  display: block;
  border-radius: var(--ph-radius);
}

/* Hover effects */
.porecatu-selos--hover-opacity a:hover,
.porecatu-selos--hover-opacity span:hover { opacity: 0.75; }

.porecatu-selos--hover-scale  a:hover,
.porecatu-selos--hover-scale  span:hover { transform: scale(1.07); }

.porecatu-selos--hover-both   a:hover,
.porecatu-selos--hover-both   span:hover { opacity: 0.85; transform: scale(1.06); }

/* Placeholder quando sem imagem */
.porecatu-selos__placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.12);
  border: 1px dashed rgba(255,255,255,0.3);
  color: var(--ph-white);
  font-size: 0.72rem;
  padding: 0 10px;
  border-radius: var(--ph-radius);
  white-space: nowrap;
}

/* Mobile behaviors */
@media (max-width: 1024px) {
  .porecatu-selos--hide-mobile   { display: none; }

  .porecatu-selos--slider-mobile {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .porecatu-selos--slider-mobile::-webkit-scrollbar { display: none; }

  .porecatu-selos--slider-mobile a,
  .porecatu-selos--slider-mobile span {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ── 10. BUSCA (TOGGLE) ─────────────────────────────────────────────────── */
.porecatu-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ph-white);
  border-radius: 50%;
  transition: background-color var(--ph-transition), color var(--ph-transition);
  flex-shrink: 0;
}

.porecatu-header__search-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.porecatu-header__search-toggle[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.2);
}

.porecatu-search-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--ph-dark);
  padding: 16px 20px;
  z-index: var(--ph-z-search);
  box-shadow: 0 6px 20px var(--ph-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ph-transition), visibility var(--ph-transition), transform var(--ph-transition);
}

.porecatu-search-wrap.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.porecatu-search-wrap .search-form {
  display: flex;
  align-items: center;
  max-width: var(--ph-container);
  margin: 0 auto;
  gap: 8px;
}

.porecatu-search-wrap .search-field {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--ph-white);
  border-radius: var(--ph-radius);
  padding: 8px 14px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--ph-transition);
}

.porecatu-search-wrap .search-field::placeholder { color: rgba(255,255,255,0.5); }

.porecatu-search-wrap .search-field:focus { border-color: var(--ph-secondary); }

.porecatu-search-wrap .search-submit {
  background-color: var(--ph-secondary);
  color: var(--ph-white);
  border: none;
  border-radius: var(--ph-radius);
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ph-transition);
}

.porecatu-search-wrap .search-submit:hover { background-color: #d91e32; }

/* ── 11. BOTÃO CTA ──────────────────────────────────────────────────────── */
.porecatu-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  background-color: var(--ph-secondary);
  color: var(--ph-white);
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--ph-radius);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--ph-transition), transform var(--ph-transition), box-shadow var(--ph-transition);
  letter-spacing: 0.02em;
}

.porecatu-header__cta:hover {
  background-color: #c8162a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(246, 45, 67, 0.4);
}

/* ── 12. HAMBÚRGUER ─────────────────────────────────────────────────────── */
.porecatu-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--ph-radius);
  transition: background-color var(--ph-transition);
}

.porecatu-hamburger:hover {
  background-color: rgba(255,255,255,0.1);
}

.porecatu-hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--ph-white);
  border-radius: 2px;
  transition: transform var(--ph-transition), opacity var(--ph-transition), width var(--ph-transition);
  transform-origin: center;
}

/* Estado ativo (X) */
.porecatu-hamburger.is-active .porecatu-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.porecatu-hamburger.is-active .porecatu-hamburger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.porecatu-hamburger.is-active .porecatu-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 13. MENU MOBILE ────────────────────────────────────────────────────── */
.porecatu-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background-color: #2a0e8a;
  z-index: var(--ph-z-menu);
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.porecatu-mobile-menu.is-open {
  transform: translateX(0);
}

.porecatu-mobile-menu__inner {
  padding: 20px;
  padding-top: 60px; /* espaço para o botão fechar */
}

.porecatu-mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--ph-white);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--ph-transition);
}

.porecatu-mobile-menu__close:hover {
  background-color: rgba(255,255,255,0.1);
}

.porecatu-mobile-nav {
  display: flex;
  flex-direction: column;
}

.porecatu-mobile-nav li a {
  display: block;
  padding: 12px 0;
  color: var(--ph-white);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color var(--ph-transition), padding-left var(--ph-transition);
}

.porecatu-mobile-nav li a:hover {
  color: var(--ph-secondary);
  padding-left: 6px;
}

/* Sub-menu mobile */
.porecatu-mobile-nav .sub-menu {
  display: none;
  padding-left: 16px;
}

.porecatu-mobile-nav .sub-menu.is-open {
  display: block;
}

.porecatu-mobile-nav .sub-menu li a {
  font-size: 0.9rem;
  padding: 10px 0;
  color: rgba(255,255,255,0.8);
  border-bottom-color: rgba(255,255,255,0.05);
}

.porecatu-mobile-nav .menu-item-has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.porecatu-mobile-nav .menu-item-has-children > a::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--ph-secondary);
  transition: transform var(--ph-transition);
  flex-shrink: 0;
}

.porecatu-mobile-nav .menu-item-has-children.is-open > a::after {
  content: '−';
}

/* ── 14. OVERLAY MOBILE ─────────────────────────────────────────────────── */
.porecatu-mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.55);
  z-index: var(--ph-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.porecatu-mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── 15. STICKY / SCROLL BEHAVIORS ─────────────────────────────────────── */

/* Estado sticky geral */
.porecatu-header-wrap.is-sticky .porecatu-header__main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ph-z-header);
  animation: porecatu-slideDown 0.35s ease forwards;
}

/* Compensa a altura ao ficar sticky */
.porecatu-header-wrap.is-sticky::before {
  content: '';
  display: block;
  height: var(--ph-sticky-offset, 0px);
}

/* Sombra ao rolar */
.porecatu-header-wrap.has-shadow .porecatu-header__main {
  box-shadow: 0 2px 20px rgba(0,0,0,0.18);
}

/* Transparente → sólido */
.porecatu-header-wrap.is-transparent .porecatu-header__main {
  background-color: transparent;
  box-shadow: none;
}

.porecatu-header-wrap.is-transparent.scrolled .porecatu-header__main {
  background-color: var(--ph-primary);
}

/* Auto-hide */
.porecatu-header-wrap.is-hidden .porecatu-header__main {
  transform: translateY(-110%);
}

.porecatu-header-wrap .porecatu-header__main {
  transition:
    background-color var(--ph-transition),
    box-shadow var(--ph-transition),
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 16. ACESSIBILIDADE ─────────────────────────────────────────────────── */
.porecatu-header-wrap :focus-visible {
  outline: 2px solid var(--ph-secondary);
  outline-offset: 2px;
}

/* Skip link (se presente no tema) */
.porecatu-skip-link:focus {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: 9999;
  background: var(--ph-secondary);
  color: var(--ph-white);
  padding: 8px 16px;
  border-radius: var(--ph-radius);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Reduz movimento se o sistema solicitar */
@media (prefers-reduced-motion: reduce) {
  .porecatu-header-wrap *,
  .porecatu-header-wrap *::before,
  .porecatu-header-wrap *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 17. ANIMAÇÕES ──────────────────────────────────────────────────────── */
@keyframes porecatu-slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes porecatu-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 18. RESPONSIVIDADE ─────────────────────────────────────────────────── */

/* ── Lado direito do header: sempre flex ── */
.porecatu-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
 * MOBILE + TABLET  ≤ 1024px
 * Hambúrguer VISÍVEL — Menu desktop OCULTO
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Garante hambúrguer visível — !important para vencer Elementor */
  .porecatu-hamburger {
    display: flex !important;
  }

  /* Oculta o nav desktop */
  .porecatu-header__nav {
    display: none !important;
  }

  /* Nome da prefeitura oculto para poupar espaço */
  .porecatu-header__brand-text {
    display: none;
  }

  /* Logo menor */
  .porecatu-header__logo img {
    width: 55px;
  }

  /* Header menor */
  .porecatu-header__main {
    min-height: 64px;
  }

  .porecatu-header__inner {
    padding: 8px 16px;
  }

  /* CTA oculto (fica no menu mobile) */
  .porecatu-header__cta {
    display: none;
  }

  /* Top bar centralizada */
  .porecatu-topbar__inner {
    padding: 0 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .porecatu-topbar {
    min-height: 32px;
  }

  .porecatu-search-wrap {
    padding: 12px 16px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
 * DESKTOP  ≥ 1025px
 * Menu VISÍVEL — Hambúrguer OCULTO
 * ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {

  /* Exibe o nav horizontal */
  .porecatu-header__nav {
    display: flex !important;
  }

  /* Oculta o hambúrguer — !important para vencer Elementor */
  .porecatu-hamburger {
    display: none !important;
  }

  /* Separadores da top bar */
  .porecatu-topbar__item + .porecatu-topbar__item {
    padding-left: 18px;
  }

  /* Espaçamento interno maior */
  .porecatu-header__inner {
    gap: 28px;
  }

  /* Padding dos itens de menu */
  .porecatu-nav > li > a {
    padding: 12px 16px;
  }
}

/* Print */
@media print {
  .porecatu-hamburger,
  .porecatu-mobile-menu,
  .porecatu-mobile-overlay,
  .porecatu-header__search-toggle,
  .porecatu-search-wrap { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ♿ ACESSIBILIDADE — Estilos
 * Índice:
 * A1. Barra de acessibilidade (barra separada)
 * A2. Versão integrada à Top Bar
 * A3. Mobile: ícone único + dropdown
 * A4. Modo Alto Contraste (.high-contrast)
 * A5. Escala de cinza (.grayscale)
 * A6. Tamanhos de fonte (.font-small / .font-medium / .font-large)
 * A7. Outline e foco aprimorado (WCAG)
 * A8. Skip link "Ir para conteúdo"
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── A1. BARRA DE ACESSIBILIDADE ────────────────────────────────────────── */
.porecatu-a11y {
  width: 100%;
  background-color: #0d0d0d;
  min-height: 34px;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: calc(var(--ph-z-header) + 5);
}

.porecatu-a11y__inner {
  width: 100%;
  max-width: var(--ph-container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-end;
}

/* Botão da barra */
.porecatu-a11y__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  min-height: 28px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.76rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color var(--ph-transition),
    background-color var(--ph-transition),
    outline-offset var(--ph-transition);
  letter-spacing: 0.01em;
  position: relative;
}

.porecatu-a11y__btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Estado ativo (toggles: contraste, cinza, voz) */
.porecatu-a11y__btn.is-active,
.porecatu-a11y__btn[aria-pressed="true"] {
  color: #F62D43;
  background-color: rgba(246, 45, 67, 0.15);
}

.porecatu-a11y__btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #F62D43;
  border-radius: 50%;
}

.porecatu-a11y__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.porecatu-a11y__icon i,
.porecatu-a11y__icon svg {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

/* Separadores */
.porecatu-a11y__btn + .porecatu-a11y__btn {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Divisor entre grupo a11y e itens normais da topbar */
.porecatu-topbar__divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ── A2. VERSÃO INTEGRADA À TOPBAR ──────────────────────────────────────── */
.porecatu-topbar__a11y-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* Sobrescreve cores para combinar com a top bar */
.porecatu-a11y--inline .porecatu-a11y__btn {
  color: rgba(255, 255, 255, 0.65);
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.porecatu-a11y--inline .porecatu-a11y__btn:hover {
  color: #fff;
}

/* ── A3. MOBILE: ÍCONE ÚNICO + DROPDOWN ─────────────────────────────────── */

/* Ocultar botões no mobile, exibir só o toggle */
.porecatu-a11y--mobile-icon .porecatu-a11y__inner {
  display: none;
}

.porecatu-a11y--mobile-icon {
  justify-content: flex-end;
  padding-right: 16px;
}

.porecatu-a11y__mobile-toggle {
  display: none; /* Visível só no mobile via media query abaixo */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  color: rgba(255, 255, 255, 0.75);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color var(--ph-transition);
}

.porecatu-a11y__mobile-toggle:hover { color: #fff; }

.porecatu-a11y__mobile-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background-color: #111;
  border-top: 2px solid var(--ph-secondary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: var(--ph-z-search);
  border-radius: 0 0 var(--ph-radius) var(--ph-radius);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}

.porecatu-a11y__mobile-dropdown.is-open {
  display: flex;
}

.porecatu-a11y__mobile-dropdown .porecatu-a11y__btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-left: none !important;
  padding: 7px 12px;
  border-radius: 3px;
}

/* Ocultar completamente no mobile */
.porecatu-a11y--mobile-hide {
  display: none;
}

@media (max-width: 1024px) {
  .porecatu-a11y--mobile-icon .porecatu-a11y__mobile-toggle {
    display: flex;
  }
}

/* ── A4. MODO ALTO CONTRASTE ────────────────────────────────────────────── */
.high-contrast,
.high-contrast body,
.high-contrast *:not(.porecatu-a11y__btn):not(.porecatu-a11y__icon):not(svg):not(path) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.high-contrast a,
.high-contrast button {
  color: #ffff00 !important;
  background-color: #000 !important;
}

.high-contrast a:hover,
.high-contrast button:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.high-contrast img,
.high-contrast video {
  filter: contrast(1.2) brightness(0.9);
}

/* Mantém a barra de acessibilidade visível no alto contraste */
.high-contrast .porecatu-a11y {
  background-color: #111 !important;
  border-bottom: 1px solid #fff !important;
}

.high-contrast .porecatu-a11y__btn {
  color: #ffff00 !important;
  border: 1px solid rgba(255, 255, 0, 0.3) !important;
}

.high-contrast .porecatu-a11y__btn.is-active,
.high-contrast .porecatu-a11y__btn[aria-pressed="true"] {
  background-color: #ffff00 !important;
  color: #000 !important;
}

/* ── A5. ESCALA DE CINZA ────────────────────────────────────────────────── */
.grayscale {
  filter: grayscale(100%);
}

/* Botão de escala de cinza fica fora do filter */
.grayscale .porecatu-a11y__btn--grayscale {
  filter: none;
}

/* ── A6. TAMANHOS DE FONTE ──────────────────────────────────────────────── */

/* Padrão: 1rem = 16px no html */
.font-small  { font-size: 85% !important; }
.font-medium { font-size: 100% !important; }
.font-large  { font-size: 120% !important; }

/* Garante que os filhos herdem */
.font-small  body,
.font-medium body,
.font-large  body {
  font-size: inherit;
}

/* Indicador de fonte ativo na barra */
.font-small  .porecatu-a11y__btn--font-decrease,
.font-large  .porecatu-a11y__btn--font-increase {
  color: #F62D43;
}

/* ── A7. OUTLINE E FOCO APRIMORADO (WCAG 2.1 AA) ───────────────────────── */

/* Remove o outline padrão indesejado e aplica o personalizado */
.porecatu-a11y__btn:focus-visible,
.porecatu-a11y__mobile-toggle:focus-visible {
  outline: 2px solid #F62D43;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Em modo de alto contraste, usa amarelo */
.high-contrast .porecatu-a11y__btn:focus-visible {
  outline-color: #ffff00 !important;
}

/* ── A8. SKIP LINK ──────────────────────────────────────────────────────── */
.porecatu-skip-link {
  position: absolute;
  top: -100px;
  left: 6px;
  z-index: 99999;
  background: var(--ph-secondary);
  color: var(--ph-white);
  padding: 8px 18px;
  border-radius: 0 0 var(--ph-radius) var(--ph-radius);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.porecatu-skip-link:focus {
  top: 0;
}

/* ── Compatibilidade com Hello Elementor ─────────────────────────────────── */
.elementor-location-header .porecatu-header-wrap {
  display: block;
}

/* ── Estilos de impressão para a11y ──────────────────────────────────────── */
@media print {
  .porecatu-a11y { display: none !important; }
}