/* =============================================================================
 * FioSaúde — Header (barra Área Restrita) + Rodapé de 5 colunas  [GLOBAL]
 * Redesign 2026-07. CSS escopado, carregado pelo enfold-child.
 * Fonte versionada: goldencloud/fiosaude/wp/internal/202607-home-redesign/deploy/
 * Par do arquivo PHP: enfold-child/includes/fs-header-footer.php
 * Paleta: dark #17632f · medium #1e7a3d · lime #8cc63f · texto #1e5631
 * ========================================================================== */

/* --- a barra Área Restrita vive DENTRO do topbar nativo (#header_meta) --------
 *     repaginado: fundo branco, menu secundário e ícone de busca do Enfold
 *     escondidos (a barra tem a própria busca) ------------------------------- */
#top #header_meta {
	background: #eef0ee;                 /* barra Área Restrita: cinza levemente mais escuro (como o PDF) */
	border-bottom: 1px solid #e0e4e0;
	min-height: 0;
}
#top #header_meta .container { max-width: 1310px; width: 100%; }
/* o Quick CSS do site põe .sub_menu{top:10px;line-height:30px} -> desalinha a barra; zera aqui */
#top #header_meta nav.sub_menu {
	float: none; width: 100%; margin: 0; padding: 0; border: 0;
	top: 0 !important; line-height: normal !important; font-size: 13px;
}
#top #header_meta #avia2-menu { display: none; }           /* menu Endereços/Fale/Mapa */
/* --- a busca nativa do Enfold (ícone de lupa no fim do menu) foi DESLIGADA na opção do
 *     tema em 2026-08-13 — Enfold Child → **Main Menu** → "Append Search Icon To Main Menu"
 *     (campo `header_searchicon`; fica nessa aba, não em Header). Com o elemento fora do
 *     HTML, a regra que o escondia daqui (`#top #header .menu-item-search-dropdown
 *     { display: none !important }`) virou código morto e saiu — junto com a
 *     `.responsive ... .menu-item-search-dropdown > a { font-size: 24px }` do style.css.
 *     A busca que o site usa é a NOSSA, dentro da barra Área Restrita (`.fs-search`). ---- */

/* --- os botões antigos de área restrita (widget `custom_html-4`, área 'header') foram
 *     EXCLUÍDOS do WordPress em 2026-08-12 — quem faz esse papel agora são as pílulas
 *     da barra Área Restrita. Com o widget fora, a regra que o escondia
 *     (`#top #header_main > .widget_custom_html { display: none }`) virou código morto
 *     e saiu junto: a área 'header' está vazia e o `dynamic_sidebar('header')` da
 *     functions.php (linha ~44) não emite nada quando não há widget — ao contrário do
 *     footer/sidebar do Enfold, aqui NÃO existe fallback `avia_dummy_widget()`.
 *     HTML original preservado em deploy/header-antigo-widget.html. --------------- */

/* =========================================================================
 * BARRA ÁREA RESTRITA — dentro de #header_meta
 * ========================================================================= */
#top .fs-arbar { background: transparent; font-size: 13px; }
#top .fs-arbar-in {
	max-width: none;
	margin: 0;
	padding: 9px 0;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	box-sizing: border-box;
}

/* busca */
#top .fs-arbar .fs-search {
	display: flex;
	align-items: center;
	border: 1px solid #cfd8cf;
	border-radius: 6px;                /* retângulo arredondado, como o mockup */
	overflow: hidden;
	background: #fff;
	height: 36px;
	margin: 0 !important;              /* zera o margin-bottom padrão de <form> (desalinhava) */
}
#top .fs-arbar .fs-search input[type="text"] {
	border: 0; outline: none; background: transparent;
	padding: 0 6px 0 14px; font-size: 13px; width: 140px; height: 32px;
	color: #333; box-shadow: none; margin: 0;
}
#top .fs-arbar .fs-search button {
	border: 0; background: transparent; cursor: pointer;
	padding: 0 12px; color: #1e7a3d; display: flex; align-items: center; height: 32px;
}
#top .fs-arbar .fs-search button svg { width: 16px; height: 16px; fill: currentColor; }

