/* wth_cms_wwwcruisesonly.css -- Brand styles for CMS components */
/**
* [Table of Contents]
* Custom Properties (Variables)
* Global Styles
* Buttons
* Header
* Mega Menu
* Footer
* Account Popup
* Uncategorized
* Media Queries
*/

/**
* [Custom Properties (Variables)]
*/

/******************************************************************************/
/* https://www.color-hex.com/color-names.html */
:root {
	/* Brand Palette */
	--BRAND-accentteal: #00d0e7 !important;
	--BRAND-accentyellow: #ffdd00 !important;
	--BRAND-actionblue: #017fad !important;
	--BRAND-black: #000 !important;
	--BRAND-blue: #022b5a !important;
	--BRAND-gray44: #707070 !important;
	--BRAND-gray60: #999999 !important;
	--BRAND-gray89: #e3e3e3 !important;
	--BRAND-red: #f01800 !important;
	--BRAND-white: #fff !important;
	--BRAND-whitesmoke: #f3f3f3 !important;

	/* Brand Fonts */
	--BRAND-body-font: 'Fira Sans', BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica,
		Arial, sans-serif !important;
	--BRAND-heading-font: 'Fira Sans', BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
		Helvetica, Arial, sans-serif !important;

	/* site setup  */
	--WTH-site-max-width: 1140px;
	--WTH-site-max-width: 1504px;

	/* WTH-site-header padding set in wth_cms.css. added here for reference or to edit at the brand level */
	--WTH-site-header__content-container-padding-bottom: 1rem;
	--WTH-site-header__content-container-padding-left: 1rem;
	--WTH-site-header__content-container-padding-right: 1rem;
	--WTH-site-header__content-container-padding-top: 1rem;
}

/******************************************************************************/

/**
* [Global Styles]
*/

/******************************************************************************/

/******************************************************************************/

/**
* [Buttons]
*/

/******************************************************************************/
.wth4-button,
.wth4-button:visited,
.ui-page-theme-a .wth4-button,
.ui-page-theme-a .wth4-button:visited,
a.wth4-button,
a.wth4-button:visited {
	--background: var(--BRAND-actionblue);
	--border-color: var(--BRAND-actionblue);
	--border-radius: 4px;
	--color: var(--BRAND-white);
	--font-family: var(--BRAND-heading-font);
	--padding-bottom: 1.125rem;
	--padding-left: 2.25rem;
	--padding-right: 2.25rem;
	--padding-top: 1.125rem;
}

/* button states */
.wth4-button:hover,
.wth4-button:focus,
.wth4-button:focus-visible,
.ui-page-theme-a .wth4-button:hover,
.ui-page-theme-a .wth4-button:focus,
.ui-page-theme-a .wth4-button:focus-visible,
a.wth4-button:hover,
a.wth4-button:focus,
a.wth4-button:focus-visible {
	--background: var(--BRAND-blue);
	--border-color: var(--BRAND-blue);
	--color: var(--BRAND-white);
	--text-decoration: none;
}

.wth4-button:active,
.ui-page-theme-a .wth4-button:active,
a.wth4-button:active {
	--background: var(--BRAND-actionblue);
	--border-color: var(--BRAND-actionblue);
}

/* mini circle icon button */
.wth4-button.wth4-button--icon-mini-circle,
.wth4-button.wth4-button--icon-mini-circle:visited,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle:visited,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle:visited,
a.wth4-button.wth4-button--icon-mini-circle,
a.wth4-button.wth4-button--icon-mini-circle:visited {
	--color: var(--BRAND-blue);
}

.wth4-button.wth4-button--icon-mini-circle:hover,
.wth4-button.wth4-button--icon-mini-circle:focus,
.wth4-button.wth4-button--icon-mini-circle:focus-visible,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle:hover,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle:focus,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle:focus-visible,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle:hover,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle:focus,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle:focus-visible,
a.wth4-button.wth4-button--icon-mini-circle:hover,
a.wth4-button.wth4-button--icon-mini-circle:focus,
a.wth4-button.wth4-button--icon-mini-circle:focus-visible {
	--color: var(--WTH-black);
}

