/*
 * KA House Tour styles.
 *
 * Everything is inside ".kat" so it can't affect the rest of your site.
 * Fonts are inherited from your theme, so the tour matches the page it's on.
 * Colors come from the Kidding Around brand guide; change them here in one place.
 */
.kat {
	--kat-navy: #003E51;
	--kat-orange: #FF6900;
	--kat-orange-dark: #FC4C02;
	--kat-orange-text: #B83A00;   /* Dark orange, readable on light backgrounds */
	--kat-blue: #5BC2E7;
	--kat-blue-text: #1C7FA3;     /* Darker sky blue, readable on white */
	--kat-blue-soft: #E6F6FC;
	--kat-orange-soft: #FFF1E6;
	--kat-gold: #FBD872;
	--kat-gold-soft: #FFFBEA;

	color: var(--kat-navy);
	margin: 1.5em 0;
	font-size: 16px;  /* A fixed base size, so the tour looks the same whatever the theme's text size */
	line-height: 1.5;
	container-type: inline-size; /* Lets sections adapt to the space the theme gives the tour */
	container-name: kat;
}

.kat *,
.kat *::before,
.kat *::after {
	box-sizing: border-box;
}

.kat h2,
.kat h3,
.kat p {
	color: inherit;
}

/*
 * THEME RESETS
 * Themes style every list, heading, paragraph and button on a page. Inside the
 * tour, we switch those off so only the tour's own styles apply. (Without this,
 * a theme's list bullets show up on the tags and cards, headings get oversized,
 * and buttons may be forced into capital letters.)
 */
