/*
Theme Name:   Bortle Cero Child
Theme URI:    https://bortlecero.com
Description:  Tema hijo de Kadence para Bortle Cero — portal de fotografía nocturna, roadtrips y cielos oscuros en México.
Author:       Bortle Cero
Author URI:   https://bortlecero.com
Template:     kadence
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:  bortlecero-child
Tags:         photography, dark-sky, night-photography, mexico
*/

/* Ajuste 3: Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* Sistema de diseño Bortle Cero — Noir Cósmico */
:root {
  /* Paleta */
  --bc-cosmos:    #080c14;
  --bc-noche:     #0d1625;
  --bc-horizonte: #1a2840;
  --bc-border:    #2a4060;
  --bc-muted:     #4a6080;
  --bc-acento:    #7ba8d4;
  --bc-estrella:  #b8d4f0;
  --bc-blanco:    #f0f6ff;

  /* Cuatro pilares */
  --bc-cielo:    #7ba8d4;
  --bc-teal:     #6dd5c0;
  --bc-violeta:  #b4a0f0;
  --bc-amber:    #d4a870;

  /* Tipografía */
  --bc-font:     'Space Grotesk', system-ui, sans-serif;
  --bc-fw-light:  300;
  --bc-fw-normal: 400;
  --bc-fw-medium: 500;

  /* Componentes */
  --bc-radius:     10px;
  --bc-border-def: 0.5px solid #2a4060;
  --bc-transition: all 0.15s ease;
  --bc-accent-line: 32px;
}

/* ================================================================
   BORTLE CERO — ESTILOS GLOBALES
   ================================================================ */

/* ── 1. Reset y base ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080c14;
}
::-webkit-scrollbar-thumb {
  background: #2a4060;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a5070;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #2a4060 #080c14;
}

/* Ajuste 5: Selección de texto con color de acento */
::selection {
  background: rgba(123,168,212,0.25);
  color: #f0f6ff;
}

::-moz-selection {
  background: rgba(123,168,212,0.25);
  color: #f0f6ff;
}

/* ── 2. Tipografía base ── */
h1 {
  font-size: 2.8rem;
  font-weight: 500;
  color: #f0f6ff;
  letter-spacing: -0.5px;
  line-height: 1.15;
  font-family: var(--bc-font);
}

h2 {
  font-size: 2rem;
  font-weight: 500;
  color: #f0f6ff;
  letter-spacing: -0.3px;
  font-family: var(--bc-font);
}

h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: #c8d8ec;
  font-family: var(--bc-font);
}

h4, h5, h6 {
  font-weight: 400;
  color: #8aa4c0;
  font-family: var(--bc-font);
}

p {
  font-weight: 300;
  color: #8aa4c0;
  line-height: 1.75;
  font-family: var(--bc-font);
}

a {
  color: #7ba8d4;
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: #b8d4f0;
}

/* ── 3. Clases utilitarias de pilares ── */
.pilar-cielo   { --pilar-color: #7ba8d4; --pilar-rgb: 123,168,212; }
.pilar-mar     { --pilar-color: #6dd5c0; --pilar-rgb: 109,213,192; }
.pilar-ruta    { --pilar-color: #b4a0f0; --pilar-rgb: 180,160,240; }
.pilar-capsula { --pilar-color: #d4a870; --pilar-rgb: 212,168,112; }

/* ── 4. .bc-tag — etiqueta de pilar ── */
.bc-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-family: var(--bc-font);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.6;
}

.bc-tag.cielo {
  color: #7ba8d4;
  background: rgba(123, 168, 212, 0.1);
  border: 0.5px solid rgba(123, 168, 212, 0.25);
}

.bc-tag.mar {
  color: #6dd5c0;
  background: rgba(109, 213, 192, 0.1);
  border: 0.5px solid rgba(109, 213, 192, 0.25);
}

.bc-tag.ruta {
  color: #b4a0f0;
  background: rgba(180, 160, 240, 0.1);
  border: 0.5px solid rgba(180, 160, 240, 0.25);
}

.bc-tag.capsula {
  color: #d4a870;
  background: rgba(212, 168, 112, 0.1);
  border: 0.5px solid rgba(212, 168, 112, 0.25);
}

/* ── 5. .bc-card — card base reutilizable ── */
.bc-card {
  background: #0d1625;
  border: 0.5px solid #2a4060;
  border-radius: 10px;
  padding: 1.5rem;
  transition: border-color 0.15s ease;
}

.bc-card:hover {
  border-color: #7ba8d4;
}

/* ── 6. .bc-accent-line — línea decorativa ── */
.bc-accent-line {
  display: block;
  width: 32px;
  height: 1px;
  background: #2a5080;
  margin: 12px 0;
}

/* ── 7. Header — solo fondo oscuro, nav libre para Kadence ── */
.site-header,
#masthead,
.kadence-sticky-header,
header.site-header {
  background-color: #080c14 !important;
  border-bottom: 0.5px solid #1a2840 !important;
}

/* Logo — solo fuente y peso, sin !important en color */
#masthead .site-title a,
.site-header .site-title a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: -0.5px;
}

/* ── 8. Footer — overrides Kadence ── */
.site-footer,
#colophon,
footer.site-footer {
  background-color: #080c14 !important;
  border-top: 0.5px solid #1a2840 !important;
  color: #4a6080 !important;
  font-size: 11px !important;
  font-family: var(--bc-font) !important;
}

.site-footer a,
#colophon a {
  color: #4a6080 !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: #7ba8d4 !important;
}

/* ============================================
   HEADER OVERRIDES — Fondo oscuro fijo, nav libre para Kadence
   ============================================ */

/* A4 — Fondo del header: solo esto conserva !important */
#masthead,
#masthead .site-header-wrap,
.site-header,
.site-header-wrap,
header#masthead,
.kadence-sticky-header #masthead,
#masthead .kadence-sticky-header {
  background-color: #080c14 !important;
  border-bottom: 0.5px solid #1a2840 !important;
}

