/*
Theme Name:  Astra UNAJE
Template:    astra
Description: Tema hijo del portal de socios de UNAJE (socios.unaje.org.ar).
Version:     0.1.0
Author:      Manija
Text Domain: astra-unaje
*/

/*
 * Colores de marca MEDIDOS sobre el isotipo (UNAJE no entrego manual):
 *   turquesa #1f9588, verde #9bc655.
 * Colores de texto DERIVADOS (oscurecidos hasta pasar AA sobre blanco):
 *   accion #1b8479 (4.54), accion-hover #14635b (7.08), tinta #16302d (14.05),
 *   texto secundario #4a5d5a (6.99). El turquesa de marca sobre blanco da 3.68:
 *   no sirve para texto chico ni para botones con letra blanca.
 * Medido el 10/10/2026. Si aparece el manual de UNAJE, manda el manual.
 *
 * Tipografia: Rubik, la misma de la landing de Switchear. UNAJE no tiene
 * tipografia institucional declarada; asi los dos sitios se ven de la familia.
 */

:root {
	--unaje-turquesa: #1f9588;
	--unaje-verde: #9bc655;
	--unaje-accion: #1b8479;
	--unaje-accion-hover: #14635b;
	--unaje-tinta: #16302d;
	--unaje-texto-2: #4a5d5a;
	--unaje-fondo-suave: #f2f7f1;
	--unaje-borde: #dfe8e3;
	--unaje-radio: 14px;
	--unaje-fuente: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * Astra arma todo con --ast-global-color-0..8 y los imprime en un <style> en
 * linea. ":root:root" pesa mas que el ":root" de Astra sin depender del orden
 * en que se cargan las hojas.
 */
:root:root {
	--ast-global-color-0: var(--unaje-accion);       /* links y botones */
	--ast-global-color-1: var(--unaje-accion-hover); /* hover */
	--ast-global-color-2: var(--unaje-tinta);        /* titulos */
	--ast-global-color-3: var(--unaje-texto-2);      /* texto */
	--ast-global-color-4: var(--unaje-fondo-suave);  /* fondos suaves */
	--ast-global-color-5: #ffffff;
	--ast-global-color-6: var(--unaje-borde);
	--ast-global-color-7: var(--unaje-turquesa);
	--ast-global-color-8: var(--unaje-verde);
}

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button,
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--unaje-fuente);
}

body {
	color: var(--unaje-texto-2);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	color: var(--unaje-tinta);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ---- Cabecera ------------------------------------------------------- */

.site-header .ast-primary-header-bar {
	border-bottom: 3px solid var(--unaje-turquesa);
}

.site-header .custom-logo {
	max-height: 44px;
	width: auto;
}

.site-title a,
.site-title a:hover {
	color: var(--unaje-tinta);
	font-weight: 500;
	font-size: 1rem;
}

.main-header-menu .menu-link {
	font-weight: 500;
	color: var(--unaje-tinta);
}

.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .menu-link:hover {
	color: var(--unaje-accion);
}

/* ---- Paginas con titulo --------------------------------------------- */

/*
 * Astra separa el contenido de la cabecera y del pie (60px en #primary) solo
 * desde los 1200px: mas angosto, el titulo quedaba pegado a la cabecera (23/10,
 * Mi perfil en el iPhone). Solo en las paginas con el titulo de Astra: la
 * portada y las guias (agenda, alojamientos, traslados) arrancan con su propio
 * bloque, pegado a la cabecera a proposito. Ojo: esas tambien tienen un
 * .entry-header, vacio y con .ast-no-title; sin el :not quedaba una franja
 * clara arriba del bloque violeta.
 */
@media (max-width: 1199px) {
	.ast-plain-container .entry-header:not(.ast-no-title) {
		margin-top: clamp(28px, 4vw, 48px);
	}

	.ast-plain-container .entry-header:not(.ast-no-title) + .entry-content {
		margin-bottom: clamp(40px, 5vw, 60px);
	}
}

/* ---- Botones -------------------------------------------------------- */

.wp-block-button__link,
.ast-button,
.button,
button[type="submit"],
input[type="submit"] {
	background-color: var(--unaje-accion);
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.ast-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--unaje-accion-hover);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--unaje-turquesa);
	outline-offset: 2px;
}

