/*
Theme Name:   Design UCDB App
Theme URI:    https://design.ucdb.top/
Description:  Versão "aplicativo" do site do curso de Design da UCDB, filha do Twenty Twenty-Five: barra superior, menu, barra de navegação (trilho no computador), abas, cartões e botões do Material Design 3. Mobile-first, acessível (WCAG 2.2 AA) e sem rastreadores.
Author:       Curso de Design – UCDB
Template:     twentytwentyfive
Version:      2.0.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ucdb-design-app
*/

/* ==========================================================================
   Quase todo o visual vem do theme.json (cores, fontes, espaçamentos).
   Aqui ficam os detalhes que o theme.json não cobre, organizados pelos
   princípios do Material Design 3 (m3.material.io):
   - papéis de cor (primária, secundária, contêineres, superfícies, contorno);
   - escala de formas (4, 8, 12, 16, 28 px e totalmente redondo);
   - camadas de estado (passar o mouse 8 %, foco 10 %, toque 10 %);
   - elevação por tom de superfície, sombra só quando algo flutua;
   - alvo de toque de 48 px;
   - movimento com a curva "standard" (0.2, 0, 0, 1).
   E do Material 3 Expressivo (design.google, pesquisa com 18 mil pessoas):
   - a ação principal maior, mais colorida e com rótulo sempre visível;
   - formas da biblioteca de formas do M3 como grafismo da marca;
   - botões que mudam de forma ao toque e movimento com "mola" (spring)
     só no que se desloca; cor e opacidade sem quique.
   ========================================================================== */

/* 0. Tokens (nomes do M3 → cores do curso) -------------------------------- */
:root {
	--md-primary: var(--wp--preset--color--magenta-acao);
	--md-on-primary: var(--wp--preset--color--branco);
	--md-primary-container: var(--wp--preset--color--rosa-claro);
	--md-secondary: var(--wp--preset--color--marinho);
	--md-secondary-container: var(--wp--preset--color--marinho-claro);
	--md-on-secondary-container: var(--wp--preset--color--marinho-escuro);
	--md-surface: var(--wp--preset--color--branco);
	--md-on-surface: var(--wp--preset--color--tinta);
	--md-on-surface-variant: var(--wp--preset--color--cinza-texto);
	--md-surface-container-low: var(--wp--preset--color--nevoa);
	--md-surface-container: var(--wp--preset--color--superficie);
	--md-surface-container-highest: var(--wp--preset--color--superficie-alta);
	--md-outline: var(--wp--preset--color--contorno);
	--md-outline-variant: var(--wp--preset--color--contorno-suave);
	--md-error: var(--wp--preset--color--erro);

	--md-shape-xs: 4px;   /* campos de texto */
	--md-shape-s: 8px;    /* chips, selos */
	--md-shape-m: 12px;   /* cartões */
	--md-shape-l: 16px;   /* imagens, vídeos, FAB */
	--md-shape-xl: 28px;  /* painéis grandes, menu lateral */
	--md-shape-full: 999px; /* botões */

	--md-state-hover: 0.08;
	--md-state-focus: 0.10;
	--md-state-pressed: 0.10;

	--md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	--md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
	--md-elev-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

	--md-ease: cubic-bezier(0.2, 0, 0, 1);
	/* Mola do M3 Expressivo (posição, tamanho e forma). Navegadores sem
	   suporte a linear() usam a curva "standard" (ver @supports abaixo). */
	--md-spring: var(--md-ease);
	--md-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
	--md-dur-short: 150ms;
	--md-dur-medium: 300ms;

	--md-target: 48px;
}

@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--md-spring: linear(0, 0.116, 0.36, 0.618, 0.829, 0.973, 1.052, 1.081, 1.08, 1.062, 1.04, 1.021, 1.006, 0.998, 0.994, 0.993, 0.994, 0.996, 0.998, 0.999, 1);
	}
}

