/* ==========================================================================
   Grand Lake Getaway — custom styles
   --------------------------------------------------------------------------
   This file loads AFTER main.css and is the ONLY place site-specific styles
   should go. Never edit main.css: it is the purchased theme, and a theme
   update would overwrite your changes.

   Contents
   1. Tokens
   2. Fixes to theme behaviour
   3. Accessibility corrections
   4. Navigation — Book Now button
   5. New components (facts bar, reasons, distances, rates, reviews)
   6. Placeholder flags (remove before launch)
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
	--gl-gold: #dbac6d;          /* theme accent — decorative use only */
	--gl-gold-text: #8a6428;     /* accessible gold for TEXT on light grounds (5.3:1) */
	--gl-blue: #4d6876;          /* topline / hero sky */
	--gl-blue-dark: #3d5460;
	--gl-ink: #3a3630;
	--gl-body: #585149;
	--gl-sunk: #f0f0f0;
	--gl-rule: #e2ded8;
}


/* 2. Fixes to theme behaviour
   ========================================================================== */

/* Homepage hero.
   ==========================================================================
   The photograph is carried by the slider image in index.html, not by a
   background on this wrapper. It used to be both, which meant hero.jpg was
   loaded twice and the wrapper's copy sat on top of the slider's.

   The theme sizes the hero at 900px tall. At that height a 4:3 photograph is
   scaled to the full width of the screen and barely cropped, so it reads as
   one enormous block with the middle of the picture stranded in the centre.
   Cut to a band, it crops top and bottom instead and behaves like a
   letterboxed banner — which is what a header photograph should do. */

.header_absolute.home {
	background-image: none;
	min-height: 0;
}

.page_slider .flexslider .slides li,
.page_slider .static-slide .slides li {
	min-height: 500px;
}

@media (max-width: 1199px) {
	.page_slider .flexslider .slides li,
	.page_slider .static-slide .slides li {
		min-height: 440px;
	}
}

@media (max-width: 767px) {
	.page_slider .flexslider .slides li,
	.page_slider .static-slide .slides li {
		min-height: 380px;
	}
}

/* Hero subtitle */
.page_slider .intro_layers .hero-subtitle {
	font-size: 24px;
	line-height: 1.45;
}

@media (min-width: 992px) {
	.page_slider .intro_layers .hero-subtitle {
		font-size: 28px;
		line-height: 1.5;
	}
}

/* Topline bar — the hero sky blue, on every page */
.page_topline {
	background-color: var(--gl-blue);
}

.header_absolute .page_topline {
	background-color: var(--gl-blue);
}

/* FIX: the empty blue bar between 469px and 767px.
   The theme hid the topline's contact blocks below 768px and only brought
   them back below 468px, leaving a bare strip in between while the header
   showed its own duplicate copy. One location per breakpoint instead:
   topline owns the contact details at every width, the header never does. */
@media (max-width: 767px) {
	.page_topline .media {
		display: flex;
	}

	.page_header .media-wrap {
		display: none;
	}
}

/* Contact details are links now, not plain text — keep them looking the same
   as the surrounding topline text, but behave like links. */
.page_topline .media .media-body p a,
.page_topline .media .media-body a {
	color: inherit;
	text-decoration: none;
}

.page_topline .media .media-body p a:hover,
.page_topline .media .media-body p a:focus {
	color: var(--gl-gold);
	text-decoration: underline;
}

/* Keyboard focus must be visible everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--gl-gold-text);
	outline-offset: 2px;
}

.ds a:focus-visible,
.ds button:focus-visible {
	outline-color: #fff;
}


/* 2b. Inner page heads — no photograph
   ==========================================================================
   Only the home page carries a hero image now. Every other page opens with a
   compact title band on white: the title, a rule, and straight into content.
   Removes a full screen of scrolling before anyone reads anything. */

.header_absolute.page-head {
	background-color: #fff;
	background-image: none;
}

.page_title.page-head-title {
	background: none;
	border-bottom: 1px solid var(--gl-rule);
	padding-bottom: 22px;
	padding-top: 34px;
	text-align: left;
}

.page_title.page-head-title .col-md-12 {
	text-align: left;
}

