/*
 * header.css
 * Estilos del header del tema O Tinglado.
 * Scope: .ot-header — fondo azul (#007bc4), textos y SVGs brancos.
 *
 * Móbil: marca (logo + Xunta) | hamburguesa; redes dentro do panel ao abrir.
 * Escritorio: logo | menú centrado | redes + Xunta.
 *
 * Altura: 96px móbil / 112px escritorio (--ot-header-height; móbil inclúe espazo do logo con padding)
 * Depende de: variables.css, typography.css
 */

/* -------------------------------------------------- */
/* CONTENEDOR PRINCIPAL                                 */
/* -------------------------------------------------- */

.ot-header {
	position:         sticky;
	top:              0;
	z-index:          var(--ot-z-header);
	height:           var(--ot-header-height);
	background-color: var(--ot-color-header-bg);
	color:            var(--ot-color-header-text);
	border-bottom:    1px solid rgba(255, 255, 255, 0.12);
}

/* Móbil: marca (logo + Xunta) | nav (hamburguesa); aside oculto */
.ot-header__inner {
	display:               grid;
	align-items:           center;
	gap:                   var(--ot-space-4);
	width:                 100%;
	height:                100%;
	grid-template-columns: 1fr auto;
	grid-template-areas:   "brand nav";
}

.ot-header__brand {
	grid-area: brand;
}

.ot-header__aside {
	display: none;
}

.ot-header__nav {
	grid-area: nav;
}

/* -------------------------------------------------- */
/* MARCA — logo + Xunta (Xunta só móbil nesta fila)     */
/* -------------------------------------------------- */

.ot-header__brand {
	display:     flex;
	align-items: center;
	gap:         var(--ot-space-4);
	flex-shrink: 0;
	min-width:   0;
}

.ot-header__logo-link {
	display:     flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
}

.ot-header__logo {
	width:      60px;
	height:     60px;
	object-fit: contain;
	display:    block;
}

.ot-header__xunta {
	display:         flex;
	align-items:     center;
	line-height:     0;
	opacity:         1;
	transition:      opacity var(--ot-transition);
	flex-shrink:     0;
}

.ot-header__xunta--desktop {
	display: none;
}

.ot-header__xunta--mobile {
	display: flex;
}

.ot-header__xunta:hover {
	opacity: 0.75;
}

.ot-header__xunta-logo {
	height:  36px;
	width:   auto;
	display: block;
}

/* -------------------------------------------------- */
/* REDES (desktop na barra; drawer só no panel móbil) */
/* -------------------------------------------------- */

.ot-header__social--desktop,
.ot-header__social--drawer {
	display:     flex;
	align-items: center;
	gap:         var(--ot-space-4);
	flex-shrink: 0;
}

.ot-header__social-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	line-height:     0;
	opacity:         1;
	transition:      opacity var(--ot-transition);
}

.ot-header__social-link:hover {
	opacity: 0.7;
}

.ot-header__social-link img {
	width:   20px;
	height:  20px;
	display: block;
}

/* -------------------------------------------------- */
/* NAV — móbil: hamburguesa + panel (redes + menú)      */
/* -------------------------------------------------- */

.ot-header__nav {
	position:     relative;
	justify-self: end;
	align-self:   center;
	display:      flex;
	flex-wrap:    nowrap;
	align-items:  center;
	justify-content: flex-end;
	gap:          var(--ot-space-2);
}

.ot-header__menu-panel {
	display: none;
}

