/*
Theme Name: EPITA UNA
Theme URI: https://portal.unap.edu.pe/
Author: Escuela Profesional de Ingeniería Topográfica y Agrimensura
Author URI: https://portal.unap.edu.pe/
Description: Tema de bloques (Full Site Editing) para la Escuela Profesional de Ingeniería Topográfica y Agrimensura (EPITA) de la Universidad Nacional del Altiplano de Puno. Implementa el diseño institucional moderno aprobado: paleta del escudo (amarillo y negro), tipografías Archivo y Public Sans servidas localmente, tarjetas redondeadas y componentes accesibles.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 7.0
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: epita-una
Tags: full-site-editing, block-patterns, block-styles, education, accessibility-ready, custom-colors, custom-logo, editor-style
*/

/*
 * Design tokens (colors, typography, spacing) live in theme.json.
 * This file only holds rules theme.json v3 cannot express:
 * hover inversions, focus outlines, submenu panel, alerts, tables,
 * card hovers and small responsive details. Zero JavaScript.
 */

/* ---------------------------------------------------------------------------
 * 1. Visible focus — blue 3px outline, 2px offset, on EVERY interactive element
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-navigation button:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
}

/* Dark surfaces: the blue outline only reaches 2.96:1 against #0F0F10 and
 * 2.66:1 against #1A1B1E, below the 3:1 that WCAG 2.1 SC 1.4.11 requires for
 * focus indicators. Yellow reaches 8.21:1–10.54:1 on the same surfaces. */
.epita-barra-superior a:focus-visible,
.epita-fondo-oscuro a:focus-visible,
.epita-fondo-oscuro button:focus-visible,
.epita-fondo-oscuro input:focus-visible,
.epita-fondo-oscuro select:focus-visible,
.epita-fondo-oscuro textarea:focus-visible,
.epita-fondo-oscuro summary:focus-visible,
.epita-fondo-oscuro .wp-block-button__link:focus-visible,
.epita-fondo-oscuro .wp-element-button:focus-visible,
.epita-card-oscura a:focus-visible,
.wp-block-navigation__submenu-container a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open button:focus-visible {
	outline-color: var(--wp--preset--color--amarillo);
}

/* ---------------------------------------------------------------------------
 * 2. Buttons — min target 44px, hover inversions, secondary outline 1.5px
 * ------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* Accent button: yellow bg / black text, hover inverts to black/yellow. */
.is-style-epita-acento .wp-block-button__link {
	background-color: var(--wp--preset--color--amarillo);
	color: var(--wp--preset--color--negro);
}

.is-style-epita-acento .wp-block-button__link:hover,
.is-style-epita-acento .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--amarillo);
}

/* Secondary button: 1.5px outline. Inherits current text color context. */
.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--amarillo);
	background: transparent;
	color: var(--wp--preset--color--ambar);
}

/* Outline buttons placed on dark backgrounds keep yellow hover text. */
.epita-fondo-oscuro .is-style-outline .wp-block-button__link:hover,
.epita-fondo-oscuro .is-style-outline .wp-block-button__link:focus {
	color: var(--wp--preset--color--amarillo);
}

/* ---------------------------------------------------------------------------
 * 3. Cards — border #E6E8EB, radius 20px; hover = accent border + soft shadow
 *    (never invert the background under text, per the brief)
 * ------------------------------------------------------------------------- */
.epita-card {
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
}

.epita-card:hover,
.epita-card:focus-within {
	border-color: var(--wp--preset--color--amarillo);
	box-shadow: 0 10px 26px rgba(15, 15, 16, 0.08);
}

.epita-card--verde:hover,
.epita-card--verde:focus-within {
	border-color: var(--wp--preset--color--verde);
	box-shadow: 0 12px 28px rgba(15, 15, 16, 0.1);
}

/* Dark quick-access cards (hero band). */
.epita-card-oscura {
	background-color: #1A1B1E;
	border: 1px solid #26272B;
	border-radius: 14px;
}

.epita-card-oscura:hover,
.epita-card-oscura:focus-within {
	border-color: var(--wp--preset--color--amarillo);
	background-color: #26272B;
	box-shadow: none;
}

