.b-ext {
/*
Theme Name: DentalCompany
Theme URI: https://dentalcompany.local/
Description: Child theme of TwentyTwentyFive for DentalCompany
Author: Tu Nombre
Author URI: https://dentalcompany.local/
Template: twentytwentyfive
Version: 1.0.0
*/

/* Aquí puedes agregar estilos personalizados */
> * {
    --text-gradient: linear-gradient(
        120deg,
        var(--wp--preset--color--primary-dark) 20%,
        var(--wp--preset--color--primary-base) 60%,
        var(--wp--preset--color--secondary-base) 90%
    );
    --header-gradient: linear-gradient(
        120deg,
        var(--wp--preset--color--primary-dark) 20%,
        var(--wp--preset--color--primary-base) 90%,
        var(--wp--preset--color--secondary-base) 100%
    );
    --button-gradient: linear-gradient(
        120deg,
        var(--wp--preset--color--primary-dark) 15%,
        var(--wp--preset--color--primary-base) 30%,
        var(--wp--preset--color--secondary-base) 60%
    );
    --breakpoint-mobile: 700px;
}

/* TYPOGRAPHY */
h1,
h1.has-accent-gradient-background,
h2,
h2.has-accent-gradient-background {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: var(--text-gradient);
}
/* END TYPOGRAPHY */

/* BUTTONS */
.wp-block-button:not(.is-style-outline) a {
    background-image: var(--button-gradient);
    background-size: 200% 100%;
    transition: background-position 0.3s ease;
}
.wp-block-button:not(.is-style-outline)
    a:is(:hover, :focus, :active, .wp-block-button__link--hover) {
    background-position: 100% 0;
    transition: background-position 0.3s ease;
}
/* END BUTTONS */

/* LAYOUT */
/* END LAYOUT */

/* HEADER */
.site-header {
    font-size: clamp(
        var(--wp--preset--font-size--xs),
        2.8dvw,
        var(--wp--preset--font-size--sm)
    );
    font-weight: 500;

    .inner {
        align-items: center;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--wp--style--global--content-size, 1440px);
        padding-block: var(--wp--preset--spacing--8);
        padding-inline: var(--wp--preset--spacing--12);
    }

    nav {
        align-items: center;
        display: flex;
        gap: var(--wp--preset--spacing--12);
        width: 100%;
    }

    ul {
        align-items: center;
        display: flex;
        /* gap: var(--wp--preset--spacing--12); */
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    li {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
    }

    a {
        text-decoration: none;
        padding-block: 0.5em;
    }

    a:is(:hover, :focus, :active):not([href*="tel:"], [href*="mailto:"]) {
        text-decoration: underline;
    }

    a:is([href*="tel:"], [href*="mailto:"]) span {
        display: none;
    }

    @media screen and (min-width: 700px) {
        a {
            padding-inline: 1em;
        }

        a:is([href*="tel:"], [href*="mailto:"]) span {
            display: inline-flex;
        }
    }
}

.top-bar {

    font-size: clamp(
        var(--wp--preset--font-size--xxs),
        2.8dvw,
        var(--wp--preset--font-size--xs)
    );

    .inner {
        justify-content: flex-end;
    }
    nav {
        color: var(--wp--preset--color--neutral-00);
    }
    a:is([href*="tel:"], [href*="mailto:"]) {
        background-color: none;
        background: transparent none;
        border-color: var(--wp--preset--color--neutral-00);
        border-radius: 2em;
        border-style: solid;
        border-width: 2px;
        font-family: var(--wp--preset--font-family--montserrat);
        font-size: clamp(
            var(--wp--preset--font-size--xxs),
            2.8dvw,
            var(--wp--preset--font-size--xs)
        );
        font-weight: 700;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.5em;
        text-transform: uppercase;
    }

    a:is([href*="tel:"], [href*="mailto:"]):hover {
        background-color: var(--wp--preset--color--neutral-00);
        color: var(--wp--preset--color--primary-dark);
        transition: all 0.3s ease;
    }

    ul {
        flex: 1 0 0;
        justify-content: space-between;
    }

    @media (min-width: 700px) {
        ul {
            justify-content: flex-end;
        }
    }
}

.main-header {
    position: relative;

    .site-logo-link {
        padding: 0;
    }

    .site-logo {
        margin-right: auto;
        width: clamp(180px, 20vw, 300px);
    }

    .inner {
        justify-content: space-between;
    }

    a:is([href*="tel:"], [href*="mailto:"], [href*="contacto"]) {
        background-image: var(--button-gradient);
        background-size: 200% 100%;
        border-radius: 2em;
        color: var(--wp--preset--color--neutral-00);
        display: flex;
        font-family: var(--wp--preset--font-family--montserrat);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 700;
        justify-content: center;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.5em;
        text-transform: uppercase;
        transition: background-position 0.3s ease;
    }

    a:is([href*="tel:"], [href*="mailto:"], [href*="contacto"]):hover {
        background-position: 100% 0;
        transition: background-position 0.3s ease;
    }

    #menu-toggle {
        display: block;
    }

    nav {
        display: none;
        width: auto;
    }

    
    nav.is--open {
        align-items: stretch;
        background: var(--wp--preset--color--neutral-00);
        bottom: 0;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        left: 0;
        padding: var(--wp--preset--spacing--12);
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 2;
    }

    nav.is--open ul {
        align-items: stretch;
        flex-direction: column;
        /* gap: var(--wp--preset--spacing--8); */
    }

    ul ul {
        display: none;
        padding-left: var(--wp--preset--spacing--40);
    }

    ul ul.is--open{
        display: flex;
    }

    nav.is--open > ul > li > ul {
        display: flex;
    }

    nav.is--open > ul > li li {
        border-left: 1px solid var(--wp--preset--color--neutral-20);
    }

    @media (min-width: 700px) {
        #menu-toggle {
            display: none;
        }

        nav {
            display: flex;
        }

        ul ul {
            align-items: flex-start;
            background: var(--wp--preset--color--neutral-00);
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: none;
            flex-direction: column;
            min-width: max-content;
			padding-left: 0;
            position: absolute;
            top: 100%;
            width: 100%;
            z-index: 3;
        }

        .menu-item-has-children:hover > ul {
            display: flex;
        }

        .menu-item-has-children > ul .menu-item-has-children:hover > ul {
            left: 100%;
            top: 0;
        }
    }
}
/* END HEADER */