/* Burger menu móvil */
#masthead .menu-toggle,
.site-header .menu-toggle {
  color: #7ba8d4 !important;
}

/* ============================================
   HOMEPAGE — Ocultar page title banner Kadence
   ============================================ */

/* Ocultar page title banner en homepage */
.home .entry-header,
.home .page-title-wrap,
.home .kadence-page-title-inner,
.home .wp-block-kadence-header {
  display: none !important;
}

/* Eliminar padding superior del contenido en homepage */
.home .content-wrap,
.home .site-content,
.home article.page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Footer texto */
.site-footer,
.site-footer .site-info,
.site-footer a {
  color: #4a6080 !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 1px !important;
}

/* Ocultar crédito Kadence */
.site-footer .kadence-credit {
  display: none !important;
}

/* ============================================
   PÁGINAS DE PILAR — Ocultar banner de título
   ============================================ */
.pilar-cielo .entry-header,
.pilar-mar .entry-header,
.pilar-capsula .entry-header,
.pilar-ruta .entry-header,
.page-template-page-pilar .entry-header,
.page-template-templates-page-pilar-php .entry-header,
.page-template-templates-page-pilar-php .page-title-wrap,
.page-template-templates-page-pilar-php .wp-block-kadence-header {
  display: none !important;
}

.page-template-templates-page-pilar-php .content-wrap,
.page-template-templates-page-pilar-php article.page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================
   SINGLE POSTS — Ocultar banner de título Kadence
   ============================================ */
.single .entry-header,
.single .page-title-wrap,
.single .wp-block-kadence-header {
  display: none !important;
}

.single .content-wrap,
.single article.post {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================
   Ajuste 6: Transición de página suave
   ============================================ */
@keyframes bc-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bc-home > *:not(.bc-lightbox),
.bc-pilar-page,
.bc-single,
.bc-blog-archive {
  animation: bc-fadein 0.4s ease forwards;
}

.bc-lightbox {
  animation: none !important;
  transform: none !important;
}

/* ── Placeholder de cards sin imagen destacada (bc_card_placeholder).
   Global porque se usa en blog.css (archives) y single.css (relacionados).
   Toma el tinte de --card-color/--card-rgb del contenedor ── */
.bc-card-ph {
  position: absolute;
  inset: 0;
  color: var(--card-color, #7ba8d4);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(var(--card-rgb, 123,168,212), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 20%, #16263e 0%, #0d1625 55%, #080c14 100%);
}

.bc-card-ph__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bc-card-ph__lines { opacity: 0.30; transition: opacity 0.3s ease; }
.bc-card-ph__stars { opacity: 0.85; }
.bc-card-ph__dust  { opacity: 0.40; }

.bc-card-ph__horizon {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 38px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--card-rgb, 123,168,212), 0.35),
    transparent
  );
}

.bc-card-ph__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(var(--card-rgb, 123,168,212), 0.55);
}

