/* ============================================================
   Basecamp Kiosk — all styles
   Edit colors in :root. Each screen has its own section below.
   ============================================================ */

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	
	--navy-dark:  #1E2D3C;
	
	--teal:       #4AAFBE;
	--teal-dark:  #3A9AAA;
	--white:      #FFFFFF;
	
	--text-dark:  #1B2B3A;
	/* --sidebar-bg: #4A6278; */




	--steel:      #537392;	
	--nav-active: #526A86;
	--gold:       #F4CF81;
	--off-white:  #FAFFFF;
	--navy:       #364350;
	--grey:       #F2F2F2;
	--teal:       #66B7CC;
	--navy-dark:  #242E38;
	--red:        #EB5757;
	--grey-bg:	#DBDBDB;

	--teko: "Teko", "Impact", "Arial Narrow", "Arial", sans-serif;
	--inter: 'Inter', system-ui, sans-serif;

}


html.js{
	body.logged-in{
		margin-top: 0px !important;
		#wpadminbar{
			display: none;
		}
	}
}
html, body {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	font-family: var(--inter);
	background: var(--grey-bg);
	color: var(--text-dark);
	h1{
		font-family: var(--teko);
		font-size: 3.375rem;
		line-height: 96%;
	}
}

/* Prevent orphaned single words on the last line */
p, h1, h2, h3, h4, h5, li, label, .section-label,
.story-card-body h4, .listing-item-info h5,
.detail-section p, .detail-section a,
.event-card-body h4 {
  text-wrap: balance;
}

/* ─── Shell Layout ──────────────────────────────────────────── */
#app {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
#sidebar {
  /* 25vw = 480px @ 1920. Fixed so content area stays predictable. */
	width: 25vw;
	min-width: 300px;
	flex-shrink: 0;
	height: 100%;
	background: var(--steel);
	padding: 2.5rem 2rem;          /* shows steel-blue gap around white card */
	z-index: 10;
	/* White card that holds logo + nav */	
	.sidebar-card {
		background: var(--white);
		border-radius: 32px;
		height: 100%;
		padding: 28px 28px 24px;
		display: flex;
		flex-direction: column;
	}	
}



.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}

.logo-wrap svg,
.logo-wrap img {
  aspect-ratio: 325/214;
  width: 100%; 
  height: auto;

}

nav {
  display: flex;
  flex-direction: column;
  margin-top: auto;         /* push nav to bottom of card */
}

nav{
	a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 3rem 16px 4px;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--text-dark);
		border-bottom: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		transition: color 0.2s;
		font-family: var(--teko);
		position: relative;
	}
	a::after{
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 2rem;
		height: 100%;
		background-image: url(/wp-content/themes/mercer-cvb/kiosk-assets/mercer-arrow.svg);
		background-repeat: no-repeat;
		background-position: center;		
		opacity: 0;
	}
	a.active{
		color: var(--nav-active);
	}
	a.active::after{
		opacity: 1;
	}
}

nav a:last-child { border-bottom: none; }


/* nav a {
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 18px;
}

nav a.active { color: var(--gold); }
nav a.active .nav-arrow { opacity: 1; } */

/* ─── View Container ────────────────────────────────────────── */
#view {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Each screen is a <section class="view">; only one is shown at a time.
   JS toggles the [hidden] attribute. */
.view { height: 100%; }
.view[hidden] { display: none !important; }

/* ─── View Transition ───────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* ─── Welcome View ──────────────────────────────────────────── */
.view-welcome {
  display: flex;
  height: 100%;
}

.welcome-content {
	flex: 1;                  /* ~50% of content area */
	background: var(--navy);
	padding: 8vh 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--white);
	h1 {
		font-size: clamp(32px, 3.5vw, 64px);
		font-weight: 900;
		line-height: 1.1;
		text-transform: uppercase;
		margin-bottom: 2rem;
	}

	p {
		font-size: 1.5rem;
		line-height: 1.7;
		color: rgba(255,255,255,0.85);
	}

	p.section-label {
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: .5rem;
	}

}




.welcome-hero {
  flex: 1;
  position: relative;
  overflow: hidden;
  	video{
		max-width: none;
	}
}

