/* ==========================================================================
   Shared site chrome — nav + footer
   Used across all FE pages via partials/nav.php + partials/footer.php
   ========================================================================== */

:root {
	--lp-teal:        #008585;
	--lp-teal-dark:   #006b6b;
	--lp-text:        #1a1a1a;
	--lp-muted:       #666;
	--lp-border:      #e5e5e5;
	--lp-white:       #fff;
	/* The pale teal page ground shared with the wizard, payment and submission
	   screens. Kept as a token so the nav and those pages can't drift apart. */
	--lp-tint:        #f2f9f9;
	--lp-font:        'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--lp-max:         1160px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

/* At rest the bar carries the same pale teal as the page ground below it
   (--lp-tint, the #F2F9F9 used on the wizard/payment/submitted screens), so the
   two read as one surface and no border is needed. Once the page scrolls it
   lifts to a white, bordered bar over the content. .is-scrolled is toggled in
   site.js. */
.lpn-nav {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--lp-tint);
	border-bottom: 1px solid transparent;
	transition: background .2s, border-color .2s;
	/* needed so mobile dropdown anchors to the nav bar */
	isolation: isolate;
}

.lpn-nav.is-scrolled {
	background: #fff;
	border-bottom-color: var(--lp-border);
}

.lpn-nav__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	height: 80px;
	display: flex;
	align-items: center;
}

.lpn-nav__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
	margin-right: auto;
}

/* Links pushed to the right */
.lpn-nav__links {
	display: flex;
	align-items: center;
	gap: 4px;
}

.lpn-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--lp-font);
	color: #333333;
	text-decoration: none;
	border-radius: 8px;
	transition: color .15s;
	white-space: nowrap;
}
.lpn-nav__link:hover { color: var(--lp-teal); }
.lpn-nav__link--active { color: var(--lp-teal); }

/* Log in — slightly muted */
.lpn-nav__link--login {
	color: var(--lp-muted);
	margin-left: 8px;
}
.lpn-nav__link--login:hover { color: var(--lp-teal); }

/* "List your clinic" CTA */
.lpn-nav__cta {
	display: inline-flex;
	align-items: center;
	padding: 9px 22px;
	background: var(--lp-teal);
	color: var(--lp-white);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--lp-font);
	border-radius: 16px;
	text-decoration: none;
	transition: background .15s;
	white-space: nowrap;
	margin-left: 8px;
	height: 40px;
}
.lpn-nav__cta:hover { background: var(--lp-teal-dark); }

/* --------------------------------------------------------------------------
   NAV SEARCH — icon that expands into an inline field
   -------------------------------------------------------------------------- */

/* The trigger and the field occupy the same slot: only one is ever visible, and
   the wrapper animates between their widths so the icon appears to unfold into
   the field rather than the row jumping. */
.lpn-nav__search {
	display: flex;
	align-items: center;
	margin-right: 16px;
	flex-shrink: 1;
	min-width: 0;
}

.lpn-nav__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #333333;
	padding: 8px;
	border-radius: 8px;
	transition: color .15s;
	flex-shrink: 0;
}
.lpn-nav__search-btn:hover { color: var(--lp-teal); }

/* Collapsed: zero width and no padding so it takes up no space at all. Width is
   animated rather than toggling display, which display can't transition. */
.lpn-nav__search-field {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	background: var(--lp-white);
	border-radius: 16px;
	transition: width .22s ease, opacity .18s ease, padding .22s ease;
}

.lpn-nav__search.is-open .lpn-nav__search-field {
	width: 320px;
	max-width: 100%;
	padding: 0 10px;
	opacity: 1;
	pointer-events: auto;
}

/* The trigger folds away once the field is out, so the magnifier isn't shown
   twice — the field carries its own. */
.lpn-nav__search.is-open .lpn-nav__search-btn {
	display: none;
}

.lpn-nav__search-field-icon {
	color: var(--lp-muted);
	flex-shrink: 0;
}

.lpn-nav__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--lp-font);
	font-size: 14px;
	font-weight: 500;
	color: #333333;
	padding: 10px 0;
}
.lpn-nav__search-input::placeholder { color: #9aa5a5; font-weight: 400; }

/* Only offered once there is something to clear — an × next to an empty field
   would be a no-op. site.js toggles .is-dirty on the wrapper. */
.lpn-nav__search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: #e6efef;
	color: #4c5c5c;
	cursor: pointer;
	padding: 0;
	transition: background .15s, color .15s;
}
.lpn-nav__search.is-dirty .lpn-nav__search-clear { display: flex; }
.lpn-nav__search-clear:hover { background: var(--lp-teal); color: var(--lp-white); }

