/*
Theme Name: Jana Doss — Digital Curator
Theme URI: https://janadoss.com
Author: Fran (IT) para Jana Doss
Description: Tema de bloques (FSE) a medida para janadoss.com. Sistema de diseño "The Digital Curator": estética editorial cálida, Noto Serif + Manrope, capas tonales sin bordes. Pensado para usarse con GenerateBlocks. Multi-idioma ES/DE.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: janadoss
Tags: full-site-editing, block-styles, blog, portfolio, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   Solo estilos que theme.json no cubre cómodamente.
   La paleta, tipografías, spacing y radius viven en theme.json.
   ========================================================================== */

/* --- Regla "No-Line": nunca bordes de 1px para separar secciones --- */
.jd-section { padding-block: var(--wp--preset--spacing--70); }

/* --- Cabecera glassmorphism (sticky) --- */
.jd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(237, 224, 216, 0.72); /* surface-variant 72% */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* --- Navegación: labels minimalistas --- */
.jd-header .wp-block-navigation a {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--ink-variant);
  transition: color .25s ease;
}
.jd-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }

/* --- Hero: imagen de fondo con velado tonal hacia la base --- */
.jd-hero { position: relative; min-height: 88vh; }
.jd-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 35%, var(--wp--preset--color--base) 100%);
  pointer-events: none;
}
.jd-hero > .wp-block-group { position: relative; z-index: 1; }

/* --- Bento: la imagen puede romper el borde del contenedor (look editorial) --- */
.jd-bento .jd-bleed img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s ease;
}
.jd-bento .jd-card:hover .jd-bleed img { transform: scale(1.05); }

/* --- About: bloque tonal detrás del retrato (capas, sin sombras duras) --- */
.jd-about-portrait { position: relative; }

/* --- Labels "luxury técnico": uppercase + tracking amplio --- */
.jd-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--wp--preset--color--primary);
}

/* --- Inputs (formulario de contacto): solo borde inferior --- */
.jd-form input,
.jd-form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--outline-variant);
  border-radius: 0;
  padding: 0.9rem 0;
  width: 100%;
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--ink);
}
.jd-form input:focus,
.jd-form textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--wp--preset--color--primary);
}

/* --- Sombra ambiente (solo si hace falta): difusa, tintada, nunca negra --- */
.jd-elevate {
  box-shadow: 0 24px 48px -24px rgba(33, 26, 22, 0.12);
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  .jd-bento .jd-bleed img, .jd-header .wp-block-navigation a { transition: none; }
}