.page_title.page-head-title h1 {
	color: var(--gl-ink);
	font-size: 34px;
	line-height: 1.15;
	margin: 0;
}

.page_title.page-head-title h1:after {
	background: var(--gl-gold);
	content: "";
	display: block;
	height: 3px;
	margin-top: 14px;
	width: 46px;
}

@media (min-width: 768px) {
	.page_title.page-head-title {
		padding-bottom: 26px;
		padding-top: 44px;
	}

	.page_title.page-head-title h1 {
		font-size: 44px;
	}
}


/* 2c. Vertical rhythm
   ==========================================================================
   The theme is built for a spacious one-page marketing site and spreads
   sections roughly 110-120px apart. On a content site that reads as drifty
   and pushes everything below the fold, so the whole scale is pulled in by
   about 40%. Change the numbers here rather than editing every page. */

.ls.s-pt-50, .ls.s-pt-60, .ls.s-pt-70, .ls.s-pt-80,
section.s-pt-50, section.s-pt-60, section.s-pt-70, section.s-pt-80 { padding-top: 42px; }

.ls.s-pb-40, .ls.s-pb-50, .ls.s-pb-60, .ls.s-pb-70, .ls.s-pb-80,
section.s-pb-40, section.s-pb-50, section.s-pb-60, section.s-pb-70, section.s-pb-80 { padding-bottom: 42px; }

section.s-pt-30, section.s-py-30 { padding-top: 26px; }
section.s-pb-30 { padding-bottom: 26px; }

@media (min-width: 768px) {
	section.s-pt-md-60, section.s-pt-md-70 { padding-top: 54px; }
	section.s-pt-md-90, section.s-pt-md-100, section.s-pt-md-110, section.s-pt-md-120 { padding-top: 66px; }

	section.s-pb-md-40, section.s-pb-md-60, section.s-pb-md-70 { padding-bottom: 54px; }
	section.s-pb-md-80, section.s-pb-md-90, section.s-pb-md-110, section.s-pb-md-120 { padding-bottom: 66px; }

	section.s-py-md-50 { padding-bottom: 40px; padding-top: 40px; }
}

@media (min-width: 1200px) {
	section[class*="s-pt-xl-"] { padding-top: 76px; }
	section[class*="s-pb-xl-"] { padding-bottom: 76px; }
}

/* The theme's spacer divs are sized for the same wide rhythm. */
.divider-80 { height: 40px; }
.divider-60 { height: 32px; }
.divider-50 { height: 28px; }
.divider-40 { height: 24px; }
.divider-35, .divider-30 { height: 20px; }

/* Section headings sat a long way from the content beneath them. */
.section-heading { margin-bottom: 14px; }
.top-subtitle { margin-bottom: 6px; }

.mt-40 { margin-top: 24px !important; }
.mt-50 { margin-top: 30px !important; }

/* Cards were generously padded for a sparse layout. (.gl-facts-item is
   sized in section 5.1, not here.) */
.gl-reason { padding: 26px 26px 24px; }

.gl-reasons { gap: 20px; }

/* Footer was the single largest block of empty space on every page. */
.page_footer.s-pt-80 { padding-top: 52px; }
.page_footer.s-pb-40 { padding-bottom: 30px; }

@media (min-width: 768px) {
	.page_footer.s-pt-md-100 { padding-top: 62px; }
	.page_footer.s-pb-md-60 { padding-bottom: 38px; }
}


/* 3. Accessibility corrections
   ==========================================================================
   The theme's pale golds measure 1.4:1–2.1:1 against light grounds, well
   under the WCAG AA minimum of 4.5:1 for body text. They stay as-is on dark
   sections (.ds), where they read fine — these rules only touch light ones. */

.ls .color-main,
.ls .color-main3,
.ls .links-maincolor3 a,
.ls a.more {
	color: var(--gl-gold-text);
}

.ls .subtitle {
	color: var(--gl-gold-text);
}

/* Small print needs the same treatment. */
.ls .small-text.color-main3 {
	color: var(--gl-gold-text);
}


/* 4. Navigation
   ========================================================================== */

