/*
Theme Name: AsapTheme Child
Theme URI: https://energiarenovable100.com/
Description: Tema fill d'AsapTheme. Conté les personalitzacions del lloc energiarenovable100.com perquè sobrevisquin a les actualitzacions del tema pare.
Author: energiarenovable100.com
Author URI: https://energiarenovable100.com/
Template: asap
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asap-child
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-logo, editor-style, featured-images, footer-widgets, sticky-post, theme-options
*/

/* ============================================================
   Les variables CSS --er-* s'injecten dinàmicament des de
   functions.php (asap_child_css_vars). Llegeixen els theme_mods,
   així que si canvies un color al Customizer es propaga sol.
   ============================================================ */


/* ----------------------------------------------------------------
   1) CLS: bloca proporcions als thumbnails dels loops.
   El tema pare els renderitza com a background-image sobre un div,
   però quan asap_deactivate_background està actiu passa a <img>:
   en aquest cas, sense aspect-ratio el navegador no pot reservar
   espai abans que carregui la imatge. aspect-ratio ho resol tant
   per a <img> com per al div de background.
   ---------------------------------------------------------------- */
.article-image,
.article-image-featured,
.article-loop img,
.article-loop-featured img,
.related-posts img,
.last-post-sidebar img {
	aspect-ratio: var(--er-thumb-ratio, 400 / 267);
	height: auto;
}

.last-post-sidebar .article-image,
.last-post-sidebar img {
	aspect-ratio: var(--er-side-ratio, 300 / 140);
}

img {
	max-inline-size: 100%;
	block-size: auto;
}


/* ----------------------------------------------------------------
   2) Accessibilitat: focus visible nítid (sense afectar el hover
   del ratolí gràcies a :focus-visible, només teclat).
   ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--er-link, #0183e4);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Retira el ring per defecte només quan no fa falta */
:focus:not(:focus-visible) {
	outline: none;
}


/* ----------------------------------------------------------------
   3) Controls de formulari: color nadiu derivat dels theme_mods.
   accent-color afecta checkboxes, radios, ranges i progress sense
   haver de restilar res manualment.
   ---------------------------------------------------------------- */
:root {
	accent-color: var(--er-btn-bg, #2471a3);
	color-scheme: light;
}


/* ----------------------------------------------------------------
   4) Animacions: respecte per a prefers-reduced-motion.
   Si l'usuari té activada la preferència d'accessibilitat,
   redueix transicions i scroll-behavior a un mínim.
   ---------------------------------------------------------------- */
@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;
		scroll-behavior: auto !important;
	}
}


/* ----------------------------------------------------------------
   5) Tipografia: kerning i features tipogràfiques.
   Petit guany de qualitat tipogràfica per a fonts modernes.
   ---------------------------------------------------------------- */
body {
	font-feature-settings: "kern" 1, "liga" 1;
	text-rendering: optimizeLegibility;
}

/* Evita orphelines a títols (no es pot evitar del tot, però ajuda) */
h1, h2, h3, h4 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}


/* ----------------------------------------------------------------
   6) Skip-link per accessibilitat (només es mostra amb teclat).
   El tema pare no en genera; si vols afegir-lo, descomenta-ho.
   ---------------------------------------------------------------- */
/*
.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 1000;
	background: var(--er-link);
	color: #fff;
	padding: 0.5rem 1rem;
	text-decoration: none;
}
.skip-link:focus { inset-inline-start: 0; }
*/


/* ----------------------------------------------------------------
   7) Aquí afegeix-hi els teus overrides personalitzats.
   Recorda que el CSS dinàmic del pare (inc/css.php) fa servir
   !important arreu; per guanyar especificitat hauràs de fer servir
   !important aquí també o un selector més específic.
   ---------------------------------------------------------------- */
/* Exemple:
.entry-title { color: var(--er-link) !important; }
*/