/**
 * REL ES - Custom styles for Randstad Spain
 *
 * This file centralizes specific styles for menu and navigation
 */

/* ========================================
   CSS VARIABLES OVERRIDE
   ======================================== */

[data-rel-theme] {
	--text-font-default: Graphik Web, Tahoma, sans-serif;
	/*Spacing*/
	--spacing-rem-01: 0.25rem;
	--spacing-rem-02: 0.5rem;
	--spacing-rem-03: 0.75rem;
	--spacing-rem-04: 1rem;
	--spacing-rem-06: 1.5rem;
	--spacing-rem-08: 2rem;
	--spacing-rem-10: 2.5rem;
	--spacing-rem-12: 3rem;
	--spacing-rem-16: 4rem;
	--spacing-rem-20: 5rem;
	--spacing-rem-24: 6rem;
	--spacing-rem-32: 8rem;
}

/* ========================================
   REBRANDING MENU STYLES
   ======================================== */

/* Override default blue color in menu links */
.rel_megamenu a,
.rel_megamenu a:visited {
	color: var(--on-bg-trigger-idle);
}

.rel_megamenu__menu-item{
	margin-top: var(--spacing-01);
	padding-top: var(--spacing-02);
	padding-bottom: var(--spacing-03);
	padding-right: var(--spacing-03);
	padding-left: var(--spacing-03);
}

@media not all and (min-width: 941px) {
	.rel_megamenu__menu-item {
		border-bottom: 1px solid var(--border-default);
	}
}

@media (min-width: 941px) {
	.rel_megamenu__l2-link:focus {
		color: var(--text-on-bg-default-link-hover) !important;
		text-decoration-line: underline;
	}

	.rel_megamenu__l3-btn:focus {
		color: var(--on-bg-trigger-hover);
		text-decoration-line: underline;
	}

	.rel_megamenu__l4-link:focus {
		color: var(--text-on-bg-default-link-hover) !important;
		text-decoration-line: underline;
	}
}

.rel_megamenu__l2-link.rel_text-on-bg-trigger-active {
	color: var(--on-bg-trigger-active) !important;
}

.rel_megamenu__l3-link.rel_text-on-bg-trigger-active {
	color: var(--on-bg-trigger-active) !important;
}

.rel_accordion-content {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.rel_accordion-content.rel_accordion-expanded {
	max-height: 2000px;
	opacity: 1;
}

@media (min-width: 941px) {
	.rel_accordion-content {
		max-height: none;
		opacity: 1;
	}
}

[data-accordion-icon] {
	transition: transform 0.3s ease-in-out;
	display: inline-block;
}

[data-accordion-toggle] .rel_megamenu__btn-icon {
	transition: transform 0.3s ease-in-out;
}

.rel_megamenu__menu-list {
	animation: slideInFromRight 0.3s ease-out;
	max-height: calc(100dvh - 127px);
	overflow-y: auto;
}

@media (min-width: 941px) {
	.rel_megamenu__menu-list {
		max-height: calc(100dvh - 180px);
		animation: none;
	}
}

@keyframes slideInFromRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}



.rel_pb-2 {
	padding-bottom: var(--spacing-02);
}
.rel_pl-4 {
	padding-left: var(--spacing-04);
}

.rel_megamenu .lg\:rel_container {
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	max-width: 1440px;
}

