/* =============================================================================
   Hostal Mi Gran Santander — Custom CSS para Cassiopeia
   Look minimalista: logo + menú olive + contenido transparente sobre fondo + footer.
   Sin cajas visibles entre el background y el contenido.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');

/* ===== Switcher de idiomas (mod_languages) ============================== */
.mod-languages {
    position: absolute;
    top: 10px;
    right: 18px;
    z-index: 10000;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    padding: 3px 6px;
    backdrop-filter: blur(4px);
}

.mod-languages .visually-hidden {
    display: none !important;
}

.mod-languages__list,
.mod-languages ul.lang-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    align-items: center;
}

.mod-languages__list li,
.mod-languages ul.lang-inline li {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.mod-languages a,
.mod-languages img {
    display: inline-block;
    border: 0;
}

/* Banderas: tamaño chico (18px) */
.mod-languages img {
    width: 18px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    opacity: 0.65;
    transition: opacity 0.15s, transform 0.15s;
    vertical-align: middle;
}

.mod-languages a:hover img,
.mod-languages li:hover img {
    opacity: 1;
    transform: scale(1.15);
}

/* Idioma activo: bandera resaltada */
.mod-languages .lang-active img,
.mod-languages li.lang-active img {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--hostal-link), 0 1px 1px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
    .mod-languages {
        top: 6px;
        right: 6px;
        padding: 2px 5px;
    }
    .mod-languages img { width: 16px; }
}


:root {
    --hostal-text:    #FFFFFF;
    --hostal-link:    #FFED00;
    --hostal-brown:   #5C310E;
    --hostal-olive:   #999B48;
}

/* ===== Reset general ==================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: transparent;
    color: var(--hostal-text);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    overflow-x: hidden;
    position: relative;
}

html {
    background: transparent;
}

/* Fondo fijo real: pseudo-elemento que NO se mueve al scrollear ---------- */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('/images/stories/fondo.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

/* ===== Header: transparente, logo centrado dentro de 940px =============== */
.header,
.container-header {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 940px;
    margin: 0 auto;
    padding: 55px 0 0 0;
    border: none;
    text-align: center;
}

.header .grid-child {
    width: 100%;
    display: block;
    text-align: center;
}

.navbar-brand {
    display: inline-block;
    width: auto;
    text-align: center;
}

.brand-logo {
    display: inline-block;
    margin: 0 auto;
}

.brand-logo img {
    max-height: 110px;
    width: auto;
    mix-blend-mode: multiply;
    display: block;
    margin: 0 auto;
}

.brand-logo .site-title,
.site-description {
    display: none !important;
}

/* ===== Menú: una sola línea, compacto =================================== */
.container-nav {
    background: var(--hostal-olive);
    margin: 10px auto 0;
    max-width: 940px;
    padding: 0;
    border: none;
    line-height: 1;
    overflow: visible;   /* IMPORTANTE: visible para que el dropdown se vea */
    position: relative;
    z-index: 9999;
}

.container-nav .mod-menu,
.container-nav .nav {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    width: 100%;
}

.container-nav .mod-menu > li.nav-item {
    position: relative;
    margin: 0;
    flex: 0 0 auto;
}

/* Todos los items con la MISMA altura, sin importar estado */
.container-nav .mod-menu > li.nav-item > a,
.container-nav .mod-menu > li.nav-item.current > a,
.container-nav .mod-menu > li.nav-item.active > a,
.container-nav .mod-menu > li.nav-item > span.mod-menu__heading {
    display: block;
    padding: 9px 14px;
    color: white !important;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.18);
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    cursor: default;
}

/* El cursor del heading es default (no pointer) porque no es clickeable */
.container-nav .mod-menu > li.nav-item > a { cursor: pointer; }

.container-nav .mod-menu > li.nav-item {
    display: flex;
    align-items: stretch;
}

.container-nav .mod-menu > li.nav-item:last-child > a,
.container-nav .mod-menu > li.nav-item:last-child > span.mod-menu__heading {
    border-right: none;
}

.container-nav .mod-menu > li.nav-item:hover > a,
.container-nav .mod-menu > li.nav-item.active > a,
.container-nav .mod-menu > li.nav-item:hover > span.mod-menu__heading {
    background: var(--hostal-brown);
    color: var(--hostal-link) !important;
}

/* Submenús dropdown ------------------------------------------------------ */
.container-nav .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--hostal-brown);
    min-width: 220px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6);
    z-index: 99999;
}

.container-nav .mod-menu > li.nav-item:hover > .mod-menu__sub {
    display: block;
}

.container-nav .mod-menu__sub li a {
    display: block;
    padding: 10px 16px;
    color: var(--hostal-text) !important;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-transform: none;
}

