/*
Theme Name:   Retia Medical Child
Theme URI:    https://retiamedical.com
Description:  Child theme for Retia Medical
Author:       WeDoWeb
Author URI:   https://retiamedical.com
Template:     retiamedical
Version:      1.0.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  retiamedical-child
*/

/* Fix Bootstrap overriding Tailwind display classes */
.inline-block {
	display: inline-block !important;
}

.block {
	display: block !important;
}

.inline {
	display: inline !important;
}

.flex {
	display: flex !important;
}

.inline-flex {
	display: inline-flex !important;
}

.grid {
	display: grid !important;
}

.hidden {
	display: none !important;
}

header,
#header,
#header.fixed-position {
	background-color: #001d47f2 !important;
	min-height: 81px;
	display: flex;
	align-items: center;
	padding: 0;
}

#header {
	border-bottom: 1px solid hsl(220 20% 97% / 0.1) !important;
}

#header .main-logo img {
	width: 80% !important;
}

#header > .container {
	gap: 10% !important;
}

#nav {
	justify-content: center !important;

	@media (max-width: 1024px) {
		justify-content: flex-end !important;
	}
}

.custom-logo {
	height: 2rem;
	width: auto;
}

@media (min-width: 768px) {
	.custom-logo {
		height: 2.5rem;
	}
}

.nav-drop,
#menu-main-menu {
	width: 100% !important;
}

.nav-opener {
	width: 24px !important;
	height: 24px !important;
}

.nav-opener:before,
.nav-opener:after,
.nav-opener span {
	background: #fff !important;
}

#menu-item-124 {
	margin-left: auto !important;

	@media (max-width: 1024px) {
		margin-left: 0 !important;
		width: 100% !important;
		margin-top: 8px !important;
	}
}

#menu-item-124 a {
	color: #fff !important;
	transition: all 0.3s ease-in-out;

	@media (max-width: 1024px) {
		width: 100% !important;
		text-align: center !important;
		padding: 12px 0 !important;
	}
}

#menu-item-124 a:hover {
	background-color: #8d0710e6 !important;
	transform: translateY(-0.125rem);
}

.nav-list {
	font-size: 14px !important;
	font-weight: 400 !important;
}

.nav-list > li > a {
	text-transform: none !important;
	padding: 0.2rem;
	color: #f6f7f9cc !important;
}

.nav-list > li.menu-item-has-children > a {
	pointer-events: none;

	@media (max-width: 1024px) {
		pointer-events: auto;
	}
}

.nav-list > li.menu-item-148 > a,
.nav-list > li.menu-item-124 > a {
	pointer-events: auto !important;
}

.nav-list > li > a:hover {
	color: #ffffff !important;
	background-color: transparent !important;
}

.nav-list > li > a:focus-visible {
	outline: none !important;
}

.nav-list li > a {
	text-transform: none !important;
}

.nav-list li.active a {
	background-color: transparent !important;
}

@media (max-width: 1280px) and (min-width: 1025px) {
	.nav-list > li > a {
		font-size: 11px !important;
	}
}

.nav-list > li:has(.sub-menu) > a {
	@media (max-width: 1024px) {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100%;
	}
}

.nav-list > li:has(.sub-menu) > a::after {
	content: '';
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.3em;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9" fill="none" stroke="black" stroke-width="2"/></svg>')
		center / contain no-repeat;
	transform: rotate(0deg);
	transition: transform 0.3s ease;

	@media (max-width: 1024px) {
		margin-left: 0.5em;
		flex-shrink: 0;
	}
}

.nav-list > li:has(.sub-menu):hover > a::after {
	transform: rotate(180deg);
}

.nav-list > li.hover:has(.sub-menu) > a::after {
	transform: rotate(180deg);
}

@media (max-width: 1024px) {
	.nav-list {
		flex-direction: column !important;
	}

	.nav-list li {
		width: 100% !important;
	}
}

.nav-list li .sub-menu {
	padding: 0.625rem;
	border-radius: 0.3125rem;
	background-color: #001d47;
	border: 1px solid #fff;
	color: #fff;

	@media (min-width: 1025px) {
		/* Anular el transform del tema padre para eliminar gap */
		transform: translateY(0) !important;
		top: 100% !important;
	}

	@media (max-width: 767px) {
		border: none !important;
		box-shadow: none !important;
		transform: none !important;
		padding: 0 0 0 16px !important;
		position: relative !important;
	}

	@media (min-width: 768px) and (max-width: 1024px) {
		position: relative !important;
		height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		padding: 0 0 0 16px !important;
		border: none !important;
		box-shadow: none !important;
		transform: none !important;
		transition:
			height 0.3s ease,
			opacity 0.3s ease !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.nav-list li.hover .sub-menu {
		height: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding: 0.5rem 0 0.5rem 16px !important;
	}
}

.nav-list li .sub-menu li a {
	background-color: #001d47;
	color: #fff;
	font-size: 14px;
	border-radius: 0.3125rem;

	@media (max-width: 1024px) {
		color: #f6f7f9b2 !important;
	}
}

.nav-list li .sub-menu li a:hover {
	background-color: hsl(220 20% 97% / 0.1);
	color: #fff;
}

.nav-list li.active a,
.nav-list li .sub-menu li.active a {
	background-color: transparent !important;
}

@media (max-width: 1280px) {
	.nav-drop {
		top: 7.4rem !important;
	}

	.nav-drop a {
		padding: 12px 0 !important;
	}
}

@media (max-width: 1024px) {
	.nav-drop {
		top: 7.4rem !important;
		background-color: #001d47;
		padding: 16px 24px !important;
	}

	.nav-list {
		gap: 0.5rem !important;
	}

	.nav-list li a {
		color: #f6f7f9cc !important;
	}

	.nav-drop ul li:before {
		display: none !important;
	}

	.nav-drop a {
		text-align: left;
		font-size: 16px;
		color: #fff !important;
	}
}

@media (max-width: 831px) {
	.nav-drop {
		top: 8.8rem !important;
	}
}

@media (max-width: 767px) {
	.nav-drop {
		top: 7.8rem !important;
	}
}

@media (max-width: 494px) {
	.nav-drop {
		top: 9rem !important;
	}
}

.btn-demo a {
	background-color: #8d0710 !important;
	color: #f6f7f9cc !important;
	min-width: 140px !important;
	min-height: 40px !important;
}

.contact-info a {
	color: hsl(var(--primary-foreground) / 0.6) !important;
}

blockquote {
	border: none !important;
	width: auto;
	padding: 0;
}

footer .container {
	flex-direction: column !important;
}

footer .footer-links-container h4 {
	font-size: 16px !important;
	letter-spacing: 0 !important;
}

/* Fix SVG and img width/height with Tailwind classes */
img.w-6,
svg.w-6 {
	width: 1.5rem !important;
	min-width: 1.5rem !important;
	flex-shrink: 0 !important;
}

img.h-6,
svg.h-6 {
	height: 1.5rem !important;
	min-height: 1.5rem !important;
}

footer h4 {
	text-transform: none !important;
}

.footer-grid,
.bottom-bar {
	width: 100%;
}

/* Main padding-top for banner spacing */
body:not(.home) #main {
	padding-top: 164px;
}

@media (min-width: 341px) {
	body:not(.home) #main {
		padding-top: 144px;
	}
}

@media (min-width: 495px) {
	body:not(.home) #main {
		padding-top: 124px;
	}
}

@media (min-width: 768px) {
	body:not(.home) #main {
		padding-top: 112px;
	}
}

@media (min-width: 832px) {
	body:not(.home) #main {
		padding-top: 102px;
	}
}