/* .welcome-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.hero-controls {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
}

.hero-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(74,175,190,0.85);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

/* ─── Shared Page Hero ──────────────────────────────────────── */
.page-hero {
	height: 40vh;
	min-height: 240px;
	display: flex;
	flex-shrink: 0;
	position: relative;
	.page-hero-text {
		width: 50%;
		background: var(--navy);
		padding: 5vh 4vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: var(--off-white);
		h2 {
			font-family: var(--inter);
			font-size: 2rem;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			letter-spacing: 1.92px;
			text-transform: uppercase;
			color: var(--gold);
			margin-bottom: 1.5rem;
		}

		p {
			font-size: 1.5rem;
			line-height: 1.6;
			color: var(--off-white);
		}
	}
}





.page-hero-img {
  flex: 1;
  overflow: hidden;
}

.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Events View ───────────────────────────────────────────── */
.view-events {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.events-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--off-white);
}

.events-sidebar {
  width: 18%;
  min-width: 200px;
  padding: 24px 20px;
  background: var(--white);
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.events-sidebar label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 4px;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  gap: 8px;
  background: white;
}

.search-box input {
  border: none;
  outline: none;
  font-size: 14px;
  flex: 1;
  font-family: inherit;
  letter-spacing: 0.04em;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.filter-btn.gold { background: var(--gold); color: white; }
.filter-btn.navy { background: var(--navy); color: white; }
.filter-btn.teal { background: var(--teal); color: white; }

.powered-by {
  margin-top: auto;
  font-size: 12px;
  color: #888;
  text-align: center;
}

.events-grid {
  flex: 1;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 16px;
  overflow-y: auto;
  align-content: start;
}

.event-promo {
  grid-column: 1;
  grid-row: 1 / 3;
  background: white;
  border-radius: 8px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.event-promo h3 {
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 900;
  margin-bottom: 12px;
}

.event-promo p { font-size: 15px; color: #555; margin-bottom: 24px; }

.promo-btn {
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 24px;
  cursor: pointer;
  font-family: inherit;
}

.event-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.event-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.event-card-body {
  padding: 12px 14px;
}

.event-card-body h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.event-card-body .event-date { font-size: 12px; color: #777; }

/* ─── Newsletter View ───────────────────────────────────────── */
.view-newsletter {
  display: flex;
  height: 100%;
}

.newsletter-panel {
	width: 50%;
	background: var(--navy);
	padding: 8vh 4vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--white);
	h2 {
		font-family: var(--inter);
		font-size: 2rem;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 1.92px;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: 1.5rem;
	}

	p {
		font-size: 1.5rem;
		line-height: 1.6;
		color: var(--off-white);
	}	
}

.newsletter-form-panel {
	flex: 1;
	background: var(--white);
	padding: 8vh 5vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	#mc_embed_signup {
		form{
			h3{
				font-family: var(--teko);
				font-size: 2rem;
				font-style: normal;
				font-weight: 600;
				line-height: 32px; /* 100% */
				letter-spacing: 1.92px;
				text-transform: uppercase;
			}
			.asterisk{
				color: var(--red);
				font-size: 1.5rem;
			}
			.mc-field-group{
				margin-bottom: 1rem;
				label{
					font-family: var(--inter);
					font-size: 1.5rem;
					font-style: normal;
					font-weight: 700;
					line-height: 1.5rem; /* 100% */
					letter-spacing: 0.96px;				
				}
				input:not([type="submit"]){
					background: var(--grey);
					border: 1px solid black;
					margin-top: .5rem;
					font-size: 1.5rem;
					padding: 1rem;
				}
			}

			#mc-embedded-subscribe{
				background: var(--teal);
				color: var(--navy-dark);
				padding: 1rem 1.25rem;
				height: auto;
				border-radius: 0 16px;
				box-shadow: 0 4px 0 0 var(--navy-dark);
				font-size: 1.25rem;
				font-weight: 700;
				margin-top: 1rem;
			}
		}
	}

}

.newsletter-form-panel h3 {
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 28px;
  letter-spacing: 0.06em;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group label .req { color: #e44; }

.form-group input {
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  background: #f9f9f9;
}

.form-group input:focus { border-color: var(--teal); }

.subscribe-btn {
  background: var(--teal);
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
  border-radius: 4px;
}

.form-success {
  display: none;
  background: #eaf7f0;
  border: 1px solid #5cb85c;
  padding: 16px 20px;
  border-radius: 4px;
  color: #2e7d32;
  font-weight: 600;
  margin-top: 16px;
  max-width: 360px;
}

/* ─── Stories / Inspiration View ───────────────────────────── */
.view-stories,
.view-inspiration {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.stories-grid {
	flex: 1;
	display: flex;
	gap: 3rem;
	padding: 28px 32px;
	background: #e8ecef;
	overflow-x: auto;
	align-items: stretch;
	.story-card {
		flex: 0 0 calc(25% - 20px);
		min-width: 415px;
		background: white;
		border-radius: 0px 34px 0px 34px;
		box-shadow: 0px 4px 8px 3px #242E38;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		img {
			aspect-ratio: 415/311;
			width: 100%;
			object-fit: cover;
		}
		.story-card-body {
			padding: 18px;
			flex: 1;
			display: flex;
			flex-direction: column;
			h4 {
				text-transform: uppercase;
				margin-bottom: 10px;
				font-size: 1.125rem;
				font-weight: 700;
				line-height: 21.8px;
				letter-spacing: 0.0675rem;
			}
			p {
				font-size: 1rem;
				margin-top: 1rem;
			}
		}
		.story-card-footer {
			padding: 1rem;
			background-color: var(--teal);
			background-image: url(/wp-content/themes/mercer-cvb/kiosk-assets/mercer-arrow-dark.svg);
			background-position: 95% center;
			background-repeat: no-repeat;
			background-size: 2rem;
			color: var(--navy-dark);
			font-size: 1rem;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
		}
	}
}



/* ─── Things To Do View ─────────────────────────────────────── */
.view-things {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.things-body {
	flex: 1;
	padding: 28px 32px;
	background: #e8ecef;
	overflow: hidden;
	.category-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 3rem;
		height: 100%;
		.category-card {
			border-radius: 32px 32px 32px 0;
			overflow: hidden;
			position: relative;
			cursor: pointer;
			box-shadow: 0 4px 8px 3px var(--navy-dark);
			transition: transform 0.15s;
			.category-card img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 32px 32px 0 0;
			}	
			.category-card-label {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: var(--steel);
				background-image: url(/wp-content/themes/mercer-cvb/kiosk-assets/mercer-arrow-light.svg);
				background-position: 97.5% center;
				background-repeat: no-repeat;
				background-size: 2rem;
				color: white;
				font-size: clamp(12px, 0.9vw, 16px);
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.06em;
				padding: .75rem 1.5rem;
			}					
		}		
	}
}

.category-card:hover { transform: scale(1.02); }


/* ─── Map / Listing View ────────────────────────────────────── */
.view-map {
	display: flex;
	height: 100%;
	flex-direction: column;
	.map-header {
		background: var(--navy);
		color: white;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		.back-btn {
			background: var(--navy-dark);
			border: none;
			color: white;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 10px;
			font-family: inherit;
			padding: 16px 28px;
			width: 100%;
			text-align: left;
			border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		}

		h3 {
			font-size: 2rem;
			font-family: var(--inter);
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			padding: 16px 28px 4px;
		}		

		.back-btn .back-icon { font-size: 20px; line-height: 1; }
		.back-btn:hover { text-decoration: underline; }		
	}	
}

/* Full-width filter bar (sits in the navy header region, above listing + map) */
.map-filters {
	background: var(--navy);
	padding: 8px 28px 20px;
	display: flex;
	gap: 20px;
	align-items: flex-end;
	flex-shrink: 0;
	.map-filter-group {

		display: flex;
		flex-direction: column;
		gap: 8px;
		flex: 1;
		max-width: 360px;

		.map-filter-label {
			font-size: 1.5rem;
			font-weight: 700;
			color: #ffffff;
		}

		.map-filter-input {
			padding: .65rem .75rem;
			border: 1px solid #cdd5de;
			background: var(--white);
			color: var(--navy-dark);
			font-size: 1rem;
			font-family: inherit;
			width: 100%;
			box-sizing: border-box;
			font-size: 1.5rem;
			letter-spacing: 0.96px;
		}		

		.map-filter-input::placeholder { color: #9aa6b2; }
		.map-filter-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58, 124, 138, 0.25); }


	}	
}





.map-filter-actions {
	margin-left: auto;
	display: flex;
	gap: 1rem;
	.filter-action-btn {
		padding: 1rem 1.5rem;
		border: none;
		font-size: 1rem;
		font-weight: 700;
		font-family: inherit;
		cursor: pointer;
		border-radius: 0px 16px 0px 16px;
		white-space: nowrap;
		box-shadow: 0 4px 0 0 var(--navy-dark);
		color: var(--navy-dark);

	}

	.filter-action-btn.apply { background: var(--teal); }
	.filter-action-btn.clear { background: var(--gold); }	
}



.map-body {
	flex: 1;
	display: flex;
	gap: 0px;
	padding: 14px;
	background: #fff;
	overflow: hidden;
	min-height: 0;
	.map-sidebar {
		width: 30%;
		min-width: 300px;
		max-width: 420px;
		background: var(--grey);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-height: 0;
	}	
}



.map-results-bar {
	display: flex;
	align-items: center;
	padding: 16px 18px 10px;
	flex-shrink: 0;
	span {
		font-size: 19px;
		font-weight: 800;
		color: var(--navy);
	}	
}

/* Listing + custom scrollbar sit side by side */
.map-listing-wrap {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: stretch;
	padding-right: 16px;   /* grey shows to the right of the scrollbar, as in the design */
	.map-listing {
		flex: 1;
		min-height: 0;            /* lets the flex child scroll instead of growing the sidebar */
		overflow-y: auto;
		overflow-x: hidden;
		padding: 4px 0 10px;
		/* Native scrollbar is hidden — the custom .map-scrollbar widget drives scrolling */
		scrollbar-width: none;
	}
	.map-listing::-webkit-scrollbar { width: 0; height: 0; }

}


/* ─── Custom scrollbar widget ──────────────────────────────────────────────
   One continuous navy capsule running the full height; white circular buttons
   sit on top of it at each end (navy triangles), teal pill thumb travels in
   the middle. The navy extends behind/around the arrows. */
.map-scrollbar {
	flex-shrink: 0;
	width: 34px;
	background: var(--navy);
	border-radius: 999px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4px 0;
	margin-bottom: 2rem;
	.scroll-arrow {
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: #fff;
		color: var(--navy);
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
		transition: background 0.15s;
	}
	.scroll-arrow:hover { background: #eef2f4; }
	.scroll-arrow:active { background: #dde5e9; }

	.scroll-track {
		position: relative;
		flex: 1;
		width: 100%;
		min-height: 30px;
		margin: 6px 0;
		cursor: pointer;
	}

	.scroll-thumb {
		position: absolute;
		left: 5px;
		right: 5px;
		top: 0;
		min-height: 36px;
		background: var(--teal);
		border-radius: 999px;
		cursor: grab;
		touch-action: none;
	}

	.scroll-thumb:active { cursor: grabbing; background: var(--teal-dark); }

}

.map-scrollbar.is-idle { visibility: hidden; }


.listing-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 98px;
	margin: 0 1.5rem 2rem 1rem;       /* extra left margin so the photo can pop out */
	padding: 14px 1rem 14px calc(133px + 1.5rem);  /* left room for the overclapping photo + clearance */
	background: #f5f5f2;
	border-radius: 0px 32px 0px 32px;
	box-shadow: 0 4px 8px 3px var(--navy-dark);
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
	overflow: hidden;
	img {
		position: absolute;
		left: 0px;
		top: 0px;
		bottom: 0px;
		aspect-ratio: 133/141;
		width: 133px;
		object-fit: cover;
		z-index: 2;
	}	
}

.listing-item:has(img.no-image){
	display: none;
}

.listing-item:hover { box-shadow: 0 11px 26px rgba(30, 45, 60, 0.30); transform: translateY(-1px); }
.listing-item.active { box-shadow: 0 0 0 2px var(--teal), 0 7px 16px rgba(30, 45, 60, 0.20); }

.listing-item-info { 
	min-width: 0; 
	.listing-loc {
		font-size: 12px;
		color: #6b7785;
		line-height: 1.4;
		margin-bottom: 3px;
	}	
	h5 {
		font-size: 14px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		line-height: 1.3;
		color: var(--navy);
	}	
}

.map-area {
	flex: 1;
	position: relative;
	overflow: hidden;
	#leaflet-map {
		width: 100%;
		height: 100%;
	}  
}



/* Blue-tinted map tiles to match the design */
#leaflet-map .leaflet-tile-pane {
  filter: hue-rotate(158deg) saturate(0.85) brightness(0.92);
}

