/*
Theme Name: Astra Child
Template: astra
Author: Tu Mesita
Description: Child theme personalizado para Tu Mesita.
Version: 1.0.0
*/


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --tm-red: #d73f38;
    --tm-gray: #333333;
    --tm-white: #ffffff;
    --tm-border: #eeeeee;
}


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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tm-white);
    color: var(--tm-gray);
}

body,
button,
input,
select,
textarea {
    color: var(--tm-gray);
}

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header,
.ast-primary-header-bar {
    background: var(--tm-white) !important;
}

.ast-primary-header-bar {
    min-height: 76px !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

.site-primary-header-wrap {
    min-height: 76px !important;
}

.ast-builder-grid-row {
    align-items: center;
}


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

.site-header .site-branding {
    padding: 0 !important;
}

.site-header .site-logo-img {
    padding: 0 !important;
}

.site-header .custom-logo-link {
    display: flex;
    align-items: center;
}

.site-header .custom-logo {
    display: block;
    width: auto !important;
    max-width: 155px !important;
    height: auto !important;
    max-height: 58px !important;
}


/* =========================================================
   NOMBRE DEL SITIO
   ========================================================= */

.site-title {
    margin: 0 !important;
    line-height: 1 !important;
}

.site-title a {
    color: var(--tm-gray) !important;
    font-size: 20px !important;
    font-weight: 700;
}


/*
 * Si estamos utilizando logo gráfico, evitamos mostrar
 * además "Tumesita" como segundo logotipo textual.
 */
.ast-site-title-wrap {
    display: none !important;
}


/* =========================================================
   CONTENEDOR HEADER
   ========================================================= */

.ast-container,
.site-primary-header-wrap {
    max-width: 1180px;
}

.site-primary-header-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* =========================================================
   MENÚ PRINCIPAL
   ========================================================= */

.main-header-menu {
    align-items: center;
}

.main-header-menu > .menu-item {
    margin: 0;
}

.main-header-menu > .menu-item > .menu-link {
    height: 76px !important;
    padding: 0 17px !important;

    display: flex;
    align-items: center;

    color: var(--tm-gray) !important;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
    color: var(--tm-red) !important;
}


/* =========================================================
   SUBMENÚS
   ========================================================= */

.main-header-menu .sub-menu {
    background: var(--tm-white);
    border: 1px solid var(--tm-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.main-header-menu .sub-menu .menu-link {
    color: var(--tm-gray) !important;
}

.main-header-menu .sub-menu .menu-link:hover {
    color: var(--tm-red) !important;
    background: #fafafa;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.site-content {
    background: var(--tm-white);
}

#primary {
    margin-top: 0;
    margin-bottom: 0;
}


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

.site-footer,
.site-footer .site-below-footer-wrap,
.ast-small-footer {
    background: var(--tm-white) !important;
}

.site-below-footer-wrap {
    min-height: 75px;
    border-top: 1px solid var(--tm-border) !important;
}

.site-footer,
.site-footer a,
.site-footer p,
.site-footer .ast-footer-copyright {
    color: #777 !important;
    font-size: 13px;
}

.site-footer a:hover {
    color: var(--tm-red) !important;
}


/* =========================================================
   BOTONES / ELEMENTOS GLOBALES
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-color: var(--tm-red);
}

::selection {
    background: var(--tm-red);
    color: var(--tm-white);
}


/* =========================================================
   SCROLLBAR DE TABS EN FICHA
   ========================================================= */

.tm-tabs {
    scrollbar-width: none;
}

.tm-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 921px) {

    .ast-primary-header-bar,
    .site-primary-header-wrap {
        min-height: 66px !important;
    }

    .site-header .custom-logo {
        max-width: 135px !important;
        max-height: 50px !important;
    }

    .main-header-menu > .menu-item > .menu-link {
        height: auto !important;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 544px) {

    .site-primary-header-wrap {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .site-header .custom-logo {
        max-width: 120px !important;
        max-height: 46px !important;
    }

}