/* Títulos: Google Sans Flex (fonte variável do Google). O eixo de tamanho
   óptico ajusta o desenho das letras ao tamanho, do rótulo à capa. */
h1, h2, h3, h4, .wp-block-site-title, .wp-element-button, .wp-block-button__link {
	font-optical-sizing: auto;
}

/* 1. Rolagem e espaço para a barra fixa de contato no celular -------------- */
html {
	scroll-behavior: smooth;
	/* Evita que a barra fixa esconda o item com foco (WCAG 2.4.11). */
	scroll-padding-bottom: 6rem;
	/* Âncoras param abaixo do cabeçalho fixo (e do índice, na página "O curso"). */
	scroll-padding-top: calc(var(--ucdb-topo, 65px) + 4.5rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 2. Foco sempre visível (WCAG 2.4.7, 2.4.11 e 2.4.13).
   Indicador de foco do M3: anel de 3 px na cor secundária, afastado 2 px,
   acompanhando a forma do elemento (o contorno segue o border-radius). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--md-secondary);
	outline-offset: 2px;
}
.has-marinho-background-color :where(a, button, summary, [tabindex]):focus-visible,
.has-marinho-escuro-background-color :where(a, button, summary, [tabindex]):focus-visible,
.ucdb-dark :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--amarelo);
}

/* 3. Link "Pular para o conteúdo" (gerado pelo WordPress) e texto só para leitor de tela */
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	clip-path: none; height: auto; width: auto; margin: 0;
	left: 1rem; top: 1rem; z-index: 100000;
	padding: 0.75rem 1.5rem; border-radius: var(--md-shape-full);
	background: var(--md-on-surface); color: var(--md-surface);
	font-weight: 700; text-decoration: none; box-shadow: var(--md-elev-3);
}

/* 4. Alvos de toque de 48 × 48 px (recomendação do M3; acima dos 24 px do
   critério 2.5.8 da WCAG 2.2). */
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.ucdb-cta-bar a,
.ucdb-video__play,
summary {
	min-height: var(--md-target);
	min-width: var(--md-target);
}
.wp-block-navigation-item__content { display: inline-flex; align-items: center; }

/* Links dentro de texto: sublinhado sempre (não depender só da cor – 1.4.1). */
.entry-content a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link) {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* 5. Camadas de estado (state layers) do M3.
   Em vez de trocar a cor do botão no hover, uma película da cor do texto
   cobre o botão: 8 % ao passar o mouse, 10 % no foco e no toque.
   Funciona igual em qualquer cor de botão e não muda o contraste. */
.wp-block-button__link,
.ucdb-cta-bar a,
.ucdb-indice a,
.ucdb-nav-destaque > .wp-block-navigation-item__content,
.wp-block-details summary,
.ff-btn-submit {
	--md-state: 0;
	background-image: linear-gradient(
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent),
		color-mix(in srgb, currentColor calc(var(--md-state) * 100%), transparent)
	);
	transition:
		box-shadow var(--md-dur-short) var(--md-ease),
		background-color var(--md-dur-short) var(--md-ease),
		border-radius var(--md-dur-medium) var(--md-spring);
}
:is(.wp-block-button__link, .ucdb-cta-bar a, .ucdb-indice a, .ucdb-nav-destaque > .wp-block-navigation-item__content, .wp-block-details summary, .ff-btn-submit):hover { --md-state: var(--md-state-hover); }
:is(.wp-block-button__link, .ucdb-cta-bar a, .ucdb-indice a, .ucdb-nav-destaque > .wp-block-navigation-item__content, .wp-block-details summary, .ff-btn-submit):focus-visible { --md-state: var(--md-state-focus); }
:is(.wp-block-button__link, .ucdb-cta-bar a, .ucdb-indice a, .ucdb-nav-destaque > .wp-block-navigation-item__content, .wp-block-details summary, .ff-btn-submit):active { --md-state: var(--md-state-pressed); }