/* ICONS */
a:is([href*="tel:"], [href*="contacto"]) ,
.menu-item-has-children > a {
    align-items: center;
    display: inline-flex;
    gap: var(--wp--preset--spacing--4);
}
a:is([href*="tel:"], [href*="contacto"]):before,
.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
}
.svg-icon,
a:is([href*="tel:"], [href*="contacto"]):before,
.menu-item-has-children > a::after {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: currentColor;
    height: 1.2em;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.2em;
}

.svg-icon--phone,
a:is([href*="tel:"]):before {
    mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/phone.svg);
    -webkit-mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/phone.svg);
}

a:is([href*="contacto"]):before {
    mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/icon-footer-calendar.svg);
    -webkit-mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/icon-footer-calendar.svg);
}

.menu-item-has-children > a::after {
    mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/chevron-down.svg);
    -webkit-mask-image: url(/ext/wp-content/themes/dentalcompany/assets/icons/chevron-down.svg);
}

.menu-item-has-children:hover > a::after {
    transform: rotate(-90deg);
}
/* END ICONS */

/* UTILITY CLASSES */
.is--sticky {
    background: inherit;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.has-gradient-background {
    background-image: var(--header-gradient);
}
/* END UTILITY CLASSES */

/* STYLES FOOTER */

.site-footer {
    font-size: clamp(
        var(--wp--preset--font-size--xs),
        2.8dvw,
        var(--wp--preset--font-size--sm)
    );
    font-weight: 500;
	background-color: #343637;
	color: var(--wp--preset--color--primary-base);
	position: relative;

	&::before {
		content: "";
		display: inline-block;
		height: 10px;
		top: -5px;
		width: 100%;
		position: relative;
		background: linear-gradient(to right, #005E63, #A30C55);
	}

	a {
        text-decoration: none;
    }

	a:is(:hover, :focus, :active):not([href*="tel:"], [href*="mailto:"]) {
        text-decoration: underline;
    }

    .inner {
        align-items: center;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--wp--style--global--content-size, 1440px);
        padding-block: var(--wp--preset--spacing--8);
        padding-inline: var(--wp--preset--spacing--12);
		padding-top: calc(2 * var(--wp--preset--spacing--32));
    	padding-bottom: var(--wp--preset--spacing--32)
    }

	.footer-content {
		width: 100%;
		display: grid;
		grid-row-gap: calc(2 * var(--wp--preset--spacing--32));
		grid-column-gap: var(--wp--preset--spacing--40);

		.footer-legal {
			position: relative;

			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 1px;
				background: url(/ext/wp-content/themes/dentalcompany/assets/icons/divider-footer.svg);
				top: calc(var(--wp--preset--spacing--32) * -1);
			}
		}
	}

	.footer-box {
        --max-width-footer-box: 360px;
		&.footer-info {
			display: flex;
			flex-direction: column;
			row-gap: var(--wp--preset--spacing--32);
			color: var(--wp--preset--color--neutral-00);
			position: relative;

			.description-footer {
				margin: 0;
				font-size: clamp(var(--wp--preset--font-size--sm), 2.8dvw, var(--wp--preset--font-size--md));
				font-weight: 200;
			}

			.button-telephone-footer {
				background: transparent none;
				border-color: var(--wp--preset--color--neutral-00);
				border-radius: 2em;
				border-style: solid;
				border-width: 1px;
				font-family: var(--wp--preset--font-family--montserrat);
				font-size: clamp( var(--wp--preset--font-size--xxs), 2.8dvw, var(--wp--preset--font-size--xs) );
				font-weight: 700;
				padding-bottom: 0.5em;
				padding-left: 1em;
				padding-right: 1em;
				padding-top: 0.5em;
				text-transform: uppercase;
				transition: all 0.3s ease;
				text-decoration: none;
				max-width: calc(var(--max-width-footer-box) - 1em - 1em - 0.25em);
				display: flex;
				justify-content: center;

				&:hover {
					background-color: var(--wp--preset--color--neutral-00);
					color: var(--wp--preset--color--primary-dark);
					
				}
			}

			>* {
				max-width: var(--max-width-footer-box);
				z-index: 1;
			}
			
			.figure-footer {
				position: absolute;
				max-width: inherit;
				right: 0;
				z-index: 0;
			}

			.button-appointment {
				background: var(--wp--preset--color--neutral-00);
				border-color: var(--wp--preset--color--neutral-00);
				border-radius: 2em;
				border-style: solid;
				border-width: 1px;
				font-family: var(--wp--preset--font-family--montserrat);
				font-size: clamp( var(--wp--preset--font-size--xxs), 2.8dvw, var(--wp--preset--font-size--xs) );
				font-weight: 700;
				padding-bottom: 0.5em;
				padding-left: 1em;
				padding-right: 1em;
				padding-top: 0.5em;
				text-transform: uppercase;
				transition: all 0.3s ease;
				text-decoration: none;
				text-decoration-thickness: auto;
				text-decoration-thickness: auto;
				max-width: calc(var(--max-width-footer-box) - 1em - 1em - 0.25em);
				display: flex;
				justify-content: center;
				color: var(--wp--preset--color--primary-base);
				align-items: center;
			}

            .button-appointment:hover{
                background-color: var(--wp--preset--color--primary-base);
                border-color: var(--wp--preset--color--primary-base);
                color: var(--wp--preset--color--neutral-00);
            }
		}

		.menu {
			padding: 0;
			list-style: none;
			font-family: var(--wp--preset--font-family--pt-sans);
			margin: 0;
		}

		&.footer-menus {
			display: grid;
      		grid-row-gap: calc(2 * var(--wp--preset--spacing--20));
		}

		.title-menu {
			font-family: var(--wp--preset--font-family--pt-sans);
			margin: 0 0 var(--wp--preset--spacing--20) 0;
      		color: var(--wp--preset--color--neutral-00);
		}

		#menu-dental-company-footer {
			display: flex;
			flex-direction: column;
			row-gap: calc(var(--wp--preset--spacing--20) / 5);

            a[href*="contacto"]::before {
                display: none;
            }
		}

		#menu-clinicas-dentales-footer {
			display: grid;
			grid-row-gap: calc(var(--wp--preset--spacing--20) / 5);
		}

		#menu-legal-footer {
			display: flex;
			flex-direction: column;
			row-gap: calc(var(--wp--preset--spacing--20) / 5);
			column-gap: var(--wp--preset--spacing--40);
			margin: 0 0 var(--wp--preset--spacing--20);
		}

		.text-copyright {
			color: var(--wp--preset--color--neutral-40);
			font-family: var(--wp--preset--font-family--pt-sans);
		}

		.box-more-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.rrss-box {
		display: flex;
		align-items: center;
		column-gap: 8px;

		img {
			display: block;
		}

		.rrss-link {
			width: 40px;
			height: 40px;
			display: grid;
			justify-content: center;
			align-items: center;
			border-radius: 50px;
			background-color: var(--wp--preset--color--neutral-00);
		}
	}

	@media (min-width: 700px) {
		.footer-box {
			&.footer-menus {
				grid-template-columns: repeat(2, 1fr);
			}
			
			#menu-clinicas-dentales-footer {
				grid-template-columns: repeat(2, 1fr);
			}
		}

	}

	@media (min-width: 1024px) {
		.footer-content {
			grid-template-columns: repeat(2, 1fr);

			.footer-legal {
				grid-column: 1 / -1;
				display: flex;
				width: 100%;
				justify-content: space-between;
			}
		}

		.footer-box {
			#menu-legal-footer {
				flex-direction: row;
				margin: 0;
			}
		}
	}
}

