/* ==========================================================================
   Safari Premium — Site chrome (header, footer, drawer, sticky CTA)
   ========================================================================== */

/* --- Header (desktop & mobile) --------------------------------------- */
.sp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--sp-header-height);
	background: var(--sp-color-off-white);
	box-shadow: var(--sp-shadow-header);
}
.sp-header__inner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
	padding: 0 var(--sp-page-gutter);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Primary nav (desktop) */
.sp-nav { display: flex; align-items: center; gap: 36px; }
.sp-nav__list {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.sp-nav__item { position: relative; }
.sp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	font-weight: 500;
	color: var(--sp-color-muted-brown);
	cursor: pointer;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	background: transparent;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	text-decoration: none;
	transition: color var(--sp-dur-2) var(--sp-ease), border-color var(--sp-dur-2) var(--sp-ease);
}
.sp-nav__link:hover,
.sp-nav__item.is-active > .sp-nav__link,
.sp-nav__link[aria-current="page"] {
	color: var(--sp-color-brown);
	border-bottom-color: var(--sp-color-burnt-orange);
}

/* Submenu */
.sp-nav__submenu {
	position: absolute;
	top: calc(100% + 14px);
	left: -20px;
	background: var(--sp-color-off-white);
	border-radius: 12px;
	padding: 10px 0;
	min-width: 240px;
	border: 1px solid var(--sp-color-ivory);
	box-shadow: 0 20px 50px -20px rgba(92,46,10,0.25);
	list-style: none;
	margin: 0;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity var(--sp-dur-2) var(--sp-ease), transform var(--sp-dur-2) var(--sp-ease);
}
/* Invisible "hover bridge" — fills the 14px gap between the button and the
   dropdown so moving the mouse down into the list never drops the hover. */
.sp-nav__submenu::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}
.sp-nav__item:hover > .sp-nav__submenu,
.sp-nav__item:focus-within > .sp-nav__submenu,
.sp-nav__item.is-open > .sp-nav__submenu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.sp-nav__submenu li a {
	display: block;
	padding: 10px 20px;
	font-family: var(--sp-font-sans);
	font-size: 13.5px;
	color: var(--sp-color-muted-brown);
	font-weight: 400;
	text-decoration: none;
}
.sp-nav__submenu li:first-child a {
	color: var(--sp-color-brown);
	font-weight: 600;
	border-bottom: 1px solid var(--sp-color-ivory);
	margin-bottom: 6px;
	padding-bottom: 14px;
}
.sp-nav__submenu li a:hover { background: var(--sp-color-ivory); color: var(--sp-color-brown); }

/* Header right cluster */
.sp-header__cta {
	display: flex;
	align-items: center;
	gap: 16px;
}
.sp-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Header search (toggle button + drop-down panel) */
.sp-header__search-toggle {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--sp-color-brown); background: transparent; border: 0;
	border-radius: var(--sp-radius-pill); cursor: pointer;
}
.sp-header__search-toggle:hover,
.sp-header.is-search-open .sp-header__search-toggle { background: var(--sp-color-ivory); color: var(--sp-color-burnt-orange); }
.sp-header__search {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--sp-color-off-white);
	border-top: 1px solid var(--sp-color-ivory);
	border-bottom: 1px solid var(--sp-color-card-border);
	box-shadow: var(--sp-shadow-card);
	padding: 16px var(--sp-page-gutter);
	z-index: 60;
}
.sp-header__search[hidden] { display: none; }
.sp-header__search-inner {
	max-width: 720px; margin: 0 auto;
	display: flex; align-items: center; gap: 10px;
	background: var(--sp-color-cream);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-pill);
	padding: 6px 8px 6px 16px;
}
.sp-header__search-inner .sp-icon { color: var(--sp-color-burnt-orange); flex-shrink: 0; }
.sp-header__search input[type="search"] {
	flex: 1; min-width: 0; border: 0; background: transparent;
	min-height: 40px; font-family: var(--sp-font-sans); font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
}
.sp-header__search input[type="search"]:focus { outline: none; }
.sp-header__search-submit {
	border: 0; background: var(--sp-color-burnt-orange); color: #fff;
	border-radius: var(--sp-radius-pill); padding: 9px 22px;
	font-family: var(--sp-font-sans); font-weight: 600; font-size: var(--sp-text-sm);
	cursor: pointer; white-space: nowrap;
}
.sp-header__search-submit:hover { background: var(--sp-color-sunset); }

/* Mobile drawer search */
.sp-drawer__search {
	display: flex; align-items: center; gap: 10px;
	margin: 4px 0 8px;
	padding: 10px 16px;
	background: var(--sp-color-cream);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-pill);
}
.sp-drawer__search .sp-icon { color: var(--sp-color-burnt-orange); flex-shrink: 0; }
.sp-drawer__search input[type="search"] {
	flex: 1; min-width: 0; border: 0; background: transparent;
	font-family: var(--sp-font-sans); font-size: var(--sp-text-base); color: var(--sp-color-brown);
}
.sp-drawer__search input[type="search"]:focus { outline: none; }

/* Mobile-only: hamburger toggle */
.sp-header__menu-toggle {
	width: 40px; height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--sp-color-brown);
	background: transparent;
	border: 0;
	border-radius: var(--sp-radius-sm);
	cursor: pointer;
}
.sp-header__menu-toggle:hover { background: var(--sp-color-ivory); }

