/* ==========================================================
   O Destak — cabeçalho em três níveis
   1. barra institucional  2. masthead sobre foto  3. menu
   ========================================================== */

.odk-cab {
	--cab-navy: #122549;
	--cab-red: #ff4231;
	--cab-paper: #faf8f3;
	--cab-cond: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
}

.odk-ic {
	display: block;
	flex: none;
}

/* ---------- 1. barra institucional ---------- */

.odk-inst {
	background: var(--cab-paper);
	border-bottom: 1px solid rgba(18, 37, 73, .12);
	font-family: var(--cab-cond);
}

.odk-inst__in {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 46px;
	padding-block: 6px;
}

.odk-inst__edicao,
.odk-inst__acoes {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.odk-inst__acoes {
	margin-left: auto;
}

/* Os links de texto da barra. Os ícones de rede ficam de fora: eles são
   brancos sobre o círculo azul, e esta regra os deixaria azuis sobre azul. */
.odk-inst__edicao span,
.odk-inst__acoes a:not(.odk-rede) {
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cab-navy);
	white-space: nowrap;
	text-decoration: none;
}

.odk-inst__acoes a:not(.odk-rede):hover,
.odk-inst__acoes a:not(.odk-rede):focus-visible { color: var(--cab-red); }

.odk-inst__cal { color: var(--cab-navy); opacity: .62; }

/* Separadores: um fio, não um caractere — some junto com o item ao lado. */
.odk-inst__sep {
	width: 1px;
	height: 17px;
	background: rgba(18, 37, 73, .22);
	flex: none;
}

.odk-redes {
	display: flex;
	align-items: center;
	gap: 7px;
}

.odk-inst .odk-rede,
.odk-rede {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--cab-navy);
	color: #fff;
	transition: background-color .18s ease;
}

.odk-rede:hover,
.odk-rede:focus-visible { background: var(--cab-red); }

.odk-inst__busca {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--cab-navy);
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: 3px;
}

.odk-inst__busca:hover { color: var(--cab-red); }

/* ---------- 2. masthead ---------- */

.odk-masthead {
	position: relative;
	background-color: var(--cab-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;
}

/* Escurecimento por pseudo-elemento: a foto enviada nunca é alterada. */
.odk-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(8, 20, 45, .35) 0%, rgba(8, 20, 45, .10) 45%, rgba(8, 20, 45, .55) 100%),
		rgba(18, 37, 73, var(--odk-masthead-escuro, .72));
}

.odk-masthead__in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	/* Altura reservada desde o primeiro quadro: evita o salto do layout
	   enquanto a foto de fundo carrega. */
	min-height: clamp(132px, 13.5vw, 178px);
	padding-block: 16px;
}

.odk-masthead__marca {
	grid-column: 2;
	display: block;
	text-align: center;
	text-decoration: none;
}

.odk-masthead__logo {
	display: block;
	width: clamp(230px, 38vw, 540px);
	height: auto;
	margin-inline: auto;
}

.odk-masthead__tag {
	display: block;
	margin-top: 8px;
	font-family: var(--cab-cond);
	font-weight: 400;
	font-size: clamp(13px, 1.5vw, 19px);
	letter-spacing: .22em;
	color: #fff;
	text-transform: none;
}

.odk-masthead__regiao {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 210px;
}

.odk-masthead__regiao .odk-ic { color: var(--cab-red); margin-top: 1px; }

.odk-masthead__regiao b {
	display: block;
	font-family: var(--cab-cond);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.22;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 7px;
	border-bottom: 3px solid var(--cab-red);
}

/* ---------- 3. menu ---------- */

.odk-menu {
	background: var(--cab-navy);
	position: relative;
}

.odk-menu__in {
	display: flex;
	align-items: stretch;
	min-height: 54px;
}

.odk-menu__home {
	display: grid;
	place-items: center;
	width: 62px;
	flex: none;
	background: var(--cab-red);
	color: #fff;
	transition: background-color .18s ease;
}

.odk-menu__home:hover,
.odk-menu__home:focus-visible { background: #d6321f; }

.odk-menu__lista,
.odk-menu__lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.odk-menu__lista {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	flex: 1;
	min-width: 0;
}

.odk-menu__lista > li { position: relative; }

.odk-menu__lista a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 17px;
	font-family: var(--cab-cond);
	font-weight: 500;
	font-size: 15.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease;
}

