/* ==========================================================================
   Niseko Backcountry Lodge — post-migration additions.

   Loaded after the captured template.css so these rules win without that
   9,900-line generated file ever being edited. Everything here styles markup
   that did not exist on the original site; nothing restyles the original.

   Site conventions borrowed from template.css: Oswald for headings, #2e8aad
   for the accent blue, #333 body text, 1000px content column.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home hero headline (report item 1)

   Was a PNG with "ACCOMODATION" misspelled inside it. Now real text: spelled
   correctly, readable by Google, and sharp on every screen. The fade-in still
   works because the parent .hometxt opacity is what the page script animates.
   -------------------------------------------------------------------------- */

/* Vertical placement.

   template.js positions this block with
       padding-top: windowHeight * 0.17 + 116
   where 116 is exactly the height of logo.png — the headline was pinned just
   under the logo, and the offset was measured for the old 188px-tall text
   image. Real text is shorter than that image, so the same offset leaves it
   sitting high on the cover.

   Below, the block is centred in the viewport instead. !important is required
   because template.js re-applies its padding as an inline style on every
   resize, and inline styles otherwise win.

   The height guard matters: the logo runs from windowHeight*0.17 + 31px to
   +147px, so a centred headline only clears it above roughly 617px of viewport
   height. Under 700px (a margin of safety) the original just-below-the-logo
   placement is left alone, and phones keep their own layout entirely. */
