/*
Theme Name: Ohio Child - Enfoque In
Theme URI: https://enfoquein.es
Description: Tema hijo de Ohio para personalizaciones de Enfoque In sin modificar el tema padre.
Author: Enfoque In
Author URI: https://enfoquein.es
Template: ohio
Version: 1.0.1
Text Domain: ohio-child
*/
@import url("../ohio/style.css");
/* ============================================================
Header layout: Menu izquierda / Logo derecha (Enfoque In)
------------------------------------------------------------
Reutiliza el marcado HTML del Header Style 1 de Ohio
(parts/headers/header-style-1.php, sin modificarlo). En vez de
voltear .left-part/.right-part como bloques enteros (lo que arrastraba
el boton de menu movil y el icono de busqueda de forma incorrecta),
se "disuelve" .left-part con display:contents para poder ordenar de
forma independiente cada elemento funcional dentro del mismo flex
container (.header-wrap-inner), usando solo los nombres de clase que
ya usa Ohio en TODOS sus layouts de header (.branding, .mobile-hamburger,
.desktop-hamburger, .right-part, .menu-optional). No se duplica ninguna
plantilla PHP del tema.
Resultado: el control de menu (nav en escritorio / boton hamburguesa en
movil) queda a la izquierda, el logo (.branding) queda solo a la
derecha, y el icono de busqueda (.menu-optional) se oculta.
============================================================ */
body.enfoque-header-menu-left .header-1 .header-wrap-inner .left-part {
display: contents;
}
body.enfoque-header-menu-left .header-1 .header-wrap-inner .mobile-hamburger,
body.enfoque-header-menu-left .header-1 .header-wrap-inner .desktop-hamburger {
order: 1;
}
body.enfoque-header-menu-left .header-1 .header-wrap-inner .right-part {
order: 1;
justify-content: flex-start;
}
body.enfoque-header-menu-left .header-1 .header-wrap-inner .branding {
order: 3;
}
body.enfoque-header-menu-left .header-1 .header-wrap-inner .menu-optional {
display: none !important;
}
/* ============================================================
Fix: scroll horizontal / padding asimetrico en secciones a pantalla
completa (Elementor "stretch section" / e-con-full, filas de WPBakery
con "full width", sub-menu ancho, slider, barra de elementos, etc.)
------------------------------------------------------------
Causa raiz (en el tema padre Ohio, wp-content/themes/ohio/style.css,
NO modificado aqui): varias reglas de "full-bleed" usan la unidad
`100vw` tanto para el ancho (`min-width:100vw` / `width:100vw`) como
para el desplazamiento de recentrado (`left: calc(var(--clb-container-offset) * -1)`,
con `--clb-container-offset: calc((100vw - var(--clb-container-width)) / 2)`).
`100vw` siempre incluye el ancho de la barra de scroll vertical del
navegador, mientras que el resto del layout (basado en el ancho real
visible, `document.documentElement.clientWidth`) NO la incluye. Esa
diferencia (los mismos px que mide la barra de scroll, ~15-17px en
Windows/Chrome) hace que el borde derecho de estas secciones a pantalla
completa sobresalga del viewport visible mientras el izquierdo queda
alineado: de ahi el padding visible a la derecha y no a la izquierda,
y que en paginas con scroll vertical (las que SI tienen barra) aparezca
ademas scroll horizontal no deseado.
Solucion: en vez de tocar el tema padre (se pisaria en cada
actualizacion) o reescribir una a una todas las reglas afectadas del
framework, se neutraliza el sobrante horizontal a nivel de documento.
Es la mitigacion estandar para este problema conocido de `100vw`, no
afecta al scroll vertical ni a elementos con position:sticky. */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
/* ============================================================
* Fix: bloques/footer/contenido recortados o mas anchos que la pantalla
* ------------------------------------------------------------
* Causa raiz (tema padre Ohio, wp-content/themes/ohio/style.css, NO
* modificado aqui): la regla de compatibilidad
* .elementor:not([data-elementor-type=container]) {
* margin-left: var(--clb-grid-gutter-negative);
* margin-right: var(--clb-grid-gutter-negative);
* }
* fue pensada para secciones clasicas de Elementor, pero Elementor no
* marca data-elementor-type como 'container' en paginas normales (usa
* 'wp-page', etc.), asi que la exclusion nunca aplica de verdad: el
* margen negativo de -16px por lado se cuela en CUALQUIER wrapper raiz
* '.elementor' (footer, cabecera, contenido principal), haciendolo 32px
* mas ancho que su contenedor real. Confirmado en vivo varias veces:
* ese wrapper media 444px en un viewport de 412px, exactamente esos
* 32px, y por eso el padding configurado en Elementor (el que sea)
* nunca se veia completo (parte quedaba fuera de pantalla, recortada
* por el 'overflow-x:hidden' de mas arriba en este mismo archivo).
*
* Primera version de este fix usaba ':has(> .e-con)' para no tocar
* secciones clasicas -- pero ':has()' no esta soportado en navegadores
* moviles algo mas antiguos (Firefox Android, algunos webviews), asi
* que en esos dispositivos la regla entera se ignoraba y el problema
* volvia. Se sustituye por un selector universal (compatible con
* cualquier navegador) que anula el margen negativo en TODOS los
* wrappers '.elementor' del sitio, incluido el editor (que tambien
* marca sus elementos con esta misma clase). No se ha encontrado, en
* ninguna pagina revisada, un caso donde ese margen negativo a nivel
* de wrapper raiz sea necesario (las secciones internas que si
* necesitan sangrar tienen su propio margen/padding independiente). */
.elementor {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ============================================================
Portfolio Projects (widget Elementor "ohio_recent_projects",
plugin ohio-extra, layout "Grid 12" -> parts/portfolio_grid/layout_type12.php)
------------------------------------------------------------
En este layout el titulo se muestra en vertical en escritorio
mediante `transform: rotate(-90deg)` sobre TODO el listado
(.portfolio-links.grid_12 .portfolio-grid-holder .portfolio-grid, en
wp-content/themes/ohio/style.css, NO modificado aqui). El propio tema
ya trae un script que mide el ancho natural del titulo y trata de
ajustar la altura del contenedor (portfolioGridType12(), en
wp-content/themes/ohio/assets/js/source/main.js), pero ese ajuste se
pierde porque:
a) la utilidad global `.-full-vh { height: 100vh }` fija una altura
tope de 1 pantalla completa a todo el widget, y
b) `.portfolio-grid-holder` no tiene `flex-shrink:0`, asi que el
layout flex lo encoge de vuelta a esa altura fija aunque el JS le
haya puesto una altura mayor.
El resultado (confirmado en vivo: con "Chocolates Clavileño" el
ancho natural del titulo, 807px, supera los ~813px disponibles nada
mas sumar la barra de filtro) es que, en cuanto un titulo es largo,
el `overflow:hidden` de `.portfolio-grid` lo recorta.
Ademas `.portfolio-item` fuerza `white-space: nowrap`, por lo que un
titulo de varias palabras nunca puede partirse en varias
lineas/columnas verticales; todo se muestra en una unica linea cada
vez mas larga.
============================================================ */
@media screen and (min-width: 769px) {
/* Permite que la seccion crezca en vertical si el titulo (rotado) lo
necesita, en vez de recortarlo. Solo afecta a este widget concreto
(selector con las 3 clases especificas), no a otros usos de
`.-full-vh` en el resto del sitio. */
.portfolio-links.grid_12.-full-vh {
height: auto;
min-height: 100vh;
}
.portfolio-links.grid_12.-full-vh .portfolio-grid-holder {
flex-shrink: 0;
}
/* Permite partir titulos de varias palabras en varias
lineas/columnas verticales cuando no caben en una sola. Los
titulos de una sola palabra no se pueden partir (word-break:
keep-all evita partirlos por la mitad); en ese caso el punto
anterior hace que sea la seccion la que crezca, no la palabra la
que se recorte. */
.portfolio-links.grid_12 .portfolio-item-details-headline > a .title {
white-space: normal;
overflow-wrap: normal;
word-break: keep-all;
/* En 'em' (relativo al propio font-size del titulo, que ya es
responsive via 'font-size: 6vw' en el tema padre) en vez de una
unidad de viewport: asi el punto de corte de linea escala junto
con el tamano real del texto (ancho en px de una palabra crece o
decrece con el mismo 6vw), en vez de depender de una proporcion
fija entre el alto y el ancho de la ventana que no se cumple en
todos los tamanos de pantalla. Con este valor una palabra suelta
tipica (hasta ~10-11 caracteres) cabe en una linea sin cortarse;
si el titulo tiene mas texto que eso, se parte por palabras. */
max-width: 9em;
}
/* Si ni siquiera UNA palabra suelta cabe en el limite anterior (p.ej.
una palabra muy larga que word-break:keep-all no puede partir),
assets/js/portfolio-grid12-mobile-index.js anade esta clase (tras
medir que el texto desborda) para quitar el limite en ESE titulo en
concreto: la palabra se muestra completa y, como el contenedor
rotado se dimensiona segun el ancho natural de su contenido, es la
seccion la que crece en vez de recortar la palabra. */
.portfolio-links.grid_12 .portfolio-item-details-headline > a .title.ei-grid12-title-overflow {
max-width: none;
}
}
/* ------------------------------------------------------------
Numero de proyecto / categoria: SIEMPRE justo despues de la
ULTIMA palabra del titulo (escritorio vertical y responsive).
------------------------------------------------------------
El contador nativo del tema padre es un pseudo-elemento
`.portfolio-item-details-headline::after` con
`content: counter(...)`, `position: absolute; top:0; right:0;`
anclado a la esquina superior del BLOQUE COMPLETO del titulo. Eso
funcionaba mientras el titulo ocupaba una sola linea sin partir,
pero desde que (mas arriba en este archivo) se permite partir
titulos largos en varias lineas/columnas, esa esquina ya no
coincide con el final visual del texto: el numero se queda "arriba"
o "lejos", pegado al principio del bloque, no a la ultima palabra.
Lo mismo le pasaba a `.category-holder`: en el tema padre es un
hermano flex INDEPENDIENTE del titulo dentro de
`.portfolio-item-details`, sin relacion posicional con el texto.
Solucion: assets/js/portfolio-grid12-mobile-index.js separa la
ULTIMA palabra real del titulo y, justo detras de ella (sin ningun
espacio de por medio, para que nunca queden separadas por un salto
de linea), inserta: 1) un numero propio (mismo calculo posicional
que ya usaba el contador CSS, sin duplicar logica de conteo) y 2)
el NOMBRE de la categoria (ya limitada a una sola por el override
de tema hijo de parts/portfolio_grid/layout_type12.php) SIN
reutilizar su enlace `` original -- anidar ese enlace dentro del
propio enlace del proyecto (el titulo entero ya esta dentro de un
``) no es HTML valido y rompe el enlace del proyecto. El
contador y el `.category-holder` originales se dejan intactos en
el DOM (su enlace real sigue existiendo) y solo se ocultan por CSS
en los titulos ya procesados.
------------------------------------------------------------ */
.portfolio-links.grid_12 .portfolio-item-details-headline.ei-grid12-meta-processed::after {
display: none;
}
.portfolio-links.grid_12 .portfolio-item-details-headline.ei-grid12-meta-processed + .category-holder {
display: none;
}
.portfolio-links.grid_12 .ei-grid12-last {
display: inline;
}
.portfolio-links.grid_12 .ei-grid12-meta-number {
display: inline-block;
vertical-align: baseline;
margin-left: 0.3em;
font-size: 1rem;
opacity: 0.65;
font-weight: var(--clb-text-semi-bold);
white-space: nowrap;
}
/* Mismo gesto que ya usaba el tema (hover sobre la tarjeta del
proyecto) para sustituir el numero por la categoria; en vez de
mover el numero/categoria a una esquina absoluta, aqui simplemente
se intercambia cual de los dos esta visible, en el mismo hueco,
justo detras de la ultima palabra. */
.portfolio-links.grid_12 .portfolio-item:hover .ei-grid12-meta-number {
display: none;
}
.portfolio-links.grid_12 .ei-grid12-category-echo {
display: none;
vertical-align: baseline;
margin-left: 0.3em;
font-size: 0.85rem;
opacity: 0.9;
font-weight: var(--clb-text-semi-bold);
}
.portfolio-links.grid_12 .portfolio-item:hover .ei-grid12-category-echo {
display: inline;
}