/* Black teardrop marker — strip Leaflet's default divIcon box */
.black-pin {
  background: transparent;
  border: none;
}
.black-pin svg { display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }

/* ─── Detail Panel ──────────────────────────────────────────── */
.detail-panel {
	width: 50%;
	min-width: 280px;
	max-width: 520px;
	background: var(--grey);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 24px;
	border-radius: 12px;
	.back-to-list {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--steel);
		cursor: pointer;
		margin-bottom: 20px;
		background: none;
		border: none;
		font-family: inherit;
		padding: 0;
	}	
	h4 {
		font-family: var(--inter);
		font-size: 2rem;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 1.92px;
		text-transform: uppercase;
	}	
	.detail-section {
		margin-bottom: 16px;
		.label {
			font-family: var(--teko);
			font-size: 2rem;
			font-style: normal;
			font-weight: 600;
			line-height: 2rem; /* 100% */
			letter-spacing: 1.92px;
			text-transform: uppercase;
			margin-top: 2rem;
		}
		p,
		a,
		button{
			font-size: 1.5rem;
			color: #333;
			line-height: 1.5;
		}
		button{
			word-break: break-all;
		}
		a { color: var(--teal); text-decoration: none; }
	}	
	.send-to-phone-btn {
		margin-top: 2rem;
	}
}



