/*
Theme Name: SODERCAN GeneratePress Child
Theme URI: https://www.sodercan.es/
Description: Child theme de GeneratePress para el nuevo portal web de SODERCAN.
Author: Viacore
Template: generatepress
Version: 1.0.0
Text Domain: sodercan-gp-child
*/

/* ==========================================================
   SODERCAN DESIGN TOKENS

   Los colores globales proceden de GeneratePress:
   --text
   --forest-dark
   --forest
   --bright-green
   --mint
   --soft-mint
   --border
   --background-light
   --white
   ========================================================== */

:root {

    /* Radius */
    --sod-radius-xs: 6px;
    --sod-radius-sm: 10px;
    --sod-radius-md: 16px;
    --sod-radius-lg: 24px;
    --sod-radius-xl: 28px;

    /* Spacing */
    --sod-space-xs: 8px;
    --sod-space-sm: 16px;
    --sod-space-md: 24px;
    --sod-space-lg: 40px;
    --sod-space-xl: 64px;
    --sod-space-2xl: 96px;
}


/* ==========================================================
   ACCESSIBILITY BASE
   ========================================================== */

:focus-visible {
    outline: 3px solid var(--bright-green);
    outline-offset: 3px;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.sod-topbar {
    background-color: var(--forest);
}

.sod-topbar a,
.sod-topbar a:visited {
    color: var(--white);
    text-decoration: none;
}

.sod-topbar a:hover {
    color: var(--bright-green);
}

.sod-topbar a:focus-visible {
    color: var(--white);
    outline: 2px solid var(--bright-green);
    outline-offset: 3px;
}

.sod-topbar .sod-language__active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sod-language__item {
    cursor: pointer;
}

.sod-language__item:hover {
    color: var(--bright-green);
}

.sod-language__active {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1075px) {

    .sod-topbar {
        display: none;
    }
}

/* ----------------------------------------------------------
   Tabler Icons — estilo outline
   ---------------------------------------------------------- */

.gb-shape svg[stroke] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   ENLACES EXTERNOS
   ========================================================== */

.sod-external-link, .sod-icon-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* El wrapper del icono debe heredar el color del enlace */
.sod-external-link .gb-icon {
    color: inherit !important;
}

/* GenerateBlocks puede aplicar fill: currentColor al SVG.
   Para iconos Tabler queremos únicamente línea. */
.sod-external-link svg, .sod-icon-button svg {
    width: 14px;
    height: 14px;

    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex: 0 0 auto;
}

.sod-external-link svg path, .sod-icon-button svg path {
    fill: none !important;
    stroke: currentColor !important;
}

/* Hover */
.sod-external-link:hover,
.sod-external-link:hover .gb-icon,
.sod-external-link:hover svg {
    color: var(--bright-green) !important;
}

/* Focus teclado */
.sod-external-link:focus-visible,
.sod-external-link:focus-visible .gb-icon,
.sod-external-link:focus-visible svg {
    color: var(--white) !important;
}

/* ==========================================================
   LINKS - SOBRE FONDOS OSCUROS
   ========================================================== */

.inside-article a.sod-link-on-dark,
.inside-article a.sod-link-on-dark:visited {
    color: var(--bright-green);
}

.inside-article a.sod-link-on-dark:hover,
.inside-article a.sod-link-on-dark:focus-visible {
    color: var(--white);
}

/* ==========================================================
   ENLACES CON FLECHA
   ========================================================== */

.sod-link-arrow .gb-shape {
    display: inline-flex;
    align-items: center;

    transition: transform .18s ease;
}

.sod-link-arrow:hover .gb-shape,
.sod-link-arrow:focus-visible .gb-shape {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .sod-link-arrow .gb-shape {
        transition: none;
    }

    .sod-link-arrow:hover .gb-shape,
    .sod-link-arrow:focus-visible .gb-shape {
        transform: none;
    }
}

/* ==========================================================
   NAVBAR DESKTOP
   ========================================================== */

.main-navigation {
    border-bottom: 1px solid var(--border);
}

@media (min-width: 1076px) {

    /* Mantener la altura real del navbar */
    .main-navigation:not(#sticky-navigation) .inside-navigation {
        min-height: 89px;
        display: flex;
        align-items: center;
    }

    /* El menú ocupa la altura disponible */
    .main-navigation:not(#sticky-navigation) .main-nav,
    .main-navigation:not(#sticky-navigation) .main-nav > ul {
        height: 72px;
        display: flex;
        align-items: center;
    }

    /* Cada LI ocupa los 72px pero no recibe fondo */
    .main-navigation:not(#sticky-navigation) .main-nav > ul > li {
        height: 72px;
        display: flex;
        align-items: center;
        background: transparent !important;
    }

    /* El enlace mantiene un área cómoda de interacción,
       pero el estado visual se representa con una línea inferior */
    .main-navigation:not(#sticky-navigation) .main-nav > ul > li > a {
        display: flex;
        align-items: center;

        height: auto !important;
        min-height: 0 !important;
        line-height: 1.3 !important;

        padding: 11px 18px !important;
        margin: 0 2px;

        border-radius: 0;
        background: transparent !important;

        transition: color .18s ease;
    }

    /* Evitar fondos completos aplicados por GeneratePress */
    .main-navigation:not(#sticky-navigation) .main-nav > ul > li:hover,
    .main-navigation:not(#sticky-navigation) .main-nav > ul > li:focus-within {
        background: transparent !important;
    }


    /* ----------------------------------------------------------
       INTERACCIÓN COMPARTIDA
       Navbar normal + navegación sticky
       ---------------------------------------------------------- */

    .main-navigation .main-nav > ul > li > a {
        position: relative;
    }

    /* Indicador inferior inicialmente oculto */
    .main-navigation .main-nav > ul > li > a::after {
        content: "";

        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 2px;

        height: 3px;

        background-color: var(--bright-green);
        border-radius: 999px;

        transform: scaleX(0);
        transform-origin: center;

        transition:
            transform .18s ease,
            height .12s ease;
    }

    /* Hover */
    .main-navigation .main-nav > ul > li > a:hover {
        background: transparent !important;
        color: var(--forest) !important;
    }

    .main-navigation .main-nav > ul > li > a:hover::after {
        transform: scaleX(1);
    }

    /* Pulsación */
    .main-navigation .main-nav > ul > li > a:active {
        background: transparent !important;
        color: var(--forest) !important;
    }

    .main-navigation .main-nav > ul > li > a:active::after {
        height: 4px;
        transform: scaleX(1);
    }

    /* Navegación por teclado */
    .main-navigation .main-nav > ul > li > a:focus-visible {
        background: transparent !important;
        color: var(--forest) !important;

        outline: 2px solid var(--forest);
        outline-offset: 2px;
    }

    .main-navigation .main-nav > ul > li > a:focus-visible::after {
        transform: scaleX(1);
    }
}


/* ==========================================================
   LOGO NAVBAR
   ========================================================== */

.main-navigation .navigation-branding img {
    max-height: 48px;
    width: auto;
    padding: 0;
}

/* Sticky */
#sticky-navigation .navigation-branding img {
    max-height: 40px;
    width: auto;
}

/* Logo móvil */
@media (max-width: 1075px) {

    .main-navigation .navigation-branding img,
    .site-logo.mobile-header-logo img {
        max-height: 60px;
        width: auto;
    }
}


/* ==========================================================
   NAVBAR - PÁGINA / SECCIÓN ACTIVA
   ========================================================== */

@media (min-width: 1076px) {

    /*
     * La misma línea inferior se mantiene visible para:
     * - página actual
     * - hub padre
     * - ancestros del elemento actual
     */
    .main-navigation .main-nav > ul > li:is(
        .current-menu-item,
        .current-menu-ancestor,
        .current-menu-parent,
        .current-page-item,
        .current-page-parent,
        .current-page-ancestor,
        .current_page_item,
        .current_page_parent,
        .current_page_ancestor
    ) > a::after {
        transform: scaleX(1);
    }

    .main-navigation .main-nav > ul > li:is(
        .current-menu-item,
        .current-menu-ancestor,
        .current-menu-parent,
        .current-page-item,
        .current-page-parent,
        .current-page-ancestor,
        .current_page_item,
        .current_page_parent,
        .current_page_ancestor
    ) > a {
        color: var(--forest) !important;
        font-weight: 600;
    }
}


/* ==========================================================
   STICKY NAVIGATION
   Hereda hover, pulsación, focus y estado activo del navbar
   mediante el indicador inferior compartido.
   ========================================================== */

@media (min-width: 1076px) {

    /* GeneratePress no debe pintar el LI completo */
    #sticky-navigation .main-nav > ul > li,
    #sticky-navigation .main-nav > ul > li:hover,
    #sticky-navigation .main-nav > ul > li:focus-within {
        background: transparent !important;
    }

    /* Mantener también transparente el enlace sticky.
       La interacción visual se resuelve con ::after. */
    #sticky-navigation .main-nav > ul > li > a,
    #sticky-navigation .main-nav > ul > li > a:hover,
    #sticky-navigation .main-nav > ul > li > a:active,
    #sticky-navigation .main-nav > ul > li > a:focus-visible {
        background: transparent !important;
        color: var(--forest) !important;
    }
}