.odk-menu__lista a:hover,
.odk-menu__lista a:focus-visible,
.odk-menu__lista .current-menu-item > a,
.odk-menu__lista .current-menu-parent > a { background: rgba(255, 255, 255, .12); }

/* Submenus */
.odk-menu__lista ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #0c1b38;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 30;
}

.odk-menu__lista li:hover > ul,
.odk-menu__lista li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.odk-menu__lista ul a { padding: 11px 17px; height: auto; }

.odk-menu__digital {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto;
	padding: 0 22px;
	background: var(--cab-red);
	color: #fff;
	font-family: var(--cab-cond);
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .18s ease;
}

.odk-menu__digital:hover,
.odk-menu__digital:focus-visible { background: #d6321f; }

.odk-menu__toggle {
	display: none;
	align-items: center;
	gap: 9px;
	padding: 0 16px;
	background: none;
	border: 0;
	color: #fff;
	font-family: var(--cab-cond);
	font-weight: 500;
	font-size: 15.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------- busca ---------- */

.odk-cab .odk-searchpop {
	display: none;
	background: #0c1b38;
	padding: 14px 0;
}

.odk-cab .odk-searchpop.is-open { display: block; }
.odk-cab .odk-searchpop input[type="search"] { width: 100%; }

/* ---------- foco visível ---------- */

.odk-cab a:focus-visible,
.odk-cab button:focus-visible {
	outline: 3px solid var(--cab-red);
	outline-offset: -3px;
}

.odk-inst a:focus-visible,
.odk-inst button:focus-visible { outline-color: var(--cab-navy); }

/* ---------- tablet ---------- */

@media (max-width: 1080px) {
	.odk-menu__lista a { padding: 0 12px; font-size: 14.5px; }
	.odk-menu__digital { padding: 0 15px; font-size: 14.5px; }
	.odk-masthead__regiao { max-width: 170px; }
	.odk-masthead__regiao b { font-size: 13px; }
}

/* ---------- celular ---------- */

@media (max-width: 1024px) {
	/* A barra institucional guarda só o essencial: edição e busca. */
	.odk-inst__in { min-height: 40px; gap: 10px; }
	/* Fica o ícone e a referência da edição; o resto sai. O primeiro span é
	   o ícone, então é o seguinte que precisa continuar visível. */
	.odk-inst__edicao .odk-inst__sep,
	.odk-inst__edicao > span:not(.odk-inst__cal),
	.odk-inst__acoes a,
	.odk-inst__acoes .odk-inst__sep,
	.odk-redes { display: none; }
	.odk-inst__edicao > span.odk-inst__cal + span { display: inline; }
	.odk-inst__edicao span { font-size: 13px; }

	/* Masthead mais baixo, logo ainda legível, região fora. */
	.odk-masthead__in {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-block: 18px;
	}
	.odk-masthead__marca { grid-column: 1; }
	.odk-masthead__logo { width: min(78vw, 340px); }
	.odk-masthead__tag { letter-spacing: .16em; }
	.odk-masthead__regiao { display: none; }

	/* Menu vira lista que abre e fecha. */
	.odk-menu__in { flex-wrap: wrap; min-height: 52px; }
	.odk-menu__toggle { display: flex; order: 2; margin-right: auto; }
	.odk-menu__home { order: 1; width: 54px; }
	.odk-menu__digital { order: 3; padding: 0 14px; font-size: 14px; }

	.odk-menu__lista {
		order: 4;
		flex: 1 0 100%;
		flex-direction: column;
		display: none;
		border-top: 1px solid rgba(255, 255, 255, .16);
	}
	.odk-menu__lista.is-open { display: flex; }
	.odk-menu__lista a { height: auto; padding: 13px 16px; }
	.odk-menu__lista > li + li { border-top: 1px solid rgba(255, 255, 255, .1); }

	/* Submenu fica sempre aberto no celular: sobrepor não funciona no toque. */
	.odk-menu__lista ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(0, 0, 0, .22);
	}
	.odk-menu__lista ul a { padding-left: 32px; }
}

@media (max-width: 420px) {
	.odk-menu__digital span { display: none; }
	.odk-menu__digital { padding: 0 15px; }
	.odk-masthead__tag { font-size: 12px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
	.odk-cab * { transition: none !important; }
}