/*
 * Header A, the light header (theme 1.263.0, design handoff "header-a").
 *
 * On every page but the video feed the theme prints this header and the
 * Elementor one is hidden (body.ph-hdr-a). Sizes are the handoff's
 * ph-header-swap.js: a 72px bar, 15px navy links with a 3px pink
 * underline on the current section, a 46px search with the city inside,
 * a 46px pink "+ Plan a night". Tablet and phone hide the sections behind
 * a menu button; the phone puts the search on its own row.
 */

body.ph-hdr-a .elementor-location-header,
body.ph-hdr-a .ph-site-header { display: none !important; }

.phhdr {
	--phhdr-navy: #1b3461;
	--phhdr-pink: var(--pink, #e8568a);
	--phhdr-line: var(--line, #e4e6ec);
	--phhdr-line2: var(--line-2, #d3d7e0);
	position: relative;
	z-index: 25;
	background: #fbfbfc;
	border-bottom: 1px solid var(--phhdr-line);
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	color: var(--phhdr-navy);
}
.phhdr *, .phhdr *::before, .phhdr *::after { box-sizing: border-box; }
.phhdr [hidden] { display: none !important; }
.phhdr button { font: inherit; }
.phhdr-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 72px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 32px; }

.phhdr .phhdr-lg { display: flex; align-items: center; text-decoration: none; color: var(--phhdr-navy); }
.phhdr-lg img { display: block; height: 34px; width: auto; }
.phhdr-wm { font: italic 800 25px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -1.3px; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.phhdr-wm i { width: 13px; height: 13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--phhdr-pink); margin-top: -8px; }

.phhdr-nav { display: flex; gap: 26px; }
.phhdr .phhdr-nav a { font-size: 15px; font-weight: 700; line-height: 1; color: var(--phhdr-navy); padding: 26px 0 23px; border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.phhdr .phhdr-nav a:hover { color: var(--phhdr-pink); }
.phhdr .phhdr-nav a.is-on { border-bottom-color: var(--phhdr-pink); }
.phhdr-nav em { font-size: 11px; font-weight: 800; line-height: 1; font-style: normal; background: var(--phhdr-pink); color: #fff; border-radius: 99px; padding: 3px 6px; }

/* The search and its city, one box. */
.phhdr-sr { justify-self: center; width: 100%; max-width: 500px; height: 46px; border-radius: 99px; background: #fff; border: 1px solid var(--phhdr-line2); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 4px; }
.phhdr .phhdr-sr__go { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 0 0 14px; border: 0; background: none; color: #5b6070; font-size: 14.5px; font-weight: 500; text-align: left; cursor: text; border-radius: 99px; }
.phhdr .phhdr-sr__go svg { width: 17px; height: 17px; flex: none; color: #16181f; }
.phhdr .phhdr-sr__go > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* min-height 0: the explore button it shares a class with is 44px at
   least, taller than this box, and it stuck out of the search pill on a
   phone (DG, 20 Oct 2026). */
.phhdr .phx-b.phhdr-city { flex: none; height: 34px; min-height: 0; padding: 0 14px; border-radius: 99px; border: 0; background: #f6f7f9; color: #16181f; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; box-shadow: none; }
.phhdr .phx-b.phhdr-city .phx-lbl { display: none; }
.phhdr .phx-b.phhdr-city small { font: inherit; color: inherit; }
.phhdr .phx-b.phhdr-city .phx-cv { color: #5b6070; font-weight: 500; }
.phhdr-gap { display: block; }

.phhdr-ct { display: flex; align-items: center; gap: 14px; justify-self: end; }
.phhdr .phhdr-pn .ph-pn__btn { height: 46px; padding: 0 16px 0 18px; font-size: 15px; font-weight: 800; }
.phhdr-pn__s { display: none; }
.phhdr .phhdr-acc .ph-el-account__avatar { width: 42px; height: 42px; }
.phhdr-dv { width: 1px; height: 24px; background: var(--phhdr-line2); }
.phhdr .phhdr-si { font-size: 15px; font-weight: 700; color: var(--phhdr-navy); text-decoration: none; }
.phhdr .phhdr-si:hover { color: var(--phhdr-pink); }

/* The menu button, tablet and phone only. */
.phhdr .phhdr-bg { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--phhdr-line2); background: #fff; color: var(--phhdr-navy); place-items: center; cursor: pointer; flex: none; padding: 0; }
.phhdr-bg svg { width: 20px; height: 20px; }

/* Tablet (handoff "Tablet · 24 Stories"): the sections, the avatar and
   the city go into the menu; the search takes the room. */
@media (max-width: 1000px) {
	.phhdr-in { grid-template-columns: auto minmax(0, 1fr) auto; height: 64px; padding: 0 24px; gap: 16px; }
	.phhdr-nav, .phhdr .phhdr-acc, .phhdr-dv, .phhdr .phhdr-si, .phhdr .phx-b.phhdr-city, .phhdr .phhdr-pn .ph-el-account__caret { display: none; }
	.phhdr-sr { height: 44px; max-width: none; padding-right: 18px; }
	.phhdr .phhdr-pn .ph-pn__btn { height: 44px; font-size: 14.5px; }
	.phhdr .phhdr-bg { display: grid; }
}
/* Phone: the logo, + Plan and the menu on top, the search below with
   its city back inside it. */
@media (max-width: 600px) {
	.phhdr-in { grid-template-columns: minmax(0, 1fr) auto; height: auto; padding: 10px 16px 12px; row-gap: 10px; column-gap: 10px; }
	.phhdr-sr { grid-column: 1 / -1; grid-row: 2; height: 42px; padding: 0 6px 0 4px; }
	.phhdr .phhdr-sr__go { font-size: 14px; padding-left: 10px; }
	.phhdr .phx-b.phhdr-city { display: inline-flex; height: 30px; font-size: 12.5px; padding: 0 12px; }
	.phhdr-gap { display: none; }
	.phhdr-lg img { height: 28px; }
	.phhdr-wm { font-size: 21px; }
	.phhdr .phhdr-pn .ph-pn__btn { height: 40px; font-size: 14px; padding: 0 14px; }
	.phhdr-pn__w { display: none; }
	.phhdr-pn__s { display: inline; }
	.phhdr-ct { gap: 8px; }
	.phhdr .phhdr-bg { width: 40px; height: 40px; }
}

/* v3 (deijm): on Home the page has its own search, so the header's
   shows only on a computer, 1000px and up. (Search leaves it out.) */
@media (max-width: 999px) {
	.phhdr-sr.phhdr-sr--desk { display: none; }
}

/* The menu (handoff "Mobile · menu open"): a panel from the right over a
   dimmed page, 400px on a tablet, the full width on a phone. */
.phhdr-dr { position: fixed; inset: 0; z-index: 100000; font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; color: #16181f; }
.phhdr-dr[hidden] { display: none; }
.phhdr-dr *, .phhdr-dr *::before, .phhdr-dr *::after { box-sizing: border-box; }
.phhdr-dr button { font: inherit; color: inherit; }
.phhdr-bk { position: absolute; inset: 0; background: rgba(22, 24, 31, .45); opacity: 0; transition: opacity .26s; }
.phhdr-dr.is-on .phhdr-bk { opacity: 1; }
.phhdr-p { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.32, .72, .28, 1); box-shadow: -24px 0 60px rgba(22, 24, 31, .2); }
.phhdr-dr.is-on .phhdr-p { transform: none; }
.phhdr-sc { flex: 1; overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
.phhdr-hd { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.phhdr-hd .phhdr-av { width: 48px; height: 48px; border-radius: 50%; background: repeating-linear-gradient(135deg, #2b2f3c 0 14px, #33384a 14px 28px); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none; object-fit: cover; }
.phhdr-hd div { flex: 1; min-width: 0; }
.phhdr-hd b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phhdr-dr .phhdr-hd a { font-size: 13px; font-weight: 700; color: #c9376e; text-decoration: none; }
.phhdr-dr .phhdr-x { width: 44px; height: 44px; border-radius: 50%; background: #f6f7f9; border: 0; display: grid; place-items: center; cursor: pointer; flex: none; margin-left: auto; padding: 0; }
.phhdr-x svg { width: 18px; height: 18px; }
.phhdr-dr .phhdr-cy { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #f6f7f9; border: 0; margin-bottom: 12px; text-align: left; cursor: pointer; }
.phhdr-cy svg { width: 20px; height: 20px; color: #c9376e; flex: none; }
.phhdr-cy span { flex: 1; font-size: 12px; font-weight: 600; color: #5b6070; }
.phhdr-cy span b { display: block; font-size: 15px; font-weight: 800; color: #16181f; }
.phhdr-cy em { font-style: normal; font-size: 13px; font-weight: 800; color: #c9376e; }
.phhdr-nv { display: grid; gap: 2px; }
.phhdr-dr .phhdr-nv a, .phhdr-dr .phhdr-nv button { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 10px; border-radius: 14px; font-size: 16px; font-weight: 800; color: #16181f; text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.phhdr-dr .phhdr-nv a:hover, .phhdr-dr .phhdr-nv button:hover { background: #f6f7f9; }
.phhdr-dr .phhdr-nv a.is-on { background: #fdeef4; color: #c9376e; }
.phhdr-nv i { width: 38px; height: 38px; border-radius: 12px; background: #f6f7f9; display: grid; place-items: center; flex: none; color: #1b3461; }
.phhdr-nv a.is-on i { background: #fff; color: #c9376e; }
.phhdr-nv i svg { width: 19px; height: 19px; }
.phhdr-nv span { flex: 1; }
.phhdr-nv a > svg, .phhdr-nv button > svg { width: 16px; height: 16px; color: #8f95a6; }
.phhdr-bd { font-size: 11px; font-weight: 800; line-height: 1; font-style: normal; background: #e8568a; color: #fff; border-radius: 99px; padding: 3px 6px; }
.phhdr-ln { height: 1px; background: #e4e6ec; margin: 14px 0; }
.phhdr-se { display: grid; }
.phhdr-dr .phhdr-se a { display: flex; align-items: center; min-height: 46px; padding: 0 10px; font-size: 14.5px; font-weight: 700; color: #5b6070; text-decoration: none; border-radius: 12px; }
.phhdr-dr .phhdr-se a:hover { background: #f6f7f9; color: #16181f; }
.phhdr-ft { padding: 14px 20px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); border-top: 1px solid #e4e6ec; background: #fff; }
.phhdr-dr .phhdr-ft a { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 99px; background: #e8568a; color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; }
.phhdr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phhdr-dr .phhdr-ft a.phhdr-o { background: #1b3461; }
html.phhdr-lock { overflow: hidden; }
@media (min-width: 1001px) {
	.phhdr-dr { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.phhdr-p, .phhdr-bk { transition: none; }
}