.epita-card-oscura a {
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.epita-card,
	.epita-card-oscura {
		transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Navigation — pill items, light hover, dark submenu panel
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	border-radius: 999px;
	padding: 0.6875rem 0.875rem;
	color: var(--wp--preset--color--gris-texto);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	background-color: #F3F4F6;
	color: var(--wp--preset--color--negro);
	text-decoration: none;
}

/* Dark submenu panel (propuesta 2): black rounded panel, light links,
 * yellow hover.
 *
 * NOTE: `is-responsive-overlay-open` no longer exists in core (it predates the
 * Interactivity API rewrite of the block; grep of wp-includes on WP 7.0.2 returns
 * nothing), so the `:not()` guard is always true and these rules also reach the
 * links inside the mobile overlay. That is measured and fine: #D6D9DE on the
 * #0F0F10 overlay is 13.6:1, well past AA, and every submenu in the overlay is
 * styled the same way. The guard is kept because it is harmless and documents the
 * intent, but do not rely on it to scope anything. */
.wp-block-navigation:not(.is-responsive-overlay-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--negro) !important;
	border: none !important;
	border-radius: 16px;
	box-shadow: 0 20px 44px rgba(15, 15, 16, 0.3);
	padding: 10px;
	min-width: 250px;
}

.wp-block-navigation:not(.is-responsive-overlay-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #D6D9DE;
	border-radius: 10px;
	padding: 0.6875rem 0.875rem;
}

.wp-block-navigation:not(.is-responsive-overlay-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation:not(.is-responsive-overlay-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: #26272B;
	color: var(--wp--preset--color--amarillo);
}

/* Hamburger button target ≥44px. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 46px;
	min-height: 46px;
}

/* ---------------------------------------------------------------------------
 * 5. Institutional top bar and dark-section link colors
 * ------------------------------------------------------------------------- */
.epita-barra-superior a {
	color: #9EA3AB;
	text-decoration: none;
}

.epita-barra-superior a:hover,
.epita-barra-superior a:focus {
	color: var(--wp--preset--color--amarillo);
	text-decoration: underline;
}

.epita-fondo-oscuro a:not(.wp-block-button__link):hover,
.epita-fondo-oscuro a:not(.wp-block-button__link):focus {
	color: var(--wp--preset--color--amarillo);
}

/* Seamless dark mass between the contact section and the footer.
 *
 * WordPress emits `:where(.wp-site-blocks) > * { margin-block-start: <blockGap> }`
 * from theme.json `styles.spacing.blockGap` (spacing|40 = 24px). That margin also
 * applies to the footer template part, which is a direct child of .wp-site-blocks,
 * so a 24px strip of the white body background appeared between the black contact
 * block (last child of <main>) and the black footer. The reference design has the
 * footer flush against the contact section, so the footer opts out of that gap.
 * The 32px top radius of the contact block is kept: it separates it from the white
 * gallery above, which is where the separation is intended. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Footer link lists. */
.epita-pie a {
	color: #9EA3AB;
	text-decoration: none;
}

.epita-pie a:hover,
.epita-pie a:focus {
	color: var(--wp--preset--color--amarillo);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 6. Alerts — tinted background + 5px left border + textual label.
 *    Color is never the only indicator: patterns include a text label.
 * ------------------------------------------------------------------------- */
.epita-alerta {
	border-left: 5px solid;
	border-radius: 0 12px 12px 0;
	padding: 1rem 1.375rem;
}

.epita-alerta--info {
	background-color: #EAF1F9;
	border-left-color: var(--wp--preset--color--azul);
}

.epita-alerta--exito {
	background-color: #EAF4EE;
	border-left-color: var(--wp--preset--color--verde);
}

.epita-alerta--urgente {
	background-color: #FBF3DC;
	border-left-color: var(--wp--preset--color--ambar);
}

.epita-alerta--critico {
	background-color: #F9EBEB;
	border-left-color: var(--wp--preset--color--rojo);
}

/* Alerts keep their light tint even inside dark sections, so the dark-surface
 * link and focus rules of §1 and §5 must not apply inside them: yellow text or a
 * yellow focus ring on #EAF1F9 would fall below AA / SC 1.4.11. */
.epita-fondo-oscuro .epita-alerta a {
	color: var(--wp--preset--color--azul);
}

.epita-fondo-oscuro .epita-alerta a:hover,
.epita-fondo-oscuro .epita-alerta a:focus {
	color: var(--wp--preset--color--negro);
}

.epita-fondo-oscuro .epita-alerta a:focus-visible {
	outline-color: var(--wp--preset--color--azul);
}

/* ---------------------------------------------------------------------------
 * 7. Tables — black small-caps header, zebra rows
 * ------------------------------------------------------------------------- */
.wp-block-table table {
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--borde);
}

.wp-block-table thead {
	border-bottom: none;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.78125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	border-color: var(--wp--preset--color--negro);
}

.wp-block-table td {
	border: 1px solid var(--wp--preset--color--borde);
	padding: 0.75rem 1rem;
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--fondo-alt);
}

