/*
Theme Name: Enfold Child
Theme URI: https://www.optik-klimm.de/
Description: Child theme de Enfold para Optik Klimm. Refinamiento UX/UI conservador: jerarquia, ritmo vertical, muro de marcas, tarjetas de servicio, CTAs y accesibilidad. No altera contenido ni estructura.
Author: Optik Klimm
Template: enfold
Version: 1.0.0
*/

/* =========================================================================
   INDICE
   1. Tokens de diseño (:root)
   2. Tipografia y ritmo de texto
   3. Ritmo vertical de secciones
   4. Muro de marcas (Enfold Logo Element)
   5. Tarjetas de Serviceleistungen (iconbox)
   6. CTAs / botones
   7. Bloque de contacto (iconlist + formulario)
   8. Terminkalender (solo el marco; el iframe no se toca)
   9. Accesibilidad: foco, contraste, targets tactiles
  10. Responsive
   ========================================================================= */


/* =========================================================================
   1. TOKENS DE DISEÑO
   Extraidos de la configuracion actual de Enfold (Global Styling), no inventados:
     --enfold-main-color-primary   #9abf08  (verde de marca)
     --enfold-main-color-secondary #8bba34
     --enfold-socket-color-bg      #4a5568  (slate; tambien color del menu)
   Se añade una variante ACCESIBLE del mismo verde para texto/CTA:
   #9abf08 con texto blanco da 2.14:1 (falla AA). #5e7a04 da 4.93:1 (AA ok)
   y mantiene el mismo tono de marca.
   ========================================================================= */
:root {
	/* Marca */
	--ok-green:        #9abf08; /* verde de marca, uso decorativo (iconos, filetes, fondos) */
	--ok-green-soft:   #8bba34;
	--ok-green-deep:   #5e7a04; /* verde accesible: fondo de CTA con texto blanco y enlaces */
	--ok-green-deeper: #4d6304; /* hover del CTA */
	--ok-green-tint:   #f4f8e8; /* fondo suave derivado del verde */

	/* Tinta y superficies */
	--ok-ink:      #1a202c; /* texto principal (16.3:1 sobre blanco) */
	--ok-ink-soft: #4a5568; /* texto secundario (7.5:1) */
	--ok-meta:     #6b7280; /* texto terciario (4.8:1; el #969696 previo daba 2.9 y fallaba) */
	--ok-surface:  #ffffff;
	--ok-surface-alt: #f7f8f4;
	--ok-border:   #e5e7eb;
	--ok-border-strong: #d6dae0;

	/* Escala de espaciado (base 8) */
	--ok-space-1: 4px;
	--ok-space-2: 8px;
	--ok-space-3: 16px;
	--ok-space-4: 24px;
	--ok-space-5: 32px;
	--ok-space-6: 48px;
	--ok-space-7: 64px;
	--ok-space-8: 96px;

	/* Ritmo vertical de seccion (fluido) */
	--ok-section-y: clamp(48px, 7vw, 96px);

	/* Radios y sombras */
	--ok-radius:    10px;
	--ok-radius-sm: 6px;
	--ok-shadow:      0 1px 2px rgba(26, 32, 44, .05);
	--ok-shadow-lift: 0 10px 24px -12px rgba(26, 32, 44, .18);

	/* Transiciones */
	--ok-t: 180ms ease;
}


/* =========================================================================
   2. TIPOGRAFIA Y RITMO DE TEXTO
   No se cambia la familia tipografica (Open Sans cuerpo/titulares, Work Sans menu):
   solo se afinan tamaños, interlineado, peso y medida de linea.
   ========================================================================= */
#top .main_color,
#top .main_color p {
	color: var(--ok-ink);
}

#top #wrap_all .avia_textblock {
	line-height: 1.65;
}

/* Medida de lectura comoda: ~72 caracteres. Solo en textblocks a ancho completo,
   no en columnas estrechas (que ya limitan la medida por si mismas). */
#top #wrap_all .av_one_full > .avia_textblock > p {
	max-width: 72ch;
}

/* Jerarquia de titulares: mas peso y menos interlineado que el cuerpo. */
#top #wrap_all h1,
#top #wrap_all h2,
#top #wrap_all h3,
#top #wrap_all h4 {
	color: var(--ok-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

#top #wrap_all h2 {
	font-weight: 700;
}

#top #wrap_all h3 {
	font-weight: 600;
}

/* Separacion entre el titular de seccion y su contenido. */
#top #wrap_all .av-special-heading {
	margin-bottom: var(--ok-space-2);
}

