/*
Theme Name: Paula Carmona Child
Theme URI: https://paula-carmona.construccio.link/
Description: Capa técnica del proyecto Paula Carmona para Kava.
Author: 22MW
Template: kava
Version: 1.0.0
Text Domain: paula-carmona-child
*/

/**
 * Variables técnicas del child, espejo íntegro de :root en
 * design-kit/framework.css (mismos valores que el Design System de
 * CrocoBuilder). Solo variables, no clases: no sustituyen ni compiten
 * con CrocoBuilder como autoridad visual, solo evitan tener que ir
 * añadiendo variables sueltas cada vez que hace falta CSS fuera de su
 * contrato. Si cambian los valores en CrocoBuilder, hay que
 * sincronizarlos aquí a mano.
 */
:root {
  --pc-ink: #1d2422;
  --pc-ink-soft: #4e5a57;
  --pc-ink-mute: #6b7975;
  --pc-ink-faint: #849691;
  --pc-paper: #f4f6f5;
  --pc-white: #ffffff;
  --pc-mist: #e3eae7;
  --pc-mist-deep: #d6e0dc;
  --pc-line: #e4eae8;
  --pc-line-ink: #3a4744;
  --pc-green: #2f6e5e;
  --pc-green-dark: #245546;
  --pc-green-hover: #214d42;
  --pc-green-light: #8fc7b6;
  --pc-amber: #f9c68f;
  --pc-tint: rgba(47, 110, 94, 0.09);
  --pc-hover-white: #d1d9d7;
  --pc-hover-paper: #c8d2cf;
  --pc-veil: rgba(244, 246, 245, 0.8);
  --pc-focus: rgba(47, 110, 94, 0.28);

  --pc-serif: "Source Serif 4", Georgia, serif;
  --pc-sans: Karla, system-ui, sans-serif;
  --pc-radius: 0.375rem;
  --pc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --pc-measure: 42rem;
  --pc-shell: 1350px;
  --pc-shell-vw: 1350px;
  --pc-pad-x: 3.5rem;
  --pc-pad-y: 7.5rem;
  --pc-panel-pad: 3.5rem;
  --pc-head-offset: 8.5rem;
}

/**
 * Reduced motion.
 *
 * Cobertura global de prefers-reduced-motion, fuera de CrocoBuilder porque
 * no admite selectores @media en common styles.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * Reset técnico: neutraliza estilos heredados del tema padre (Kava).
 *
 * No introduce decisiones de marca (colores, tipografías, espaciados).
 * La autoridad visual del proyecto es CrocoBuilder; este bloque solo
 * evita que la tipografía/color por defecto de Kava interfiera.
 */
/**
 * Base del design-kit (design-kit/framework.css, sección "2. Base").
 * Resets de elemento, no clases de componentes — no compite con
 * CrocoBuilder como autoridad visual. Incluye la corrección del
 * desbordamiento horizontal de 15px (.row de Kava), aquí en html
 * como en el framework original.
 */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--pc-paper);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

img {
  max-width: 100%;
}

body .site {
  overflow: clip;
}

/**
 * Sticky del header: aplicado directamente sobre el <header> real que
 * envuelve CrocoBuilder (#crocoblocks-theme-builder-header), no sobre
 * pc-header. El div interno de CrocoBuilder no se quedaba fijo por algo
 * en los wrappers intermedios del propio plugin; el header exterior sí.
 */
#crocoblocks-theme-builder-header {
  z-index: 10000;
  position: sticky;
  top: 0;
  background-color: rgba(227, 234, 231, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #d6e0dc;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1875rem var(--pc-focus);
}

/**
 * Reset técnico: neutraliza estilos heredados del tema padre (Kava).
 *
 * No introduce decisiones de marca (colores, tipografías, espaciados).
 * La autoridad visual del proyecto es CrocoBuilder; este bloque solo
 * evita que la tipografía/color por defecto de Kava interfiera.
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1-style,
.h2-style,
.h3-style,
.h4-style,
.h5-style,
.h6-style {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.site-header__wrap,
.top-panel {
  background-color: transparent;
  color: inherit;
}

.main-navigation,
.main-navigation a {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
}

/**
 * CTA "Demana cita" como último ítem del menú principal, diferenciado
 * como botón. El widget nav_menu de CrocoBuilder no permite estilizar
 * un único ítem por contrato (probado: un selector :last-child en
 * cssChildren se descarta en el readback), así que se resuelve aquí con
 * CSS normal, con más especificidad que la regla generada por CrocoBuilder.
 */
.pc-menu
  .pb-nav__list
  > .pb-nav__item[data-depth="0"]:last-child
  > .pb-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-family: Karla, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.75rem 1.375rem;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background-color: var(--pc-green);
  color: var(--pc-paper);
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-menu
  .pb-nav__list
  > .pb-nav__item[data-depth="0"]:last-child
  > .pb-nav__link:visited {
  color: var(--pc-paper);
}