/* Mobile breakpoint */
@media (max-width: 1023px) {
	.sp-header { height: var(--sp-header-height-mobile); }
	.sp-header__inner { padding: 0 20px; gap: 12px; }
	.sp-nav { display: none; }
	.sp-header__cta { display: none; }
	.sp-header__menu-toggle { display: inline-flex; }
}

/* --- Mobile drawer --------------------------------------------------- */
.sp-drawer {
	position: fixed;
	inset: 0;
	background: var(--sp-color-cream);
	z-index: 100;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--sp-dur-3) var(--sp-ease);
	visibility: hidden;
}
.sp-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}
.sp-drawer[aria-hidden="false"] { visibility: visible; transform: translateX(0); }
.sp-drawer__head {
	height: var(--sp-header-height-mobile);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	border-bottom: 1px solid var(--sp-color-ivory);
	flex-shrink: 0;
}
.sp-drawer__close {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sp-color-ivory);
	color: var(--sp-color-brown);
	border: 0;
	cursor: pointer;
}
.sp-drawer__close:hover { background: var(--sp-color-burnt-orange); color: var(--sp-color-cream); }

.sp-drawer__body {
	flex: 1;
	padding: 8px 0;
	overflow-y: auto;
}
.sp-drawer__list { list-style: none; padding: 0; margin: 0; }
.sp-drawer__item {
	border-bottom: 1px solid var(--sp-color-ivory);
}
.sp-drawer__link {
	min-height: 56px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--sp-font-serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--sp-color-muted-brown);
	text-decoration: none;
}
.sp-drawer__item.is-active .sp-drawer__link { color: var(--sp-color-brown); font-weight: 500; }
.sp-drawer__link:hover { background: var(--sp-color-ivory); color: var(--sp-color-brown); }
.sp-drawer__sublist {
	list-style: none;
	margin: 0;
	padding: 0 24px 12px;
	display: none;
}
.sp-drawer__item.is-expanded .sp-drawer__sublist { display: block; }
.sp-drawer__subitem a {
	display: block;
	padding: 10px 0;
	font-family: var(--sp-font-sans);
	font-size: 14.5px;
	color: var(--sp-color-muted-brown);
	text-decoration: none;
}
.sp-drawer__subitem a:hover { color: var(--sp-color-burnt-orange); }

.sp-drawer__foot {
	padding: 20px;
	border-top: 1px solid var(--sp-color-ivory);
	background: var(--sp-color-off-white);
	flex-shrink: 0;
}
.sp-drawer__cta-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}
.sp-drawer__cta-row .sp-btn { flex: 1; }
.sp-drawer__lang {
	display: flex;
	justify-content: center;
	gap: 12px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
}

/* Body lock when drawer open */
body.sp-drawer-open { overflow: hidden; }

/* --- Sticky mobile CTA bar ------------------------------------------- */
.sp-sticky-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--sp-color-off-white);
	border-top: 1px solid var(--sp-color-ivory);
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	gap: 10px;
	box-shadow: var(--sp-shadow-sticky);
}
.sp-sticky-cta .sp-btn { flex: 1; }
.sp-sticky-cta .sp-btn--primary { flex: 1.4; }
@media (max-width: 1023px) {
	.sp-has-sticky .sp-sticky-cta { display: flex; }
	/* Reserve space at the bottom of the page so footer content isn't hidden by the bar. */
	.sp-has-sticky .sp-footer { padding-bottom: 100px; }
}

/* --- Footer ---------------------------------------------------------- */
.sp-footer {
	background: var(--sp-color-charcoal);
	color: var(--sp-color-cream);
	padding: 64px var(--sp-page-gutter) 32px;
	margin-top: auto;
}
.sp-footer__inner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
}
.sp-footer__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 48px;
}
.sp-footer__brand p {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-prose);
	color: var(--sp-color-text-muted-on-dark);
	margin: 20px 0 24px;
	max-width: 280px;
}
.sp-footer__col-title {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sp-color-amber);
	margin-bottom: 20px;
}
.sp-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sp-footer__list a {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-text-muted-on-dark);
	text-decoration: none;
}
.sp-footer__list a:hover { color: var(--sp-color-amber); }

.sp-footer__contact {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-prose);
	color: var(--sp-color-text-muted-on-dark);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sp-footer__contact-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.sp-footer__contact-row .sp-icon { color: var(--sp-color-amber); margin-top: 3px; flex-shrink: 0; }

.sp-footer__bottom {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(245,158,11,0.18);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-text-faint-on-dark);
	gap: 24px;
}
.sp-footer__legal { display: flex; gap: 24px; }
.sp-footer__legal a { color: var(--sp-color-text-faint-on-dark); text-decoration: none; }
.sp-footer__legal a:hover { color: var(--sp-color-amber); }

@media (max-width: 1023px) {
	.sp-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 767px) {
	.sp-footer { padding: 40px 20px 24px; }
	.sp-footer__top { display: block; }
	.sp-footer__brand { margin-bottom: 28px; }
	.sp-footer__col {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(245,158,11,0.15);
	}
	.sp-footer__col-title { font-size: 11px; letter-spacing: 0.22em; margin-bottom: 14px; }
	.sp-footer__list-mobile-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.sp-footer__list-mobile-grid a { font-size: var(--sp-text-base); }
	.sp-footer__bottom { flex-direction: column; gap: 14px; text-align: center; margin-top: 16px; padding-top: 0; border-top: 0; font-size: 11.5px; }
	.sp-footer__legal { display: none; }
}