/* La constelación se aviva al pasar el cursor por la card */
a:hover .bc-card-ph__lines,
.bc-post-card:hover .bc-card-ph__lines {
  opacity: 0.6;
}

/* ── Capa de estrellas reutilizable (.bc-estrellas) ──
   Añade la clase a cualquier bloque Kadence/Gutenberg para darle un
   fondo de cielo estrellado SIN movimiento. Se dibuja con una imagen
   SVG incrustada (data-URI) sobre un ::after → 0 nodos extra en el DOM,
   un solo pintado cacheado. isolation:isolate aísla el apilamiento.

   Cómo apila sobre una fila Kadence (kb-row-layout-wrap, que lleva su
   fondo en el propio elemento): fondo del bloque → estrellas (::after,
   z-index:0) → contenido (.kt-row-column-wrap y demás hijos, z-index:1).
   Por eso las estrellas se ven SOBRE el degradado/imagen de la fila.
   Las columnas internas con fondo propio (cards, etc.) sí tapan las
   estrellas en su área — es lo esperado. */
.bc-estrellas {
  position: relative;
  isolation: isolate;
}
.bc-estrellas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  background-repeat: repeat;
  background-size: 700px 700px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='700'%20height='700'%3E%3Cg%20fill='%23ffffff'%3E%3Ccircle%20cx='38'%20cy='52'%20r='0.9'%20fill-opacity='0.45'/%3E%3Ccircle%20cx='95'%20cy='140'%20r='0.5'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='160'%20cy='40'%20r='1.2'%20fill-opacity='0.55'/%3E%3Ccircle%20cx='210'%20cy='95'%20r='0.6'%20fill-opacity='0.35'/%3E%3Ccircle%20cx='275'%20cy='165'%20r='0.8'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='330'%20cy='60'%20r='0.5'%20fill-opacity='0.25'/%3E%3Ccircle%20cx='60'%20cy='210'%20r='1.0'%20fill-opacity='0.5'/%3E%3Ccircle%20cx='130'%20cy='260'%20r='0.6'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='195'%20cy='310'%20r='0.7'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='90'%20cy='330'%20r='0.4'%20fill-opacity='0.22'/%3E%3Ccircle%20cx='250'%20cy='250'%20r='1.1'%20fill-opacity='0.5'/%3E%3Ccircle%20cx='310'%20cy='300'%20r='0.5'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='25'%20cy='300'%20r='0.7'%20fill-opacity='0.38'/%3E%3Ccircle%20cx='370'%20cy='140'%20r='0.9'%20fill-opacity='0.45'/%3E%3Ccircle%20cx='420'%20cy='70'%20r='0.6'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='480'%20cy='150'%20r='1.3'%20fill-opacity='0.6'/%3E%3Ccircle%20cx='540'%20cy='90'%20r='0.5'%20fill-opacity='0.28'/%3E%3Ccircle%20cx='600'%20cy='160'%20r='0.8'%20fill-opacity='0.42'/%3E%3Ccircle%20cx='660'%20cy='60'%20r='0.6'%20fill-opacity='0.32'/%3E%3Ccircle%20cx='430'%20cy='240'%20r='0.7'%20fill-opacity='0.38'/%3E%3Ccircle%20cx='500'%20cy='300'%20r='0.5'%20fill-opacity='0.26'/%3E%3Ccircle%20cx='575'%20cy='260'%20r='1.0'%20fill-opacity='0.48'/%3E%3Ccircle%20cx='640'%20cy='320'%20r='0.6'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='380'%20cy='340'%20r='0.8'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='45'%20cy='420'%20r='0.9'%20fill-opacity='0.45'/%3E%3Ccircle%20cx='120'%20cy='470'%20r='0.5'%20fill-opacity='0.28'/%3E%3Ccircle%20cx='190'%20cy='430'%20r='0.7'%20fill-opacity='0.38'/%3E%3Ccircle%20cx='270'%20cy='490'%20r='1.1'%20fill-opacity='0.52'/%3E%3Ccircle%20cx='330'%20cy='440'%20r='0.5'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='80'%20cy='560'%20r='0.8'%20fill-opacity='0.42'/%3E%3Ccircle%20cx='160'%20cy='610'%20r='0.6'%20fill-opacity='0.32'/%3E%3Ccircle%20cx='240'%20cy='580'%20r='0.4'%20fill-opacity='0.22'/%3E%3Ccircle%20cx='310'%20cy='640'%20r='0.9'%20fill-opacity='0.46'/%3E%3Ccircle%20cx='400'%20cy='560'%20r='0.7'%20fill-opacity='0.36'/%3E%3Ccircle%20cx='470'%20cy='620'%20r='1.2'%20fill-opacity='0.55'/%3E%3Ccircle%20cx='540'%20cy='470'%20r='0.5'%20fill-opacity='0.28'/%3E%3Ccircle%20cx='610'%20cy='540'%20r='0.8'%20fill-opacity='0.4'/%3E%3Ccircle%20cx='660'%20cy='620'%20r='0.6'%20fill-opacity='0.3'/%3E%3Ccircle%20cx='420'%20cy='430'%20r='0.5'%20fill-opacity='0.26'/%3E%3Ccircle%20cx='560'%20cy='390'%20r='0.7'%20fill-opacity='0.36'/%3E%3C/g%3E%3C/svg%3E");
}
.bc-estrellas > * {
  position: relative;
  z-index: 1;
}