/* ─── Loading ───────────────────────────────────────────────── */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #888;
  font-size: 16px;
  gap: 12px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ddd;
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ─── Send to Phone Button ──────────────────────────────────── */
.send-to-phone-btn {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
	margin-left: auto;
	flex-shrink: 0;
	background: var(--teal);
	color: var(--navy-dark);
	padding: 1rem 1.25rem;
	height: auto;
	border-radius: 0 16px;
	box-shadow: 0 4px 0 0 var(--navy-dark);
	font-size: 1.25rem;
	font-weight: 700;
}


/* ─── QR Modal ──────────────────────────────────────────────── */
#qr-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.qr-modal-card {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 36px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  min-width: 300px;
}
.qr-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #888;
  line-height: 1;
}
.qr-modal-close:hover { color: #333; }
.qr-modal-label {
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.qr-modal-hint {
  font-size: clamp(11px, 0.85vw, 14px);
  color: #888;
  margin: 0;
}
#qr-modal-canvas img,
#qr-modal-canvas canvas {
  display: block;
}

/* ─── Inspiration Social Screen ─────────────────────────────── */
.inspiration-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(24px, 4vw, 60px);
}

.inspiration-social-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
}

.inspiration-social-text h2 {
  font-size: clamp(28px, 3vw, 48px);
  color: var(--navy);
}