/* 6. Botões do M3 ----------------------------------------------------------
   Preenchido (padrão): a ação principal da tela, uma por bloco.
   Tonal: a ação secundária ao lado. Contorno: ações de menor peso.
   Todos totalmente redondos, rótulo de 16 px e altura de 48 px. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
}
/* M3 Expressivo: ao toque, o botão redondo fica mais "quadrado" e volta
   com efeito de mola. Mostra que o toque foi registrado. */
.wp-block-button__link:active,
.ucdb-cta-bar a:active,
.ff-btn-submit:active { border-radius: var(--md-shape-m) !important; }

/* Botão grande (tamanho "médio" do M3 Expressivo, 56 px): só a ação mais
   importante de cada tela. A pesquisa do Google mostrou que botões maiores
   e mais coloridos são encontrados mais rápido. */
.ucdb-botao-grande > .wp-block-button__link,
.fluentform .ff-btn-submit {
	min-height: 56px;
	padding: 1rem 1.5rem;
}
.ucdb-botao-grande > .wp-block-button__link:active,
.fluentform .ff-btn-submit:active { border-radius: var(--md-shape-l) !important; }

/* Preenchido: ganha elevação 1 ao passar o mouse (comportamento do M3). */
.wp-block-button:not(.is-style-outline):not(.is-style-tonal) > .wp-block-button__link:hover { box-shadow: var(--md-elev-1); }

.wp-block-button.is-style-tonal > .wp-block-button__link {
	background-color: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
	border: 0;
}
.wp-block-button.is-style-tonal > .wp-block-button__link:hover { box-shadow: var(--md-elev-1); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--md-secondary);
	border: 1px solid var(--md-outline);
	padding-top: calc(0.75rem - 1px);
	padding-bottom: calc(0.75rem - 1px);
}
.ucdb-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.has-marinho-escuro-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--branco);
	border-color: rgba(255, 255, 255, 0.7);
}
.ucdb-dark .wp-block-button.is-style-tonal > .wp-block-button__link,
.has-marinho-escuro-background-color .wp-block-button.is-style-tonal > .wp-block-button__link {
	background-color: var(--wp--preset--color--marinho-claro);
}

/* 7. Cabeçalho = barra superior (top app bar) e menu = gaveta (drawer) -----
   Fica fixo no topo ao rolar (o menu está sempre à mão). Como no M3, quando
   o conteúdo passa por baixo, a barra muda para o tom de superfície
   "surface-container", em vez de ganhar sombra. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 60;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: var(--wp-admin--admin-bar--height, 0px); }
header.wp-block-group {
	min-height: 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: background-color var(--md-dur-medium) var(--md-ease);
}
body.ucdb-rolado header.wp-block-group {
	background-color: var(--md-surface-container) !important;
}
.wp-block-navigation .wp-block-navigation-item__content { border-radius: var(--md-shape-full); padding-inline: 0.75rem; }
.wp-block-navigation .wp-block-navigation-item:not(.ucdb-nav-destaque) > .wp-block-navigation-item__content:hover {
	background-color: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
	text-decoration: none;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	background-color: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}

/* Botão do menu com rótulo visível: na pesquisa do M3 Expressivo, tirar o
   texto das ações piorou a usabilidade. Ícone + "Menu", em formato tonal. */
.wp-block-navigation__responsive-container-open {
	gap: 0.5rem;
	padding: 0 1rem 0 0.75rem !important;
	border-radius: var(--md-shape-full);
	background-color: var(--md-secondary-container) !important;
	color: var(--md-on-secondary-container) !important;
	font-size: 0.9375rem;
	font-weight: 700;
	transition: border-radius var(--md-dur-medium) var(--md-spring);
}
.wp-block-navigation__responsive-container-open:not([hidden]) { display: inline-flex; align-items: center; }
.wp-block-navigation__responsive-container-open::after { content: "Menu"; }
.wp-block-navigation__responsive-container-open:active { border-radius: var(--md-shape-m); }
@media (min-width: 600px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } }

/* Item "Fale com o curso" do menu = botão preenchido */
.ucdb-nav-destaque > .wp-block-navigation-item__content {
	padding: 0.5rem 1.25rem !important;
	border-radius: var(--md-shape-full);
	background-color: var(--md-primary);
	color: var(--md-on-primary) !important;
	text-decoration: none;
}

/* Menu aberto no celular: gaveta de navegação do M3 (itens de 56 px,
   indicador de item ativo em formato de pílula, cantos de 28 px). */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--md-surface-container-low) !important;
	padding: 1rem 0.75rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.25rem !important;
	width: 100%;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	min-height: 56px;
	padding: 0 1.5rem !important;
	font-size: 1rem;
	border-radius: var(--md-shape-full);
}
.wp-block-navigation__responsive-container.is-menu-open .ucdb-nav-destaque { margin-top: 1rem; }
.wp-block-navigation__responsive-container.is-menu-open .ucdb-nav-destaque > .wp-block-navigation-item__content { justify-content: center; }

/* 8. Barra fixa de contato (só no celular) = barra inferior (bottom app bar)
   com dois botões: preenchido (WhatsApp) e tonal (formulário). */
.ucdb-cta-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--md-surface-container);
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), 0 -2px 6px 2px rgba(0, 0, 0, 0.08);
}
.ucdb-cta-bar a {
	flex: 1 1 50%;
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--md-shape-full);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
.ucdb-cta-bar__wa {
	background-color: var(--md-primary);
	color: var(--md-on-primary);
}
.ucdb-cta-bar__form {
	background-color: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}
.ucdb-cta-bar svg { width: 18px; height: 18px; flex: none; }
body.has-ucdb-cta-bar { padding-bottom: 5.5rem; }

@media (min-width: 782px) {
	.ucdb-cta-bar { display: none; }
	body.has-ucdb-cta-bar { padding-bottom: 0; }
}

/* 9. Vídeo do YouTube só carrega no clique (fachada leve) ------------------ */
.ucdb-video { margin-block: var(--wp--preset--spacing--40); }
.ucdb-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--md-shape-l);
	overflow: hidden;
	background: var(--wp--preset--color--marinho-escuro);
}
.ucdb-video--vertical .ucdb-video__frame {
	aspect-ratio: 9 / 16;
	max-width: 360px;
	margin-inline: auto;
}
.ucdb-video__play {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 0.75rem;
	padding: 1.25rem;
	cursor: pointer;
	color: var(--wp--preset--color--branco);
	text-align: center;
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 12, 130, 0.55), transparent 55%),
		radial-gradient(circle at 85% 90%, rgba(255, 210, 63, 0.35), transparent 50%),
		var(--wp--preset--color--marinho-escuro);
}
/* Ícone de play no formato do botão de ação flutuante (FAB) do M3:
   contêiner primário, cantos bem arredondados e elevação 3. */
.ucdb-video__icon {
	justify-self: center;
	width: 72px;
	height: 72px;
	border-radius: var(--md-shape-xl);
	display: grid;
	place-items: center;
	background: var(--md-primary-container);
	color: var(--md-primary);
	box-shadow: var(--md-elev-3);
	transition: box-shadow var(--md-dur-short) var(--md-ease), transform var(--md-dur-medium) var(--md-spring), border-radius var(--md-dur-medium) var(--md-spring);
}
.ucdb-video__play:hover .ucdb-video__icon { box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15); }
.ucdb-video__play:hover .ucdb-video__icon { transform: scale(1.06); }
.ucdb-video__play:active .ucdb-video__icon { transform: scale(0.94); border-radius: var(--md-shape-l); }
.ucdb-video__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--amarelo);
	outline-offset: -8px;
}
.ucdb-video__title { font-weight: 700; font-size: 1rem; line-height: 1.5; max-width: 28ch; }
.ucdb-video__note { font-size: 0.875rem; opacity: 0.92; }
.ucdb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ucdb-video figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--md-on-surface-variant); }