/* Text wordmark, standing in for the logo image in the mobile header.
   The logo now appears only in the footer. */
.wordmark {
	align-items: baseline;
	color: var(--gl-ink);
	display: flex;
	flex-wrap: wrap;
	font-size: 19px;
	font-weight: 600;
	gap: 0 6px;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
}

.wordmark span {
	color: var(--gl-gold-text);
	font-weight: 400;
}

.wordmark:hover,
.wordmark:focus {
	color: var(--gl-ink);
	text-decoration: none;
}

.wordmark:hover span {
	color: var(--gl-blue);
}

@media (max-width: 380px) {
	.wordmark { font-size: 16px; }
}

/* With the logo gone, the topline is two columns rather than three. Keep the
   phone left and the email right at desktop width. */
@media (min-width: 768px) {
	.page_topline .col-md-6:last-child .media {
		justify-content: flex-end;
	}
}


/* 4·0 Where the header tabs go, and when
   ==========================================================================
   The theme swaps the horizontal nav for a burger at 1199px. That is an
   unusually high breakpoint: a tablet, or a laptop window that is not
   maximised, both get the phone treatment, which is why the tabs seemed to
   disappear. They were never removed, just hidden earlier than they needed
   to be.

   Below, the real nav is restored for 992-1199px, so only genuine phone
   widths fall back to the burger. Seven items need roughly 870px, so 992px
   is about as low as it can honestly go.
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

	/* Undo the full-screen overlay treatment. */
	.page_header .top-nav {
		background: none;
		bottom: auto;
		opacity: 1;
		position: static;
		visibility: visible;
		z-index: auto;
	}

	.page_header .sf-menu {
		background: none;
		border-top: 0;
		bottom: auto;
		display: block;
		left: auto;
		opacity: 1;
		overflow: visible;
		padding: 0;
		position: static;
		right: auto;
		text-align: center;
		top: auto;
	}

	.page_header .sf-menu > li {
		display: inline-block;
		position: relative;
	}

	.page_header .top-nav .sf-menu > li > a {
		font-size: 12px;
		letter-spacing: .04em;
		padding: 22px 0;
		margin: 0 8px;
	}

	/* Second level back to a floating panel. */
	.page_header .sf-menu li > ul {
		background-color: #fff;
		border-top: 2px solid var(--gl-gold);
		box-shadow: 0 12px 28px rgba(58, 54, 48, .14);
		display: none;
		left: 50%;
		min-width: 200px;
		padding: 8px 0;
		position: absolute;
		top: 100%;
		transform: translateX(-50%);
		z-index: 99;
	}

	.page_header .sf-menu li:hover > ul,
	.page_header .sf-menu li.sfHover > ul {
		display: block;
	}

	.page_header .sf-menu li > ul > li {
		display: block;
	}

	.page_header .top-nav .sf-menu li > ul > li > a {
		font-size: 12px;
		margin: 0;
		padding: 9px 18px;
		text-align: left;
	}

	.page_header .top-nav .sf-menu li > ul > li > a:hover {
		background-color: var(--gl-sunk);
		color: var(--gl-gold-text);
	}

	/* No burger at this width, and the mobile logo row is not needed. */
	.page_header .toggle_menu {
		display: none;
	}

	.page_header .hidden-above-md {
		display: none !important;
	}

	.page_header .sf-menu-item-mobile-toggler {
		display: none;
	}
}


/* 4·0b Phone navigation
   ==========================================================================
   Below 992px the burger stays, but two things about the theme's version
   were wrong for this site:

     - the button sat on the right, and
     - opening it slid a full-height black frame across from the left edge,
       which is a lot of ceremony for six links.

   It now sits on the left and drops a panel down from under the header,
   which is what a phone menu is normally expected to do.
   ========================================================================== */

@media (max-width: 1199px) {

	/* Burger on the left. */
	.page_header .toggle_menu {
		left: 15px;
		right: auto;
	}

	/* Push the wordmark clear of it. */
	.page_header .col-10.hidden-above-md {
		justify-content: flex-end;
	}
}