.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle:active,
.ui-overlay-a .wth4-button.wth4-button--icon-mini-circle.wth4-JS-account-button--active,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle:active,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini-circle.wth4-JS-account-button--active,
.wth4-button.wth4-button--icon-mini-circle:active,
.wth4-button.wth4-button--icon-mini-circle.wth4-JS-account-button--active,
a.wth4-button.wth4-button--icon-mini-circle:active,
a.wth4-button.wth4-button--icon-mini-circle.wth4-JS-account-button--active {
	--border-color: var(--BRAND-actionblue);
	--color: var(--BRAND-actionblue);
}

/* transparent */
.wth4-button--transparent,
.wth4-button--transparent:active,
.wth4-button--transparent:focus,
.wth4-button--transparent:hover,
.wth4-button--transparent:visited,
.ui-page-theme-a .wth4-button--transparent,
.ui-page-theme-a .wth4-button--transparent:active,
.ui-page-theme-a .wth4-button--transparent:focus,
.ui-page-theme-a .wth4-button--transparent:hover,
.ui-page-theme-a .wth4-button--transparent:visited,
a.wth4-button--transparent,
a.wth4-button--transparent:active,
a.wth4-button--transparent:focus,
a.wth4-button--transparent:hover,
a.wth4-button--transparent:visited {
	--color: var(--BRAND-blue);
}

/* header-nav */
.wth4-header-nav-button,
.wth4-header-nav-button:visited,
a.wth4-header-nav-button,
a.wth4-header-nav-button:visited {
	/* --border-radius: 4px; */
	--color: var(--BRAND-blue);
	--font-weight: 700;
	--padding-left: 2rem;
  --padding-right: 2rem;
	/* --padding-bottom: 1rem; */
	/* --padding-left: 1rem; */
	/* --padding-right: 1rem; */
	/* --padding-top: 1rem; */
	/* border-bottom-left-radius: 0; */
	/* border-bottom-right-radius: 0; */
}

.wth4-header-nav-button:focus-visible,
.wth4-header-nav-button:focus,
.wth4-header-nav-button:hover,
a.wth4-header-nav-button:focus-visible,
a.wth4-header-nav-button:focus,
a.wth4-header-nav-button:hover {
	--background: transparent;
	--color: var(--BRAND-blue);
	--text-decoration: underline;
}

.js-button-top-nav--active,
.js-button-top-nav--active:focus,
.js-button-top-nav--active:hover,
.wth4-header-nav-button:active,
a.wth4-header-nav-button:active {
	--background: var(--BRAND-blue);
	--color: var(--BRAND-white);
	--text-decoration: none;
}

/******************************************************************************/

/**
* [Header]
*/

/******************************************************************************/
/* IMPORTANT: position of the mobile menu is based on the size
and position of the header element. Any changes to margin, padding,
etc. of the header element will affect the position mobile menu.
Be sure to test the mobile menu on all screen sizes after making changes.
*/
.wth4-site-header {
	--margin-bottom: 2rem;
}

.wth4-site-banner {
	--background-color: var(--BRAND-accentteal);
	--font-size: 0.875rem;
	--margin-bottom: 0;
}


.wth4-site-banner__link-container {
	--margin-left: auto;
	--margin-right: auto;
	--max-width: var(--WTH-site-max-width);
	--text-align: left;
	--width: 100%;
}

.wth4-site-banner__link,
a.wth4-site-banner__link,
.ui-page-theme-a a.wth4-site-banner__link,
.wth4-site-banner__link:visited,
a.wth4-site-banner__link:visited,
.ui-page-theme-a a.wth4-site-banner__link:visited {
	--color: var(--BRAND-black);
	--font-size: 0.875rem;
	--font-weight: 400;
}

.wth4-site-banner__countdown-container {
	--color: var(--BRAND-black);
}

.wth4-site-header__content-container {
	/* --box-sizing: content-box; */
}

.wth4-site-header__desktop-nav-container {
	--align-items: center;
	--gap: 0.5rem;
}

.wth4-site-header__booking-header-content-container {
	--align-items: center;
	--padding-bottom: 1.25rem;
	--padding-top: 1.25rem;
}