@media (min-width: 941px) {
	.rel_megamenu .lg\:rel_container {
		max-width: 992px;
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media (min-width: 1200px) {
	.rel_megamenu .lg\:rel_container {
		max-width: 1200px;
	}
}
.rel_megamenu__logo-link.rel_megamenu__logo-link--large {
	width: fit-content;
	height: auto;
}

@media (min-width: 941px) {
	.rel_megamenu__logo-link.rel_megamenu__logo-link--large {
		height: auto;
		width: auto;
		padding-left: var(--spacing-02);
	}
	.rel_megamenu__logo-link--large svg{
		max-width: 210px;
		max-height: 60px;
		width: 100%;
		height: auto;
	}

	.rel_megamenu__menu-list {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		animation: none !important;
		align-items: start;
	}

	.rel_megamenu__menu-item {
		min-width: 0;
	}

	.rel_megamenu__menu-item * {
		overflow-wrap: break-word;
		word-break: break-word;
		hyphens: auto;
	}

	/* Internal grid for each menu-item */
	.rel_megamenu__menu-item {
		display: grid;
		grid-template-rows: auto 1fr;
		align-content: start;
		max-width: 100%;
		gap: var(--spacing-rem-03);
	}

}
.rel_megamenu__l3-list {
	padding-top: var(--spacing-02);
}

@media not all and (min-width: 941px) {
	.rel_megamenu__l3-list button {
		padding-left: var(--spacing-06);
		padding-right: var(--spacing-01);
	}
	.rel_megamenu__l3-list a {
		padding-left: var(--spacing-04);
		padding-right: 0;
		margin-right: 3px;

	}
	.rel_megamenu__l3-list .rel_underline {
		text-decoration-line: underline;
	}

	.rel_megamenu__l3-link{
		color: var(--text-on-bg-default-subtle) !important;
		display: flex;
		font-family: var(--text-heading-2xs-font);
		font-size: var(--text-heading-2xs-size);
		font-weight: var(--text-heading-2xs-font-weight);
		letter-spacing: var(--text-heading-2xs-letter-spacing);
		line-height: var(--text-heading-2xs-line-height);
		padding: var(--spacing-03) var(--spacing-06);
		text-decoration-line: none;
	}
	.rel_es-title-l1{
		font-family: var(--text-heading-2xs-font);
		font-size: var(--text-heading-2xs-size);
		font-weight: var(--text-heading-2xs-font-weight);
		letter-spacing: var(--text-heading-2xs-letter-spacing);
		line-height: var(--text-heading-2xs-line-height);
	}
}

/* Styles for sections */

@media (min-width: 941px) {
	.rel_es-seccion-title {
		display: block;
		min-height: 30px;
		margin-bottom: var(--spacing-01);
	}

	/* Invisible title in continuation columns */
	.rel_es-seccion-title--invisible {
		visibility: hidden;
	}

	/* Continuation columns (no border) */
	.rel_megamenu__menu-item--continuation {
		border-left: none !important;
	}



	.rel_megamenu__menu-item--continuation::after {
		display: none !important;
	}

	/* Remove right border from item before continuation */
	.rel_megamenu__menu-item:has(+ .rel_megamenu__menu-item--continuation)::after {
		display: none !important;
	}
}

/* Styles for level 2 link description */

@media (min-width: 941px) {
	.rel_megamenu__l2-description {
		color: var(--text-on-bg-default-default);
		font-family: var(--text-paragraph-SM-font, Graphik Web, Tahoma, sans-serif);
		font-size: var(--text-paragraph-SM-size, 14px);
		font-style: normal;
		font-weight: 400;
		line-height: var(--text-paragraph-SM-line-height, 24px);
		letter-spacing: var(--text-paragraph-SM-letter-spacing, 0);
	}
}

@media not all and (min-width: 941px) {
	.max-lg\:rel_pr-3 {
		padding-right: var(--spacing-03);
	}
}

/* ========================================
   MOBILE NAVIGATION STYLES
   ======================================== */



/* Ensure mobile menu is hidden by default */
[role="dialog"].rel_hidden {
	display: none !important;
}

/* Smooth transitions for mobile submenus */
.rel_megamenu__menu {
	transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
	overflow: hidden;
}

.rel_megamenu__menu.rel_hidden {
	max-height: 0 !important;
	opacity: 0;
}

.rel_megamenu__menu:not(.rel_hidden) {
	opacity: 1;
}


/* Styles for level 1 menu buttons */
.rel_megamenu__l1-btn {
	padding-right: var(--spacing-03);
	padding-top: 0;
	padding-bottom:0;
	padding-left: var(--spacing-03);
}

.rel_megamenu__l1-btn[aria-expanded="true"]:not([data-accordion-toggle]) {
	color: var(--on-bg-trigger-active);
}

.rel_megamenu__l1-btn[aria-expanded="true"]:not([data-accordion-toggle]) .rel_megamenu__btn-icon {
	transform: rotate(180deg);
}

.rel_megamenu__l1-btn[aria-expanded="true"]:not([data-accordion-toggle]) .rel_megamenu__btn-icon svg {
	fill: var(--on-bg-trigger-active);
}

[data-accordion-toggle][aria-expanded="true"] {
	color: var(--on-bg-trigger-active);
}

.rel_flex:has([data-accordion-toggle][aria-expanded="true"]) > .rel_megamenu__l4-link {
	color: var(--on-bg-trigger-active) !important;
}

[data-accordion-toggle][aria-expanded="true"] [data-accordion-icon] {
	transform: rotate(180deg);
}

[data-accordion-toggle][aria-expanded="true"] [data-accordion-icon] svg {
	fill: var(--on-bg-trigger-active);
}

.rel_megamenu__btn-icon,
[data-accordion-icon] {
	transition: transform 0.3s ease-in-out;
}

/* Custom logo styles */
.rel_megamenu__custom-logo-img img,
.rel_megamenu__logo-link img {
	max-width: 210px;
	max-height: 60px;
	height: auto;
}

@media (max-width: 940px) {
	.rel_megamenu__custom-logo-img img,
	.rel_megamenu__logo-link img {
		max-width: 150px;
		max-height: 50px;
		width: fit-content;
	}
}


/* ========================================
   RESPONSIVE MENU LAYOUT FIX
   ======================================== */

/* Allow menu to adjust automatically when wrapping */

@media (min-width: 941px) {
	/* Ensure menu container uses full available width */
	.rel_hidden.lg\:rel_block .lg\:rel_inline-flex {
		width: 100%;
	}

	/* Allow menu items to wrap naturally */
	.rel_hidden.lg\:rel_block ul {
		flex-wrap: wrap;
		width: 100%;
	}
}

/* Prevent scroll when overlay is active (mobile menu, panels, etc) */
html.rel_has-overlay {
	overflow: hidden !important;
	height: 100vh !important;
	position: fixed !important;
	width: 100% !important;
}

@media (min-width: 941px) {
	html.rel_has-overlay {
		padding-right: var(--rel_scrollbar-padding, 0);
	}
}

html.rel_has-overlay body {
	overflow: hidden !important;
	height: 100vh !important;
	position: relative !important;
	width: 100% !important;
}

/* Overlay backdrop for mobile menu */

@media (max-width: 940px) {
	[role="dialog"]:not(.rel_hidden)::after {
		background-color: var(--bg-backdrop);
		height: 100%;
		pointer-events: none;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		content: "";
	}
}