/* ==========================================================================
   Book Holiday Lodge - 2026 guides (/help/, WordPress)
   Guide sections, the guides themselves and the "Lodges near ..." pages.
   Templates: help/wp-content/themes/generatepress_child/bhl/
   Loaded after site.css, cards.css and pages.css (and listings.css on the
   town pages).
   ========================================================================== */

/* WordPress's own bits we don't want showing */
.guidesPage #wpadminbar ~ .siteTop { top: 32px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.gHero .pageHero__title { max-width: 900px; text-wrap: balance; }
.gHero .pageHero__lead { max-width: 720px; }

.gMeta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.gMeta li { display: inline-flex; align-items: center; gap: 7px; }
.gMeta .icon { width: 17px; height: 17px; color: var(--gold-200); }

/* --------------------------------------------------------------------------
   Section chips
   -------------------------------------------------------------------------- */

.gChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3.4vw, 40px); }

.gChip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px 9px 11px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--ease-out);
}
.gChip .icon { width: 17px; height: 17px; color: var(--gold-700); }
.gChip:hover { border-color: var(--forest-600); color: var(--forest-700); transform: translateY(-2px); }
.gChip.is-current { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.gChip.is-current .icon { color: var(--gold-200); }

/* In the side column */
.asideCard .gChips { margin: 4px 0 0; gap: 6px; }
.asideCard .gChip { padding: 7px 12px 7px 9px; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Guide cards
   -------------------------------------------------------------------------- */

.gGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }

.gCard {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.gCard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.gCard__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.gCard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gCard:hover .gCard__media img { transform: scale(1.06); }

.gCard__tag {
	position: absolute;
	left: 14px; top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 28px);
	padding: 6px 12px 6px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--forest-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gCard__tag .icon { width: 15px; height: 15px; flex: none; color: var(--gold-700); }

.gCard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }

.gCard__title { font-family: var(--font-display); font-weight: 500; font-size: 1.32rem; line-height: 1.22; color: var(--forest-800); text-wrap: balance; }
.gCard__title a { color: inherit; }
.gCard__title a:hover { color: var(--forest-600); }

.gCard__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.gCard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 14.5px; color: var(--forest-700); }
.gCard__more .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.gCard__more:hover { color: var(--cta); }
.gCard__more:hover .icon { transform: translateX(4px); }

/* The newest guide in a section: a wide card across the top */
.gCard--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.gCard--lead .gCard__media { aspect-ratio: auto; min-height: 320px; }
.gCard--lead .gCard__body { justify-content: center; padding: clamp(24px, 4vw, 48px); }
.gCard--lead .gCard__title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.gCard--lead .gCard__text { font-size: 16.5px; }
.gCard--lead .gCard__more { margin-top: 8px; }

.gPager { margin-top: clamp(30px, 4vw, 48px); }

/* --------------------------------------------------------------------------
   A guide
   -------------------------------------------------------------------------- */

.gArticle { font-size: 17.5px; }
.gArticle > p:first-of-type { font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.6; color: var(--ink); }

.gArticle h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.gArticle h4 { margin: 1.4em 0 .4em; font-weight: 800; color: var(--forest-800); }
.gArticle strong, .gArticle b { color: var(--ink); }

.gArticle ul, .gArticle ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.gArticle ul { list-style: disc; }
.gArticle ol { list-style: decimal; }
.gArticle li { margin-bottom: .4em; padding-left: .2em; }
.gArticle li::marker { color: var(--gold-700); }

.gArticle img { max-width: 100%; height: auto; border-radius: var(--radius); }
.gArticle img[data-float] { width: min(46%, 420px); margin: .3em 0 1em; }
.gArticle img[data-float="left"] { float: left; margin-right: 26px; }
.gArticle img[data-float="right"] { float: right; margin-left: 26px; }
.gArticle .wp-caption, .gArticle figure { max-width: 100%; margin: 1.4em 0; }
.gArticle .wp-caption-text, .gArticle figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); text-align: center; }
.gArticle .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.gArticle .alignleft { float: left; margin: .3em 26px 1em 0; }
.gArticle .alignright { float: right; margin: .3em 0 1em 26px; }

.gArticle::after { content: ""; display: table; clear: both; }

.gArticle blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold-400); font-family: var(--font-display); font-size: 1.15em; color: var(--ink); }

