/**
Theme Name: Miko Sushi
Author: 13Node
Author URI: https://13node.com
Description: Astra child theme personalizado para Miko Sushi con accesibilidad.
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: mikosushi
Template: astra
*/

.pt-0 {
	padding-top: 0px!important;
}
.woocommerce-loop-category__title {
	color: #000000;
}
/* ===== 1. HEADER: negro sólido ===== */

#masthead.site-header {
	background-color: #000000;
	color: #ffffff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Menú principal en blanco, con detalle salmón al hover/activo */
#masthead .main-header-menu .menu-link {
	color: #ffffff;
	position: relative;
	text-decoration: none;
	transition: color 0.2s ease-out;
}

#masthead .main-header-menu .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 0;
	height: 2px;
	border-radius: 999px;
	background-color: #ff5f45; /* salmón del logo */
	transition: width 0.25s ease-out;
}

#masthead .main-header-menu .menu-link:hover,
#masthead .main-header-menu .menu-link:focus-visible {
	color: #ffffff;
}

#masthead .main-header-menu .menu-link:hover::after,
#masthead .main-header-menu .menu-link:focus-visible::after {
	width: 100%;
}

/* Item activo con subrayado permanente */
#masthead .main-header-menu .current-menu-item > .menu-link::after,
#masthead .main-header-menu .current_page_item > .menu-link::after {
	width: 100%;
}

/* ===== 2. BODY / FALLBACK GENERAL ===== */

body {
	background-color: #12090a; /* último tono del degradado, por si hay zonas sin .site-content */
	color: #f5f5f5;
}

/* ===== 3. SITE-CONTENT: degradado del header al “fondo del local” ===== */

.site-content {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background:
		/* un brillo suave salmón cerca del footer */
		radial-gradient(circle at 50% 100%, rgba(255, 95, 69, 0.20), transparent 60%),
		/* un brillo suave frío en la parte media para contraste */
		radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08), transparent 55%),
		/* degradado principal de negro a un oscuro cálido */
		linear-gradient(
			to bottom,
			#000000 0%,
			#050509 20%,
			#080814 45%,
			#0d090c 70%,
			#12090a 100%
		);
}

/* Opcional: si el contenido está envuelto en un contenedor, dale algo de aire */
.site-content > .ast-container,
.site-content > .elementor-section-wrap {
	position: relative;
	z-index: 1;
}

/* ===== 4. FOOTER: transparente, continuando el degradado ===== */

#colophon.site-footer {
	background: transparent; /* deja que se vea el degradado de .site-content */
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Texto del footer */
#colophon .ast-footer-copyright p {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
}

#colophon .ast-footer-copyright small {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	opacity: 0.85;
}

/* Enlaces del footer en blanco con toque salmón al hover */
#colophon a {
	color: #ffffff;
	text-decoration: none;
	position: relative;
}

#colophon a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.15rem;
	width: 0;
	height: 1px;
	background-color: #ff5f45;
	transition: width 0.2s ease-out;
}

#colophon a:hover::after,
#colophon a:focus-visible::after {
	width: 100%;
}

/* Contenedor de la imagen: siempre cuadrado y responsive */
.sp-wps-product-image-area .wps-product-image {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;        /* siempre cuadrado */
	overflow: hidden;
	background: #000;           /* por si la imagen tarda en cargar */
}

/* Imagen dentro del contenedor */
.sp-wps-product-image-area .wps-product-image img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;          /* recorta manteniendo proporción */
	object-position: center;    /* siempre centrada */
	display: block;
}

/* ACCESIBILIDAD */
.sr-only{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  color: #000!important;
  background: #fff!important;
}

/* --- Glass "light" accesible para fondos cálidos (#ffcf6b, etc.) --- */
.glass-light-aaa {
  /* Fondo principal (casi blanco para asegurar contraste con #324255) */
  --glass-bg: rgba(255, 255, 255, 0.92); /* >=0.90 mantiene AA/AAA con #324255 */
  background: linear-gradient( to bottom right,
              rgba(255,255,255,0.92), var(--glass-bg) );
  color: #324255;

  /* Glass look */
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border-radius: 14px;

  /* Espaciado base */
  padding: 1rem 1.25rem;
}

/* Fallback: si el navegador NO soporta backdrop-filter, usa fondo sólido */
@supports not ((backdrop-filter: blur(2px))) {
  .glass-light-aaa {
    background: #ffffff; /* sólido para que el contraste no dependa del fondo */
  }
}

/* Asegura enlaces distinguibles y con buen contraste dentro del glass */
.glass-light-aaa a {
  color: #223047;                 /* más oscuro que #324255 → AAA */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.glass-light-aaa a:hover { text-decoration-thickness: 3px; }

/* Foco visible en elementos interactivos dentro del glass */
.glass-light-aaa :where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Variante pill para badges / botones “chic” */
.glass-pill-aaa {
  composes: glass-light-aaa;  /* si usas CSS Modules; si no, duplica props clave */
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
}