/**
 * Header "Plan your trip" CTA (see includes/class-header-cta.php).
 *
 * Layout contract with the pierce theme + SuperSide Me: .site-header .wrap is
 * a flex row where .title-area has order:-4 and flex:1 (pushing everything
 * else right) and the SuperSide Me Search/Menu buttons have order:0. The pill
 * takes order:-1, landing between the title and the buttons. Colors are the
 * site's action green (matches booking CTAs) on the dark header bar.
 */

/* Classic header (SuperSide Me / Genesis) only. The :not(.lbimenu-pill) guard
   keeps these theme-positioning rules off the LBI Menu slot pill, which LBI
   Menu styles via .lbimenu-pill--accent instead (see slot block below). */
.site-header .lbi-prof-headcta:not(.lbimenu-pill) {
	order: -1;
	margin-right: .6rem;
	padding: .55em 1.15em;
	background: #008542;
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}

.site-header .lbi-prof-headcta:not(.lbimenu-pill):hover,
.site-header .lbi-prof-headcta:not(.lbimenu-pill):focus {
	background: #007033;
	color: #fff;
}

/* Below the breakpoint the classic-header pill leaves the crowded header.
   (Dormant path: under LBI Menu the pill stays visible at every width — see
   the slot block below.) */
@media (max-width: 880px) {
	.site-header .lbi-prof-headcta:not(.lbimenu-pill) {
		display: none;
	}
}

/* ---- Inside the LBI Menu bar (the `account` slot) ------------------------ */
/* LBI Menu supplies the pill look (.lbimenu-pill--accent). Here we only align
   it as a normal bar item. At LBI Menu's icon-only breakpoint (600px) the pill
   collapses to the suitcase icon instead of hiding: the brand's "LBI" short
   mark (lbi-menu label_short) frees the width, and the same anchor keeps
   opening the same drawer (Gerrit, 2026-08-23 — replaced the slide-out panel
   menu item, which is gone). */
.lbimenu-slot .lbi-prof-headcta {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Icon hidden on desktop; the text labels carry the pill there. */
.lbi-prof-cta-icon {
	display: none;
	line-height: 0;
}

@media (max-width: 600px) {
	.lbimenu-slot .lbi-prof-headcta {
		padding: 6px 8px;
	}

	.lbimenu-slot .lbi-prof-headcta .lbi-prof-cta-labels {
		display: none;
	}

	.lbimenu-slot .lbi-prof-headcta .lbi-prof-cta-icon {
		display: inline-flex;
	}
}

/* ---- Zero-shift label swap ----------------------------------------------- */
/* "Plan your trip" and "Your trip" occupy the same grid cell, so the element is
   always as wide as the longer label and the JS flip (a class toggle, see
   header-cta.js) cannot move the bar items beside it. Rewriting the text made
   the pill 49px narrower and shifted the whole header on every page load.
   Default state = what the server rendered.

   The grid sits on this wrapper, not on the anchor: lbi-menu.css loads after
   this file and sets the anchor's display at equal specificity in both
   placements (inline-flex on .lbimenu-pill, block on .lbimenu-nav a), so it
   would win. The wrapper is ours alone. */
.lbi-prof-cta-labels {
	display: inline-grid;
	justify-items: center;
	align-items: center;
}

.lbi-prof-cta-lbl {
	grid-area: 1 / 1;
}

.lbi-prof-cta-lbl--trip {
	visibility: hidden;
}

.has-trip .lbi-prof-cta-lbl--plan {
	visibility: hidden;
}

.has-trip .lbi-prof-cta-lbl--trip {
	visibility: visible;
}

/* ---- The drawer (hawaii.com "My Trip" pattern) ---------------------------- */
/* Slide-in panel from the right, opened by the header pill. The body content
   comes from the REST endpoint and reuses the dashboard's .lbi-profile-scoped
   pieces (ghost sheet, why-list, invites), so profile.css is a dependency. */

.lbi-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.lbi-drawer[hidden] {
	display: none;
}

.lbi-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(42, 51, 59, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.lbi-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 94vw);
	display: flex;
	flex-direction: column;
	background: #fffefb;
	box-shadow: -12px 0 40px rgba(42, 51, 59, .25);
	transform: translateX(100%);
	transition: transform .25s ease;
}

.lbi-drawer.is-open .lbi-drawer__overlay { opacity: 1; }
.lbi-drawer.is-open .lbi-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.lbi-drawer__overlay,
	.lbi-drawer__panel {
		transition: none;
	}
}

.lbi-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.25rem;
	border-bottom: 1px solid #dfe3e4;
}

.lbi-drawer__kicker {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #00708b;
}

.lbi-drawer__close {
	background: none;
	border: 0;
	padding: .1rem .45rem;
	font-size: 1.6rem;
	line-height: 1;
	color: #68737c;
	cursor: pointer;
}

.lbi-drawer__close:hover,
.lbi-drawer__close:focus {
	color: #2a333b;
}

.lbi-drawer__body {
	overflow-y: auto;
	padding: 1.6rem 1.25rem 2rem;
}