.wth4-site-header__logo {
	--margin-bottom: 0.25rem;
}

.wth4-site-header__logo-image {
	--max-width: 10rem;
}

.wth4-site-header__phone-container {
	--font-size: 1.5rem;
	--font-weight: 700;
}

i.wth4-site-header__phone-icon {
	/* --font-size: clamp(1rem, 2.5vw, 1.5rem); */
	--font-weight: 700;
}

.ui-page-theme-a .wth4-site-header__phone-link,
.wth4-site-header__phone-link,
a.wth4-site-header__phone-link {
	/* --font-size: clamp(1rem, 2vw, 1.5rem); */
	--font-weight: 700;
}

.wth4-site-header__phone-label {
	--display: flex;
	--font-weight: 700;
	--justify-content: flex-end;
	--margin-top: 0.25rem;
}

/******************************************************************************/

/**
* [Mega Menu]
*/

/******************************************************************************/
.wth4-mega-menu {
	/* --align-self: end; */
}

.wth4-mega-menu-link,
a.wth4-mega-menu-link {
	--color: var(--BRAND-white);
}

.wth4-mega-menu-link:hover,
a.wth4-mega-menu-link:hover,
.wth4-mega-menu-link:focus,
a.wth4-mega-menu-link:focus {
	--opacity: 1;
	--text-decoration: underline;
}

.wth4-mega-menu__content-panel {
	--background: var(--BRAND-blue);
	--border-bottom-left-radius: 6px;
	--border-bottom-right-radius: 6px;
	/* --border-top-left-radius: 6px; */
	/* --border-top-right-radius: 6px; */
}

.wth4-mega-menu__marketing-placement {
	--background-color: var(--BRAND-white);
	--border-radius: 6px;
	--color: var(--BRAND-blue);
	--font-size: 1.5rem;
	--font-weight: 700;
	--padding-bottom: 1rem;
	--padding-left: 1rem;
	--padding-right: 1rem;
	--padding-top: 1rem;
}

.wth4-mega-menu__category-heading {
	--color: var(--BRAND-white);
	--font-size: 1rem;
	--font-weight: 700;
}



/******************************************************************************/

/**
* [Footer]
*/

/******************************************************************************/
/* Inner footer container */
.wth4-site-footer {
	--background-color: var(--BRAND-blue);
	--padding-top: 2.5rem;
}

/* this is a one-off style for the footer on this brand */
.wth4-site-footer__main-content-container hr {
	border: 1px solid var(--BRAND-actionblue);
	display: none;
	margin-bottom: 2.5rem;
	max-width: calc(28rem);
}

.wth4-site-footer__main-content {
	--max-width: 28rem;
}

/* See stack layout pattern */
.wth4-site-footer__link-group>*+* {
	--margin-top: 1rem;
}

/* See stack layout pattern */
.wth4-site-footer__list>*+* {
	--margin-top: 1rem;
}

.wth4-site-footer__legal-copy {
	--color: var(--BRAND-white);
	--text-align: center;
}

.wth4-site-footer__link-group-container,
.wth4-site-footer__link-groups-container {
	--border-top-color: var(--BRAND-actionblue);
	--border-top-style: solid;
	--border-top-width: 2px;
	--padding-top: 1rem;
}

div.wth4-site-footer__link-group-container:nth-child(4) {
	--border-top-style: none;
}

.wth4-site-footer__logo-container {
	--grid-column-end: auto;
	--grid-column-start: auto;
	--grid-row-start: auto;
}

.wth4-site-footer__list-heading {
	--color: var(--BRAND-white);
	--font-size: 1rem;
	--font-weight: 700;
}

.wth4-site-footer__icon-group {
	--border-bottom-color: var(--BRAND-actionblue);
	--border-bottom-style: solid;
	--border-bottom-width: 2px;
	--border-top-color: var(--BRAND-actionblue);
	--border-top-style: solid;
	--border-top-width: 2px;
	--font-size: clamp(1.625rem, 2.5vw, 2.25rem);
	--gap: 4.24rem;
	--margin-left: auto;
	--margin-right: auto;
	--max-width: 28rem;
	--padding-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
	--padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
}

