/* ═════════════════════════════════════════════════════════════════════════════
   BASE

   Reset, documento, tipografía y el efecto de texto deslizante que comparten
   la navegación y los enlaces del cuerpo.

   Las variables del sistema (--bg-color, --text-color...) NO se definen aquí:
   las imprime PHP en línea a partir de inc/tokens.php, para que sean editables
   desde el Personalizador. Este archivo solo las consume.
   ═════════════════════════════════════════════════════════════════════════════ */

/* --- Documento --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--theme-transition), color var(--theme-transition);
    font-family: var(--tatc-font-sans);
}

/* --- 1. BASE & RESET --- */
* {
    margin: 0;
    border: none;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

.transition-overlay {
    position: fixed;
    top: -5svh;
    /* added overscroll buffer */
    left: 0;
    width: 100vw;
    height: 110svh;
    /* added overscroll buffer */
    background-color: #000;
    /* Solid black to prevent white flashes */
    z-index: 999999;
    /* Covers screen by default to avoid showing unstyled content */
    transform: translateY(0);
}

/* Hidden from first paint (not just from script.js's gsap.set, which can't
   run until GSAP + script.js finish loading) so there's no flash of these
   elements at their final position/opacity before the entrance animation in
   script.js's DOMContentLoaded handler reveals them. That handler has a
   safety-net timeout that forces opacity:1 if the animation never runs.
   Excludes .docs-body (design-system-docs.html) — it reuses these same
   classes as static typography samples and never loads script.js, so
   nothing would ever reveal them there. */
body:not(.docs-body) :where(.nav_component, .heading-style-h1, .section_hero-title-password, .not-found-title, .fixed-controls_component > *, .bottom-right-wrapper > *, .nav_list a, .text-size-regular, .layout_stack, .not-found-sub, .password-form, .tatc-grid > *) {
    opacity: 0;
}

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

/* Los controles que en el sitio original eran <div> ahora son <button>: así se
   pueden usar con el teclado y los lee un lector de pantalla. Un <button> trae
   fondo, borde, tipografía y alineación propios del navegador, y el reset de
   arriba solo neutraliza margen, borde y relleno. Sin esto, el botón del menú y
   los controles fijos aparecerían con el gris del sistema detrás: mismo
   marcado semántico, distinto diseño. */
/* Un elemento con el atributo hidden debe estar oculto, siempre. La regla del
   navegador que lo hace tiene la prioridad más baja posible, así que cualquier
   otra que fije display —de WordPress, de un plugin o del propio tema— la anula
   sin que nadie se entere. Pasó con el ojo de la pantalla de contraseña: se
   veían los dos iconos a la vez. */
[hidden] {
    display: none !important;
}

/* Texto solo para lectores de pantalla. WordPress la da por supuesta en el
   marcado que genera —formularios, saltar al contenido, paginación—, pero la
   clase la tiene que definir el tema. Sin ella, esas etiquetas aparecen a la
   vista en mitad del diseño. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Al llegar con el teclado sí debe verse, o quien navegue así no sabría dónde
   está el foco. */
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

button {
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.page-wrapper {
    width: 100%;
    flex: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    position: relative;
    background-color: transparent;
    padding-top: 4rem;
    /* Spacer for fixed navbar */
}


/* --- Tipografía y layouts --- */
/* --- 6. HERO SECTION --- */
.section_hero {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .75rem .75rem 4% .75rem;
}

.heading-style-h1 {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    filter: blur(0.5px);
    transform: scale(1.2);
    line-height: 80%;
    font-weight: 900;
    text-align: center;
    letter-spacing: -0.1em;
    -webkit-text-stroke-width: 0.04em;
    -webkit-text-stroke-color: var(--text-color);
    color: var(--text-color);
    text-transform: uppercase;
    user-select: none;
    font-size: 14cqw;
    transition: color var(--theme-transition), -webkit-text-stroke-color var(--theme-transition);
}

.heading-style-h2 {
    text-align: center;
    text-transform: uppercase;
    line-height: .7;
    letter-spacing: -0.05em;
    padding: 1.5em .75em .75em .75em;
}

.layout_stack {
    display: flex;
    flex-direction: column;
    gap: .75em;
    height: auto;
    /* Permite crecer hacia abajo */
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

/* --- 6.1 UNIFIED TEXT STYLES & LAYOUTS --- */
/* .is-style-* son las clases que WordPress genera a partir de los estilos de
   bloque registrados en inc/blocks.php. Comparten definición con las clases
   originales del diseño en lugar de repetirla: así el estilo que se elige en el
   editor y el que ya llevan las páginas portadas no pueden separarse. */
.text-style-label,
.is-style-tatc-label {
    font-family: var(--tatc-font-sans);
    text-align: left;
    width: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0rem;
    color: var(--text-color);
    opacity: 1;
    transition: color var(--theme-transition);
    display: block;
}

.text-size-regular,
.is-style-tatc-regular {
    font-family: var(--tatc-font-mono);
    font-size: var(--tatc-text-size, 1rem);
    font-weight: 300;
    line-height: 1.25;
    color: var(--text-color);
    text-align-last: left;
    transition: color var(--theme-transition);
}

.margin-bottom.margin-medium {
    margin-bottom: 2rem;
    width: 100%;
}

/* Layout for pages that push content to the bottom (Artist/About) */
.layout_bottom {
    width: 100%;
    min-height: calc(100svh - 5rem);
    /* Adjust for navbar */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem 0.75rem 2.5rem 0.75rem;
    box-sizing: border-box;
    position: relative;
    align-items: flex-start;
}

/* Specific class for Artist bio to maintain line breaks */
.text-size-regular.is-fluid {
    font-family: var(--tatc-font-mono);
    font-size: clamp(9px, 2.2vw, 1.15rem);
    line-height: 1.5;
    text-align: left;
    max-width: none;
    display: block;
    white-space: nowrap;
    /* Force one line per segment between <br> */
}

/* Reset wrapping for small screens where clamp hits 9px */
@media (max-width: 480px) {
    .text-size-regular.is-fluid {
        white-space: normal;
        font-size: 9px;
    }
}

/* --- 7. RESPONSIVE (MOBILE) --- */
@media (max-width: 768px) {
    .nav_menu {
        width: 100vw;
        border-left: none;
        overflow: visible;
    }

    .nav_link {
        transform: none;
        writing-mode: horizontal-tb;
        white-space: nowrap;
    }

    .nav_list {
        flex: 1;
        gap: .5em;
        width: 100%;
        overflow: visible;
    }

    .heading-style-h2 {
        padding: 1.25em .75em .75em .75em;
    }

    .social_list {
        flex-direction: column;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: calc(18px);
    }

    .nav_menu-container {
        width: 100%;
        align-items: flex-end;
        padding: .75rem .75rem 2rem .75rem;
        overflow: visible;
    }

    .section_hero {
        padding-bottom: 16%;
    }

    .heading-style-h1 {
        font-size: 14vw;
        transform: scale(1.1);
        width: 100%;
        padding: 0 1rem;
    }
}


/* --- EFECTO HOVER TEXTO DOBLE --- */
.hover-split-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.hover-split-text .text-inner,
.hover-split-text .text-outer {
    display: block;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    /* Safety space - only at the end flow */
    padding-inline-end: 0.15em;
    box-sizing: border-box;
}

.hover-split-text .text-inner {
    transform: translateY(0);
}

.hover-split-text .text-outer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transform: translateY(0);
}

.hover-split-text:hover .text-inner {
    transform: translateY(-100%);
}

.hover-split-text:hover .text-outer {
    transform: translateY(-100%);
}

/* Para links rotados en navbar (DESKTOP) - Flujo horizontal */
@media (min-width: 769px) {
    .nav_link .hover-split-text {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    /* Flujo horizontal para links rotados */
    .nav_link .hover-split-text .text-inner {
        transform: translateX(0) !important;
    }

    .nav_link .hover-split-text .text-outer {
        position: absolute;
        top: 0;
        left: 100%;
        width: auto;
        transform: translateX(0) !important;
    }

    .nav_link .hover-split-text:hover .text-inner {
        transform: translateX(-100%) !important;
    }

    .nav_link .hover-split-text:hover .text-outer {
        transform: translateX(-102%) !important;
    }
}

/* Para links rotados en navbar (MOBILE) - Flujo vertical */
@media (max-width: 768px) {
    .nav_link .hover-split-text {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .nav_link .hover-split-text .text-inner {
        transform: translateY(0);
    }

    .nav_link .hover-split-text .text-outer {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        transform: translateY(0);
    }

    .nav_link .hover-split-text:hover .text-inner {
        transform: translateY(-100%);
    }

    .nav_link .hover-split-text:hover .text-outer {
        transform: translateY(-100%);
    }
}

/* Una línea de .heading-style-h2 que contiene mayúsculas acentuadas (SALÓN
   SILICÓN). El encabezado corre a line-height .7, es decir una caja de línea
   de 16.8px para una fuente de 24px — más baja que el propio glifo. La tilde
   de una mayúscula se dibuja ~0.95em por encima de la base, así que se salía
   de la caja por arriba, y con el efecto hover (que enmascara con
   overflow:hidden justo a esa altura) pasaban dos cosas a la vez: la tilde
   de la copia visible quedaba recortada e invadía la línea de arriba, y la
   tilde de la segunda copia — la que espera fuera de cuadro para el efecto —
   asomaba por debajo como una marca suelta.

   1.25 es el primer valor en el que la tilde cabe entera dentro de la caja
   (Inter tiene un área de contenido de ~1.21em, así que por debajo de eso el
   glifo siempre desborda). El margen negativo devuelve el aire que esa caja
   más alta añadiría, para que las dos líneas sigan viéndose igual de juntas
   que antes. */
.heading-style-h2 .h2-line {
    display: block;
}

.heading-style-h2 .h2-line-accented {
    line-height: 1.25;
    margin-top: -0.06em;
}

.salon-link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

.salon-link .hover-split-text {
    vertical-align: middle;
}

.bold-link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

/* Effect to 'separate' or change the font for the hover state */
.alternate-font .text-inner,
.alternate-font .text-outer {
    white-space: nowrap;
    text-transform: uppercase;
}

.alternate-font .text-outer {
    margin-top: 0;
}

/* Un .hover-split-text es un inline-block con overflow:hidden, y eso cambia
   cómo se apoya en la línea: en vez de alinear su propio texto con el de al
   lado, alinea su borde inferior con la base de la línea. El resultado es que
   el enlace queda unos píxeles descolgado respecto al párrafo que lo rodea.
   Forzar vertical-align:bottom lo devuelve a su sitio.

   Van los dos nombres de clase: .text-size-regular es el del diseño original y
   .is-style-tatc-regular el que genera WordPress cuando se elige el estilo de
   párrafo en el editor. Con una sola de las dos, los enlaces salían alineados
   en las páginas portadas y descolgados en las escritas desde el editor. */
.text-size-regular .hover-split-text,
.is-style-tatc-regular .hover-split-text,
.project_body p .hover-split-text {
    vertical-align: bottom;
}

/* --- Modo de scroll fijo ---
   Lo aplica inc/chrome.php a las páginas que no deben desplazarse. */
.body_fixed {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
    /* overflow:hidden alone doesn't block touch-scroll on iOS Safari — the
       page can still rubber-band and drag the address bar. position:fixed
       is what actually closes that gap (same fix already used for the
       gallery overlay lock in carousel.js). */
    position: fixed;
    inset: 0;
    width: 100%;
}


/* --- Contenedor de las páginas de contenido ---
   Centra verticalmente cuando el contenido es corto —como la página de
   información, que en el diseño original llevaba estas mismas medidas escritas
   a mano en el HTML— y simplemente crece cuando es largo. */
.page-content {
	width: 100%;
	min-height: 90svh;
	display: flex;
	/* En columna: con varios bloques, uno debajo de otro. En fila (lo que había)
	   un segundo bloque se ponía al lado del primero. Con uno solo el resultado
	   es el mismo: sigue centrado en vertical y a todo el ancho. */
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	padding: 2rem .75rem 4rem;
	box-sizing: border-box;
}

/* Con titular, la página apila titular y contenido en vez de ponerlos en fila.
   Las medidas son las del estilo "Medio" de inc/page-layout.php. */
.page-content.has-title {
	gap: 2rem;
}

.page-title {
	margin: 0;
	font-family: var(--tatc-font-sans);
	font-size: 4rem;
	font-weight: 900;
	line-height: normal;
	letter-spacing: -.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--text-color);
	transition: color var(--theme-transition);
}

/* Un solo hijo directo no debe quedarse en su ancho natural: el diseño espera
   que ocupe el ancho disponible hasta su propio máximo. */
.page-content > * {
	width: 100%;
}

/* --- Utilidades de bloques nativos ---
   El tema no carga la hoja general de bloques de WordPress (inc/setup.php), así
   que las pocas clases que los bloques ponen al elegir una alineación o un
   botón se definen aquí, con el diseño de TATC. */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wp-block-button__link,
.wp-block-file .wp-block-file__button {
    display: inline-block;
    padding: .9rem 2rem;
    border: 1px solid var(--text-color);
    border-radius: 0;
    background: var(--text-color);
    color: var(--bg-color);
    font-family: var(--tatc-font-mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .3s, color .3s, border-color var(--theme-transition);
}

.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover {
    background: transparent;
    color: var(--text-color);
}

/* El color va con más peso: dentro de una entrada, «a { color: inherit }»
   pintaba el texto del botón del mismo color que su fondo. */
body a.wp-block-button__link,
body .wp-block-file a.wp-block-file__button {
    color: var(--bg-color);
}

body a.wp-block-button__link:hover,
body .wp-block-file a.wp-block-file__button:hover,
body .wp-block-button.is-style-outline a.wp-block-button__link {
    color: var(--text-color);
}

body .wp-block-button.is-style-outline a.wp-block-button__link:hover {
    color: var(--bg-color);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--text-color);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.wp-block-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-family: var(--tatc-font-mono);
    font-size: .85rem;
}