/* grupo área restrita: rótulo + pílulas */
#top .fs-arbar-area { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#top .fs-arbar-area .lbl {
	color: #1e5631; font-weight: 700; font-size: 13px; white-space: nowrap; margin-right: 2px;
}
#top .fs-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: #1e7a3d; color: #ffffff !important;
	padding: 7px 15px; border-radius: 20px;
	font-size: 12px; font-weight: 700; line-height: 1;
	text-decoration: none; text-transform: uppercase; letter-spacing: .3px;
	transition: background .2s;
}
#top .fs-pill:hover { background: #17632f; }
#top .fs-pill-hl { background: #8cc63f; color: #16401d !important; }   /* Orientações (destaque) */
#top .fs-pill-hl:hover { background: #7cb342; color: #16401d !important; }

/* social à direita */
#top .fs-arbar-social { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#top .fs-soc {
	width: 30px; height: 30px; border-radius: 50%;
	background: #1e7a3d; display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s;
}
#top .fs-soc:hover { background: #17632f; }
#top .fs-soc svg { width: 15px; height: 15px; fill: #fff; }

/* =========================================================================
 * MENU AO LADO DO LOGO (layout Enfold "logo_left menu_right")  +  botão Rede.
 * Antes o menu era uma barra verde abaixo do logo; agora fica na MESMA linha,
 * à direita do logo, sobre branco — como o PDF. Overrides:
 *   - texto do menu era BRANCO (Quick CSS da barra verde) -> vira verde escuro;
 *   - o nav tinha posição absoluta herdada -> vira estático, em flex à direita.
 * ========================================================================= */
@media (min-width: 990px) {
	/* a linha do logo usa a MESMA caixa do topbar (centrada, mesma largura/padding)
	 * -> logo alinha à esquerda com a busca; botão Rede alinha à direita com o social */
	#top #header_main .container.av-logo-container {
		display: block !important; float: none !important;
		max-width: 1310px !important; width: auto !important;
		margin-left: auto !important; margin-right: auto !important;
		box-sizing: border-box;
	}
	#top #header_main .av-logo-container .inner-container {
		display: flex; align-items: center; width: 100%; padding: 0;
	}
	#top #header_main .my-logo-buttons-wrapper {
		flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
	}
	#top #header_main nav.main_menu { flex: 1 1 auto; min-width: 0; position: static !important; }
	#top #header_main .av-main-nav-wrap { position: static !important; float: none; width: 100%; }
	#top #header_main .av-main-nav {
		display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap;
		width: 100%;
	}
	#top #header_main .av-main-nav > li { height: auto; }
}
/* cor + caixa do menu sobre branco (sobrepõe o Quick CSS branco/uppercase + fundo verde
 * (#076240) que o CSS dinâmico do Enfold pinta em cada link da barra verde) */
#top #header .av-main-nav > li > a { background: transparent !important; }
#top #header .av-main-nav > li > a .avia-menu-fx,
#top #header .av-main-nav > li > a .avia-menu-fx .avia-arrow-wrap { background: transparent !important; }
#top #header .av-main-nav > li > a .avia-menu-text,
#top #header .av-main-nav > li > a .avia-menu-subtext {
	color: #1e5631 !important; text-transform: none !important; font-weight: 600 !important;
	font-size: 16px !important;                 /* fonte do menu um pouco maior (pedido do Daniel) */
}
#top #header .av-main-nav > li > a:hover .avia-menu-text,
#top #header .av-main-nav > li.current-menu-item > a .avia-menu-text { color: #1e7a3d !important; }

/* logo: Enfold posiciona .logo em ABSOLUTE (centra vertical); aqui ela precisa fluir
 * na coluna (brasão em cima, ANS embaixo), menor, centralizada na linha */
#top #header_main .logo {
	position: static !important; height: auto !important; width: auto !important;
	line-height: 0; margin: 0; display: block;
}
#top #header_main .logo a { height: auto !important; display: inline-block; }
#top #header_main .logo img { height: auto !important; max-height: 44px; width: auto !important; }

/* tira a linha verde (#8bba34) que o Quick CSS põe embaixo do menu */
#top #header_main { border-bottom: 0 !important; }
#top #header .container_wrap.container_wrap_logo { border-bottom: 0 !important; }

/* fundo branco OPACO na linha do logo/menu (senão, com o header inteiro sticky,
 * o conteúdo aparece por trás ao rolar) */
#top #header_main { background: #ffffff !important; }