@media (max-width: 991px) {

	/* The panel hangs off the bottom of the header rather than being pinned
	   to a hardcoded pixel offset, so it stays put whatever height the
	   header ends up and follows it when it becomes sticky. */
	.page_header {
		position: relative;
	}

	.page_header .top-nav {
		background: none;
		bottom: auto;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		top: 100%;
		transition: opacity .25s ease, visibility .25s ease;
		visibility: hidden;
		z-index: 1001;
	}

	.page_header.mobile-active .top-nav {
		background: none;
		opacity: 1;
		visibility: visible;
	}

	.page_header .sf-menu {
		background-color: #fff;
		border-top: 3px solid var(--gl-gold);
		bottom: auto;
		box-shadow: 0 18px 40px rgba(26, 22, 18, .28);
		left: auto;
		max-height: calc(100vh - 140px);
		opacity: 1;
		overflow-y: auto;
		padding: 6px 0 10px;
		position: static;
		right: auto;
		text-align: left;
		top: auto;
		transform: translateY(-10px);
		transition: transform .25s ease;
	}

	.page_header.mobile-active .sf-menu {
		transform: translateY(0);
	}

	.page_header .top-nav .sf-menu > li {
		border-bottom: 1px solid var(--gl-rule);
		display: block;
	}

	.page_header .top-nav .sf-menu > li:last-child {
		border-bottom: 0;
	}

	.page_header .top-nav .sf-menu a {
		color: var(--gl-ink);
		font-size: 15px;
		letter-spacing: .06em;
		padding: 15px 20px;
	}

	.page_header .top-nav .sf-menu > li.active > a {
		color: var(--gl-gold-text);
	}

	/* Sub-items indented and quieter, so the hierarchy is readable. */
	.page_header .top-nav .sf-menu ul {
		background: var(--gl-sunk);
		padding-left: 0;
	}

	.page_header .top-nav .sf-menu ul li a {
		font-size: 13px;
		padding-left: 38px;
		text-transform: none;
	}

	/* Book Now reads as the action it is, not another list row. */
	.page_header .top-nav .sf-menu > li.nav-book > a {
		background: var(--gl-gold);
		color: #fff !important;
		margin: 10px 20px 4px;
		padding: 14px 20px;
		text-align: center;
	}
}

/* The panel hangs below the header, so it has to know how tall that is. */
@media (max-width: 767px) {
	.page_header .sf-menu {
		max-height: calc(100vh - 84px);
		top: 84px;
	}
}


/* 4a. Dropdown menus — Cabin and Photos
   ==========================================================================
   Three things were wrong with these.

   1. VERTICAL BARS. At 1200px and up the theme gives top-level nav links
      33px of padding above and below but none at the sides, so the link box
      is 80px tall and only as wide as its text. Any focus ring drawn round
      that reads as two tall bars either side of the word. Replaced with an
      underline, which is just as visible and does not distort the header.

   2. NO INDICATOR. Every one of the theme's dropdown-arrow rules sits inside
      a max-width:1199px block, so on a desktop there was nothing at all to
      show that Cabin and Photos even had pulldowns.

   3. FRAGILE OVERFLOW. The theme's menuHideExtraElements() measures the nav
      and, if it thinks it overflows, clones the tail items into a "..."
      menu -- submenus and all, nested two deep, which renders badly. With
      seven top-level items that is easy to trigger. Neutralised below, and
      the spacing tightened so the menu fits without it.
   ========================================================================== */

@media (min-width: 1200px) {

	/* 1. Focus that does not draw bars. */
	.top-nav .sf-menu > li > a:focus-visible {
		outline: none;
		text-decoration: underline;
		text-decoration-color: var(--gl-gold-text);
		text-decoration-thickness: 2px;
		text-underline-offset: 5px;
	}

	/* 2. A caret on anything that opens a pulldown. */
	.top-nav .sf-menu > li > a.sf-with-ul::after {
		content: "\f107";
		font-family: FontAwesome;
		font-size: 12px;
		font-weight: 400;
		margin-left: 7px;
		opacity: .75;
		position: static;
		vertical-align: 1px;
	}

	.top-nav .sf-menu > li:hover > a.sf-with-ul::after,
	.top-nav .sf-menu > li.sfHover > a.sf-with-ul::after {
		opacity: 1;
	}

	/* 3. Never let the theme collapse the menu into a "..." clone. */
	.top-nav .sf-more-li {
		display: none !important;
	}

	.top-nav .sf-menu > li.sf-xl-hidden {
		display: inline-block !important;
	}

	/* Seven top-level items need less air between them than the theme's
	   15px (25px above 1500px) to sit on one line comfortably. */
	.top-nav .sf-menu > li > a {
		margin-left: 11px;
		margin-right: 11px;
	}
}