.inspiration-social-text p {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #555;
  line-height: 1.6;
}

.inspiration-qr-btn {
  margin-left: 0;
  align-self: flex-start;
  padding: 14px 28px;
  font-size: clamp(14px, 1.1vw, 18px);
}

.inspiration-qr-preview {
  flex-shrink: 0;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

/* ─── Detail QR Link Buttons ────────────────────────────────── */
.detail-qr-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: var(--teal);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  font-family: inherit;
}
.detail-qr-link:hover { color: var(--teal-dark); }

/* ─── Inline Post Reader ────────────────────────────────────── */
.post-reader-content {
  flex: 1;
  overflow-y: auto;
  padding: clamp(20px, 2.5vw, 48px) clamp(24px, 4vw, 80px);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--text-dark);
  background: white;
}
.post-reader-content h1,
.post-reader-content h2,
.post-reader-content h3 { margin: 1.2em 0 0.5em; color: var(--navy); }
.post-reader-content p  { margin: 0 0 1em; }
.post-reader-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.post-reader-content ul,
.post-reader-content ol  { padding-left: 1.5em; margin: 0 0 1em; }
.post-reader-content a   { color: var(--teal); cursor: pointer; }

/* ─── Story Reader ──────────────────────────────────────────── */
.story-reader {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  inset: 0;
  background: white;
  z-index: 20;
}

.story-reader-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--navy);
  flex-shrink: 0;
  .back-btn{
	background: none;
	appearance: none;
	color: var(--white);
  }
}

.story-reader-title {
  color: white;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-reader iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 3px; }