/* ---- Inicio: tarjetas de acceso -------------------------------------- */

.unaje-accesos .wp-block-column {
	padding: 22px;
	background: #fff;
	border: 1px solid var(--unaje-borde);
	border-top: 6px solid var(--unaje-turquesa);
	border-radius: var(--unaje-radio);
}

.unaje-accesos .wp-block-column:nth-child(even) {
	border-top-color: var(--unaje-verde);
}

.unaje-accesos h3 {
	margin-top: 0;
	padding-right: 44px; /* lugar para la flecha */
	font-size: 1.15rem;
}

/*
 * Toda la tarjeta es el link, sin subrayado (16/10, pedido de Agustin: el
 * titulo subrayado se veia mal). Lo que dice "esto se toca" es la flecha en un
 * circulo, siempre visible: en el celular no hay hover. El ::after del link
 * cubre la tarjeta entera, asi se puede tocar en cualquier parte.
 * Con "body .entry-content" adelante: Astra subraya con
 * ".ast-single-post .entry-content a".
 */
.unaje-accesos .wp-block-column {
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

body .entry-content .unaje-accesos h3 a {
	color: var(--unaje-tinta);
	text-decoration: none;
}

.unaje-accesos h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--unaje-radio);
}

.unaje-accesos .wp-block-column::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--unaje-accion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
	pointer-events: none;
}

.unaje-accesos .wp-block-column:hover {
	box-shadow: 0 8px 22px rgba(22, 48, 45, 0.12);
	transform: translateY(-2px);
}

/* El contorno de foco, solo con teclado (:focus-visible): con :focus-within
   aparecia tambien al hacer clic o tocar, un reborde sobre toda la tarjeta. */
.unaje-accesos h3 a,
.unaje-accesos h3 a:focus {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.unaje-accesos .wp-block-column:has(a:focus-visible) {
	outline: 2px solid #3d3d3d; /* gris oscuro neutro (16/10): el de color quedaba raro */
	outline-offset: 3px;
}

.unaje-portada {
	padding: 36px 32px;
	background: var(--unaje-fondo-suave);
	border-radius: var(--unaje-radio);
}

.unaje-portada .unaje-etiqueta {
	display: inline-block;
	padding: 2px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--unaje-tinta);
	background: var(--unaje-verde);
	border-radius: 999px;
}

/* Quien puede entrar. El filtro real es el DNI contra el padron, no el mail:
   por eso el texto habla de "dados de alta en el padron". */
.unaje-portada .unaje-portada__acceso {
	padding: 12px 16px;
	font-size: 0.95rem;
	color: var(--unaje-texto-2);
	background: #fff;
	border-left: 4px solid var(--unaje-turquesa);
	border-radius: 0 8px 8px 0;
}

.unaje-portada .unaje-portada__acceso strong {
	color: var(--unaje-tinta);
}

/* ---- Pie ------------------------------------------------------------ */

.site-footer {
	border-top: 1px solid var(--unaje-borde);
}

.site-footer,
.site-footer a {
	color: var(--unaje-texto-2);
}

/* Firma de Manija: misma forma que en la landing de Switchear. */
.site-footer .firma {
	display: block;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--unaje-borde);
	text-align: center;
}

.site-footer .firma__enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.4;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.site-footer .firma__enlace:hover,
.site-footer .firma__enlace:focus-visible {
	opacity: 1;
}

.site-footer .firma__logo {
	height: 15px;
	width: auto;
}

/* ---- Mi perfil en el menu: con icono de usuario ----------------------- */

/* La clase la pone configurar.sh en el item del menu. El icono es una
   mascara: toma el color del texto, tambien en hover y en el celular. */
.unaje-menu-perfil > a::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.4em;
	vertical-align: -0.18em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}