.kat ul,
.kat ol {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.kat li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.kat li::before,
.kat li::after {
	content: none !important;
}

.kat li::marker {
	content: none !important;
}

.kat h2,
.kat h3 {
	margin: 0;
	padding: 0;
}

/* Tour titles keep your theme's own H2 look (font, size, spacing), so they
   match the headings in your articles. Everything else gets a clean reset. */
.kat h2:not(.kat-tour__name),
.kat h3 {
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

.kat p {
	margin: 0;
	line-height: inherit;
}

.kat button,
.kat input,
.kat textarea {
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.2;
	min-height: 0;
	box-shadow: none;
}

.kat summary {
	list-style: revert; /* Keep the little triangle on "Before you go" */
	text-transform: none;
}

/* Some themes use light-weight headings; keep the tour's hierarchy clear on any theme. */
.kat h2:not(.kat-tour__name),
.kat h3,
.kat strong,
.kat .kat-bar__title {
	font-weight: 700;
}

/* ---------- Buttons ---------- */
.kat .kat-btn {
	font: inherit;
	font-weight: bold;
	display: inline-block;
	padding: 11px 20px;
	border: 2px solid var(--kat-orange);
	border-radius: 999px;
	background: var(--kat-orange);
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
}

.kat .kat-btn:hover {
	background: var(--kat-orange-dark);
	border-color: var(--kat-orange-dark);
	color: #fff;
}

.kat .kat-btn--ghost {
	background: #fff;
	color: var(--kat-navy);
}

.kat .kat-btn--ghost:hover {
	background: var(--kat-orange-soft);
	color: var(--kat-navy);
}

.kat .kat-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Hero ---------- */
.kat .kat-hero {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 28px 30px;
	border-radius: 20px;
	background: linear-gradient(135deg, #003E51, #062a36);
	color: #fff;
}

.kat .kat-hero__title {
	margin: 0 0 10px;
	font-size: 2.3em !important;
	line-height: 1.1;
	color: #fff !important;
}

.kat .kat-hero__title span {
	color: var(--kat-orange);
}

.kat .kat-hero__sub {
	margin: 0 0 14px;
	font-size: 1.1em;
	line-height: 1.4;
	max-width: 32em;
}

/* The 1, 2, 3 steps: a real sequence, so a numbered list. */
.kat .kat-hero__steps {
	list-style: none;
	counter-reset: kat-step;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-weight: bold;
}

.kat .kat-hero__steps li {
	counter-increment: kat-step;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.kat .kat-hero__steps li::before {
	content: counter(kat-step) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--kat-orange);
	font-size: 0.85em;
}

/* Presenting sponsor: name and offer only on the page (the logo is in the email). */
.kat .kat-sponsor {
	flex: none;
	width: 260px;
	padding: 14px 16px;
	border: 2px solid var(--kat-gold);
	border-radius: 16px;
	background: var(--kat-gold-soft);
	color: var(--kat-navy);
	text-align: center;
}

.kat .kat-sponsor p {
	margin: 0;
}

.kat .kat-sponsor__by {
	font-size: 0.8em;
	font-weight: bold;
	color: #557A88 !important;
}

.kat .kat-sponsor__name {
	font-size: 1.35em;
	font-weight: bold;
	line-height: 1.2;
	margin: 2px 0 4px !important;
}

.kat .kat-sponsor__name a {
	color: var(--kat-navy);
	text-decoration: none;
}

.kat .kat-sponsor__name a:hover {
	text-decoration: underline;
}

.kat .kat-sponsor__offer {
	font-size: 0.9em;
	line-height: 1.4;
}

/* The presenting sponsor's button, e.g. "Get a free trial". Navy, so it's
   clearly the sponsor's and doesn't compete with the tour's orange buttons. */
.kat .kat-sponsor__btn {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--kat-navy);
	color: #fff !important;
	font-size: 0.92em;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2;
}

.kat .kat-sponsor__btn:hover {
	background: #002A38;
	color: #fff !important;
}

/* ---------- Sections ---------- */
.kat .kat-section {
	margin-top: 30px;
}

.kat .kat-section__title {
	margin: 0;
	font-size: 1.5em !important;
	line-height: 1.2;
}

.kat .kat-section__sub {
	margin: 0.2em 0 0.9em;
}

/* ---------- Jump to a tour ---------- */
.kat .kat-jump {
	margin-top: 26px;
}

.kat .kat-jump__label {
	margin-bottom: 8px !important;
	font-weight: bold;
}

.kat .kat-jump__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kat .kat-jump__links a {
	display: block;
	padding: 10px 16px;
	border-radius: 14px;
	background: var(--kat-blue-soft);
	color: var(--kat-navy);
	font-weight: bold;
	line-height: 1.2;
	text-decoration: none;
}

.kat .kat-jump__links a:hover {
	background: #D3EEF9;
}

.kat .kat-jump__links a span {
	display: block;
	font-size: 0.85em;
	font-weight: normal;
	opacity: 0.8;
}

/* ---------- "Two ways to tour" ---------- */
.kat .kat-ways {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 22px;
}

.kat .kat-way {
	padding: 14px 18px;
	border: 2px solid var(--kat-blue-soft);
	border-radius: 16px;
	background: #fff;
}

.kat .kat-way__title {
	margin: 0 0 4px;
	font-size: 1.1em !important;
}

.kat .kat-way p {
	line-height: 1.45;
}

.kat .kat-way__heart {
	color: var(--kat-orange);
}

/* ---------- Tour sections: a header with buttons, then the tour's houses ---------- */
.kat .kat-tour {
	margin-top: 56px; /* Clear space between tours */
	scroll-margin-top: 90px; /* Leaves room for sticky site headers when we scroll here */
}

.kat .kat-tour__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 16px;
	padding: 18px 20px;
	border: 2px solid var(--kat-blue-soft);
	border-radius: 16px;
	background: var(--kat-blue-soft); /* Each tour's header is its own light blue panel */
}

/* The tour the family has chosen: the panel turns orange. */
.kat .kat-tour.is-chosen .kat-tour__head {
	border-color: var(--kat-orange);
	background: var(--kat-orange-soft);
}

.kat .kat-tour__name {
	/* No size set here on purpose: the theme's H2 size applies. */
	color: var(--kat-navy);
}

.kat .kat-tour__meta {
	margin-top: 4px !important;
}

/* "Tap ♥ on any house to build your own tour": a thin orange strip just under
   each tour's box, right above its houses. It's a note (not a button), with
   the same orange heart that's on the house cards. */
.kat .kat-tour__tip {
	margin: -4px 0 14px !important;
	padding: 11px 14px;
	border-left: 5px solid var(--kat-orange);
	border-radius: 10px;
	background: var(--kat-orange-soft);
	color: var(--kat-navy);
	font-weight: bold;
	line-height: 1.35;
}

.kat .kat-tour__tip svg {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 3px;
	vertical-align: -4px; /* Sits the heart on the same line as the words */
	fill: var(--kat-orange);
}

.kat .kat-tour__hint {
	margin: -4px 0 14px !important;
	font-size: 0.95em;
	line-height: 1.45;
}

.kat .kat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- Playlist ---------- */
.kat .kat-playlist {
	margin-top: 30px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 24px;
	align-items: center;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--kat-blue-soft);
}