/* ==========================================================
   MENÚ MÓVIL / OFF-CANVAS
   ========================================================== */


/* Encabezados de sección: MENÚ, INFORMACIÓN */

#generate-slideout-menu .main-nav li.menu-section-title,
#generate-slideout-menu .main-nav li.menu-section-title:hover,
#generate-slideout-menu .main-nav li.menu-section-title:focus,
#generate-slideout-menu .main-nav li.menu-section-title:focus-within,
#generate-slideout-menu .main-nav li.menu-section-title:active {
    background: transparent !important;
}


/* Neutralizar también el <a> que genera WordPress */

#generate-slideout-menu .main-nav li.menu-section-title > a,
#generate-slideout-menu .main-nav li.menu-section-title:hover > a,
#generate-slideout-menu .main-nav li.menu-section-title:focus > a,
#generate-slideout-menu .main-nav li.menu-section-title:focus-within > a,
#generate-slideout-menu .main-nav li.menu-section-title:active > a,
#generate-slideout-menu .main-nav li.menu-section-title.current-menu-item > a {
    background: transparent !important;
    color: var(--forest) !important;

    cursor: default !important;
    pointer-events: none !important;

    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .03em;

    padding-top: 24px;
    padding-bottom: 8px;
}


/* Elementos de navegación reales */