/* 10. Cartões, selos e detalhes ------------------------------------------
   Cartões "preenchidos" do M3: fundo de superfície em tom, cantos de 12 px,
   sem sombra. Como os cartões do site não são clicáveis, não têm hover
   (o M3 só dá estado a elementos interativos). */
.ucdb-card { border-radius: var(--md-shape-m); }

/* Selo = chip de assistência do M3 (cantos de 8 px, rótulo de 14 px).
   ".ucdb-tag" é o parágrafo inteiro (dentro de cartões); ".ucdb-tag-linha"
   é um parágrafo de largura normal com o selo no texto em negrito, para
   ficar alinhado à coluna de texto em seções centralizadas. */
.ucdb-tag-linha > strong { display: inline-block; vertical-align: top; }
.ucdb-tag,
.ucdb-tag-linha > strong {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.25rem 0.75rem;
	border-radius: var(--md-shape-s);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.43;
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--amarelo);
	color: var(--md-on-surface);
}

/* Ícone + texto nos quatro caminhos (Google Design, "acessibilidade global":
   texto sempre acompanhado de um sinal gráfico, para quem lê com mais
   dificuldade). O ícone é decorativo; o texto continua lá. */
.ucdb-jornada .ucdb-tag { gap: 0.5rem; padding-left: 0.5rem; }
.ucdb-jornada .ucdb-tag::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.ucdb-jornada > :nth-child(1) .ucdb-tag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1V16h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1V16h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z%22/%3E%3C/svg%3E"); }
.ucdb-jornada > :nth-child(2) .ucdb-tag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 9l10-5 10 5-10 5z%22/%3E%3Cpath d=%22M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5M22 9v6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 9l10-5 10 5-10 5z%22/%3E%3Cpath d=%22M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5M22 9v6%22/%3E%3C/svg%3E"); }
.ucdb-jornada > :nth-child(3) .ucdb-tag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4L3 8l4 4M3 8h14M17 12l4 4-4 4M21 16H7%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 4L3 8l4 4M3 8h14M17 12l4 4-4 4M21 16H7%22/%3E%3C/svg%3E"); }
.ucdb-jornada > :nth-child(4) .ucdb-tag::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3Cpath d=%22M8 9.5h8M8 12.5h5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3Cpath d=%22M8 9.5h8M8 12.5h5%22/%3E%3C/svg%3E"); }

/* Capa com formas da biblioteca do M3 Expressivo (biscoito de 9 ondas e
   flor de 4 pétalas), em tons claros que não tiram contraste do texto
   (tinta sobre o rosa mais forte: 11,9:1). São fundo decorativo: arquivos
   SVG de menos de 2 kB, sem peso no 4G. */
.ucdb-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ucdb-hero::before,
.ucdb-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background: center / contain no-repeat;
}
.ucdb-hero::before {
	width: clamp(180px, 34vw, 460px);
	aspect-ratio: 1;
	top: clamp(-90px, -6vw, -40px);
	right: clamp(-120px, -8vw, -60px);
	background-image: url("assets/img/forma-biscoito.svg");
	transform: rotate(-12deg);
}
.ucdb-hero::after {
	width: clamp(120px, 20vw, 280px);
	aspect-ratio: 1;
	bottom: -70px;
	right: -50px;
	background-image: url("assets/img/forma-flor.svg");
}
/* No celular, só o biscoito no canto: a flor ficaria atrás do texto. */
@media (max-width: 781px) { .ucdb-hero::after { display: none; } }
/* Sem animação contínua: movimento automático que não para iria contra
   o critério 2.2.2 da WCAG. */

