/*
Theme Name: Malaspina
Theme URI: https://lucasmalaspina.com
Author: Lucas Malaspina
Description: Block theme alineado al manual de marca de Lucas Malaspina.
              Tipografías: EB Garamond + Source Sans 3.
              Paleta: negro, blanco roto, naranja resaltador, grises.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: malaspina
*/

/* =========================================================================
   1. GOOGLE FONTS
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* Scroll suave para anchor links (ej. botón del hero → #newsletter) */
html {
  scroll-behavior: smooth;
}

/* Espacio para que el bloque newsletter no quede pegado al header sticky
   cuando se hace scroll vía anchor */
#newsletter {
  scroll-margin-top: 80px;
}


/* =========================================================================
   2. TRAMA DE PUNTOS (el cuaderno de notas)
   ========================================================================= */
:root {
  --malaspina-dots: url('assets/dots-pattern.svg');
}

.has-trama-puntos,
.wp-block-cover.is-style-trama-puntos {
  background-image: var(--malaspina-dots);
  background-repeat: repeat;
  background-size: 28px 28px;
}

.has-trama-puntos-naranja {
  background-color: var(--wp--preset--color--naranja);
  background-image: var(--malaspina-dots);
  background-repeat: repeat;
  background-size: 28px 28px;
  /* Puntos en blanco roto sobre fondo naranja: para portadas de YouTube */
}


/* =========================================================================
   3. RESALTADOR NARANJA — "marca lo que importa"
   ========================================================================= */
/* Aplicar a un <span> dentro de un título para subrayar palabras clave. */
.malaspina-resaltador {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    var(--wp--preset--color--naranja) 55%,
    var(--wp--preset--color--naranja) 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.1em;
}