/* END STYLES FOOTER */

/* POPUP SEARCH */

.search-icon {
    cursor: pointer;
    margin: 0 var(--wp--preset--spacing--12) 0 auto;
}

#popup-search {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2 * var(--wp--preset--spacing--30));
    height: calc(100% - 2 * var(--wp--preset--spacing--30));
    z-index: 99999;
    align-items: center;
    justify-content: center;
    /* background-color: var(--wp--preset--color--neutral-20); */
    background-color: color-mix(in srgb, var(--wp--preset--color--neutral-00) 80%, transparent);
    padding: var(--wp--preset--spacing--30);

    .search-form {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--12);
        align-items: center;
        justify-content: center;
    }

    .search-field {
        width: clamp(0px, 90vw, 350px);
        padding: 10px 15px;
        font-family: var(--wp--preset--font-family--montserrat);
        outline: none;
        font-size: var(--wp--preset--font-size--xs);

        @media (min-width: 700px) {
            font-size: var(--wp--preset--font-size--sm);
        }
    }

    input[type="submit"] {
        border: 0;
        color: var(--wp--preset--color--neutral-00);
        font-family: var(--wp--preset--font-family--montserrat);
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 700;
        padding: 0.75em 1.5em;
        text-transform: uppercase;
        border-radius: 50px;
        cursor: pointer;
        background-color: var(--wp--preset--color--primary-base);
    }
}

#close-popup-search {
    position: absolute;
    top: var(--wp--preset--spacing--30);
    right: var(--wp--preset--spacing--30);
    cursor: pointer;

    img {
        width: 25px;
        height: 25px;

        @media (min-width: 700px) {
            width: 45px;
            height: 45px;
        }
    }
}

/* END POPUP SEARCH */
}