.container-nav .mod-menu__sub li:last-child a {
    border-bottom: none;
}

.container-nav .mod-menu__sub li a:hover {
    background: var(--hostal-olive);
    color: white !important;
}

.container-nav .mod-menu > li.nav-item.deeper.parent > a::after,
.container-nav .mod-menu > li.nav-item.deeper.parent > span.mod-menu__heading::after {
    content: " ▾";
    font-size: 9px;
    margin-left: 2px;
}

/* ===== Site grid: una columna, contenedor centrado ====================== */
.site-grid {
    max-width: 940px;
    margin: 0 auto;
    background: transparent;
    display: block;
    padding: 0;
}

.container-sidebar-right:empty,
.container-sidebar-left:empty,
.container-sidebar-right,
.container-sidebar-left {
    display: none;
}

/* ===== Container component: transparente, sin caja ====================== */
.container-component {
    background: transparent !important;
    color: var(--hostal-text);
    padding: 10px 0;
    box-shadow: none;
    margin: 0;
}

main,
.blog-featured,
.blog-items,
.blog-item,
.com-content-featured {
    background: transparent !important;
    color: var(--hostal-text);
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}

/* ===== Caja oscura para vistas internas (artículos y listados de categoría) ===== */
.com-content-article .item-page,
.com-content-category-blog,
.com-content-category-list,
.com-content-archive,
.com-content-form {
    background: rgba(44, 46, 52, 0.92);
    color: var(--hostal-text);
    padding: 20px 25px;
    margin: 0 auto !important;
    max-width: 940px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: none;
    min-height: 400px;
}

/* ===== Página de contacto: caja unificada, grid interno para 2 cols arriba ===== */
/* Ocultar título superior "Hostal Mi Gran Santander" y legend del form */
.com-contact .page-header,
.com-contact form fieldset > legend {
    display: none !important;
}