/* Marca-texto: destaca uma palavra do título (assinatura da marca). */
.ucdb-highlight,
mark.ucdb-highlight {
	background: linear-gradient(transparent 58%, var(--wp--preset--color--amarelo) 58%);
	color: inherit;
	padding: 0 0.1em;
}

/* Imagens grandes com cantos de 16 px */
.wp-block-image:not(.is-style-rounded) img { border-radius: var(--md-shape-l); }

/* Linha do tempo da matriz curricular. */
.ucdb-timeline > .wp-block-group { border-left: 4px solid var(--wp--preset--color--magenta); padding-left: var(--wp--preset--spacing--30); }

/* Perguntas (<details>) = itens de lista do M3: 56 px de altura, divisória
   em "outline-variant", camada de estado ao passar o mouse e seta que gira. */
.wp-block-details {
	border-bottom: 1px solid var(--md-outline-variant);
	padding-block: 0;
}
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.75rem 0.5rem;
	margin-inline: -0.5rem;
	border-radius: var(--md-shape-s);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--md-dur-medium) var(--md-spring);
}
.wp-block-details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.wp-block-details > :not(summary) { padding-bottom: 0.75rem; }

/* Tabela comparativa rolável no celular sem quebrar a página (1.4.10). */
.ucdb-compare { overflow-x: auto; border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-m); }
.ucdb-compare table { min-width: 560px; margin: 0; }
.ucdb-compare th, .ucdb-compare td { border-color: var(--md-outline-variant) !important; }
.ucdb-compare th[scope="row"] { text-align: left; }

/* 11. Formulário (Fluent Forms) = campos com contorno do M3 ----------------
   Cantos de 4 px, borda de 1 px que vira 2 px na cor primária com foco,
   altura de 56 px, texto de 16 px, texto de apoio e erro abaixo do campo. */
.fluentform .ff-el-input--label label { font-weight: 600; color: var(--md-on-surface); font-size: 0.875rem; }
.fluentform .ff-el-form-control {
	min-height: 56px;
	padding: 1rem;
	font-size: 1rem;
	color: var(--md-on-surface);
	background: var(--md-surface);
	border: 1px solid var(--md-outline) !important;
	border-radius: var(--md-shape-xs) !important;
	transition: border-color var(--md-dur-short) var(--md-ease), box-shadow var(--md-dur-short) var(--md-ease);
}
.fluentform textarea.ff-el-form-control { min-height: 120px; }
.fluentform .ff-el-form-control:hover { border-color: var(--md-on-surface) !important; }
.fluentform .ff-el-form-control:focus {
	border-color: var(--md-primary) !important;
	box-shadow: inset 0 0 0 1px var(--md-primary);
	outline: none;
}
.fluentform .ff-el-help-message { font-size: 0.75rem; line-height: 1.33; color: var(--md-on-surface-variant); margin-top: 0.25rem; padding-inline: 1rem; }
.ff-el-is-error .ff-el-form-control { border-color: var(--md-error) !important; box-shadow: inset 0 0 0 1px var(--md-error); }
.ff-el-is-error .text-danger,
.ff-el-help-message.error { color: var(--md-error) !important; font-weight: 600; font-size: 0.75rem; padding-inline: 1rem; }
.fluentform .ff-el-form-check-input { width: 18px; height: 18px; accent-color: var(--md-primary); }
.fluentform .ff-el-form-check label { display: flex; gap: 0.75rem; align-items: flex-start; min-height: var(--md-target); padding-block: 0.75rem; }
.fluentform .ff-btn-submit {
	min-height: var(--md-target);
	padding: 0.75rem 1.5rem !important;
	border-radius: var(--md-shape-full) !important;
	background-color: var(--md-primary) !important;
	color: var(--md-on-primary) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	border: 0 !important;
}

/* Foto larga com proporção fixa (evita "pulo" de layout) */
.ucdb-ratio-16-10 img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
@media (min-width: 782px) { .ucdb-ratio-16-10 img { aspect-ratio: 21 / 9; } }