/* Filete de acento bajo los titulares de seccion (h2), en verde de marca.
   Sustituye visualmente al separador suelto sin tocar el contenido. */
#top #wrap_all .av-special-heading.av-special-heading-h2 .av-special-heading-tag::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: var(--ok-space-3);
	background: var(--ok-green);
	border-radius: 2px;
}

/* Titulares centrados: el filete tambien se centra. */
#top #wrap_all .av-special-heading.av-special-heading-h2[class*="center"] .av-special-heading-tag::after,
#top #wrap_all .avia-section .container .av-special-heading.av-special-heading-h2.av-thin-hr .av-special-heading-tag::after {
	margin-left: auto;
	margin-right: auto;
}


/* =========================================================================
   3. RITMO VERTICAL DE SECCIONES
   Espaciado consistente entre las secciones ancladas del menu.
   No se tocan las anclas ni el orden: solo el padding vertical.
   ========================================================================= */
#top #wrap_all #service > .container,
#top #wrap_all #offers > .container,
#top #wrap_all #myopie-management > .container,
#top #wrap_all #terminkalender > .container {
	padding-top: var(--ok-section-y);
	padding-bottom: var(--ok-section-y);
}

/* Alterna el fondo para separar figura/fondo entre secciones contiguas. */
#top #wrap_all #offers,
#top #wrap_all #terminkalender {
	background-color: var(--ok-surface-alt);
}


/* =========================================================================
   4. MURO DE MARCAS (Enfold Logo Element)
   Antes: 26 logos en 4 filas de columnas av_one_eighth, con tamaños dispares
   y alineacion irregular.
   Ahora: una unica rejilla fluida, logos normalizados a la misma altura optica,
   en escala de grises y a color al hover.
   El elemento no es un slider (sin flechas, dots ni autoplay), por lo que
   aplanar las filas con display:contents es seguro.
   ========================================================================= */
#top #wrap_all .avia-logo-element-container .avia-content-slider-inner {
	overflow: visible;
}

/* Aplana las 4 filas para que las 26 marcas formen una sola rejilla. */
#top #wrap_all .avia-logo-element-container .slide-entry-wrap {
	display: contents;
}

#top #wrap_all .avia-logo-element-container .avia-content-slider-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--ok-space-2) var(--ok-space-3);
	align-items: center;
}

/* Cada logo ocupa una celda regular: se anulan float/width/margin de Enfold. */
#top #wrap_all .avia-logo-element-container .slide-entry {
	float: none;
	width: auto;
	margin: 0;
	padding: var(--ok-space-3) var(--ok-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
}

/* Normalizacion optica: misma altura maxima, sin deformar el logo. */
#top #wrap_all .avia-logo-element-container .slide-entry img {
	max-height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .62;
	transition: filter var(--ok-t), opacity var(--ok-t), transform var(--ok-t);
}

#top #wrap_all .avia-logo-element-container .slide-entry:hover img,
#top #wrap_all .avia-logo-element-container .slide-entry a:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.04);
}


/* =========================================================================
   5. TARJETAS DE SERVICELEISTUNGEN (iconbox)
   Antes: iconboxes sueltas sobre el fondo, sin contenedor ni retícula regular.
   Ahora: tarjeta con superficie, borde, radio y elevacion al hover.
   Icono en verde de marca (decorativo, no lleva texto encima).
   ========================================================================= */
#top #wrap_all .iconbox .iconbox_content {
	background: var(--ok-surface);
	border: 1px solid var(--ok-border);
	border-radius: var(--ok-radius);
	padding: var(--ok-space-4);
	box-shadow: var(--ok-shadow);
	transition: box-shadow var(--ok-t), transform var(--ok-t), border-color var(--ok-t);
	height: 100%;
}

#top #wrap_all .iconbox:hover .iconbox_content {
	border-color: var(--ok-border-strong);
	box-shadow: var(--ok-shadow-lift);
	transform: translateY(-2px);
}

/* Espaciado uniforme entre tarjetas apiladas. */
#top #wrap_all .iconbox {
	margin-bottom: var(--ok-space-3);
}

/* Cabecera de la tarjeta: icono + titulo en la misma linea optica. */
#top #wrap_all .iconbox .iconbox_content .entry-content-header {
	margin-bottom: var(--ok-space-2);
}