.kat .kat-playlist p {
	margin: 0.3em 0 0;
	line-height: 1.45;
}

.kat .kat-playlist__player {
	width: 100%;
	border: 0;
	border-radius: 12px;
}

/* ---------- House cards ----------
 * Compact rows at every screen size: a small photo on the left, the details
 * on the right, and a heart button. On wide screens they sit two or three
 * across; on phones, one per row. */
.kat .kat-grid {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	/* As many columns as fit, each at least 300px wide. */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	align-items: stretch; /* Cards in the same row match in height, so rows line up neatly */
}

.kat .kat-card {
	margin: 0;
	display: flex;
	flex-direction: row;
	border: 2px solid var(--kat-blue-soft);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}

.kat .kat-card.is-picked {
	border-color: var(--kat-orange);
}

/* Cards without a photo simply start with the text, with a colored stripe on the left. */
.kat .kat-card--nophoto {
	border-left: 6px solid var(--kat-blue);
}

.kat .kat-card--nophoto.is-picked {
	border-left-color: var(--kat-orange);
}

.kat .kat-card__photo {
	position: relative;
	flex: 0 0 120px;
	min-height: 120px;
	align-self: stretch; /* The photo runs the full height of the card */
	background: var(--kat-blue-soft);
}

/* Photos fill their box neatly, cropping the edges instead of stretching. */
.kat .kat-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kat .kat-card__badges {
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.kat .kat-card__badges--inline {
	position: static;
	margin-bottom: 6px;
}

.kat .kat-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: bold;
}

.kat .kat-badge--fan {
	background: var(--kat-gold);
	color: var(--kat-navy);
}

.kat .kat-badge--added {
	background: var(--kat-orange-soft);
	color: var(--kat-orange-text);
}

.kat .kat-card__body {
	flex: 1;
	min-width: 0; /* Lets long words wrap instead of widening the card */
	padding: 10px 12px;
	display: flex;
	flex-direction: column; /* Lets "Before you go" sit at the bottom of every card */
}

.kat .kat-card__body p {
	margin: 0;
}

.kat .kat-card__top {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.kat .kat-card__name {
	margin: 0;
	font-size: 1.02em !important;
	line-height: 1.2;
}

.kat .kat-card__place {
	margin-top: 2px !important;
	font-size: 0.85em;
	font-weight: bold;
	color: var(--kat-blue-text) !important;
}

.kat .kat-card__scare {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 5px 0 !important;
	font-size: 0.85em;
	font-weight: bold;
}

.kat .kat-dots {
	display: inline-flex;
	gap: 3px;
}

.kat .kat-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kat-blue-soft);
}

.kat .kat-dots i.on {
	background: var(--kat-orange);
}

.kat .kat-card__upcoming {
	display: inline-block;
	margin-bottom: 5px !important;
	padding: 1px 8px;
	border-radius: 8px;
	background: var(--kat-orange-soft);
	color: var(--kat-orange-text) !important;
	font-size: 0.8em;
	font-weight: bold;
}

.kat .kat-card__tags {
	list-style: none;
	margin: 0 0 5px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.kat .kat-card__tags li {
	margin: 0;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--kat-blue-soft);
	font-size: 0.76em;
}

/* Two lines of description on every card, so cards in a row stay even.
   Longer descriptions end with "…". */