/* The dashboard wrapper inside the drawer sheds its page-level sizing. */
.lbi-drawer .lbi-profile {
	max-width: none;
	margin: 0;
	padding: 0;
}

.lbi-drawer__loading {
	margin: 0;
	color: #68737c;
	font-size: .9rem;
}

.lbi-drawer__title {
	margin: 1.25rem 0 .4rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #2a333b;
	/* Prose heading ("Your trip, taking shape"): opt out of pierce's h2 uppercase
	   + 2px tracking (audit D1, 2026-08-21). */
	text-transform: none;
	letter-spacing: normal;
}

.lbi-drawer__intro {
	margin: 0;
	font-size: .92rem;
	line-height: 1.5;
	color: #68737c;
}

.lbi-drawer__cta {
	margin: 1.25rem 0 0;
}

.lbi-drawer__btn,
.lbi-drawer__btn:focus {
	display: block;
	padding: .7em 1em;
	background: #008542;
	border-radius: 6px;
	text-align: center;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}

.lbi-drawer__btn:hover {
	background: #007033;
	color: #fff;
}

.lbi-drawer__pagelink {
	margin: 1.5rem 0 0;
	font-size: .88rem;
	text-align: center;
}

.lbi-drawer__pagelink a {
	color: #00708b;
}

/* Drawer-specific trims on the reused dashboard pieces. */
.lbi-drawer .lbi-prof-ghost {
	max-width: none;
	margin-bottom: .25rem;
}

.lbi-drawer .lq-dash__start {
	margin-top: 1.4rem;
}

/* The explainer now sits UNDER the quizzes, so it needs its own top gap. */
.lbi-drawer .lbi-prof-why {
	margin-top: 1.4rem;
}

/* Mini fact sheet on the populated drawer: the real .lbi-prof-fact rows in a
   small framed card, echoing the trip sheet the dashboard button leads to. */
.lbi-drawer__facts {
	margin: .35rem 0 1.1rem;
	padding: .75rem .85rem;
	border: 1px solid #dfe3e4;
	border-top: 2px solid #2a333b;
	border-radius: 6px;
	background: #fffefb;
}

/* Save-state line closing the populated drawer: the email nudge until an
   address is on file, quiet confirmation after. */
.lbi-drawer__note {
	margin: 1.2rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid #dfe3e4;
	font-size: .82rem;
	line-height: 1.5;
	color: #68737c;
}

.lbi-drawer__note a {
	color: #00708b;
}

.lbi-drawer__note--saved {
	color: #007033;
}

/* --------------------------------------------------------------------------
   What's-new badge (my-trip-badge-spec.md): a corner bubble on the pill,
   filled by header-cta.js from the lbi_trip_new cookie. Absolutely positioned
   so it never changes the pill's width (labels_markup fixes that on purpose).
   The pill sets position:relative first-paint (inline in enqueue()).
   -------------------------------------------------------------------------- */
.lbi-prof-cta-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	/* White bubble, deep-green number — an on-brand count, not an alarm-red dot
	   (Gerrit, 2026-08-25). A soft drop shadow lifts it off the green pill (the
	   old white ring would vanish against a white bubble). */
	background: #fff;
	color: #007033;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	/* Defeat the pierce theme's button uppercase/letter-spacing on the anchor. */
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
	pointer-events: none;
}

/* Below 600px the pill collapses to the suitcase icon; the bubble hugs its
   top-right corner (the anchor is still the positioning context). */
@media (max-width: 600px) {
	.lbimenu-slot .lbi-prof-cta-badge {
		top: -4px;
		right: -4px;
	}
}

/* --------------------------------------------------------------------------
   "Since you were here": the drawer's inbox of what changed while the visitor
   was away. Each update is its own small card (headline only — the detail is
   read on the destination when they click), dismissable with a ×.
   -------------------------------------------------------------------------- */
.lbi-drawer__news {
	margin: .35rem 0 1.25rem;
}

.lbi-drawer__news-title {
	margin: 0 0 .55rem;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #007033;
}

/* .lbi-drawer bump so the list has NO indent and NO bullet regardless of any
   inherited ul rule — the cards run the full width of the drawer body. */
.lbi-drawer .lbi-drawer__news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* One card per update: full width, whitespace between, a green accent edge, the
   × on the right. */