.wth4-site-footer__icon-group-link,
a.wth4-site-footer__icon-group-link,
.wth4-site-footer__icon-group-link:visited,
a.wth4-site-footer__icon-group-link:visited {
	--color: var(--BRAND-white);
}

.wth4-site-footer__icon-group-link:active,
a.wth4-site-footer__icon-group-link:active {
	--color: var(--BRAND-white);
}

.wth4-site-footer__link,
a.wth4-site-footer__link,
.wth4-site-footer__link:visited,
a.wth4-site-footer__link:visited {
	--color: var(--BRAND-white);
	--text-decoration-line: none;
}

.wth4-site-footer__link:hover,
a.wth4-site-footer__link:hover,
.wth4-site-footer__link:focus,
a.wth4-site-footer__link:focus {
	--color: var(--BRAND-white);
	--text-decoration-line: underline;
}

.wth4-site-footer__link:active,
a.wth4-site-footer__link:active {
	--text-decoration-line: none;
}

.wth4-site-footer__logo-container {
	--margin-left: auto;
	--margin-right: auto;
	--max-width: 28rem;
}

/******************************************************************************/

/**
* [Account Popup]
*/

/******************************************************************************/
.wth4-account-popup { }

.wth4-account-popup__heading { }

.wth4-account-popup__list-item { }

.wth4-account-popup__list-item i {
	--color: var(--BRAND-accentteal);
}

/******************************************************************************/

/**
* [Uncategorized]
*/

/******************************************************************************/
.wth4-divider {
	--border-color: var(--BRAND-actionblue);
	--border-width: 2px;
}

/******************************************************************************/
/* [Media Queries] */

/******************************************************************************/
@media (min-width: 576px) {

	.wth4-site-header__logo-image {
		/* --max-width: clamp(10rem, 20vw, 230px); */
	}

}

@media (min-width: 768px) {

	.wth4-site-footer__main-content,
	.wth4-site-footer__partner-content {
		--grid-template-columns: none;
		--grid-template-rows: none;
	}

	.wth4-site-footer__email-signup {
		--grid-column-end: auto;
		--grid-column-start: auto;
		--grid-row-start: auto;
	}

	.wth4-site-footer__link-group-container,
	.wth4-site-footer__link-groups-container {
		grid-row-start: auto;
	}

	.wth4-site-footer__link-groups-container--primary {
		--grid-column-end: auto;
		--grid-column-start: auto;
		--grid-row-start: auto;
	}

	.wth4-site-footer__link-groups-container--secondary {
		--grid-column-start: auto;
		--grid-column-end: auto;
		--grid-row-start: auto;
		--justify-content: start;
	}

	.wth4-site-footer__legal-copy {
		--grid-column-end: auto;
		--grid-column-start: auto;
		--grid-row-start: auto;
	}

}

@media (min-width: 992px) {
	:root {
		--WTH-site-header__content-container-padding-bottom: 0;
		--WTH-site-header__content-container-padding-top: 0
	}

	.wth4-site-footer__link-groups-container--secondary {
		--grid-column-end: auto;
		--grid-column-start: auto;
	}

	.wth4-site-footer__main-content,
	.wth4-site-footer__partner-content {
		--max-width: var(--WTH-site-max-width);
	}

	.wth4-site-footer__link-group-container,
	.wth4-site-footer__link-groups-container {
		--border-top-style: none;
	}

	.wth4-site-footer__main-content-container hr {
		display: block;
	}
}

@media (min-width: 1200px) {
	.wth4-mega-menu__content-panel {
		/* --left: 50%; */
		/* --max-width: var(--WTH-site-max-width); */
		/* --transform: translateX(-50%); */
	}

	.wth4-site-footer__link-groups-container--primary {
		--grid-column-end: auto;
		--grid-column-start: auto;
		--grid-row-start: auto;
	}

	.wth4-site-footer__email-signup {
		--grid-column-end: auto;
		--grid-column-start: auto;
	}
}

@media (min-width: 1600px) {}