.kat .kat-card__desc {
	margin-bottom: 4px !important;
	font-size: 0.9em;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kat .kat-card__details {
	margin-top: auto; /* Lines "Before you go" up along the bottom of each row */
	font-size: 0.88em;
}

.kat .kat-card__details summary {
	font-weight: bold;
	cursor: pointer;
	padding: 2px 0;
}

.kat .kat-card__details p {
	margin: 6px 0 0 !important;
	line-height: 1.45;
}

.kat .kat-card__details a {
	color: var(--kat-navy);
}

.kat .kat-card__report {
	color: #557A88 !important;
	font-size: 0.95em;
}

/* The heart button in the top corner of each card */
.kat .kat-heart {
	display: inline-flex;
	flex: none;
	align-self: flex-start;
	padding: 2px;
	border: 0;
	background: none;
	cursor: pointer;
}

.kat .kat-heart {
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 44px; /* A comfortable tap target */
}

.kat .kat-heart__label {
	font-size: 0.72em;
	font-weight: bold;
	color: var(--kat-orange-text);
	line-height: 1;
}

.kat .kat-heart svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--kat-orange);
	stroke-width: 2;
}

.kat .kat-heart[aria-pressed="true"] svg {
	fill: var(--kat-orange);
}

/* ---------- Sponsor cards in the house list ----------
 * Gold, with a "Sponsored" label, and no heart button, so a sponsor
 * is never mistaken for a house. Same compact row shape as the houses. */
.kat .kat-sponsorcard {
	margin: 0;
	display: flex;
	flex-direction: row;
	border: 2px solid var(--kat-gold);
	border-radius: 14px;
	overflow: hidden;
	background: var(--kat-gold-soft);
}

.kat .kat-sponsorcard__photo {
	position: relative;
	flex: 0 0 120px;
	min-height: 120px;
	align-self: stretch;
	background: var(--kat-gold);
}

.kat .kat-sponsorcard__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Without a photo, a gold stripe on the left, like photo-less house cards. */
.kat .kat-sponsorcard--nophoto {
	border-left: 6px solid var(--kat-gold);
}

.kat .kat-sponsorcard__body {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
}

.kat .kat-sponsorcard__body p {
	margin: 0;
}

.kat .kat-sponsorcard__label {
	font-size: 0.78em;
	font-weight: bold;
	color: #7A5B00 !important; /* Dark gold, readable on the light gold */
	margin-bottom: 2px !important;
}

.kat .kat-sponsorcard__name {
	margin: 0 0 4px;
	font-size: 1.02em !important;
	line-height: 1.2;
}

.kat .kat-sponsorcard__text {
	margin-bottom: 8px !important;
	font-size: 0.9em;
	line-height: 1.4;
}

.kat .kat-sponsorcard__btn {
	display: inline-block;
	margin-top: auto; /* Sits at the bottom of the card, in line with "Before you go" */
	align-self: flex-start;
	padding: 5px 14px;
	border: 2px solid var(--kat-navy);
	border-radius: 999px;
	background: #fff;
	color: var(--kat-navy) !important;
	font-size: 0.88em;
	font-weight: bold;
	text-decoration: none;
}

.kat .kat-sponsorcard__btn:hover {
	background: var(--kat-navy);
	color: #fff !important;
}

/* ---------- Presenting sponsor banner (middle and bottom of the tours) ---------- */
.kat .kat-presenter {
	margin-top: 44px;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	border: 2px solid var(--kat-gold);
	border-radius: 18px;
	background: var(--kat-gold-soft);
}

.kat .kat-presenter__logo {
	flex: none;
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kat .kat-presenter__logo img {
	display: block;
	max-width: 100%;
	max-height: 72px;
	height: auto;
	border-radius: 8px;
}

.kat .kat-presenter__text {
	flex: 1;
	min-width: 0;
}

.kat .kat-presenter__label {
	margin: 0 !important;
	font-size: 0.8em;
	font-weight: bold;
	color: #7A5B00 !important; /* Dark gold, readable on the light gold */
}

.kat .kat-presenter__name {
	margin: 2px 0 4px !important;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.15;
}

.kat .kat-presenter__offer {
	margin: 0 !important;
	line-height: 1.4;
}

.kat .kat-presenter__btn {
	flex: none;
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--kat-navy);
	color: #fff !important;
	font-weight: bold;
	text-decoration: none;
	line-height: 1.2;
}

.kat .kat-presenter__btn:hover {
	background: #002A38;
}

/* ---------- Thank-you after a route is sent (in the bottom bar) ---------- */
.kat .kat-thanks {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--kat-gold-soft);
}