@media (min-width: 1500px) {
	.top-nav .sf-menu > li > a {
		margin-left: 15px;
		margin-right: 15px;
	}
}

/* The dropdown panel itself — tighter, with an edge so it reads as a panel
   rather than floating text. */
@media (min-width: 1200px) {
	.top-nav .sf-menu li > ul {
		border-top: 2px solid var(--gl-gold);
		box-shadow: 0 12px 28px rgba(58, 54, 48, .14);
		min-width: 218px;
		padding-bottom: 8px;
		padding-top: 8px;
	}

	.top-nav .sf-menu li > ul > li > a {
		font-size: 13px;
		letter-spacing: .06em;
		padding-bottom: 9px;
		padding-top: 9px;
	}

	/* The grey fill is a hover state and nothing else, so it tracks the
	   mouse down the list. Giving it to .active as well pinned it to
	   whichever page you were already on, which read as a stuck highlight. */
	.top-nav .sf-menu li > ul > li > a:hover,
	.top-nav .sf-menu li > ul > li > a:focus-visible {
		background-color: var(--gl-sunk);
		color: var(--gl-gold-text);
	}

	/* The page you are on is marked with colour and weight only — no fill,
	   and no change to padding, so every row stays aligned. */
	.top-nav .sf-menu li > ul > li.active > a {
		background-color: transparent;
		color: var(--gl-gold-text);
		font-weight: 700;
	}

	/* Hover still wins over the active page, so the fill follows the mouse
	   even across the item you are currently on. */
	.top-nav .sf-menu li > ul > li.active > a:hover {
		background-color: var(--gl-sunk);
	}
}


/* 4b. Book Now button
   ========================================================================== */

.sf-menu > li.nav-book > a {
	background: var(--gl-gold);
	background: linear-gradient(to right, #dbac6d 0%, #fccc7c 100%);
	border-radius: 2px;
	color: #fff !important;
	margin-left: 12px;
	padding-left: 22px !important;
	padding-right: 22px !important;
}

.sf-menu > li.nav-book > a:hover,
.sf-menu > li.nav-book > a:focus {
	background: var(--gl-blue);
	color: #fff !important;
}

.sf-menu > li.nav-book > a:before,
.sf-menu > li.nav-book > a:after {
	content: none !important;
}

@media (max-width: 991px) {
	.sf-menu > li.nav-book > a {
		background: none;
		border-radius: 0;
		margin-left: 0;
	}
}


/* 5. New components
   ========================================================================== */

/* 5.1 Facts bar — sleeps / bedrooms / baths / pets, directly under the hero.
   A guest decides whether to keep reading in about four seconds. This is
   what they decide on. */

.gl-facts {
	background: var(--gl-sunk);
}

.gl-facts .gl-facts-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(5, 1fr);
	background: var(--gl-rule);
	border: 1px solid var(--gl-rule);
}

/* A compact strip, not five panels. The numbers are one or two characters,
   so the boxes only need to be tall enough to hold them. */
.gl-facts-item {
	background: var(--gl-sunk);
	padding: 13px 10px 14px;
	text-align: center;
}

.gl-facts-item i.fa {
	color: var(--gl-gold-text);
	display: block;
	font-size: 15px;
	margin-bottom: 6px;
}

.gl-facts-item .gl-facts-value {
	color: var(--gl-ink);
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
}

.gl-facts-item .gl-facts-value .gl-facts-unit {
	color: var(--gl-body);
	font-size: 14px;
	font-weight: 500;
	margin-left: 3px;
}

.gl-facts-item .gl-facts-label {
	color: var(--gl-body);
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-top: 3px;
	text-transform: uppercase;
}

