/*!
Theme Name: LAK
Theme URI:
Author:
Author URI:
Description: Theme base para desarrollos a medida.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lak

Basado en Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
*/

/* ==========================================================================
   Orden de capas
   Todo lo que esté dentro de un @layer pierde contra el CSS sin layer.
   Los estilos de cada sitio se escriben SIN layer, al final del archivo.
   ========================================================================== */

@layer reset, wordpress;

/* ==========================================================================
   Tokens globales
   ========================================================================== */

:root {
	--color-primary: #256d3e;
	--color-secondary: #cbdb2a;
	--color-black: #313032;
	--color-white: #ffffff;
	--color-gray: #858889;

	--container-width: 80rem;
	--container-gutter: clamp(1rem, 3vw, 2rem);
}

/* ==========================================================================
   Reset mínimo
   ========================================================================== */

@layer reset {

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	img,
	video {
		height: auto;
	}

	iframe,
	embed,
	object {
		max-width: 100%;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	[hidden] {
		display: none !important;
	}
}

/* ==========================================================================
   Compatibilidad WordPress
   ========================================================================== */

@layer wordpress {

	/* Accesibilidad: texto solo para lectores de pantalla y skip link. */
	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		width: 1px;
		white-space: nowrap;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		clip-path: none;
		display: block;
		height: auto;
		width: auto;
		left: 0.5rem;
		top: 0.5rem;
		padding: 1rem 1.5rem;
		background: #fff;
		color: #000;
		z-index: 100000;
	}

	/* Alineaciones del editor (contenido clásico y algunos bloques). */
	.alignleft {
		float: left;
		margin-inline-end: 1.5em;
		margin-block-end: 1em;
	}

	.alignright {
		float: right;
		margin-inline-start: 1.5em;
		margin-block-end: 1em;
	}

	.aligncenter {
		display: block;
		margin-inline: auto;
		clear: both;
	}

	/* Captions del editor clásico. */
	.wp-caption {
		max-width: 100%;
	}

	.wp-caption-text {
		text-align: center;
	}
}

/* ==========================================================================
   Estilos del sitio (sin layer)
   ========================================================================== */
   
body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}