@media (min-width: 768px) and (min-height: 700px) {
	.cover .hometxt {
		top: 0 !important;
		height: 100% !important;
		padding-top: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.nbl-hometxt {
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 46px;
	line-height: 1.22;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	padding: 0 20px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.nbl-hometxt .nbl-hometxt-lead {
	display: block;
}

.nbl-hometxt .nbl-hometxt-strong {
	display: block;
	font-weight: 700;
}

@media (max-width: 1000px) {
	.nbl-hometxt {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.nbl-hometxt {
		font-size: 22px;
		line-height: 1.3;
		padding: 0 10px;
	}
}

/* --------------------------------------------------------------------------
   From-prices on the room cards (report item 7)

   Rates otherwise sit behind the ROOM INFO expander; this puts the entry price
   where a price-comparing traveller sees it without clicking.
   -------------------------------------------------------------------------- */

.nbl-fromprice {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	color: #2e8aad;
	margin: 10px 0 14px;
	line-height: 1.2;
}

.nbl-fromprice-label {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #777;
}

.nbl-fromprice-amount {
	font-size: 28px;
	font-weight: 700;
	color: #2e8aad;
}

.nbl-fromprice-unit {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #777;
}

@media (max-width: 767px) {
	.nbl-fromprice {
		text-align: center;
	}

	.nbl-fromprice-amount {
		font-size: 24px;
	}
}

/* Keeping the room-card buttons clear of the text.

   From 768px up, template.css pins ROOM INFO and BOOK NOW with
   position:absolute at a fixed top (182px, level with the bottom of the
   370x230 room photo; 120px between 768 and 1000px). A fixed offset cannot
   work against descriptions of different lengths: measured in the browser,
   the original theme already ran the Basic Dorm and 2 Bunk Beds text 14px and
   28px *into* its own buttons before any of this work. Adding the price row
   inherited that bug rather than causing it.

   So rather than shifting the fixed offset — which would just move the
   breakage to whichever description is longest — the buttons are anchored to
   the bottom of the column, which grows with its content. They now sit 12px
   below the text no matter how long it runs, and the price row needs no
   special handling at all.

   min-height reproduces the shipped position for short descriptions:
       button top = max(content, min-height) + 64 - 10 - 42
   so min-height 170 gives back exactly 182px, and 108 gives back 120px. */
@media (min-width: 768px) {
	.itemid-103 .body .whitebg .block .right .nbl-fromprice {
		white-space: nowrap;
		margin: -6px 0 12px;
	}

	.itemid-103 .body .whitebg .block .right {
		min-height: 170px;
		padding-bottom: 64px;
	}

	.itemid-103 .body .whitebg .block .right .roominfo-btn,
	.itemid-103 .body .whitebg .block .right .booknow-btn {
		top: auto;
		bottom: 10px;
	}
}

/* The 768-1000px rules in template.css are written as `.site.itemid-103 ...`,
   which outranks the block above on specificity — so this range needs its own
   override at matching weight. */
@media (min-width: 768px) and (max-width: 1000px) {
	.site.itemid-103 .body .whitebg .block .right {
		min-height: 108px;
	}

	.site.itemid-103 .body .whitebg .block .right .roominfo-btn,
	.site.itemid-103 .body .whitebg .block .right .booknow-btn {
		top: auto;
		bottom: 10px;
	}
}

/* --------------------------------------------------------------------------
   Guest reviews (report item 9)
   -------------------------------------------------------------------------- */

.nbl-reviews {
	width: 1000px;
	max-width: 100%;
	margin: 40px auto 10px;
	padding: 0 0 10px;
	text-align: center;
	box-sizing: border-box;
}

.nbl-reviews-title {
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #333;
	margin-bottom: 18px;
}

.nbl-rating {
	margin-bottom: 24px;
}

.nbl-rating-score {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: #2e8aad;
	padding: 10px 16px;
	border-radius: 3px;
	vertical-align: middle;
}

.nbl-rating-count {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #777;
	margin-left: 12px;
	vertical-align: middle;
}

.nbl-reviews-list {
	display: block;
	overflow: auto;
	margin: 0 -12px;
}

.nbl-review {
	float: left;
	width: 33.3333%;
	margin: 0;
	padding: 0 12px 18px;
	border: 0;
	box-sizing: border-box;
}

/* One review reads better centred than stranded in a third of the row. */
.nbl-reviews-list .nbl-review:only-child {
	float: none;
	width: 60%;
	margin: 0 auto;
}

.nbl-review p {
	font-size: 15px;
	line-height: 22px;
	font-style: italic;
	color: #333;
	margin: 0 0 10px;
}

.nbl-review p:before {
	content: '\201C';
}

.nbl-review p:after {
	content: '\201D';
}

.nbl-review cite {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #777;
}

.nbl-reviews-more {
	clear: both;
	padding-top: 8px;
}

.nbl-reviews-more a {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2e8aad;
	text-decoration: none;
	border-bottom: 1px solid #2e8aad;
}

@media (max-width: 767px) {
	.nbl-reviews {
		width: auto;
		margin: 24px 15px 10px;
	}

	.nbl-review,
	.nbl-reviews-list .nbl-review:only-child {
		float: none;
		width: 100%;
		margin: 0 0 16px;
	}
}

/* --------------------------------------------------------------------------
   Snow report link (report item 10)
   -------------------------------------------------------------------------- */

.nbl-snow {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto 30px;
	text-align: center;
	box-sizing: border-box;
}

.nbl-snow a {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #2e8aad;
	text-decoration: none;
	border: 2px solid #2e8aad;
	border-radius: 3px;
	padding: 9px 20px;
}

.nbl-snow a:hover {
	background: #2e8aad;
	color: #fff;
}

.nbl-snow-flake {
	margin-right: 6px;
}

@media (max-width: 767px) {
	.nbl-snow {
		width: auto;
		margin: 0 15px 22px;
	}
}

/* --------------------------------------------------------------------------
   Season note above the booking widget (report item 8)
   -------------------------------------------------------------------------- */

.nbl-season-note {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto 20px;
	padding: 14px 18px;
	box-sizing: border-box;
	background: #eef6fa;
	border-left: 4px solid #2e8aad;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #333;
	text-align: left;
}

@media (max-width: 767px) {
	.nbl-season-note {
		width: auto;
		margin: 0 15px 18px;
		font-size: 14px;
		line-height: 21px;
	}
}

/* The booking widget's container is given a fixed height:330px in
   template.css. The third-party widget renders taller than that, so it
   overflowed and ran into the "Need help?" text below — measured at 175px of
   overlap on a phone before any of this work. The season note shares that
   fixed box, which made the overlap worse by its own height.

   Letting the container grow with its content fixes both at once. min-height
   preserves the original 330px footprint on desktop, so nothing moves there. */
.itemid-105 .body .whitebg .block {
	height: auto !important;
	min-height: 330px;
	padding-bottom: 24px;
}

@media (max-width: 767px) {
	.itemid-105 .body .whitebg .block {
		min-height: 0;
	}
}

/* Dead space under the booking widget.

   SiteMinder's script renders the widget as a cross-origin iframe and hard-sets
   it to 500px inline, but the booking table only fills about 290px of that on a
   desktop — the remaining ~200px was empty, pushing "Need help?" a long way
   down. The gap is inside the iframe, so no amount of page CSS reaches it; the
   only lever is the iframe's own height.

   360px leaves roughly 70px of headroom over the measured content, so this
   trims about 140px without risking a clipped widget. If the widget ever grows
   past 360px (more room types, or an expanded booking form) it scrolls inside
   the iframe rather than clipping — the same thing it would do at 500px, just
   sooner. Raise this number if that starts happening.

   Phones are left alone: the rows stack there and genuinely need the height.
   !important is required because the height is an inline style. */
@media (min-width: 768px) {
	.itemid-105 .ibe iframe {
		height: 360px !important;
	}
}

/* Booking on phones.

   The grid widget's iframe is pinned to min-width:800px by SiteMinder's script,
   so on a 375px screen 425px of it — the date picker included — hangs off the
   right edge with no way to scroll to it. The grid needs that width; it cannot
   be squeezed. Scaling it to fit would put the type at roughly 6px.

   So below 768px the widget is swapped for a button through to Little Hotelier's
   hosted booking page, which is properly responsive. Same booking engine, just
   the surface of it that suits a phone. */
.nbl-book-mobile {
	display: none;
}

@media (max-width: 767px) {
	.nbl-book-desktop {
		display: none;
	}

	.nbl-book-mobile {
		display: block;
		text-align: center;
		padding: 8px 15px 4px;
	}

	.nbl-book-mobile-btn {
		display: block;
		max-width: 320px;
		margin: 0 auto;
		padding: 15px 20px;
		background: #2e8aad;
		border-radius: 3px;
		font-family: 'Oswald', sans-serif;
		font-size: 17px;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #fff;
		text-decoration: none;
	}

	.nbl-book-mobile-btn:active {
		background: #24708d;
	}

	.nbl-book-mobile-note {
		margin: 10px 0 0;
		font-size: 13px;
		line-height: 18px;
		color: #666;
	}
}

/* --------------------------------------------------------------------------
   LINE / WhatsApp buttons (report item 25)
   -------------------------------------------------------------------------- */

.nbl-messaging {
	margin: 24px 0 10px;
}

.nbl-messaging-title {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #333;
	margin-bottom: 10px;
}

.nbl-msg-btn {
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	text-decoration: none;
	padding: 9px 20px;
	margin: 0 8px 8px 0;
	border-radius: 3px;
}

.nbl-msg-line {
	background: #06c755;
}

.nbl-msg-whatsapp {
	background: #25d366;
}

.nbl-msg-btn:hover {
	color: #fff;
	opacity: 0.88;
}

/* --------------------------------------------------------------------------
   Footer Instagram icon (report item 2)

   Replaces the Google+ icon, which pointed at a service shut down in 2019.
   Drawn as SVG so it stays sharp and needs no new image file; sized to sit on
   the same baseline as the captured twitter.png / facebook.png beside it.
   -------------------------------------------------------------------------- */

.nbl-instagram-icon {
	display: block;
	width: 38px;
	height: 38px;
	fill: #fff;
}

/* Footer bar: information pack on the left, social icons on the right.

   The pack prompt used to be a second full-height grey band stacked under the
   season/BOOK NOW one, which showed the same background photo twice in a row.
   Moving it in here removes the repeat and halves the footer stack (500px of
   band down to 250px) while still reaching every page.

   The bar is given a min-height rather than the shipped fixed height so it can
   grow when the two groups stack on a phone. */
.body .footerbg {
	height: auto !important;
	min-height: 125px;
}

.nbl-footinner {
	width: 1000px;
	max-width: 100%;
	min-height: 125px;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nbl-packgroup {
	display: flex;
	align-items: center;
	gap: 20px;
}

.nbl-packtxt {
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #eef3f7;
}

/* Styled from scratch: the band's button rules are written as
   `.body .graybg .infobtn` and stop matching out here. The .infobtn class is
   kept regardless, because the handler that opens the PDF is bound to it. */
.nbl-packgroup .infobtn {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	height: 36px;
	margin: 0;
	border: 3px solid #8fc1dd;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nbl-packgroup .infobtn .txt {
	position: static;
	top: auto;
	left: auto;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .04em;
	/* Lightened from the site blue #2e8aad, which goes muddy on this grey. */
	color: #8fc1dd;
}

.nbl-packgroup .infobtn:hover {
	background: #8fc1dd;
}

.nbl-packgroup .infobtn:hover .txt {
	color: #1b2530;
}

/* Social icons.

   template.css positions each icon with position:absolute and a hardcoded left
   offset, in three different sets — 400/484/543 at full width, 290/370/430
   between 768 and 1000px, and 76/138/186 on phones (the last two with
   !important). Those numbers were measured for three specific icons, so
   dropping one or reordering them left the row visibly off-centre. A flex row
   is self-arranging: icons can be added, dropped or reordered in footer.php
   with no offsets to re-measure. */
.body .footerbg .socials {
	width: auto !important;
	margin: 0 !important;
	padding-top: 0 !important;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 37px;
}

.body .footerbg .socials div {
	position: static !important;
	top: auto !important;
	left: auto !important;
}

/* The Instagram icon is a block-level <svg> and Facebook is an inline <img>,
   which sit on different baselines. Blocking both lines them up. */
.body .footerbg .socials div img {
	display: block;
}

/* On a phone the pack prompt, its button and the icons cannot sit side by side
   in a 58px bar, so the whole thing stacks and the bar grows to suit. */
@media (max-width: 767px) {
	.body .footerbg {
		min-height: 0;
	}

	.nbl-footinner {
		min-height: 0;
		flex-direction: column;
		justify-content: center;
		gap: 14px;
		padding: 20px;
	}

	.nbl-packgroup {
		flex-direction: column;
		gap: 10px;
	}

	.nbl-packtxt {
		font-size: 14px;
		text-align: center;
	}

	.body .footerbg .socials {
		justify-content: center;
		gap: 30px;
	}

	/* template.css shrinks the icons with `.socials div img {height:25px}`,
	   which does not match an inline <svg>. */
	.body .footerbg .socials .nbl-instagram-icon {
		width: 25px;
		height: 25px;
	}
}