/* ── Color de la línea temporal de Kadence (.vertical-line) ──
   El bloque rowlayout dibuja la línea como background-image con su propia
   regla (kadenceBlockCSS: linear-gradient(#000,#000); size 2px 100%).
   No deja cambiar el color desde la UI, así que se sobreescribe con estas
   clases utilitarias. Uso: añade en el campo "Clases CSS adicionales" del
   bloque la clase de color deseada (junto a la clase original vertical-line,
   o por sí sola: ya incluyen grosor/posición). Colores = paleta Noir Cósmico. */
.vse-vertical-line-cielo,
.vse-vertical-line-teal,
.vse-vertical-line-violeta,
.vse-vertical-line-amber,
.vse-vertical-line-estrella,
.vse-vertical-line-muted {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 2px 100% !important;
}
.vse-vertical-line-cielo    { background-image: linear-gradient(var(--bc-cielo),   var(--bc-cielo))   !important; } /* El Cielo  · #7ba8d4 */
.vse-vertical-line-teal     { background-image: linear-gradient(var(--bc-teal),    var(--bc-teal))    !important; } /* El Mar    · #6dd5c0 */
.vse-vertical-line-violeta  { background-image: linear-gradient(var(--bc-violeta), var(--bc-violeta)) !important; } /* La Ruta   · #b4a0f0 */
.vse-vertical-line-amber    { background-image: linear-gradient(var(--bc-amber),   var(--bc-amber))   !important; } /* La Cápsula· #d4a870 */
.vse-vertical-line-estrella { background-image: linear-gradient(var(--bc-estrella),var(--bc-estrella))!important; } /* Azul claro· #b8d4f0 */
.vse-vertical-line-muted    { background-image: linear-gradient(var(--bc-border),  var(--bc-border))  !important; } /* Sutil     · #2a4060 */

/* ── Glow superior teñido (.vse-glow-top-*) ──
   Añade un degradado radial del color del pilar en la parte superior de
   cualquier contenedor/sección (el mismo efecto de los mockups). Se pinta
   en un ::before (0 nodos DOM) que NO reemplaza el fondo del bloque; el
   contenido queda por encima. En filas Kadence la clase va en el wrapper.
   Uso: añade en "Clases CSS adicionales" la clase del color deseado. */
.vse-glow-top-cielo,
.vse-glow-top-teal,
.vse-glow-top-violeta,
.vse-glow-top-amber {
  position: relative;
  isolation: isolate;
}
.vse-glow-top-cielo::before,
.vse-glow-top-teal::before,
.vse-glow-top-violeta::before,
.vse-glow-top-amber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vse-glow-top-cielo > *,
.vse-glow-top-teal > *,
.vse-glow-top-violeta > *,
.vse-glow-top-amber > * {
  position: relative;
  z-index: 1;
}
.vse-glow-top-cielo::before   { background: radial-gradient(ellipse at 50% 0%, rgba(123,168,212,0.20) 0%, transparent 55%); } /* El Cielo  */
.vse-glow-top-teal::before    { background: radial-gradient(ellipse at 50% 0%, rgba(109,213,192,0.20) 0%, transparent 55%); } /* El Mar    */
.vse-glow-top-violeta::before { background: radial-gradient(ellipse at 50% 0%, rgba(180,160,240,0.20) 0%, transparent 55%); } /* La Ruta   */
.vse-glow-top-amber::before   { background: radial-gradient(ellipse at 50% 0%, rgba(212,168,112,0.20) 0%, transparent 55%); } /* La Cápsula*/

/* ── Accesibilidad: respetar preferencia de movimiento
   reducido del sistema (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}