#generate-slideout-menu
.main-nav
li:not(.menu-section-title) > a {
    margin: 2px 18px;
    padding: 12px 16px;

    border-radius: var(--sod-radius-sm);

    line-height: 1.3;

    transition:
        background-color .15s ease,
        color .15s ease;
}


/* Hover: escritorio / dispositivos con puntero */

#generate-slideout-menu
.main-nav
li:not(.menu-section-title) > a:hover {
    background-color: var(--bright-green);
    color: var(--forest);
}


/* Pulsación táctil */

#generate-slideout-menu
.main-nav
li:not(.menu-section-title) > a:active {
    background-color: var(--bright-green);
    color: var(--forest);
}


/* Página activa real */

#generate-slideout-menu
.main-nav
li.current-menu-item:not(.menu-section-title) > a,
#generate-slideout-menu
.main-nav
li.current-menu-ancestor:not(.menu-section-title) > a {
    background-color: var(--background-light);
    color: var(--forest);
    font-weight: 600;
}


/* Navegación por teclado */

#generate-slideout-menu
.main-nav
li:not(.menu-section-title) > a:focus-visible {
    background-color: var(--bright-green);
    color: var(--forest);
}

/* ==========================================================
   SEARCH - COMPONENTE GLOBAL
   ========================================================== */

.sod-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    width: 100%;
    min-height: 52px;

    margin: 0;
    padding: 4px;

    background: var(--white);
    border: 1px solid transparent;
    border-radius: 16px;
}

.sod-search__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin-left: 10px;

    color: var(--forest);
}