/* Variante: itálica subrayada (como en el mockup del newsletter) */
.malaspina-resaltador-italica {
  font-style: italic;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 78%,
    var(--wp--preset--color--naranja) 78%,
    var(--wp--preset--color--naranja) 95%,
    transparent 95%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


/* =========================================================================
   4. IMÁGENES EN BLANCO Y NEGRO (lenguaje editorial del manual)
   ========================================================================= */
/* Aplicar a la imagen destacada de las entradas para sumar el filtro b/n. */
.is-style-bn img,
.wp-block-post-featured-image.is-style-bn img {
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.3s ease;
}

.is-style-bn:hover img,
.wp-block-post-featured-image.is-style-bn:hover img {
  filter: grayscale(0) contrast(1);
}


/* =========================================================================
   5. CARD DE ENTRADA — listado de posts
   ========================================================================= */
.wp-block-post {
  border-bottom: 1px solid var(--wp--preset--color--gris-claro);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.wp-block-post:last-child {
  border-bottom: none;
}


/* =========================================================================
   6. NAVEGACIÓN — sub-marcas (Sin Pauta, La Traducción)
   ========================================================================= */
/* Estos elementos del nav son lockups tipográficos especiales.
   Marcarlos con una clase custom en el menú para que tomen este estilo. */
.malaspina-submarca-sinpauta {
  font-family: var(--wp--preset--font-family--eb-garamond) !important;
  font-style: italic;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem !important;
}

.malaspina-submarca-traduccion {
  font-family: var(--wp--preset--font-family--eb-garamond) !important;
  font-style: italic;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem !important;
}

.malaspina-submarca-traduccion::after {
  content: '.';
  color: var(--wp--preset--color--naranja);
  font-weight: 800;
}


/* =========================================================================
   7. PUNTO NARANJA DEL LOGOTIPO
   ========================================================================= */
/* Si usás el sitio título como wordmark, esta clase agrega el punto naranja
   característico al final. */
.malaspina-firma::after {
  content: '.';
  color: var(--wp--preset--color--naranja);
  font-weight: 800;
  margin-left: 0.05em;
}


/* =========================================================================
   8. NEWSLETTER CTA — bloque Jetpack Subscriptions estilado
   ========================================================================= */
.malaspina-newsletter-cta {
  text-align: center;
}

.malaspina-newsletter-title {
  font-family: var(--wp--preset--font-family--eb-garamond) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  line-height: 1.1 !important;
  color: var(--wp--preset--color--blanco-roto) !important;
}

/* Estilos del form de Jetpack dentro del CTA naranja */
.malaspina-newsletter-cta .wp-block-jetpack-subscriptions {
  margin: 0 auto;
  max-width: 420px;
}

.malaspina-newsletter-cta .wp-block-jetpack-subscriptions__textfield input,
.malaspina-newsletter-cta input[type="email"] {
  background: var(--wp--preset--color--blanco-roto) !important;
  border: 1px solid var(--wp--preset--color--blanco-roto) !important;
  color: var(--wp--preset--color--negro) !important;
  font-family: var(--wp--preset--font-family--source-sans) !important;
  font-size: 0.9375rem !important;
  padding: 0.85rem 1.1rem !important;
  border-radius: 999px !important;
  width: 100% !important;
  box-sizing: border-box;
}

.malaspina-newsletter-cta .wp-block-jetpack-subscriptions__textfield input::placeholder {
  color: var(--wp--preset--color--gris-oscuro);
  opacity: 0.7;
}

.malaspina-newsletter-cta .wp-block-jetpack-subscriptions__button,
.malaspina-newsletter-cta button[type="submit"] {
  background: var(--wp--preset--color--negro) !important;
  color: var(--wp--preset--color--blanco-roto) !important;
  border: 1px solid var(--wp--preset--color--negro) !important;
  font-family: var(--wp--preset--font-family--source-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.malaspina-newsletter-cta .wp-block-jetpack-subscriptions__button:hover,
.malaspina-newsletter-cta button[type="submit"]:hover {
  opacity: 0.85;
}


/* =========================================================================
   9. SELECTOR DE IDIOMAS (WPML)
   ========================================================================= */
.malaspina-lang-switcher {
  padding-left: 1.5rem;
  border-left: 1px solid var(--wp--preset--color--gris-claro);
}

/* Listado horizontal compacto, sin estilos de lista. */
.malaspina-lang-switcher .wpml-ls-legacy-list-horizontal,
.malaspina-lang-switcher .wpml-ls {
  padding: 0;
  border: none;
  background: transparent;
}

.malaspina-lang-switcher .wpml-ls-legacy-list-horizontal ul,
.malaspina-lang-switcher .wpml-ls ul {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.malaspina-lang-switcher .wpml-ls-item {
  padding: 0;
  margin: 0;
}

.malaspina-lang-switcher .wpml-ls-link {
  color: var(--wp--preset--color--gris-oscuro);
  text-decoration: none;
  font-weight: 500;
  padding: 0;
}

.malaspina-lang-switcher .wpml-ls-current-language .wpml-ls-link {
  color: var(--wp--preset--color--negro);
  font-weight: 600;
}

.malaspina-lang-switcher .wpml-ls-link:hover {
  color: var(--wp--preset--color--naranja);
}


/* =========================================================================
   10. HERO B — Retrato silueta + wordmark grande (efecto del manual pág. 12)
   ========================================================================= */
.malaspina-hero-b {
  gap: 4rem !important;
}

.malaspina-portrait {
  /* Retrato circular con anillo naranja y foto B&N centrada en el rostro. */
  flex: 0 0 auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 6px solid var(--wp--preset--color--naranja);
  background: var(--wp--preset--color--blanco-roto);
  padding: 10px;
  box-sizing: border-box;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
}

.malaspina-portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* object-position vertical 25%: el rostro queda en el centro del círculo,
     dejando ver pelo arriba y parte de los hombros abajo. */
  object-position: 50% 25%;
  filter: grayscale(1) contrast(1.05);
  display: block;
}

.malaspina-hero-b-text {
  flex: 1 1 0;
  min-width: 280px;
}

.malaspina-wordmark-grande {
  font-family: var(--wp--preset--font-family--eb-garamond) !important;
  font-size: clamp(2.75rem, 7vw, 5.5rem) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  font-style: italic !important;
  color: var(--wp--preset--color--negro) !important;
  margin: 0 0 1rem !important;
  letter-spacing: -0.01em !important;
}

.malaspina-wordmark-grande .dot {
  color: var(--wp--preset--color--naranja);
  font-style: normal;
  font-weight: 800;
}

.malaspina-hero-tagline {
  font-family: var(--wp--preset--font-family--source-sans) !important;
  font-size: 1.0625rem !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  max-width: 28em;
  margin: 0 !important;
}

/* Responsive: en mobile el hero se apila en columna */
@media (max-width: 768px) {
  .malaspina-hero-b {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
  }
  .malaspina-portrait {
    width: 260px;
    height: 260px;
  }
}


/* =========================================================================
   11. SELECTION
   ========================================================================= */
::selection {
  background-color: var(--wp--preset--color--naranja);
  color: var(--wp--preset--color--blanco-roto);
}