#top #wrap_all .iconbox .iconbox_content .iconbox_content_title {
	font-weight: 600;
	line-height: 1.3;
	color: var(--ok-ink);
	margin-bottom: 0;
}

#top #wrap_all .iconbox .iconbox_icon,
#top #wrap_all .iconbox .iconbox_icon svg path {
	color: var(--ok-green-deep);
	fill: var(--ok-green-deep);
}

#top #wrap_all .iconbox .iconbox_content p {
	color: var(--ok-ink-soft);
	line-height: 1.6;
	margin-bottom: 0;
}

/* Imagenes de servicio: mismo radio que las tarjetas para que la retícula
   se lea como un sistema unico. */
#top #wrap_all #service .avia-image-container-inner,
#top #wrap_all #service .avia-image-container img,
#top #wrap_all #myopie-management .avia-image-container img,
#top #wrap_all #offers .avia-image-container img {
	border-radius: var(--ok-radius);
}


/* =========================================================================
   6. CTAs / BOTONES
   Patron unico: misma geometria, peso y comportamiento en toda la pagina.
   Contraste: los botones "theme color" usaban el verde #9abf08 con texto
   blanco (2.14:1, falla AA). Pasan al verde profundo #5e7a04 (4.93:1, AA ok),
   que conserva el tono de marca.
   Los botones con color propio definido en la pagina (p. ej. el negro) no se
   recolorean: ya cumplen AA.
   ========================================================================= */
#top #wrap_all .avia-button {
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: var(--ok-radius-sm);
	padding: 14px 26px;
	min-height: 48px; /* target tactil */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ok-space-2);
	border-width: 1px;
	border-style: solid;
	transition: background-color var(--ok-t), border-color var(--ok-t),
	            color var(--ok-t), box-shadow var(--ok-t), transform var(--ok-t);
}

/* Especificidad por encima del CSS por-pagina de la ALB
   (#top #wrap_all .avia-button.av-<hash>), sin recurrir a !important. */
#top #wrap_all .main_color .avia-button.avia-color-theme-color,
#top #wrap_all .avia-section .avia-button.avia-color-theme-color,
#top #wrap_all .av-layout-grid-container .avia-button.avia-color-theme-color {
	background-color: var(--ok-green-deep);
	border-color: var(--ok-green-deep);
	color: var(--ok-surface);
}

#top #wrap_all .main_color .avia-button.avia-color-theme-color:hover,
#top #wrap_all .avia-section .avia-button.avia-color-theme-color:hover,
#top #wrap_all .av-layout-grid-container .avia-button.avia-color-theme-color:hover,
#top #wrap_all .main_color .avia-button.avia-color-theme-color:focus-visible,
#top #wrap_all .avia-section .avia-button.avia-color-theme-color:focus-visible {
	background-color: var(--ok-green-deeper);
	border-color: var(--ok-green-deeper);
	color: var(--ok-surface);
	box-shadow: var(--ok-shadow-lift);
	transform: translateY(-1px);
}

/* Aire alrededor del CTA para que respire dentro de su bloque. */
#top #wrap_all .avia-button-wrap {
	margin-top: var(--ok-space-3);
}


/* =========================================================================
   7. BLOQUE DE CONTACTO
   Direccion, horarios, telefono y email en una lista de iconos escaneable;
   formulario con campos legibles y foco visible.
   La casilla de consentimiento RGPD y sus textos NO se tocan.
   ========================================================================= */
#top #wrap_all #contact .avia-icon-list .iconlist_icon {
	background-color: var(--ok-green-deep);
	color: var(--ok-surface);
}

#top #wrap_all #contact .avia-icon-list .iconlist_icon svg path {
	fill: var(--ok-surface);
}

#top #wrap_all #contact .avia-icon-list .iconlist_title {
	font-weight: 600;
	color: var(--ok-ink);
	line-height: 1.35;
}

#top #wrap_all #contact .avia-icon-list .iconlist_content {
	color: var(--ok-ink-soft);
	line-height: 1.6;
}

/* Telefono y email: se leen como enlaces accionables. */
#top #wrap_all #contact a[href^="tel:"],
#top #wrap_all #contact a[href^="mailto:"] {
	color: var(--ok-green-deep);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ok-t);
}

#top #wrap_all #contact a[href^="tel:"]:hover,
#top #wrap_all #contact a[href^="mailto:"]:hover {
	border-bottom-color: var(--ok-green-deep);
}