.ot-header__social--drawer {
	justify-content: center;
	padding-bottom:  var(--ot-space-6);
	margin-bottom:   var(--ot-space-4);
	border-bottom:   1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 959px) {
	.ot-header__logo-link {
		padding-block: 16px;
	}

	.ot-header__nav.toggled .ot-header__menu-panel {
		display:         flex;
		flex-direction:  column;
		position:        fixed;
		top:             var(--ot-header-height);
		left:            0;
		right:           0;
		bottom:          0;
		z-index:         var(--ot-z-overlay);
		background:    var(--ot-color-header-bg);
		padding:       var(--ot-space-8) var(--contenedor-padding) var(--ot-space-10);
		overflow-y:    auto;
	}

	.ot-header .ot-nav__list,
	.ot-header #primary-menu {
		display:        flex;
		flex-direction: column;
		gap:            var(--ot-space-2);
		list-style:     none;
		margin:         0;
		padding:        0;
	}

	.ot-header__nav:not(.toggled) .ot-header__menu-panel .ot-nav__list,
	.ot-header__nav:not(.toggled) .ot-header__menu-panel #primary-menu {
		display: none;
	}

	.ot-header .ot-nav__list li,
	.ot-header #primary-menu li {
		display: block;
	}

	.ot-header .ot-nav__list li a,
	.ot-header #primary-menu li a {
		display:         block;
		padding:         var(--ot-space-3) 0;
		font-family:     var(--ot-font-sans);
		font-size:       clamp(1.5rem, 4vw, 2.5rem);
		font-weight:     700;
		line-height:     1.2;
		color:           var(--ot-white);
		text-decoration: none;
		border-bottom:   1px solid rgba(255, 255, 255, 0.12);
		transition:    opacity var(--ot-transition);
	}

	.ot-header .ot-nav__list li a:hover,
	.ot-header #primary-menu li a:hover {
		opacity: 0.7;
	}

	.ot-header .ot-nav__list li.current-menu-item > a,
	.ot-header #primary-menu li.current-menu-item > a {
		opacity: 0.6;
	}

	.ot-header .ot-nav__list .sub-menu,
	.ot-header #primary-menu .sub-menu {
		list-style: none;
		margin:     var(--ot-space-2) 0 0 var(--ot-space-4);
		padding:    0;
	}
}

/* -------------------------------------------------- */
/* ESCRITORIO: tres columnas, panel = só menú          */
/* -------------------------------------------------- */

@media (min-width: 960px) {
	.ot-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:   "brand nav aside";
		gap:                   var(--ot-space-6);
	}

	.ot-header__aside {
		display:         flex;
		align-items:     center;
		justify-content: flex-end;
		gap:             var(--ot-space-5);
		flex-shrink:     0;
	}

	.ot-header__xunta--mobile {
		display: none !important;
	}

	.ot-header__xunta--desktop {
		display: flex;
	}

	.ot-header__logo {
		width:  80px;
		height: 80px;
	}

	.ot-header__nav {
		justify-self: center;
		width:        100%;
		max-width:    100%;
		min-width:    0;
		justify-content: center;
	}

	.ot-menu-toggle {
		display: none !important;
	}

	.ot-header__menu-panel,
	.ot-header__nav.toggled .ot-header__menu-panel {
		display:         flex !important;
		flex-direction:  row;
		flex-wrap:       nowrap;
		align-items:     center;
		justify-content: center;
		position:        static !important;
		top:             auto !important;
		left:            auto !important;
		right:           auto !important;
		bottom:          auto !important;
		width:           auto;
		max-width:       100%;
		min-width:       0;
		flex:            1 1 auto;
		background:      transparent !important;
		padding:         0 !important;
		overflow:        visible !important;
		z-index:         auto !important;
	}

	.ot-header__social--drawer {
		display: none !important;
	}

	.ot-header .ot-nav__list,
	.ot-header #primary-menu {
		display:         flex !important;
		flex-direction:  row;
		flex-wrap:       wrap;
		align-items:     center;
		justify-content: center;
		gap:             0 var(--ot-space-6);
		position:        static;
		list-style:      none;
		margin:          0;
		padding:         0;
		overflow:        visible;
	}

	.ot-header .ot-nav__list > li,
	.ot-header #primary-menu > li {
		display:  block;
		position: relative;
	}

	.ot-header .ot-nav__list > li > a,
	.ot-header #primary-menu > li > a {
		display:         block;
		padding:         var(--ot-space-2) var(--ot-space-1);
		font-family:     var(--ot-font-sans);
		font-size:       var(--ot-text-base);
		font-weight:     var(--ot-weight-bold);
		line-height:     1.5rem;
		color:           var(--ot-white);
		text-decoration: none;
		border-bottom:   none;
		white-space:     nowrap;
		transition:      opacity var(--ot-transition);
	}

	.ot-header .ot-nav__list > li > a:hover,
	.ot-header #primary-menu > li > a:hover {
		opacity: 0.85;
	}

	.ot-header .ot-nav__list > li.current-menu-item > a,
	.ot-header #primary-menu > li.current-menu-item > a {
		opacity: 0.75;
	}

	.ot-header .ot-nav__list .sub-menu,
	.ot-header #primary-menu .sub-menu {
		display:       none;
		position:      absolute;
		top:           100%;
		left:          0;
		min-width:     12rem;
		margin:        0;
		padding:       var(--ot-space-2) 0;
		list-style:    none;
		background:    var(--ot-color-header-bg);
		border-radius: var(--ot-radius-md);
		box-shadow:    var(--ot-shadow-md);
		border:        1px solid rgba(255, 255, 255, 0.15);
		z-index:       calc(var(--ot-z-header) + 1);
	}

	.ot-header .ot-nav__list li:hover > .sub-menu,
	.ot-header .ot-nav__list li.focus > .sub-menu,
	.ot-header #primary-menu li:hover > .sub-menu,
	.ot-header #primary-menu li.focus > .sub-menu {
		display: block;
	}

	.ot-header .ot-nav__list .sub-menu a,
	.ot-header #primary-menu .sub-menu a {
		display:         block;
		padding:         var(--ot-space-2) var(--ot-space-4);
		font-size:       var(--ot-text-sm);
		font-weight:     var(--ot-weight-medium);
		line-height:     var(--ot-leading-normal);
		white-space:     nowrap;
		border-bottom:   none;
	}

	.ot-header .ot-nav__list .sub-menu .sub-menu,
	.ot-header #primary-menu .sub-menu .sub-menu {
		top:  0;
		left: 100%;
	}
}