/* Forzar que la columna del componente no exceda 940px */
.site-grid > .grid-child.container-component {
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Forzar también las otras filas del site-grid */
.site-grid > .grid-child {
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Caja oscura sobre el wrapper .com-contact, max 940px = ancho del menú */
.com-contact.contact {
    background: rgba(44, 46, 52, 0.92);
    color: var(--hostal-text);
    padding: 20px 25px;
    margin: 0 auto !important;
    max-width: 940px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "container misc-h2"
        "container miscinfo"
        "form-h2   form-h2"
        "form      form";
    column-gap: 25px;
    row-gap: 0;
    min-height: 0;
}

/* Bloque Contacto (col 1, span 2 filas) */
.com-contact > .com-contact__container {
    grid-area: container;
    background: transparent;
    padding: 0;
    margin: 0;
}

.com-contact > .com-contact__container > h2 {
    margin: 0 0 12px 0;
}

/* h2 "Reserva ahora" (col 2, row 1) */
.com-contact > h2:nth-of-type(2) {
    grid-area: misc-h2;
    background: transparent;
    padding: 0;
    margin: 0 0 12px 0;
}

/* miscinfo (col 2, row 2) */
.com-contact > .com-contact__miscinfo {
    grid-area: miscinfo;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* h2 "Formulario" (full width, row 3) — con separador */
.com-contact > h2:nth-of-type(1) {
    grid-area: form-h2;
    background: transparent;
    padding-top: 18px;
    margin: 25px 0 12px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* form (full width, row 4) */
.com-contact > .com-contact__form {
    grid-area: form;
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Limpiar el dl-horizontal del miscinfo (ocultar dt con ícono, sin márgenes extras) */
.com-contact .com-contact__miscinfo dl.dl-horizontal {
    display: block;
    margin: 0;
    padding: 0;
}
.com-contact .com-contact__miscinfo dl.dl-horizontal dt {
    display: none !important;
}
.com-contact .com-contact__miscinfo dl.dl-horizontal dd {
    margin: 0;
    padding: 0;
}
.com-contact .com-contact__miscinfo p {
    margin: 0 0 10px 0;
}
.com-contact .com-contact__miscinfo p:last-child {
    margin-bottom: 0;
}

/* Sliders/accordion de Joomla → quitamos lo de slider, mostramos plano */
.com-contact .contact-miscinfo,
.com-contact .contact-address,
.com-contact .contact-emailto,
.com-contact .contact-form,
.com-contact details {
    background: transparent !important;
    border: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.com-contact details > summary {
    display: none;
}
.com-contact details[open] > *,
.com-contact details > * {
    display: block;
}

/* Info: iconos + texto */
.com-contact dl,
.com-contact .dl-horizontal {
    margin: 0;
    color: var(--hostal-text);
}

.com-contact dt {
    font-weight: 600;
    color: var(--hostal-text);
    margin-top: 8px;
}

.com-contact dd {
    margin: 4px 0 8px 0;
    color: var(--hostal-text);
}

.com-contact .icon-envelope,
.com-contact .icon-phone,
.com-contact .icon-mobile,
.com-contact .icon-address {
    color: var(--hostal-olive);
    margin-right: 6px;
}

/* Formulario: inputs oscuros, no blancos */
.com-contact form label,
.com-contact .control-label,
.com-contact form .form-label {
    color: var(--hostal-text);
    font-weight: 500;
    margin: 12px 0 4px 0;
    display: block;
    font-size: 13px;
}

.com-contact form input[type="text"],
.com-contact form input[type="email"],
.com-contact form input[type="url"],
.com-contact form textarea {
    width: 100%;
    background: rgba(255,255,255,0.95);
    color: #333;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 3px;
    padding: 8px 10px;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    box-sizing: border-box;
}

.com-contact form textarea {
    min-height: 120px;
    resize: vertical;
}

.com-contact form input:focus,
.com-contact form textarea:focus {
    outline: 2px solid var(--hostal-olive);
    background: #fff;
}

.com-contact form .form-check-label,
.com-contact form .form-check {
    color: var(--hostal-text);
    font-size: 12px;
    margin: 8px 0;
}

.com-contact form button,
.com-contact form .btn-primary,
.com-contact form input[type="submit"] {
    background: var(--hostal-olive);
    color: white !important;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    padding: 10px 25px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

.com-contact form button:hover,
.com-contact form .btn-primary:hover,
.com-contact form input[type="submit"]:hover {
    background: var(--hostal-brown);
    color: var(--hostal-link) !important;
}

/* Encabezados internos (h3 "Send an Email") más chicos */
.com-contact h3 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 16px !important;
    color: var(--hostal-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
    .com-contact.contact {
        grid-template-columns: 1fr;
        grid-template-areas:
            "container"
            "misc-h2"
            "miscinfo"
            "form-h2"
            "form";
    }
}

/* Restaurar título y meta en páginas internas (en home están ocultos) */
.com-content-article .item-page .page-header,
.com-content-article .item-page .item-title,
.com-content-category-blog .page-header {
    display: block !important;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.com-content-article .item-page h1,
.com-content-article .item-page h2,
.com-content-category-blog h1,
.com-content-category-blog h2 {
    font-family: 'Oswald', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400;
    color: var(--hostal-text) !important;
    margin: 0;
    text-transform: none;
}

/* Ocultar metadata: Details, Category, Published, Hits — no aparecen en el original */
.com-content-article .item-page dl.article-info,
.com-content-article .item-page .article-info,
.com-content-article .item-page .item-content > dl,
.com-content-article .item-page .icon-folder-open,
.com-content-article .item-page .icon-calendar,
.com-content-article .item-page .icon-eye,
.com-content-category-blog dl.article-info,
.com-content-category-blog .article-info,
.com-content-featured dl.article-info,
.com-content-featured .article-info,
.com-content-featured .item-content > dl,
.com-content-featured .icon-folder-open,
.com-content-featured .icon-calendar,
.com-content-featured .icon-eye {
    display: none !important;
}

/* Título: blanco plano, sin subrayado amarillo de link */
.com-content-article .item-page h1 a,
.com-content-article .item-page h2 a,
.com-content-article .item-page .article-title a,
.com-content-article .item-page .page-header a,
.com-content-category-blog h2 a,
.com-content-category-blog .page-header a {
    color: var(--hostal-text) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Reservas y otros links dentro del artículo: amarillo sin subrayado */
.com-content-article .item-page a,
.com-content-category-blog a {
    color: var(--hostal-link) !important;
    text-decoration: none !important;
}
.com-content-article .item-page a:hover,
.com-content-category-blog a:hover {
    text-decoration: underline !important;
}

/* Imágenes dentro de artículos: floats limpios */
.com-content-article .item-page img,
.com-content-category-blog img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

/* Tablas legacy del J1.5 (width="200") — forzar ancho completo y dos columnas iguales */
.com-content-article .item-page table,
.com-content-category-blog table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
    margin: 0;
}

.com-content-article .item-page table td,
.com-content-category-blog table td {
    vertical-align: top;
    padding: 4px;
    width: 50%;
}

.com-content-article .item-page table td img,
.com-content-category-blog table td img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0;
}

/* Listas dentro de tabla: sin margen extra a la izquierda */
.com-content-article .item-page table ul,
.com-content-article .item-page table ol {
    margin: 0 0 10px 18px;
    padding: 0;
}

/* Bajar font-size a 14px (en el HTML viene 16px inline, demasiado para el ancho) */
.com-content-article .item-page table span[style*="font-size: 16px"],
.com-content-article .item-page span[style*="font-size: 16px"] {
    font-size: 14px !important;
}

/* ===== Botón "Reservar ahora" ========================================== */
a.btn-reservar,
.com-content-article .item-page a.btn-reservar,
.com-content-category-blog a.btn-reservar {
    display: inline-block;
    background: var(--hostal-olive);
    color: white !important;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 10px 22px;
    margin: 12px 0;
    border: none;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: background 0.2s, transform 0.1s;
    cursor: pointer;
}

a.btn-reservar:hover,
.com-content-article .item-page a.btn-reservar:hover,
.com-content-category-blog a.btn-reservar:hover {
    background: var(--hostal-brown);
    color: var(--hostal-link) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

a.btn-reservar:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Listas dentro de artículos */
.com-content-article .item-page ul,
.com-content-article .item-page ol {
    color: var(--hostal-text);
    margin: 10px 0 10px 20px;
}

.com-content-article .item-page li {
    color: var(--hostal-text);
    margin-bottom: 4px;
}

/* Esconder boxes alrededor de articulos featured ----------------------- */
.blog-featured > * + *,
.blog-items > * + * {
    margin-top: 10px;
}

.blog-item, .item-content {
    border: none;
}

/* iframe del video: que ocupe el container, max razonable -------------- */
.blog-item iframe,
.com-content-article iframe,
.com-content-category-blog iframe {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;   /* IMPORTANTE: bajo para que el dropdown del menú lo cubra */
}

/* Wrapper del iframe en featured: stacking context bajo --------------- */
.blog-item,
.item-content,
.container-component {
    position: relative;
    z-index: 1;
}

/* Tipografía contenido --------------------------------------------------- */
main p, main li, main td, main span, main div,
.com-content-article p,
.com-content-category-blog p {
    color: var(--hostal-text);
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.page-header,
.item-title {
    color: var(--hostal-text) !important;
    font-family: 'Oswald', sans-serif !important;
    font-weight: 400;
}

/* En home (featured) ocultamos el título arriba del video; en artículos sueltos sí lo queremos */
.com-content-featured .item-title,
.blog-featured .item-title { display: none; }

main a {
    color: var(--hostal-link) !important;
    text-decoration: none;
}

main a:hover { text-decoration: underline; }

/* ===== Footer marrón sin caja ========================================== */
.container-bottom-a,
.container-bottom-b,
.container-footer,
footer {
    background: var(--hostal-brown);
    color: var(--hostal-text);
    max-width: 940px;
    margin: 10px auto 0;
    padding: 15px 20px;
    text-align: center;
}

.container-bottom-a .card,
.container-bottom-a .module,
.container-bottom-b .card,
.container-bottom-b .module,
.container-top-a .card,
.container-top-a .module,
.container-main-top .card,
.container-main-top .module {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-bottom-a .card-body,
.container-bottom-b .card-body,
.container-top-a .card-body,
.container-main-top .card-body {
    background: transparent !important;
    padding: 0 !important;
}

.container-bottom-a .card-header,
.container-bottom-b .card-header,
.container-top-a .card-header,
.container-main-top .card-header {
    display: none !important;
}

/* container-top-a: máximo 940px centrado, sin margen extra */
.container-top-a {
    max-width: 940px;
    margin: 10px auto 0;
    padding: 0;
}

footer a, .container-footer a,
.container-bottom-a a {
    color: var(--hostal-link);
    text-decoration: underline;
}

.container-footer .footer {
    color: var(--hostal-text);
    font-size: 11px;
}

/* Esconder el "Powered by Joomla" residual ----------------------------- */
.container-debug { display: none !important; }

/* ===== RESPONSIVE móvil ================================================ */
@media (max-width: 991px) {
    .container-header { padding: 45px 0 0 0; }
    .brand-logo img { max-height: 80px; }

    .container-nav {
        max-width: 100%;
        margin: 6px 0 0;
        overflow: visible;
    }
    .container-nav .mod-menu,
    .container-nav .nav {
        flex-direction: column;
    }
    .container-nav .mod-menu > li.nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.15);
    }
    .container-nav .mod-menu > li.nav-item > a {
        border-right: none;
        text-align: center;
        padding: 10px 12px;
    }
    .container-nav .mod-menu__sub {
        position: static;
        display: block;
        background: rgba(0,0,0,0.25);
        box-shadow: none;
    }
    .container-nav .mod-menu__sub li a {
        text-align: center;
        padding: 8px 12px;
    }
    .container-nav .mod-menu > li.nav-item.deeper.parent > a::after {
        content: "";
    }

    .site-grid { max-width: 100%; padding: 0 10px; }

    .container-bottom-a, footer {
        max-width: 100%;
        margin: 10px 0 0;
        padding: 15px 12px;
    }
}