/* =========================================================================
 * Botão "Rede Credenciada" — contorno verde sobre branco, no fim da linha.
 *
 * É um ITEM DE MENU normal (último do topo, location `avia`) com a classe CSS
 * `fs-redebtn` no <li>. Todo o comportamento (dropdown, hover, teclado, burger)
 * vem do Enfold; aqui só se pinta a pílula. Regras SÓ no desktop: dentro do
 * burger (<990px) ele deve parecer um item de menu comum, e o jeito mais seguro
 * de garantir isso é não escrever nada que chegue lá.
 * ========================================================================= */
@media (min-width: 990px) {
	/* o LI ocupa a altura inteira da linha (align-self: stretch) e centra a pílula
	 * dentro dele. Não é estética: o submenu do Enfold abre em `top: 100%` do LI,
	 * então é a altura do LI que faz o painel descer a partir da BASE do header —
	 * com o LI encolhido à altura da pílula, o dropdown subiria por cima dele. */
	#top #header .av-main-nav > li.fs-redebtn {
		margin-left: 18px; flex: 0 0 auto; align-self: stretch;
		display: flex; align-items: center; line-height: normal;
	}
	#top #header .av-main-nav > li.fs-redebtn > a {
		display: inline-flex; align-items: center;
		padding: 8px 20px !important;              /* Enfold impõe 0 13px */
		/* o CSS dinâmico do Enfold põe height/line-height = altura do header (88px)
		 * em TODO `.av-main-nav > li > a`; sem zerar isso a pílula vira um retângulo
		 * alto de cantos arredondados. A âncora solta antiga nunca passava por aqui. */
		height: auto !important; line-height: 1 !important;
		border: 2px solid #1e7a3d; border-radius: 24px;
		background: transparent !important;
		transition: background .2s, color .2s;
	}
	#top #header .av-main-nav > li.fs-redebtn > a .avia-menu-text {
		color: #1e7a3d !important; font-weight: 700 !important;
		font-size: 14px !important; line-height: 1 !important; white-space: nowrap;
	}
	/* a pílula fica preenchida enquanto o dropdown está aberto -> o gatilho é o
	 * :hover do LI, não do A: descendo o mouse pro submenu o A perde o hover, o LI não */
	#top #header .av-main-nav > li.fs-redebtn:hover > a { background: #1e7a3d !important; }
	#top #header .av-main-nav > li.fs-redebtn:hover > a .avia-menu-text,
	#top #header .av-main-nav > li.fs-redebtn.current-menu-item > a .avia-menu-text,
	#top #header .av-main-nav > li.fs-redebtn.current-menu-ancestor > a .avia-menu-text {
		color: #ffffff !important;
	}
	#top #header .av-main-nav > li.fs-redebtn.current-menu-item > a,
	#top #header .av-main-nav > li.fs-redebtn.current-menu-ancestor > a {
		background: #1e7a3d !important;
	}
	/* sublinhado animado e bullet do Enfold não fazem sentido numa pílula */
	#top #header .av-main-nav > li.fs-redebtn > a .avia-menu-fx,
	#top #header .av-main-nav > li.fs-redebtn > a .avia-bullet { display: none !important; }

	/* Submenu ancorado à DIREITA. O padrão do Enfold é `left: 0` (abre pra direita),
	 * e este é o último item da linha: com 208px de largura ele vazaria a borda da
	 * tela em viewports estreitas. `right: 0` alinha o painel pela direita da pílula.
	 * A largura fica nos 208px do tema de propósito — o 3º nível do Enfold é
	 * posicionado com `left: -207px` fixo (layout.css:1648) e desalinharia se mudasse. */
	#top #header .av-main-nav > li.fs-redebtn > ul.sub-menu { left: auto; right: 0; }
}

/* selo ANS (imagem) sob o logo (JS insere .fs-ans-cap dentro do wrapper do logo) */
#top .av-logo-container img.fs-ans-cap {
	display: block; width: auto; height: 18px; margin: 5px 0 0 1px; max-width: none;
}

/* =========================================================================
 * RODAPÉ DE 5 COLUNAS — via ava_before_footer (fica acima do bloco de endereço)
 * ========================================================================= */