.pc-menu
  .pb-nav__list
  > .pb-nav__item[data-depth="0"]:last-child
  > .pb-nav__link:hover {
  background-color: var(--pc-green-hover);
  color: var(--pc-paper);
}

@media (max-width: 776px) {
  .pc-menu
    .pb-nav__list
    > .pb-nav__item[data-depth="0"]:last-child
    > .pb-nav__link {
    display: flex;
    border-bottom: none;
    margin-top: 0.5rem;
  }
}
header .pb-nav.is-collapsed .pb-nav__mobile-overlay {
  background: transparent;
}
/**
 * Menú móvil: desplegable vertical (translateY) en vez de cajón lateral,
 * reutilizando is-collapsed/is-open, que gestiona el propio JS del widget
 * nav_menu (verificado en el código fuente: no fija transform por JS
 * inline, solo alterna clases). ".pb-nav" duplicado a propósito para
 * superar la especificidad exacta de las reglas base del plugin
 * (0,3,0 y 0,4,0) sin depender del orden de carga entre stylesheets.
 */
.pb-nav.pb-nav.is-collapsed .pb-nav__mobile-panel {
  transform: none;
  max-height: 0;
  overflow: hidden;
  border-bottom: 0;
  visibility: hidden;
  transition: max-height 0.25s ease;
}

.pb-nav.pb-nav.is-collapsed.is-open .pb-nav__mobile-panel {
  max-height: 80vh;
  overflow: auto;
  visibility: visible;
}

/**
 * Botón de cerrar (×) independiente del panel, oculto siempre: el propio
 * icono de la hamburguesa ya se convierte en X al abrir y sirve para
 * cerrar también (mismo botón, mismo listener de clic). Un segundo ×
 * dentro del panel es redundante.
 */
.pb-nav.pb-nav.is-collapsed .pb-nav__mobile-close {
  display: none;
}

/**
 * El widget query-loop de CrocoBuilder envuelve cada tarjeta en un div
 * intermedio (.cb-collection-item__content) sin exponer cssChildren para
 * estilizarlo vía MCP. Necesita display:flex + height:100% para que
 * flex-direction:column de la tarjeta (pc-card, pc-quote...) llegue de
 * verdad a sus hijos y las tarjetas queden a la misma altura en toda
 * la fila. Generalizado a cualquier query-loop del sitio, no solo uno.
 */
.cb-el-query-loop .cb-collection-item__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/**
 * pc-quote (Valoracions) necesita gap:1.5rem entre el texto y el nombre,
 * igual que su clase original en framework.css. No se añade a la regla
 * general de arriba porque pc-card (Servicios) no lleva gap propio y
 * crearía un hueco no deseado entre la foto y el cuerpo de la tarjeta.
 */
[data-id="reviews_loop"] .cb-collection-item__content {
  gap: 1.5rem;
}

/**
 * Icono hamburguesa -> X al abrir. Supera la especificidad del
 * background-image que aplica CrocoBuilder al collapse-toggle (0,3,2)
 * duplicando ".pb-nav" para llegar a (0,4,0).
 */
.pb-nav.pb-nav.is-open .pb-nav__collapse-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cline x1='1' y1='1' x2='15' y2='15' stroke='%231D2422' stroke-width='1.5'/%3E%3Cline x1='15' y1='1' x2='1' y2='15' stroke='%231D2422' stroke-width='1.5'/%3E%3C/svg%3E");
}

/**
 * Overlay más claro, ya que el header no se ve afectado (z-index de
 * pc-header por encima) pero el resto de la página sí se oscurecía
 * más de lo necesario con el 0.35 de opacidad por defecto del plugin.
 */
.pb-nav__mobile-overlay {
  background: rgba(29, 36, 34, 0.15);
}

/**
 * FAQ (pc-faq): acordeón sin <details>/<summary> (whitelist de tags de
 * `block` no los incluye — confirmado en cb_get_element_schema). El toggle
 * se resuelve con la clase de estado .is-open, gestionada por JS delegado
 * en el plugin propio (paula-carmona-functions), nunca aquí.
 *
 * Estas 3 reglas usan combinadores de ancestro/pseudo-clase que el
 * Design System de CrocoBuilder no puede expresar (solo admite estados
 * propios &:hover/&:active/&:focus/&:focus-visible/&[aria-disabled], no
 * selectores como .is-open o :last-child sobre un descendiente — mismo
 * límite ya documentado para el CTA del menú). Todo lo demás de pc-faq
 * (layout, tipografía, color, hover de pc-faq__q) vive en el Design
 * System, no aquí.
 */
.pc-faq__item:last-child {
  border-bottom: 0;
}

.pc-faq__item.is-open .pc-faq__a {
  display: block;
}

.pc-faq__item.is-open .pc-faq__sign {
  transform: rotate(45deg);
}