/* Formulario: campos con superficie clara, borde definido y foco visible. */
#top #wrap_all .avia_ajax_form input[type="text"],
#top #wrap_all .avia_ajax_form input[type="email"],
#top #wrap_all .avia_ajax_form input[type="tel"],
#top #wrap_all .avia_ajax_form textarea {
	background-color: var(--ok-surface);
	border: 1px solid var(--ok-border-strong);
	border-radius: var(--ok-radius-sm);
	padding: 14px 16px;
	min-height: 48px;
	color: var(--ok-ink);
	line-height: 1.5;
	transition: border-color var(--ok-t), box-shadow var(--ok-t);
}

#top #wrap_all .avia_ajax_form input[type="text"]:focus,
#top #wrap_all .avia_ajax_form input[type="email"]:focus,
#top #wrap_all .avia_ajax_form input[type="tel"]:focus,
#top #wrap_all .avia_ajax_form textarea:focus {
	border-color: var(--ok-green-deep);
	box-shadow: 0 0 0 3px rgba(94, 122, 4, .18);
	outline: none;
}

/* Placeholders: el gris por defecto no llegaba a AA. */
#top #wrap_all .avia_ajax_form ::placeholder {
	color: var(--ok-meta);
	opacity: 1;
}

/* La casilla de consentimiento debe ser facil de pulsar y de ver. */
#top #wrap_all .avia_ajax_form .input_checkbox_label {
	color: var(--ok-ink-soft);
	line-height: 1.5;
}

#top #wrap_all .avia_ajax_form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--ok-green-deep);
}


/* =========================================================================
   8. TERMINKALENDER
   Solo el marco alrededor del iframe. El iframe externo
   (terminvereinbarung.info) y su gestion de consentimiento no se tocan.
   ========================================================================= */
#top #wrap_all #terminkalender .avia_textblock,
#top #wrap_all #terminkalender .template-page .entry-content-wrapper {
	max-width: 100%;
}

#top #wrap_all #terminkalender iframe {
	display: block;
	width: 100%;
	background: var(--ok-surface);
	border: 1px solid var(--ok-border);
	border-radius: var(--ok-radius);
	box-shadow: var(--ok-shadow);
}


/* =========================================================================
   9. ACCESIBILIDAD
   Foco visible en todo elemento interactivo (antes se perdia en varios),
   y respeto por prefers-reduced-motion.
   ========================================================================= */
#top a:focus-visible,
#top button:focus-visible,
#top input:focus-visible,
#top textarea:focus-visible,
#top select:focus-visible,
#top .avia-button:focus-visible,
#top #header .av-main-nav > li > a:focus-visible {
	outline: 3px solid var(--ok-green-deep);
	outline-offset: 2px;
	border-radius: var(--ok-radius-sm);
}

/* Enlaces de contenido: verde accesible en vez del verde claro (2.14:1). */
#top #wrap_all .avia_textblock a:not(.avia-button),
#top #wrap_all .iconlist_content a:not(.avia-button) {
	color: var(--ok-green-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#top #wrap_all *,
	#top #wrap_all *::before,
	#top #wrap_all *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */
@media only screen and (max-width: 989px) {
	/* Muro de marcas: celdas mas pequeñas en tablet. */
	#top #wrap_all .avia-logo-element-container .avia-content-slider-inner {
		grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--ok-section-y: clamp(40px, 9vw, 64px);
	}

	/* 3 marcas por fila en movil, con logos algo menores. */
	#top #wrap_all .avia-logo-element-container .avia-content-slider-inner {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ok-space-1) var(--ok-space-2);
	}

	#top #wrap_all .avia-logo-element-container .slide-entry {
		min-height: 68px;
		padding: var(--ok-space-2);
	}

	#top #wrap_all .avia-logo-element-container .slide-entry img {
		max-height: 34px;
	}

	/* Titular del hero: a 4vw se quedaba en ~15px en movil. */
	#top #wrap_all .avia-section:first-of-type .av-special-heading .av-special-heading-tag {
		font-size: clamp(28px, 7.5vw, 40px);
	}

	/* CTA comodo de pulsar: ancho completo en movil. */
	#top #wrap_all .avia-button {
		width: 100%;
		padding: 14px 20px;
	}

	/* Tarjetas: menos padding para no comerse el ancho. */
	#top #wrap_all .iconbox .iconbox_content {
		padding: var(--ok-space-3);
	}

	/* Enlaces de contacto: target tactil de 44px. */
	#top #wrap_all #contact a[href^="tel:"],
	#top #wrap_all #contact a[href^="mailto:"] {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
}