/*
 Theme Name:   Storefront Child — K-Plugins SaaS
 Template:     storefront
 Description:  Variante do child-minimo, específica para o K-Associados
 *         WordPress que roda o K-Associados como SaaS multi-conta.
 *               Adiciona header-kassoc.php/footer-kassoc.php — uma única
 *               variante de cabeçalho/rodapé que se personaliza por conta
 *               em tempo de execução (logo, cor, nome, breadcrumb), em vez
 *               de um arquivo por associação.
 Author:       Claudio Kubiaki — K-Plugins WP
 Author URI:   https://k-plugins.com
 Template:     storefront
 Version:      1.0.0
 License:      GPL-2.0+
 */

/* Breadcrumb simples, sem depender de plugin de SEO. */
.kassoc-breadcrumb {
	font-size: 13px;
	color: #666;
	padding: 10px 0;
	max-width: 1100px;
	margin: 0 auto;
}
.kassoc-breadcrumb a { color: #666; text-decoration: none; }
.kassoc-breadcrumb a:hover { text-decoration: underline; }
.kassoc-breadcrumb .separador { margin: 0 6px; color: #bbb; }
.kassoc-breadcrumb .atual { color: #222; font-weight: 600; }

/* Cabeçalho minimalista do SaaS — não usa o header.php "de loja" do
   Storefront (sem busca, sem carrinho, sem menu de produto). */
.kassoc-header-saas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.kassoc-header-saas .marca { display: flex; align-items: center; gap: 10px; }
.kassoc-header-saas .marca img { max-height: 72px; max-width: 288px; object-fit: contain; }
.kassoc-header-saas .marca span { font-weight: 700; font-size: 16px; color: #222; }
.kassoc-header-saas nav.kassoc-nav a { margin-left: 16px; font-size: 14px; color: #444; text-decoration: none; }
.kassoc-header-saas nav.kassoc-nav a:hover { text-decoration: underline; }

/* Checkbox "fantasma" que guarda o estado aberto/fechado do menu.
   Fica fora da tela em vez de display:none para continuar focável
   por teclado/leitor de tela. */
.kassoc-menu-toggle-input {
	position: absolute;
	left: -9999px;
}

/* Botão hamburger: escondido em telas largas, só aparece no mobile
   (ver media query abaixo). */
.kassoc-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.kassoc-menu-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--kassoc-saas-cor, #2563eb);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

/* Animação do ícone para "X" quando o menu está aberto. */
.kassoc-menu-toggle-input:checked ~ .kassoc-menu-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.kassoc-menu-toggle-input:checked ~ .kassoc-menu-toggle span:nth-child(2) {
	opacity: 0;
}
.kassoc-menu-toggle-input:checked ~ .kassoc-menu-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 680px) {
	.kassoc-header-saas {
		flex-wrap: wrap;
	}
	.kassoc-menu-toggle {
		display: flex;
	}
	.kassoc-header-saas nav.kassoc-nav {
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: max-height .25s ease;
	}
	.kassoc-header-saas nav.kassoc-nav a {
		margin: 0;
		padding: 10px 0;
		border-top: 1px solid #eee;
	}
	/* Menu abre quando o checkbox é marcado pelo clique no label. */
	.kassoc-menu-toggle-input:checked ~ nav.kassoc-nav {
		max-height: 320px;
	}
}

/* ==========================================================================
   K-Terapeuta — mesma estrutura/comportamento acima, namespace .kterp-*
   para conviver com .kassoc-* no mesmo tema sem colisão de seletor.
   ========================================================================== */

.kterp-breadcrumb {
	font-size: 13px;
	color: #666;
	padding: 10px 0;
	max-width: 1100px;
	margin: 0 auto;
}
.kterp-breadcrumb a { color: #666; text-decoration: none; }
.kterp-breadcrumb a:hover { text-decoration: underline; }
.kterp-breadcrumb .separador { margin: 0 6px; color: #bbb; }
.kterp-breadcrumb .atual { color: #222; font-weight: 600; }

.kterp-header-saas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.kterp-header-saas .marca { display: flex; align-items: center; gap: 10px; }
.kterp-header-saas .marca img { max-height: 72px; max-width: 288px; object-fit: contain; }
.kterp-header-saas .marca span { font-weight: 700; font-size: 16px; color: #222; }
.kterp-header-saas nav.kterp-nav a { margin-left: 16px; font-size: 14px; color: #444; text-decoration: none; }
.kterp-header-saas nav.kterp-nav a:hover { text-decoration: underline; }

/* Container do conteúdo (painel, home, catálogo, login) — sem isso, o
   <main> renderiza colado na borda esquerda da viewport assim que sai
   do cabeçalho/breadcrumb (que TÊM max-width próprio), porque
   header-kterp.php substitui por completo a estrutura de container do
   Storefront (.storefront-container/.content-area), que normalmente
   forneceria esse espaçamento de graça. Mesma largura/padding do
   cabeçalho, para a página inteira ficar visualmente alinhada. */
.kterp-main-saas {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 20px 60px;
	box-sizing: border-box;
}

.kterp-menu-toggle-input {
	position: absolute;
	left: -9999px;
}

.kterp-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.kterp-menu-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--kterp-saas-cor, #1a7a5c);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.kterp-menu-toggle-input:checked ~ .kterp-menu-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.kterp-menu-toggle-input:checked ~ .kterp-menu-toggle span:nth-child(2) {
	opacity: 0;
}
.kterp-menu-toggle-input:checked ~ .kterp-menu-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 680px) {
	.kterp-header-saas {
		flex-wrap: wrap;
	}
	.kterp-menu-toggle {
		display: flex;
	}
	.kterp-header-saas nav.kterp-nav {
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: max-height .25s ease;
	}
	.kterp-header-saas nav.kterp-nav a {
		margin: 0;
		padding: 10px 0;
		border-top: 1px solid #eee;
	}
	.kterp-menu-toggle-input:checked ~ nav.kterp-nav {
		max-height: 320px;
	}
}