/* Submitting free text geocodes it through Google first, which takes a moment.
   The leading magnifier becomes a spinner so the field doesn't just sit there
   looking like the Enter key did nothing. */
.lpn-nav__search.is-busy .lpn-nav__search-field-icon { display: none; }

.lpn-nav__search.is-busy .lpn-nav__search-field::before {
	content: '';
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border: 2px solid var(--lp-border);
	border-top-color: var(--lp-teal);
	border-radius: 50%;
	animation: lpn-spin .7s linear infinite;
}

@keyframes lpn-spin { to { transform: rotate(360deg); } }

.lpn-nav__search.is-busy .lpn-nav__search-input { opacity: .6; }

/* Hamburger (mobile) */
.lpn-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	margin-left: 12px;
}
.lpn-nav__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--lp-text);
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   GOOGLE PLACES PREDICTIONS

   Google renders this list into <body>, outside our markup, with its own
   stylesheet — so everything here is an override of .pac-* rather than markup
   we control. The classes are documented and stable.
   -------------------------------------------------------------------------- */

.pac-container {
	/* Appended to <body> at z-index 1000, but the sticky nav creates a stacking
	   context of its own, which put the list underneath the page content. */
	z-index: 100000 !important;
	margin-top: 6px;
	padding: 6px;
	font-family: var(--lp-font);
	background: var(--lp-white);
	border: 1px solid var(--lp-border);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0,0,0,.13);
	overflow: hidden;
}

/* Google draws a hairline above every row; spacing and a hover fill separate
   them here instead. */
.pac-container .pac-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--lp-muted);
	cursor: pointer;
	transition: background .12s;
}

/* .pac-item-selected is the keyboard-highlighted row. It has to match hover
   exactly, or arrowing through the list with the pointer resting somewhere
   shows two highlighted rows at once. */
.pac-container .pac-item:hover,
.pac-container .pac-item-selected,
.pac-container .pac-item-selected:hover {
	background: var(--lp-tint);
}

/* The place name. Google leaves it the same weight as the trailing region, so
   each row reads as one flat grey run of text. */
.pac-container .pac-item-query {
	font-size: 14px;
	font-weight: 500;
	color: var(--lp-text);
	padding-right: 6px;
}

/* The portion of the name matching what's been typed so far. */
.pac-container .pac-matched {
	font-weight: 700;
	color: var(--lp-teal);
}

/* Google's marker is a sprite pulled from gstatic in its own grey. Swapped for
   our own pin so the list matches the rest of the chrome — the sprite's fixed
   background-position has to be reset too, or only a corner of the icon shows. */
.pac-container .pac-icon {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
	background-position: 0 0;
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008585' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* ── Attribution ──
   .pac-logo::after is the "powered by Google" strip. Hidden as requested.

   Worth knowing this is a Google Maps Platform terms requirement rather than
   decoration: when Places predictions are shown WITHOUT a Google map on the
   same screen, the attribution has to stay visible. The search page has a map,
   but this nav also appears on pages that don't. Deleting this one rule
   restores it. */
.pac-container.pac-logo::after {
	display: none;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.lpf-footer {
	background: #3a3a3a;
	color: rgba(255,255,255,.75);
	padding: 52px 24px 0;
}

.lpf-footer__inner {
	max-width: var(--lp-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 170px 1fr 200px 210px;
	gap: 48px;
	padding-bottom: 48px;
	align-items: start;
}

/* Brand column */
.lpf-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lpf-footer__logo {
	display: inline-flex;
	text-decoration: none;
}

.lpf-footer__social {
	display: flex;
	gap: 10px;
}

.lpf-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--lp-teal);
	color: var(--lp-teal);
	transition: background .18s, color .18s;
}
.lpf-footer__social a:hover {
	background: var(--lp-teal);
	color: #fff;
}

/* All cols */
.lpf-footer__col h4 {
	font-size: 11px;
	font-weight: 700;
	font-family: var(--lp-font);
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--lp-white);
	margin-bottom: 14px;
}