#top .fs-foot5 {
	background: #f4f6f4;
	padding: 42px 0 34px;
	border-top: 1px solid #e4e8e4;
}
#top .fs-foot5-in {
	max-width: 1200px; margin: 0 auto; padding: 0 30px;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
	box-sizing: border-box;
}
#top .fs-foot5 .fs-foot5-col h4 { margin: 0 0 14px; font-size: 15px; line-height: 1.25; }
#top .fs-foot5 .fs-foot5-col h4 a { color: #1e5631 !important; text-decoration: none; font-weight: 700; }
#top .fs-foot5 .fs-foot5-col h4 a:hover { color: #1e7a3d !important; }
#top .fs-foot5 .fs-foot5-col ul { list-style: none; margin: 0; padding: 0; }
#top .fs-foot5 .fs-foot5-col li { margin: 0 0 9px; }
#top .fs-foot5 .fs-foot5-col li a {
	color: #6a746a !important; text-decoration: none; font-size: 13.5px; line-height: 1.4;
	transition: color .15s;
}
#top .fs-foot5 .fs-foot5-col li a:hover { color: #1e7a3d !important; }

/* --- faixa final, centralizada: linha institucional da FioSaúde (endereço + filiação)
 *     em cima e a assinatura "Desenvolvido por Golden Cloud Apps" + nuvem embaixo.
 *     Ambas resgatadas do rodapé antigo (que escondemos logo abaixo). -------------- */
#top .fs-foot5-sig {
	max-width: 1200px; margin: 30px auto 0; padding: 16px 30px 0;
	border-top: 1px solid #e4e8e4; text-align: center; box-sizing: border-box;
}
/* linha da FioSaúde: um tom mais escuro que os links das colunas -> é a informação
 * principal da faixa; o separador "·" fica claro pra não competir com o texto */
#top .fs-foot5 .fs-foot5-meta {
	margin: 0 0 8px; color: #4a544a; font-size: 13.5px; line-height: 1.6;
}
#top .fs-foot5-meta .fs-foot5-part { white-space: nowrap; }
/* padding assimétrico de propósito: à direita do "·" já existe o espaço do HTML
 * (o ponto de quebra), então aqui só se completa o vão da esquerda */
#top .fs-foot5-meta .fs-foot5-sep { color: #b3bdb3; padding: 0 3px 0 7px; }
/* "Unidas" é o único link da linha: herda a cor do texto e se anuncia pelo sublinhado.
 * Pintá-lo de verde faria um ponto solto no meio do endereço; o verde fica pro hover. */
#top .fs-foot5-meta a {
	color: inherit !important; text-decoration: underline;
	text-underline-offset: 2px; transition: color .15s;
}
#top .fs-foot5-meta a:hover { color: #1e7a3d !important; }

/* assinatura Golden Cloud: menor e mais clara — é crédito, não informação do site */
#top .fs-foot5-sig .fs-foot5-gc {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	color: #8b948b !important; text-decoration: none; font-size: 12.5px; line-height: 1;
	transition: color .15s;
}
#top .fs-foot5-sig .fs-foot5-gc:hover { color: #1e7a3d !important; }
/* o ícone herda a cor do link (o Enfold pinta via av-no-color) e casa o tamanho do rodapé antigo */
#top .fs-foot5-sig .fs-gc-icon,
#top .fs-foot5-sig .fs-gc-icon .av-icon-char { color: inherit !important; }
#top .fs-foot5-sig .fs-gc-icon .av-icon-char { font-size: 18px; line-height: 18px; }

/* --- o rodapé nativo do Enfold (#footer) não é mais RENDERIZADO — antes ele era só
 *     escondido daqui por `#top #footer { display: none }`, regra que saiu em 2026-08-12.
 *     Duas mudanças no painel a tornaram morta: o widget antigo (custom_html-5, área
 *     "Footer 1") foi excluído e a opção do tema virou "Don't display the socket &
 *     footer widgets" (Enfold → Footer  ==  `display_widgets_socket = nofooterarea`
 *     na option `avia_options_enfold_child`).
 *     ⚠️ Não basta apagar o widget: com a área de widget VAZIA e a opção ainda ligada,
 *     o Enfold preenche a coluna com o placeholder dele ("Interesting links / Here are
 *     some interesting links for you!", avia_dummy_widget) — em inglês, no rodapé do
 *     site inteiro. São os dois passos, nessa ordem.
 *     Nosso `.fs-foot5` é independente disso: vem do hook `ava_before_footer`, que o
 *     footer.php do Enfold dispara na linha 24, antes de qualquer checagem de opção.
 *     HTML original preservado em deploy/rodape-antigo-widget.html. --------------- */