.sod-search__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}

/* Input */
.sod-search__input,
.sod-search input[type="search"] {
    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 12px !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
    color: var(--text);

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;

    appearance: none;
    -webkit-appearance: none;
}

.sod-search__input::placeholder {
    color: var(--text);
    opacity: .65;
}

/* Botón */
.sod-search__submit {
    min-height: 46px;

    margin: 0;
    padding: 0 20px;

    border: 0;
    border-radius: 12px;

    background: var(--bright-green);
    color: var(--forest);

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.sod-search__submit:hover {
    background: var(--mint);
    color: var(--forest-dark);
}

.sod-search:focus-within {
    outline: 3px solid var(--bright-green);
    outline-offset: 3px;
}

.sod-search__submit:focus-visible {
    outline: 2px solid var(--forest-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sod-search__submit {
        transition: none;
    }
}

/* Chips de búsqueda: neutraliza color global de enlaces de GeneratePress */
.inside-article a.sod-search-chip,
.inside-article a.sod-search-chip:visited {
    color: var(--white);
}

.inside-article a.sod-search-chip:hover,
.inside-article a.sod-search-chip:focus-visible {
    color: var(--forest);
}

/* ==========================================================
   ACCESOS RÁPIDOS - SCROLL HORIZONTAL
   ========================================================== */


/* ----------------------------------------------------------
   Marco exterior
   ---------------------------------------------------------- */

.sod-quick-shell {
	position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
}


/* ----------------------------------------------------------
   Carril desplazable
   ---------------------------------------------------------- */

.sod-quick-track {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 0;

	overflow-x: auto !important;
	overflow-y: hidden !important;

	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x;

	scroll-snap-type: x proximity;
}

/* Ocultar scrollbar nativo de explorador para poner uno propio */

@media (max-width: 767px) {
    .sod-quick-track {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sod-quick-track::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

/* Scrollbar personalizado para barra de Accesos rápidos */
.sod-quick-scrollbar {
    display: none;
}

@media (max-width: 767px) {

    .sod-quick-shell {
        position: relative;
        padding-bottom: 4px;
    }

    /* Ocultamos el scrollbar nativo */
    .sod-quick-track {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sod-quick-track::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Rail */
    .sod-quick-scrollbar {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 2px;

        display: block;
        height: 2px;

        overflow: hidden;
        background: rgba(18, 66, 63, 0.08);
        border-radius: 999px;

        pointer-events: none;
    }

    /* Thumb */
    .sod-quick-scrollbar__thumb {
        position: absolute;
        top: 0;
        left: 0;

        display: block;
        height: 2px;

        width: var(--sod-quick-thumb-width, 30%);
        transform: translateX(var(--sod-quick-thumb-x, 0px));

        background: rgba(18, 66, 63, 0.30);
        border-radius: 999px;

        transition: width 0.15s ease;
    }
}


/* ----------------------------------------------------------
   El Quick item .sod-quick-item está definido en estilos globales de Generate Blocks Pro
   ---------------------------------------------------------- */

/* ==========================================================
   FORMS
   ========================================================== */

.sod-form .gb-form-field__input:is(select) {
    background-image: url("/wp-content/uploads/2026/10/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px 18px;
}

/* ==========================================================
   LISTS
   ========================================================== */

ul {
    color: var(--text);
    font-size: 16px;
    gap: 8px;
    line-height: 2;
}
ul li::marker {
    color: var(--bright-green);
}

/* ==========================================================
   TABLE
   ========================================================== */

/* Tabla institucional SODERCAN */
.sod-table {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    border-spacing: 0;
    border-collapse: separate;
    overflow: hidden;
    background-color: #fff;
    color: var(--forest);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
	margin-top: 30px;
}

.sod-table th,
.sod-table td {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--border);
}

.sod-table thead th {
	background-color: var(--bright-green);
    color: var(--forest);
    font-family: var(--gp-font--space-grotesk);
    font-weight: 600;
    line-height: 1.4;
}

.sod-table tbody tr:nth-child(even) {
    background-color: var(--soft-mint);
}

.sod-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

.sod-table tbody td:first-child {
    font-weight: 600;
}

.sod-table td p {
    margin-block: 0 8px;
}

.sod-table td p:last-child {
    margin-bottom: 0;
}

.sod-table tbody tr:last-child td {
    border-bottom: 0;
}

.sod-table tbody tr {
    transition: background-color .15s ease;
}

.sod-table tbody tr:hover {
    background-color: #e8f4e9;
}

/* ==========================================================
   MEDIA - VÍDEOS
   ========================================================== */

.wp-block-video.sod-video video {
    height: auto;
    vertical-align: middle;
    width: 100%;
    border-radius: 24px;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    border-top: 1px solid var(--border);
}

h2.title-widget-footer {
	font-family: "Space Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
	color: var(--forest);
	margin-bottom: 20px;
}

/* WIDGET - CONTACTO */

.sod-footer__contact-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;
}

.sod-footer__contact-row--address {
    align-items: flex-start;
}

.sod-footer__contact-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;

    color: var(--forest);
}

.sod-footer__contact-icon svg {
    display: block;

    width: 20px;
    height: 20px;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;

    stroke-linecap: round;
    stroke-linejoin: round;

    shape-rendering: geometricPrecision;
}

.sod-footer__contact-icon svg path,
.sod-footer__contact-icon svg line,
.sod-footer__contact-icon svg polyline,
.sod-footer__contact-icon svg circle,
.sod-footer__contact-icon svg rect {
    fill: none !important;
    stroke: currentColor !important;
}

.sod-footer__contact-row p,
.sod-footer__contact-row .gb-headline {
    margin: 0;
}

.sod-footer__contact-link,
.sod-footer__contact-link:visited {
    color: var(--text);
    text-decoration: none;
}

.sod-footer__contact-link:hover {
    color: var(--forest);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sod-footer__contact-link:focus-visible {
    color: var(--forest);
    outline: 2px solid var(--forest);
    outline-offset: 3px;
}

/* FOOTER - REDES SOCIALES */

.sod-footer__socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}


/* Botón circular */
.sod-social-link,
.sod-social-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 40px;

    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    height: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;
    margin: 0;

    box-sizing: border-box;

    border-radius: 50%;

    background-color: var(--forest);
    color: var(--white);

    line-height: 1 !important;
    text-decoration: none;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}


/* Wrapper que GenerateBlocks crea alrededor del SVG */
.sod-social-link .gb-shape {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    line-height: 0 !important;
}


/* SVG */
.sod-social-link .gb-shape svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* Todas las formas internas */
.sod-social-link .gb-shape svg path,
.sod-social-link .gb-shape svg line,
.sod-social-link .gb-shape svg polyline,
.sod-social-link .gb-shape svg circle,
.sod-social-link .gb-shape svg rect {
    fill: none !important;
    stroke: currentColor !important;
}


/* Hover */
.sod-social-link:hover {
    background-color: var(--bright-green);
    color: var(--forest);

    transform: translateY(-2px);
}


/* Pulsación */
.sod-social-link:active {
    background-color: var(--bright-green);
    color: var(--forest);

    transform: translateY(0);
}


/* Teclado */
.sod-social-link:focus-visible {
    background-color: var(--bright-green);
    color: var(--forest);

    outline: 3px solid var(--forest);
    outline-offset: 3px;
}


/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {

    .sod-social-link {
        transition: none;
    }

    .sod-social-link:hover,
    .sod-social-link:active {
        transform: none;
    }
}

/* FOOTER - LOGOS INSTITUCIONALES */

.sod-footer__institutional .wp-block-image {
    flex: 0 0 auto;
    margin: 0;
    line-height: 0;
}

.sod-footer__institutional img {
    display: block;
    width: auto;
    height: 54px;
    max-width: 100%;
    object-fit: contain;
}

.sod-footer__institutional .logo_gob_cantabria img {
	 height: 60px;
}

@media (max-width: 1075px) {
    .sod-footer__institutional {
        gap: 20px;
    }

    .sod-footer__institutional img {
        max-height: 48px;
    }
}