/* ---------------------------------------------------------------------------
 * 8. Utilities used by patterns
 * ------------------------------------------------------------------------- */

/* Section label: small caps, wide tracking (Etiqueta 12.5). */
.epita-etiqueta {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Category chip (news cards, urgent bar). */
.epita-chip {
	display: inline-block;
	border-radius: 999px;
	padding: 0.375rem 0.75rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.71875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Category chips inside Query Loop post-terms links. */
.epita-chip-categorias a {
	display: inline-block;
	background-color: var(--wp--preset--color--fondo-alt);
	color: var(--wp--preset--color--ambar);
	border-radius: 999px;
	padding: 0.25rem 0.625rem;
	text-decoration: none;
}

.epita-chip-categorias a:hover,
.epita-chip-categorias a:focus {
	background-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--amarillo);
}

/* Rounded media (photos, map block). */
.epita-radio-24 img,
.epita-radio-24 {
	border-radius: 24px;
}

.epita-radio-20 img,
.epita-radio-20 {
	border-radius: 20px;
}

/* Formación académica list rows (dark section). */
.epita-fila-formacion {
	border-bottom: 1px solid #26272B;
}

.epita-fila-formacion a {
	text-decoration: none;
}

.epita-fila-formacion:hover,
.epita-fila-formacion:focus-within {
	background-color: #1A1B1E;
}

/* Contact rows in the dark contact section. */
.epita-fila-contacto {
	border-bottom: 1px solid #26272B;
}

/* Pending institutional data: one deliberate editorial note instead of a stack of
 * bracketed lines. The dashed rule marks it as content waiting to be replaced. */
.epita-nota-pendiente {
	border-left: 3px dashed #4A4D53;
	padding-left: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * 9. Responsive rules — DESIGN-BRIEF §6
 *    Escritorio 1440 (contenido 1200–1240) · Tableta 768 · Celular 390.
 *    < 1024px: menú hamburguesa (46×46), accesos 3 col (tableta) / 2 col
 *    (celular), noticias 2/1 col. Táctil mínimo 44×44px.
 *    Breakpoints: 1024px (desktop/tablet) and 640px (tablet/phone).
 *    1024px is a single breakpoint with three jobs: hamburger (§9.1), grid steps
 *    (§9.4) and the institutional top bar moving into the overlay (§9.8).
 * ------------------------------------------------------------------------- */

/* 9.1 Hamburger below 1024px.
 *
 * core/navigation only accepts overlayMenu: "never" | "mobile" | "always", and
 * "mobile" is hard-wired to 600px by exactly two core rules in
 * wp-block-library (verified against the rendered page, WP 7.0.2):
 *
 *   @media (min-width:600px) {
 *     .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open)
 *       { display:block; width:100%; position:relative; z-index:auto; background-color:inherit }
 *     .wp-block-navigation__responsive-container-open:not(.always-shown)
 *       { display:none }
 *   }
 *
 * There is no block attribute for a custom breakpoint, so the 600–1023.98px
 * band re-asserts the base (overlay) values. Only `display` is touched: markup,
 * data-wp-* attributes and core's Interactivity API handlers stay intact, so the
 * toggle, the overlay, Escape-to-close and the focus trap keep working. The
 * class is repeated to out-specify core's 3-class selector without !important.
 *
 * This also removes a real 87px horizontal overflow at 768px: with the
 * horizontal menu rendered, the last submenu panel (position:absolute,
 * visibility:hidden, min-width:250px — §4) reached x=855 on a 768px viewport
 * and pushed document.scrollWidth to 855.
 */
@media (min-width: 600px) and (max-width: 1023.98px) {

	.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* The toggle sits at the end of the menu row, where a hamburger is expected.
 * The class is repeated: core sets `margin: 0` on this button from a rule of
 * the same specificity, and the shorthand has to be beaten on both axes. */
@media (max-width: 1023.98px) {

	.wp-block-navigation .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
		margin-inline-start: auto;
	}
}

/* 9.2 Desktop menu density.
 * Measured widths of the eight top-level items, at 1024–1440px:
 *   pill padding 0.875rem (default) → the row needs 1168px
 *   pill padding 0.5rem             → the row needs 1028px
 * The wide content size is 1240px, so the default padding only fits from
 * 1240px up. Below that the padding is tightened, which keeps the bar on a
 * single row down to 1100px. Between 1024px and ~1100px the available width is
 * 952–1028px and the bar wraps to two rows: that is the block's own
 * flexWrap:"wrap" doing its job, it does not overflow, and cramming eight
 * items into 952px would need ~0.5px of padding. See the report. */
@media (min-width: 1024px) and (max-width: 1239.98px) {

	.wp-block-navigation .wp-block-navigation-item__content {
		padding-inline: 0.5rem;
	}
}

/* 9.3 Submenu carets.
 * With openSubmenusOnClick:false core still renders the caret as a focusable
 * <button class="wp-block-navigation__submenu-icon">, which measured 8.4×8.4px.
 * It is given a 24×24px box (WCAG 2.1 SC 2.5.8 AA) stretched to the full height
 * of its nav item, without widening the row. It is not taken to 44×44px on
 * purpose: see README/report — four 44px carets add ~144px to a bar that
 * already needs ~1090px at 1024px. The caret is redundant anyway (submenus open
 * on hover and on focus-within), and it is display:none inside the overlay,
 * which is the only touch context. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	position: relative;
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation .wp-block-navigation__submenu-icon::before {
	content: "";
	position: absolute;
	inset-block: -0.6875rem;
	inset-inline: 0;
}

/* 9.4 Grids — DESIGN-BRIEF §6.
 * Core grid layout emits repeat(auto-fill, minmax(<minimumColumnWidth>,1fr)) or
 * repeat(<columnCount>, minmax(0,1fr)), neither of which can express the
 * 4/3/2 and 3/2/1 steps the brief requires, so the tracks are set explicitly.
 * The block attributes are left untouched, so the markup stays valid. */

/* Accesos rápidos: 4 (escritorio) / 3 (tableta) / 2 (celular).
 * The 4-column desktop step is explicit too: with minimumColumnWidth 250px,
 * auto-fill only reaches 4 tracks above ~1122px, so 1024–1122px fell back to 3
 * and did not match the reference layout. */
@media (min-width: 1024px) {

	.epita-grid-accesos.epita-grid-accesos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1023.98px) {

	.epita-grid-accesos.epita-grid-accesos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 639.98px) {

	.epita-grid-accesos.epita-grid-accesos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 153px-wide cards at 390px: trim the inner padding so two labels fit. */
	.epita-grid-accesos .epita-card-oscura {
		padding-inline: 0.875rem;
	}
}

/* Noticias: 3 (escritorio) / 2 (tableta) / 1 (celular). */
@media (max-width: 1023.98px) {

	.epita-noticias .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639.98px) {

	.epita-noticias .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 9.5 Touch targets ≥44×44px below 1024px (DESIGN-BRIEF §6).
 *
 * Only controls that are a target in their own right are enlarged. Links that
 * sit inside a sentence are left alone: WCAG 2.1 SC 2.5.5/2.5.8 exempt inline
 * links in a block of text, and padding them out would break the prose.
 */
/* The standalone controls of the theme, in one list. `.epita-cta` marks the
 * "Ver todas →" / "Perfil profesional →" style links, which are a whole
 * paragraph on their own and therefore a target, not an inline link in prose. */
.epita-barra-superior a,
.epita-pie .wp-block-list a,
.epita-pie p a,
.epita-pie .wp-block-group.is-layout-flex a,
.epita-cta a,
.wp-block-post-title a,
.wp-block-post-excerpt__more-link,
.epita-chip-categorias a,
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 24px; /* WCAG 2.1 SC 2.5.8 (AA) on pointer/desktop. */
}

@media (max-width: 1023.98px) {

	/* DESIGN-BRIEF §6: táctil mínimo 44×44px. The type sizes are left at their
	 * design tokens ("Etiqueta 12.5", "Auxiliar 13.5"); only the boxes grow.
	 * `.epita-barra-superior` is absent from this list on purpose: the top bar is
	 * display:none below 1024px (§9.8), so sizing it here would be dead CSS. */
	.epita-pie .wp-block-list a,
	.epita-pie p a,
	.epita-pie .wp-block-group.is-layout-flex a,
	.epita-cta a,
	.wp-block-post-title a,
	.wp-block-post-excerpt__more-link,
	.epita-chip-categorias a,
	.wp-block-site-title a {
		min-height: 44px;
	}

	/* The footer lists are set at line-height 2; the 44px boxes now provide the
	 * rhythm, so the extra leading is dropped to avoid 60px rows. */
	.epita-pie .wp-block-list {
		line-height: 1.4;
	}
}

/* Entries of the mobile overlay. Core zeroes their padding inside the overlay
 *
 *   .wp-block-navigation__responsive-container.is-menu-open
 *     :where(:not(.disable-default-overlay))
 *     .wp-block-navigation__responsive-container-content
 *     .wp-block-navigation-item__content { padding: 0 }
 *
 * which left every entry between 22px and 36px tall and as narrow as 35px
 * ("Inicio") — measured at 390px. Only the box grows: the padding stays with
 * core, the type scale stays on its tokens, and the markup and data-wp-*
 * attributes are untouched. This is the only touch context of the menu, since
 * the overlay exists only below 1024px (§9.1). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
}

/* 9.6 Card and row links become full-area targets.
 *
 * In "accesos rápidos" and in the "formación académica" rows the <a> is inline
 * inside a paragraph, so the clickable box was only the text (79.9×16px inside
 * a 64px-tall card). A stretched pseudo-element turns the whole card/row into
 * the target on every viewport, with no markup change and no JavaScript. The
 * sibling arrows are aria-hidden and non-interactive, so nothing is covered.
 */
.epita-card-oscura,
.epita-fila-formacion {
	position: relative;
}

.epita-card-oscura a::after,
.epita-fila-formacion .wp-block-group a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The stretched link owns the whole card, so the focus ring has to be drawn on
 * the card instead of on the text box. */
.epita-card-oscura:focus-within,
.epita-fila-formacion:focus-within {
	outline: 3px solid var(--wp--preset--color--amarillo);
	outline-offset: 2px;
}

.epita-card-oscura a:focus-visible,
.epita-fila-formacion a:focus-visible {
	outline: none;
}

/* 9.7 Body copy never below 15px on phones (DESIGN-BRIEF §6).
 * The "cuerpo" preset is already fluid with min 0.9375rem = 15px, so this only
 * guards the two card sizes that were set as literal rem values in patterns. */
@media (max-width: 639.98px) {

	.epita-card-oscura p,
	.epita-card .wp-block-post-excerpt {
		font-size: 0.9375rem;
	}
}

/* 9.8 Institutional links: top bar on desktop, navigation overlay on phones.
 *
 * The black top bar carries six service links (Portal, Aula Virtual, Biblioteca,
 * Repositorio, Mesa de Partes, Campus Virtual). Once those became 44px targets
 * (§9.5) they wrapped to three rows and the bar measured 162px at 390px — about
 * a fifth of the viewport spent before the escudo is even visible.
 *
 * Below 1024px — the same breakpoint the hamburger uses (§9.1) — the bar is
 * dropped and the identical six links are served from inside the overlay, as the
 * "Servicios institucionales" submenu of the navigation block
 * (patterns/cabecera.php, one shared PHP array feeds both copies).
 *
 * Both rules use `display: none`, never `visibility` or a clip-rect: the hidden
 * copy has to leave the accessibility tree, otherwise a screen-reader user would
 * meet the same six links twice on the same page.
 *
 * At 1024px and up nothing changes: the bar renders exactly as before and the
 * submenu is removed, so the horizontal menu keeps its eight top-level items.
 */
@media (max-width: 1023.98px) {

	.epita-barra-superior {
		display: none;
	}
}

/* The class is repeated to out-specify core's `.wp-block-navigation__container >
 * .wp-block-navigation-item` display rules without reaching for !important.
 * core/navigation-submenu puts the custom class on both the <li> and its inner
 * <ul>; hiding the <li> is enough, the <ul> follows as a descendant. */
@media (min-width: 1024px) {

	.epita-nav-institucional.epita-nav-institucional {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 10. Motion preferences
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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