/* =========================================================================
 * RESPONSIVO
 * ========================================================================= */
@media (max-width: 989px) {
	/* "Rede Credenciada" NÃO se esconde mais aqui: como item de menu, ele entra no
	 * burger junto com o resto (antes, sendo HTML solto, era escondido e o header
	 * ficava sem caminho nenhum pro /rede/ no celular). */
	#top #header_meta { display: none; }        /* barra Área Restrita some do topo -> vai pro burger */

	/* meus <li> injetados no ul do burger: sem a borda/fundo/padding de item de menu */
	#top .av-burger-overlay #av-burger-menu-ul > li.fs-mob-top-li,
	#top .av-burger-overlay #av-burger-menu-ul > li.fs-mob-social-li {
		border: 0 !important; background: none !important; margin: 0 !important; list-style: none !important;
	}
	#top .av-burger-overlay #av-burger-menu-ul > li.fs-mob-top-li { padding: 46px 26px 12px !important; }
	#top .av-burger-overlay #av-burger-menu-ul > li.fs-mob-social-li { padding: 4px 26px 8px !important; }

	/* ---- conteúdo injetado DENTRO do menu burger (overlay branco).
	 *      prefixo #top p/ ganhar dos estilos base #top .fs-arbar-* ---- */
	#top .av-burger-overlay .fs-mob-top { padding: 4px 0; margin: 0 0 4px; }
	#top .av-burger-overlay .fs-mob-top .fs-search {
		display: flex; align-items: center; width: 100%; height: 42px; margin: 0 0 16px;
		border: 1px solid #cfd8cf; border-radius: 6px; overflow: hidden; background: #fff;
	}
	#top .av-burger-overlay .fs-mob-top .fs-search input[type="text"] {
		flex: 1 1 auto; border: 0; outline: none; background: transparent;
		padding: 0 10px; height: 40px; font-size: 16px; color: #333; margin: 0; box-shadow: none; width: auto;
	}
	#top .av-burger-overlay .fs-mob-top .fs-search button {
		border: 0; background: transparent; color: #1e7a3d; padding: 0 14px; display: flex; align-items: center; height: 40px;
	}
	#top .av-burger-overlay .fs-mob-top .fs-search button svg { width: 18px; height: 18px; fill: currentColor; }
	#top .av-burger-overlay .fs-mob-top .fs-arbar-area { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
	#top .av-burger-overlay .fs-mob-top .fs-arbar-area .lbl { color: #1e5631; font-weight: 700; font-size: 14px; margin: 0 0 2px; }
	#top .av-burger-overlay .fs-mob-top .fs-pill { justify-content: center; padding: 12px 14px; font-size: 13px; border-radius: 26px; }
	#top .av-burger-overlay .fs-mob-social {
		display: flex; gap: 14px; justify-content: center; margin: 12px 0 0; padding: 18px 0 4px; border-top: 1px solid #e4e8e4;
	}
	#top .av-burger-overlay .fs-mob-social .fs-soc {
		width: 42px !important; height: 42px !important; padding: 0 !important;
		border-radius: 50% !important; display: inline-flex !important; flex: 0 0 auto;
	}
	#top .av-burger-overlay .fs-mob-social .fs-soc svg { width: 19px; height: 19px; }
}
@media (max-width: 900px) {
	#top .fs-foot5-in { grid-template-columns: repeat(2, 1fr); gap: 22px; }
	#top .fs-arbar-in { justify-content: center; }
	#top .fs-arbar-social { margin-left: 0; }
}
@media (max-width: 520px) {
	#top .fs-foot5-in { grid-template-columns: 1fr; }
	/* a linha da FioSaúde quebra em vários pedaços aqui: separador mais justo */
	#top .fs-foot5-meta .fs-foot5-sep { padding: 0 1px 0 5px; }
	#top .fs-foot5 .fs-foot5-meta { font-size: 13px; }
	#top .fs-arbar .fs-search input[type="text"] { width: 110px; }
	#top .fs-pill { padding: 6px 12px; font-size: 11px; }
}