.kat .kat-thanks p {
	margin: 0 !important;
	color: var(--kat-navy) !important;
	font-size: 0.95em;
	line-height: 1.35;
}

.kat .kat-thanks a {
	flex: none;
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--kat-navy);
	color: #fff !important;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

/* ---------- Bottom boxes ---------- */
.kat .kat-extras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 34px;
}

.kat .kat-extra {
	padding: 16px 20px;
	border-radius: 16px;
}

.kat .kat-extra h3 {
	margin: 0 0 0.3em;
	font-size: 1.15em !important;
}

.kat .kat-extra p {
	margin: 0 0 0.8em;
	line-height: 1.45;
}

.kat .kat-extra--submit {
	background: var(--kat-orange-soft);
}

.kat .kat-extra--guest {
	background: var(--kat-blue-soft);
}

/* ---------- The bar stuck to the bottom of the screen ---------- */
.kat .kat-bar {
	/* Pinned to the screen (not the page), so it stays visible while scrolling
	   even if the theme's page wrapper blocks "sticky" positioning. JavaScript
	   lines it up with the tour's column and lifts it above sticky ads. */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: transform 0.25s ease, opacity 0.25s ease;
	padding: 12px 20px;
	border-radius: 16px 16px 0 0;
	background: var(--kat-navy);
	color: #fff;
	box-shadow: 0 -4px 18px rgba(0, 62, 81, 0.25);
}

.kat .kat-bar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.kat .kat-bar__status {
	margin: 0;
	color: #fff !important;
	line-height: 1.25;
}

.kat .kat-bar__title {
	margin-right: 6px;
}

/* Left side of the bar: the tour name and count, with "Start over" beside them. */
.kat .kat-bar__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
	min-width: 0;
}