/* -------------------------------------------------- */
/* BOTÓN HAMBURGUESA (solo visible <960px)              */
/* -------------------------------------------------- */

.ot-menu-toggle {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             5px;
	background:      none;
	border:          none;
	cursor:          pointer;
	padding:         var(--ot-space-1);
	width:           36px;
	height:          36px;
	flex-shrink:     0;
}

.ot-menu-toggle__bar {
	display:       block;
	width:         100%;
	height:        2px;
	background:    var(--ot-white);
	border-radius: var(--ot-radius-full);
	transition:    transform var(--ot-transition), opacity var(--ot-transition);
}

.ot-menu-toggle[aria-expanded="true"] .ot-menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.ot-menu-toggle[aria-expanded="true"] .ot-menu-toggle__bar:nth-child(2) {
	opacity:   0;
	transform: scaleX(0);
}
.ot-menu-toggle[aria-expanded="true"] .ot-menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------- */
/* ADMIN BAR                                            */
/* -------------------------------------------------- */

.admin-bar .ot-header {
	top: 32px;
}

.admin-bar .ot-header .ot-header__nav.toggled .ot-header__menu-panel {
	top: calc(var(--ot-header-height) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .ot-header {
		top: 46px;
	}

	.admin-bar .ot-header .ot-header__nav.toggled .ot-header__menu-panel {
		top: calc(var(--ot-header-height) + 46px);
	}
}

@media (min-width: 960px) {
	.admin-bar .ot-header .ot-header__nav.toggled .ot-header__menu-panel {
		top: auto !important;
	}
}

/* Accesibilidade: foco visible no cabeceiro (WCAG 2.4.7) */
.ot-header .ot-menu-toggle:focus-visible,
.ot-header .ot-header__logo-link:focus-visible,
.ot-header .ot-header__xunta:focus-visible,
.ot-header .ot-header__social-link:focus-visible,
.ot-header .ot-nav__list a:focus-visible,
.ot-header #primary-menu a:focus-visible {
	outline:        2px solid var(--ot-white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ot-menu-toggle__bar {
		transition: none;
	}
}