/*
Theme Name: Perfumetti
Theme URI: https://perfumetti.com
Author: Perfumetti
Description: Tema de bloques plano y moderno para el blog de perfumes y colonias Perfumetti. Incluye tema claro y oscuro (según el dispositivo) y una paleta pensada para cumplir WCAG AA.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perfumetti
*/

/* ==========================================================================
   1. Tema oscuro
   Los colores base viven en theme.json. Aquí solo se sustituyen sus valores
   cuando el dispositivo está en modo oscuro. Si más adelante se añade un
   botón de cambio, basta con poner data-theme="dark" o "light" en <html>.
   ========================================================================== */

html { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --wp--preset--color--fondo: #15131E;
    --wp--preset--color--superficie: #211E2E;
    --wp--preset--color--texto: #F6F5F1;
    --wp--preset--color--texto-secundario: #B4B1C7;
    --wp--preset--color--acento: #A592FF;
    --wp--preset--color--etiqueta-fondo: #2E2650;
    --wp--preset--color--etiqueta-texto: #D6CEFF;
    --wp--preset--color--boton-fondo: #F6F5F1;
    --wp--preset--color--boton-texto: #15131E;
  }
}

html:root[data-theme="dark"] {
  --wp--preset--color--fondo: #15131E;
  --wp--preset--color--superficie: #211E2E;
  --wp--preset--color--texto: #F6F5F1;
  --wp--preset--color--texto-secundario: #B4B1C7;
  --wp--preset--color--acento: #A592FF;
  --wp--preset--color--etiqueta-fondo: #2E2650;
  --wp--preset--color--etiqueta-texto: #D6CEFF;
  --wp--preset--color--boton-fondo: #F6F5F1;
  --wp--preset--color--boton-texto: #15131E;
}

/* ==========================================================================
   2. Accesibilidad: foco visible con el teclado
   ========================================================================== */

:where(a, button, input, textarea, select, summary):focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   3. Cabecera y pie
   ========================================================================== */

.perfumetti-header {
  border-bottom: 1px solid var(--wp--preset--color--etiqueta-fondo);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.perfumetti-brand { gap: 0.75rem; }
.perfumetti-brand .wp-block-site-title { margin: 0; line-height: 1; }
.perfumetti-brand .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--texto); }

.perfumetti-mark { display: block; width: 28px; height: 35px; flex: none; }
.perfumetti-mark .m-cap { fill: var(--wp--preset--color--texto); }
.perfumetti-mark .m-body { fill: var(--wp--preset--color--acento); }
.perfumetti-mark .m-drop { fill: var(--wp--preset--color--fondo); }

.perfumetti-footer {
  border-top: 1px solid var(--wp--preset--color--etiqueta-fondo);
  margin-top: var(--wp--preset--spacing--70, 4rem);
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
.perfumetti-aviso { color: var(--wp--preset--color--texto-secundario); max-width: 60ch; }

/* ==========================================================================
   4. Botones: principal (relleno tinta) y secundario (contorno violeta)
   ========================================================================== */

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: transparent;
  color: var(--wp--preset--color--acento);
  border: 1.5px solid var(--wp--preset--color--acento);
  padding: calc(0.625rem - 1.5px) calc(1.125rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
  background: var(--wp--preset--color--etiqueta-fondo);
  color: var(--wp--preset--color--etiqueta-texto);
}

/* ==========================================================================
   5. Etiquetas (categorías) y tarjetas
   ========================================================================== */

.wp-block-post-terms a {
  display: inline-block;
  background: var(--wp--preset--color--etiqueta-fondo);
  color: var(--wp--preset--color--etiqueta-texto);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
}
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.perfumetti-card {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--etiqueta-fondo);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}
.perfumetti-card .wp-block-post-featured-image { margin: 0; }
.perfumetti-card .wp-block-post-featured-image img { border-radius: 0; }
.perfumetti-card-body { padding: 1rem 1.25rem 1.25rem; }
.perfumetti-card-body > * + * { margin-top: 0.5rem; }
.perfumetti-card .wp-block-post-title { margin: 0; }
.perfumetti-card .wp-block-post-title a { color: var(--wp--preset--color--texto); text-decoration: none; }
.perfumetti-card .wp-block-post-title a:hover { text-decoration: underline; }

.perfumetti-ficha {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--etiqueta-fondo);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
}

/* ==========================================================================
   6. Portada y contenido
   ========================================================================== */

.perfumetti-hero { padding-top: 3rem; padding-bottom: 2rem; }
.perfumetti-hero p { color: var(--wp--preset--color--texto-secundario); max-width: 55ch; }

.perfumetti-main { padding-top: 2rem; }

.wp-block-separator { border-color: var(--wp--preset--color--etiqueta-fondo); }

.wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--acento);
  border-radius: 0;
  padding-left: 1.25rem;
  margin-left: 0;
}

.perfumetti-comment {
  border-top: 1px solid var(--wp--preset--color--etiqueta-fondo);
  padding-top: 1rem;
  margin-top: 1rem;
}

.wp-block-query-pagination { margin-top: 2rem; gap: 1rem; }
.wp-block-query-pagination a { color: var(--wp--preset--color--acento); }
.wp-block-query-pagination .current { color: var(--wp--preset--color--texto); font-weight: 500; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
  background: var(--wp--preset--color--superficie);
  color: var(--wp--preset--color--texto);
  border: 1.5px solid var(--wp--preset--color--texto-secundario);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font: inherit;
}