.kat .kat-bar__buttons {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* "Start over": a quiet text button, so it's there when needed but doesn't compete. */
.kat .kat-bar__reset {
	font: inherit;
	font-size: 0.9em;
	padding: 2px 0;
	border: 0;
	background: none;
	color: #fff;
	text-decoration: underline;
	opacity: 0.85;
	cursor: pointer;
}

.kat .kat-bar__reset:hover {
	opacity: 1;
}

.kat .kat-form {
	margin-top: 14px;
	max-width: 36em;
}

.kat .kat-form__label {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}

.kat .kat-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.kat .kat-form__email {
	font: inherit;
	flex: 1 1 220px;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	color: var(--kat-navy);
	background: #fff;
}

.kat .kat-form__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.kat .kat-form__check input {
	margin-top: 0.3em;
}

.kat .kat-form__status {
	margin: 10px 0 0;
	font-weight: bold;
	color: #fff !important;
}

.kat .kat-form__status.is-error {
	color: #FFC49E !important; /* Light orange, readable on navy */
}

.kat .kat-form__fine {
	margin: 8px 0 0;
	font-size: 0.85em;
	opacity: 0.85;
	color: #fff !important;
}

/* Words for screen readers only (for example, "the heart" next to a heart picture). */
.kat .kat-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The spam-trap field: moved off-screen so people never see it. */
.kat .kat-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* When the tour is scrolled off screen (for example, down in the site footer),
   the bar slides away so it doesn't cover the rest of the site. */
.kat .kat-bar.is-away {
	transform: translateY(120%);
	opacity: 0;
	pointer-events: none;
}

/* Leaves room under the last house so the bar never covers it (set by JavaScript). */
.kat.has-bar {
	padding-bottom: var(--kat-bar-space, 120px);
}

/* ---------- Apple Maps or Google Maps ----------
 * The page includes both. Normally only Google Maps shows. On iPhones, iPads
 * and Macs, tour.js adds "is-apple" to the tour, which swaps the main buttons
 * to Apple Maps and shows the small "Prefer Google Maps?" link. */
.kat .kat-maps--apple {
	display: none !important;
}

.kat.is-apple .kat-maps--apple {
	display: revert !important;
}

.kat.is-apple .kat-btn.kat-maps--apple {
	display: inline-block !important;
}

.kat.is-apple .kat-btn.kat-maps--google {
	display: none !important;
}

/* "Prefer Google Maps? Open this tour in Google Maps", inside the tour panel. */
.kat .kat-tour__alt {
	width: 100%;
	margin: 2px 0 0 !important;
	color: var(--kat-navy);
}

.kat .kat-tour__alt a {
	color: var(--kat-navy) !important;
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: var(--kat-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------- Keyboard focus: a clear outline for people not using a mouse ---------- */
.kat button:focus-visible,
.kat a:focus-visible,
.kat summary:focus-visible,
.kat input:focus-visible {
	outline: 3px solid var(--kat-blue);
	outline-offset: 2px;
}

/* The [hidden] attribute should always win over our display rules. */
.kat [hidden] {
	display: none !important;
}

/* =====================================================================
 * NARROW CONTENT COLUMNS
 * These respond to the width the theme gives the tour (not the screen),
 * so the hero and playlist stack neatly even in a narrow blog column.
 * ===================================================================== */
@container kat (max-width: 760px) {
	.kat .kat-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.kat .kat-sponsor {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 10px;
		text-align: left;
	}

	.kat .kat-sponsor__name {
		margin: 0 !important;
	}

	.kat .kat-sponsor__offer {
		flex-basis: 100%;
	}

	.kat .kat-playlist {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* =====================================================================
 * PHONES (screens 600px wide or narrower)
 * ===================================================================== */
@media (max-width: 600px) {
	/* Shorter hero: no 1-2-3 steps, sponsor becomes one compact strip. */
	.kat .kat-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 20px 18px;
	}

	.kat .kat-hero__title {
		font-size: 1.75em !important;
	}

	.kat .kat-hero__sub {
		margin: 0;
		font-size: 1em;
	}

	.kat .kat-hero__steps {
		display: none;
	}

	.kat .kat-sponsor {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 10px;
		padding: 10px 12px;
		text-align: left;
	}

	.kat .kat-sponsor__name {
		font-size: 1em;
		margin: 0 !important;
	}

	.kat .kat-sponsor__offer {
		flex-basis: 100%;
	}

	.kat .kat-ways {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.kat .kat-tour__head {
		padding: 14px 14px;
	}

	.kat .kat-tour__alt {
		text-align: center;
	}

	/* On phones, cap the tour titles in case the theme's H2 is very large. */
	.kat .kat-tour__name {
		font-size: 1.8em !important;
		line-height: 1.15 !important;
	}

	/* Sponsor banner: logo and text side by side, full-width button below. */
	.kat .kat-presenter {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.kat .kat-presenter__logo {
		width: 84px;
	}

	.kat .kat-presenter__logo img {
		max-height: 52px;
	}

	.kat .kat-presenter__text {
		flex-basis: calc(100% - 100px);
	}

	.kat .kat-presenter__btn,
	.kat .kat-thanks a {
		flex-basis: 100%;
		text-align: center;
	}

	.kat .kat-thanks {
		flex-wrap: wrap;
	}

	/* Jump links scroll sideways instead of stacking. */
	.kat .kat-jump__links {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 2px;
	}

	.kat .kat-jump__links a {
		flex: none;
	}


	.kat .kat-actions .kat-btn {
		flex: 1 1 100%;
	}

	.kat .kat-playlist {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 16px;
	}

	/* Cards: one per row, slightly smaller photo, and no tags to save space. */
	.kat .kat-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.kat .kat-card__photo,
	.kat .kat-sponsorcard__photo {
		flex-basis: 104px;
	}

	.kat .kat-card__tags {
		display: none;
	}

	.kat .kat-bar {
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); /* Clears the iPhone home bar */
		border-radius: 14px 14px 0 0;
	}

	.kat .kat-bar .kat-btn {
		padding: 9px 14px;
		font-size: 0.92em;
		white-space: nowrap;
	}

	.kat .kat-bar__status {
		font-size: 0.92em;
	}

	.kat .kat-bar__title {
		display: block;
		margin: 0;
		white-space: nowrap;
	}

	.kat .kat-bar__info {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.kat .kat-form__submit {
		flex: 1 1 100%;
	}
}

/* Respect people who've asked their device for less motion. */
@media (prefers-reduced-motion: reduce) {
	.kat .kat-bar {
		transition: none;
	}
}