@media (max-width: 991px) {
	.gl-facts .gl-facts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 575px) {
	.gl-facts .gl-facts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gl-facts-item {
		padding: 11px 8px 12px;
	}

	.gl-facts-item .gl-facts-value {
		font-size: 17px;
	}
}

/* 5.2 Book-direct reasons — the whole argument for having this site */

.gl-reasons {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, 1fr);
}

.gl-reason {
	background: #fff;
	border: 1px solid var(--gl-rule);
	border-top: 3px solid var(--gl-gold);
	padding: 34px 32px 32px;
}

.gl-reason i.fa {
	color: var(--gl-gold-text);
	font-size: 30px;
}

.gl-reason h4 {
	font-size: 19px;
	margin: 18px 0 10px;
}

.gl-reason p {
	color: var(--gl-body);
	margin: 0;
}

@media (max-width: 767px) {
	.gl-reasons {
		grid-template-columns: 1fr;
	}
}

/* 5.3 Distances — guests planning an RMNP trip are triangulating on a map */

.gl-distances {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gl-distances li {
	align-items: baseline;
	border-bottom: 1px solid var(--gl-rule);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 14px 0;
}

.gl-distances li:last-child {
	border-bottom: 0;
}

.gl-distances .gl-place {
	color: var(--gl-ink);
	font-weight: 500;
}

.gl-distances .gl-dist {
	color: var(--gl-gold-text);
	flex: none;
	font-weight: 600;
	white-space: nowrap;
}

/* 5.4 Rates table */

.gl-rates {
	border-collapse: collapse;
	width: 100%;
}

.gl-rates th {
	border-bottom: 2px solid var(--gl-ink);
	color: var(--gl-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 0 18px 12px 0;
	text-align: left;
	text-transform: uppercase;
}

.gl-rates td {
	border-bottom: 1px solid var(--gl-rule);
	padding: 18px 18px 18px 0;
	vertical-align: top;
}

.gl-rates td:last-child,
.gl-rates th:last-child {
	padding-right: 0;
	text-align: right;
}

.gl-rates .gl-season {
	color: var(--gl-ink);
	font-weight: 600;
}

.gl-rates .gl-months {
	color: var(--gl-body);
	display: block;
	font-size: 14px;
}

.gl-rates .gl-rate {
	color: var(--gl-ink);
	font-size: 20px;
	font-weight: 600;
	white-space: nowrap;
}

.gl-tablewrap {
	overflow-x: auto;
}

.gl-tablewrap .gl-rates {
	min-width: 520px;
}

/* 5.5 Reviews — real ones, with attribution */

.gl-review {
	background: #fff;
	border: 1px solid var(--gl-rule);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 30px 28px;
}

.gl-review .gl-stars {
	color: var(--gl-gold);
	font-size: 14px;
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.gl-review blockquote {
	border: 0;
	color: var(--gl-body);
	flex: 1;
	font-size: 16px;
	margin: 0 0 20px;
	padding: 0;
}

.gl-review blockquote:before {
	content: none;
}

.gl-review .gl-attrib {
	border-top: 1px solid var(--gl-rule);
	color: var(--gl-ink);
	font-size: 14px;
	font-weight: 600;
	padding-top: 16px;
}

.gl-review .gl-source {
	color: var(--gl-body);
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-top: 3px;
	text-transform: uppercase;
}

/* 5.6 Good-to-know accordion — plain, no images */

.gl-know .card {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--gl-rule);
}

.gl-know .card-header {
	background: none;
	border: 0;
	padding: 0;
}

.gl-know .card-header a {
	color: var(--gl-ink);
	display: block;
	font-size: 18px;
	font-weight: 500;
	padding: 20px 40px 20px 0;
	position: relative;
	text-decoration: none;
}

.gl-know .card-header a:after {
	content: "\f068";
	font-family: FontAwesome;
	color: var(--gl-gold-text);
	font-size: 14px;
	position: absolute;
	right: 4px;
	top: 22px;
}

.gl-know .card-header a.collapsed:after {
	content: "\f067";
}

.gl-know .card-body {
	color: var(--gl-body);
	padding: 0 0 22px;
}

/* 5.7 Amenity columns */

.gl-amenities {
	columns: 3;
	column-gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gl-amenities li {
	break-inside: avoid;
	color: var(--gl-body);
	padding: 7px 0 7px 28px;
	position: relative;
}

.gl-amenities li:before {
	content: "\f00c";
	color: var(--gl-gold-text);
	font-family: FontAwesome;
	font-size: 13px;
	left: 0;
	position: absolute;
	top: 9px;
}

@media (max-width: 991px) {
	.gl-amenities {
		columns: 2;
	}
}

@media (max-width: 575px) {
	.gl-amenities {
		columns: 1;
	}
}

/* 5.8 Gallery tiles — consistent height regardless of photo orientation */

.gl-gallery .item-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* 5.9 Booking form */

.gl-form .form-group {
	margin-bottom: 22px;
}

.gl-form label {
	color: var(--gl-ink);
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.gl-form .required {
	color: #b0453a;
}

.gl-form .gl-hint {
	color: var(--gl-body);
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	margin-top: 6px;
	text-transform: none;
}

/* Honeypot — hidden from people, visible to spam bots. Not display:none,
   because some bots skip those; positioned off-canvas instead. */
.gl-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.contact-form-respond {
	border-left: 3px solid var(--gl-gold);
	background: var(--gl-sunk);
	color: var(--gl-ink) !important;
	padding: 14px 18px;
}

.form-errors {
	color: #b0453a;
}

/* 5.10 Footer link row */

.gl-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gl-footer-links li {
	display: inline-block;
}

.gl-footer-links li:after {
	content: "·";
	margin: 0 10px;
	opacity: 0.5;
}

.gl-footer-links li:last-child:after {
	content: none;
}


/* 5.11 Amenity list, grouped by room
   ========================================================================== */

.gl-amenity-group {
	border-bottom: 1px solid var(--gl-rule);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.gl-amenity-group:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.gl-amenity-group h3 {
	align-items: center;
	display: flex;
	font-size: 20px;
	gap: 12px;
	margin: 0 0 6px;
}

.gl-amenity-group h3 i.fa {
	color: var(--gl-gold-text);
	font-size: 18px;
	width: 24px;
}

.gl-amenity-group .gl-group-note {
	color: var(--gl-body);
	font-size: 14px;
	margin: 0 0 18px;
}

.gl-amenity-list {
	columns: 3;
	column-gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gl-amenity-list li {
	break-inside: avoid;
	color: var(--gl-body);
	padding: 6px 0 6px 26px;
	position: relative;
}

.gl-amenity-list li:before {
	content: "\f00c";
	color: var(--gl-gold-text);
	font-family: FontAwesome;
	font-size: 12px;
	left: 0;
	position: absolute;
	top: 9px;
}

/* Things the cabin does NOT have. Worth its own treatment — telling guests
   what to bring prevents more complaints than any amenity list. */
.gl-amenity-list.gl-bring li:before {
	content: "\f0da";
	color: var(--gl-body);
}

@media (max-width: 991px) {
	.gl-amenity-list {
		columns: 2;
	}
}

@media (max-width: 575px) {
	.gl-amenity-list {
		columns: 1;
	}
}


/* 5.11b Calendar mount point
   ==========================================================================
   Holds the space the live calendar will occupy, so the page does not jump
   when the embed goes in. Replace the whole .gl-calendar-slot with the
   provider's iframe or script tag. */

.gl-calendar-slot {
	background: var(--gl-sunk);
	border: 2px dashed var(--gl-rule);
	display: grid;
	min-height: 380px;
	place-items: center;
	padding: 40px 28px;
	text-align: center;
}

.gl-calendar-inner {
	max-width: 46ch;
}

.gl-calendar-inner i.fa {
	color: var(--gl-gold-text);
	display: block;
	font-size: 34px;
	margin-bottom: 16px;
}

.gl-calendar-inner h3 {
	font-size: 21px;
	margin-bottom: 12px;
}

.gl-calendar-inner p {
	color: var(--gl-body);
	margin-bottom: 0;
}


/* 5.11c Map mount point
   ==========================================================================
   Holds the shape a Google Maps embed will occupy, so the page does not jump
   when the iframe goes in. Replace the whole .gl-map-slot with the iframe
   from Google Maps -> Share -> Embed a map. */

.gl-map-slot {
	aspect-ratio: 4 / 3;
	background: var(--gl-sunk);
	border: 2px dashed var(--gl-rule);
	display: grid;
	place-items: center;
	padding: 30px 24px;
	text-align: center;
}

.gl-map-inner {
	max-width: 40ch;
}

.gl-map-inner i.fa {
	color: var(--gl-gold-text);
	display: block;
	font-size: 30px;
	margin-bottom: 14px;
}

.gl-map-inner h3 {
	font-size: 19px;
	margin-bottom: 10px;
}

.gl-map-inner p {
	color: var(--gl-body);
	font-size: 14px;
	margin-bottom: 0;
}

/* A real embed should fill the same box and lose the browser default border. */
.gl-map-slot iframe,
.gl-map-embed iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.gl-map-embed {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--gl-rule);
	overflow: hidden;
}

@media (max-width: 575px) {
	.gl-map-slot,
	.gl-map-embed {
		aspect-ratio: 3 / 2;
	}
}


/* 5.11d Attribution panel
   ==========================================================================
   Points at an outside source (the Chamber of Commerce) without pretending
   the content originated here. */

.gl-source {
	background: #fff;
	border: 1px solid var(--gl-rule);
	border-left: 3px solid var(--gl-gold);
	display: flex;
	gap: 22px;
	padding: 28px 30px;
}

.gl-source-icon {
	color: var(--gl-gold-text);
	flex: none;
	font-size: 28px;
	line-height: 1;
	padding-top: 4px;
}

.gl-source h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.gl-source p {
	color: var(--gl-body);
	margin-bottom: 0;
}

@media (max-width: 575px) {
	.gl-source {
		flex-direction: column;
		gap: 12px;
		padding: 24px 20px;
	}

	.gl-source .btn {
		display: block;
		margin: 0 0 10px !important;
		text-align: center;
	}
}

/* External links get a subtle marker so it is clear they leave the site. */
.gl-source a[target="_blank"]:not(.btn),
.gl-distances a[target="_blank"] {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* 5.12 Draft block
   ==========================================================================
   Wraps a long list that is a starting checklist rather than confirmed fact.
   Flagging every line individually would make the page unreadable, so the
   whole block is marked instead. Remove the wrapper once confirmed. */

.gl-draft {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(176, 69, 58, 0.045) 0,
		rgba(176, 69, 58, 0.045) 10px,
		transparent 10px,
		transparent 20px
	);
	border: 2px dashed #c98a80;
	padding: 26px 28px 28px;
	position: relative;
}

.gl-draft > .gl-draft-label {
	background: #b0453a;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin: -38px 0 22px -30px;
	padding: 5px 14px;
	text-transform: uppercase;
}

.gl-draft > .gl-draft-label:before {
	content: "\f071\00a0\00a0";
	font-family: FontAwesome;
	font-weight: 400;
}

@media (max-width: 575px) {
	.gl-draft {
		padding: 22px 18px 24px;
	}

	.gl-draft > .gl-draft-label {
		margin-left: -20px;
	}
}


/* 6. Placeholder flags
   ==========================================================================
   Anything the site still needs from you is wrapped in .needs-info so it is
   impossible to publish by accident. Search the project for "needs-info"
   to find every one, or read NEEDS-YOUR-INPUT.md.

   DELETE THIS WHOLE SECTION once the last one is gone. */

.needs-info {
	background: #ffe9a8;
	border-bottom: 2px solid #b0453a;
	color: #6b3410 !important;
	display: inline;
	font-family: inherit;
	font-size: 0.95em;
	font-style: normal;
	font-weight: 600;
	padding: 1px 6px;
	text-transform: none;
}

.needs-info:before {
	content: "\f071\00a0\00a0";
	font-family: FontAwesome;
	font-size: 0.9em;
	font-weight: 400;
}

.ds .needs-info,
.gl-facts-item .needs-info {
	display: inline-block;
}

@media print {
	.needs-info {
		border: 1px solid #000;
	}
}