.lbi-drawer .lbi-drawer__news-card {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: .55rem .7rem;
	border: 1px solid #dfe3e4;
	border-left: 3px solid #008542;
	border-radius: 6px;
	background: #f4faf6;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

/* Looked like a dismissable notice, not a link (Gerrit, 2026-08-26): a chevron
   after the headline says "this opens something", and the card darkens on
   hover with the title underlined. The × stays as the no-click dismiss. */
.lbi-drawer .lbi-drawer__news-card:hover,
.lbi-drawer .lbi-drawer__news-card:focus-within {
	background: #e6f3ea;
	border-color: #b9d6c3;
	border-left-color: #008542;
}
.lbi-drawer .lbi-drawer__news-card:hover .lbi-drawer__news-link {
	text-decoration: underline;
}
.lbi-drawer__news-link::after {
	content: '\203A';
	margin-left: .35rem;
	color: #008542;
	font-weight: 700;
}
/* The bare › read as decoration next to the ×, which clearly IS a control
   (Gerrit's mobile walkthrough, 2026-08-28). Give the open cue the same shape
   as the dismiss: a small ringed disc at the right edge, filled on hover, so the
   card visibly has two controls, "open" and "dismiss". The link still spans the
   card; the disc only says so. */
.lbi-drawer .lbi-drawer__news-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.lbi-drawer .lbi-drawer__news-link::after {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-left: .35rem;
	border: 1.5px solid #008542;
	border-radius: 999px;
	font-size: 1.15rem;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}
.lbi-drawer .lbi-drawer__news-card:hover .lbi-drawer__news-link::after,
.lbi-drawer .lbi-drawer__news-link:focus-visible::after {
	background: #008542;
	color: #fff;
}

/* Match the invite cards ("Settle the next thing", .95rem) — the headline was
   inheriting the drawer's larger base size and shouting. */
/* Standard ink, not link-blue: blue text on the green card was too much (Gerrit,
   2026-08-25). The whole card is the click target, so it doesn't need link color. */
.lbi-drawer__news-link,
.lbi-drawer__news-head {
	flex: 1;
	min-width: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2a333b;
	text-decoration: none;
}

/* The dismiss control: a quiet × that darkens on hover, standard affordance. */
.lbi-drawer__news-dismiss {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #68737c;
	font-size: 1.15rem;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.lbi-drawer__news-dismiss:hover,
.lbi-drawer__news-dismiss:focus-visible {
	background: #e3ede6;
	color: #2a333b;
}

/* "Keep it moving" (0.68.0): the cards that take the invite's slot once every
   trip quiz is done. Same quiet card as the news list, no accent edge: these
   are suggestions, not news. */
.lbi-drawer .lbi-drawer__nudges {
	margin-top: 1.4rem; /* the gap the invite block (.lq-dash__start) had; 0.70.1 */
}
/* The checklist card's control row (0.71.0): the link on the left is the
   "help me decide" path, the two settle buttons sit right. Buttons opt out of
   the theme's uppercase + letter-spacing on <button>. */
.lbi-drawer .lbi-drawer__nudge-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem .75rem;
}
.lbi-drawer .lbi-drawer__nudge-actions {
	display: inline-flex;
	gap: .35rem;
}
.lbi-drawer .lbi-drawer__nudge-btn {
	margin: 0;
	padding: .28em .65em;
	border: 1px solid #c9d0d3;
	border-radius: 999px;
	background: #fff;
	color: #2a333b;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-drawer .lbi-drawer__nudge-btn:hover,
.lbi-drawer .lbi-drawer__nudge-btn:focus-visible {
	border-color: #007033;
	color: #007033;
	background: #fff;
}
.lbi-drawer .lbi-drawer__nudge-btn--skip {
	color: #68737c;
}
.lbi-drawer .lbi-drawer__nudge-btn[disabled] {
	opacity: .5;
	cursor: default;
}
.lbi-drawer .lbi-drawer__nudge-more,
.lbi-drawer .lbi-drawer__nudge-clear {
	margin: .6rem 0 0;
	font-size: .8rem;
	color: #68737c;
}
.lbi-drawer .lbi-drawer__nudge-more a,
.lbi-drawer .lbi-drawer__nudge-clear a {
	color: #007033;
	text-decoration: none;
	font-weight: 700;
}
.lbi-drawer .lbi-drawer__nudge-more a:hover,
.lbi-drawer .lbi-drawer__nudge-clear a:hover {
	text-decoration: underline;
}
.lbi-drawer .lbi-drawer__nudge-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.lbi-drawer .lbi-drawer__nudge {
	margin: 0;
	padding: .65rem .8rem;
	border: 1px solid #dfe3e4;
	border-radius: 6px;
	background: #fff;
}
.lbi-drawer .lbi-drawer__nudge-text {
	margin: 0 0 .35rem;
	font-size: .92rem;
	line-height: 1.4;
	color: #2a333b;
}
.lbi-drawer .lbi-drawer__nudge-link {
	font-size: .88rem;
	font-weight: 700;
	color: #007033;
	text-decoration: none;
}
.lbi-drawer .lbi-drawer__nudge-link::after {
	content: '\203A';
	margin-left: .3rem;
}
.lbi-drawer .lbi-drawer__nudge-link:hover {
	text-decoration: underline;
}

.lbi-drawer__news-more {
	margin: .6rem 0 0;
	font-size: .8rem;
	color: #68737c;
}

/* Scroll lock while the drawer is open (UX-H6); mirrors body.lbi-tour-open. */
body.lbi-drawer-open { overflow: hidden; }

/* Several links on one nudge card (the merged multi-island lodging item) sit together. */
.lbi-drawer .lbi-drawer__nudge-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
}