/* Lista de provas na capa */
.ucdb-provas { padding-left: 1.1rem; }
.ucdb-provas li::marker { color: var(--md-primary); }

/* 12. Grades que preenchem a linha (sem colunas vazias) e com teto de colunas.
   O WordPress gera "auto-fill"; com 3 ou 4 cartões numa área larga isso deixa
   trilhas vazias e espreme os cartões. Aqui: no máximo 3 ou 4 colunas, que
   esticam para ocupar a largura, e caem para 2 e 1 no celular.
   Espaço entre cartões: 16 px (grade de 4 px do M3). */
.wp-block-group.is-layout-grid.ucdb-grid-3 {
	gap: 1rem !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, calc((100% - 2 * 1rem) / 3))), 1fr)) !important;
}
.wp-block-group.is-layout-grid.ucdb-grid-4 {
	gap: 1rem !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, calc((100% - 3 * 1rem) / 4))), 1fr)) !important;
}

/* 13. Lista em colunas (onde atuar, professores) e índice da página "O curso"
   O índice usa chips de filtro do M3: 8 px de canto, borda "outline-variant"
   de 1 px e rótulo de 14 px. */
.ucdb-colunas { columns: 16rem 2; column-gap: 2rem; }
.ucdb-colunas li { break-inside: avoid; }
.ucdb-indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ucdb-indice a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0.25rem 1rem;
	border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-s);
	color: var(--md-on-surface-variant); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em;
	text-decoration: none; background-color: var(--md-surface);
}
.ucdb-indice a[aria-current="true"] {
	background-color: var(--md-secondary-container);
	border-color: transparent;
	color: var(--md-on-secondary-container);
}

/* 14. Ajustes de celular (a maioria dos acessos)
   - grades de cartões viram um carrossel (componente "carousel" do M3), com
     o próximo cartão aparecendo pela metade (sinal de que há mais);
   - ficha do curso em 2 × 2;
   - índice da página "O curso" fixo no topo, deslizando para o lado. */
.ucdb-indice-wrap {
	position: sticky;
	top: var(--ucdb-topo, 65px);
	z-index: 30;
	background: var(--md-surface);
	padding-bottom: 0.5rem !important;
	transition: box-shadow var(--md-dur-short) var(--md-ease);
}
/* Quando o índice "gruda" no topo, ganha a cor de superfície em tom (M3). */
.ucdb-indice-wrap.is-grudado { background: var(--md-surface-container); box-shadow: var(--md-elev-2); padding-top: 0.5rem !important; }
.ucdb-indice-wrap.is-grudado .ucdb-indice a:not([aria-current="true"]) { background-color: var(--md-surface-container); }
.admin-bar .ucdb-indice-wrap { top: calc(var(--ucdb-topo, 65px) + var(--wp-admin--admin-bar--height, 0px)); }

@media (max-width: 781px) {
	.wp-block-group.is-layout-grid.ucdb-rolagem-celular {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0.5rem !important;
		margin-left: -1rem !important;
		margin-right: -1rem !important;
		padding: 0 1rem 0.75rem;
		scroll-padding-inline: 1rem;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-group.is-layout-grid.ucdb-rolagem-celular > * {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}
	.wp-block-group.is-layout-grid.ucdb-ficha {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.5rem !important;
	}
	.ucdb-ficha .has-grande-font-size { font-size: 1rem !important; line-height: 1.5 !important; }
	.ucdb-indice ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
	.ucdb-indice li { flex: none; }
	.ucdb-colunas { columns: 1; }
	/* Capa: título em "display-small" (36 px) para os botões aparecerem
	   na primeira tela. */
	.wp-block-heading.has-gigante-font-size { font-size: 2.25rem !important; line-height: 1.22 !important; }
	/* Botões ocupam a largura toda no celular: mais fáceis de acertar com o polegar. */
	.wp-block-buttons > .wp-block-button { flex: 1 1 100%; }
	.wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; }
}