.gArticle table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: 15.5px; }
.gArticle th, .gArticle td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gArticle th { background: var(--paper); font-weight: 700; color: var(--forest-800); }

.gArticle iframe, .gArticle video { max-width: 100%; border-radius: var(--radius); }

/* Old editor leftovers */
.gArticle p:empty { display: none; }

/* --------------------------------------------------------------------------
   Side column
   -------------------------------------------------------------------------- */

.gAside .asideCard li a span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.gAside .asideCard li a .icon { flex: none; }

.gFind__form { display: grid; gap: 10px; margin-bottom: 12px; }
.gFind__form input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--paper);
	font: 500 15px var(--font-body);
	color: var(--ink);
}
.gFind__form input:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 2px; }
.gFind__form .btn .icon { width: 17px; height: 17px; }
.gFind__link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; color: var(--forest-700); }
.gFind__link .icon { width: 16px; height: 16px; color: var(--gold-700); }
.gFind__link:hover { color: var(--cta); }

/* --------------------------------------------------------------------------
   "Lodges near ..." pages (the rest is the county page's listings.css)
   -------------------------------------------------------------------------- */

.gTowns ul { display: grid; gap: 2px; }
.gTowns li a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink); transition: background-color .2s, color .2s; }
.gTowns li a:hover { background: var(--paper-2); color: var(--forest-700); }
.gTowns li a .icon { width: 15px; height: 15px; flex: none; color: var(--gold-700); }

/* The guide under the lodges: the article and its panels, as on the other guides */
.townPage .guide .getaways { margin-top: 26px; }
/* The panels here are taller than the screen, so they scroll with the page rather than sticking */
.townPage .guide .legal__aside { position: static; }
.gTownMain { min-width: 0; }

/* The park write-ups in the town guide */
.gTownGuide h3 { clear: both; padding-top: 1.2em; border-top: 1px dashed var(--line); }
.gTownGuide hr, .gTownGuide h2, .gTownGuide table { clear: both; }
.gTownGuide h3:first-child { padding-top: 0; border-top: 0; }
.gTownGuide h3 a { color: var(--forest-800); text-decoration: none; }
.gTownGuide h3 a:hover { color: var(--cta); }
.gTownGuide h3 + strong, .gTownGuide h3 + p > strong:only-child { display: block; margin-bottom: 14px; font-size: 15px; color: var(--gold-700); }
/* Each park's photo beside its write-up, as the photos in the other guides */
.gTownGuide img, .gTownGuide .blogImage { float: left; width: min(46%, 420px); height: auto; margin: .35em 26px 1em 0; border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; }
.gTownGuide::after { content: ""; display: table; clear: both; }
.gTownGuide p:first-child,
.gTownGuide.gArticle > p:first-of-type { font-family: var(--font-body); font-size: inherit; line-height: inherit; color: inherit; }

/* "Top tips" tables in the town guides (and any table in a guide) */
.gTownGuide table, .gArticle table {
	display: table;
	width: 100%;
	margin: 1.2em 0 1.8em;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15.5px;
	line-height: 1.55;
}
.gTownGuide td, .gTownGuide th, .gArticle td, .gArticle th { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gTownGuide tr:last-child td, .gArticle tr:last-child td { border-bottom: 0; }
.gTownGuide tr:nth-child(even) td, .gArticle tr:nth-child(even) td { background: var(--paper); }
.gTownGuide th, .gArticle th { background: var(--paper-2); font-weight: 700; color: var(--forest-800); }
.gTownGuide hr { margin: 2em 0; border: 0; border-top: 1px dashed var(--line); }

/* --------------------------------------------------------------------------
   Phones and tablets
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.gGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gCard--lead { grid-template-columns: 1fr; }
	.gCard--lead .gCard__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
	.gGrid { grid-template-columns: 1fr; }
	.gChips { flex-wrap: nowrap; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
	.gChips::-webkit-scrollbar { display: none; }
	.gChip { flex: none; }
	.asideCard .gChips { flex-wrap: wrap; margin: 4px 0 0; padding: 0; overflow: visible; }

	.gArticle { font-size: 16.5px; }
	.gArticle img[data-float], .gArticle .alignleft, .gArticle .alignright,
	.gTownGuide img, .gTownGuide .blogImage { float: none; width: 100%; margin: .4em 0 1.1em; }
	.gArticle table { display: block; overflow-x: auto; }

	.gMeta { gap: 6px 16px; font-size: 14px; }
}