.lpf-footer__col-h4--gap { margin-top: 24px; }

.lpf-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lpf-footer__col ul a {
	font-size: 13px;
	font-family: var(--lp-font);
	color: rgba(255,255,255,.65);
	text-decoration: none;
	transition: color .18s;
}
.lpf-footer__col ul a:hover { color: var(--lp-teal); }

/* Wide col — 2-column area list */
.lpf-footer__col--wide h4 { margin-bottom: 18px; }

.lpf-two-col {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px 32px;
}

/* Bottom bar */
.lpf-footer__bottom {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 16px 0;
	border-top: 1px solid rgba(255,255,255,.1);
	font-size: 12px;
	font-family: var(--lp-font);
	color: rgba(255,255,255,.35);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.lpf-footer__inner {
		grid-template-columns: 160px 1fr 1fr;
		gap: 32px;
	}
	.lpf-footer__col:last-child { grid-column: 3; }
}

@media (max-width: 768px) {
	/* Wraps to a second line so the open search field can sit under the bar and
	   push the page down, rather than floating over the first thing below it. */
	.lpn-nav__inner {
		flex-wrap: wrap;
		height: auto;
		min-height: 64px;
		padding: 10px 16px;
	}

	.lpn-nav__links { display: none; }
	.lpn-nav__links--open {
		display: flex;
		flex-direction: column;
		position: absolute;
		/* Anchored to the bar's own height rather than a hard-coded 68px, which
		   went stale the moment the nav grew. */
		top: 100%;
		left: 0;
		right: 0;
		background: var(--lp-tint);
		border-bottom: 1px solid var(--lp-border);
		padding: 12px 16px 20px;
		gap: 4px;
		z-index: 199;
	}
	.lpn-nav__burger { display: flex; }

	/* The trigger keeps its place in the bar, but the field drops to a full-width
	   row underneath: there is no room for a usable text input between the logo
	   and the burger, and squeezing one in left Google's predictions narrower
	   than the place names inside them.

	   `display: contents` dissolves the wrapper so its two children become flex
	   items of the bar itself — that's what lets the button stay on line one
	   while the field wraps to line two. They can't be split any other way
	   without moving them apart in the markup, and the wrapper is what carries
	   the is-open / is-dirty / is-busy state both of them read. */
	.lpn-nav__search { display: contents; }

	.lpn-nav__search-btn { margin-left: auto; }
	.lpn-nav__search.is-open .lpn-nav__search-btn { display: flex; }

	/* Ordered last so it lands on the wrapped line. While collapsed it is
	   zero-width and takes no room, so it doesn't create an empty second row. */
	.lpn-nav__search-field { order: 10; }

	.lpn-nav__search.is-open .lpn-nav__search-field {
		flex: 1 0 100%;
		width: auto;
		max-width: none;
		margin: 10px 0 2px;
		padding: 2px 14px;
		border: 1px solid var(--lp-border);
	}

	/* Under 16px iOS zooms the whole page in when the field takes focus. */
	.lpn-nav__search-input { font-size: 16px; }
	.lpn-nav__search-clear { width: 24px; height: 24px; }

	.lpf-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	.lpf-footer__brand { grid-column: span 2; }
	.lpf-two-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.lpn-nav__inner { padding: 0 16px; padding-top: 10px; }
	.lpf-footer__inner { grid-template-columns: 1fr; }
	.lpf-footer__brand { grid-column: span 1; }
	.lpf-two-col { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL

   Elements marked [data-reveal] start slightly low and transparent, then settle
   as they scroll into view. site.js adds .is-revealed.

   Everything here is gated on html.lp-js, written by an inline script in the
   head — without JavaScript nothing is ever hidden, so a blocked or failed
   script can't leave the page blank.
   -------------------------------------------------------------------------- */

/* 26px of travel, not the 18px this started at — across a full-width block a
   shift smaller than one line of text reads as nothing happening at all. */
.lp-js [data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
	/* Hints the compositor without leaving layers alive forever — cleared by
	   .is-revealed below once the animation has run. */
	will-change: opacity, transform;
}

.lp-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Motion is decoration here — the content is identical either way, so anyone
   who has asked for less of it simply gets the finished state. */
@media (prefers-reduced-motion: reduce) {
	.lp-js [data-reveal],
	.lp-js [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}