/* ============================================================
   /unseen-japan-tours/ landing page — native, Elementor-free.
   Loads only on this page (see inc/bootstrap.php).
   ============================================================ */

.uj-tours {
	font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
}

.uj-tours h2,
.uj-tours h1 {
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.uj-tours-hero {
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
	padding: 2.25rem 1.25rem 2.5rem;
}
.uj-tours-hero__inner {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.uj-tours-hero__eyebrow {
	margin: 0 0 0.5rem;
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #B3421D;
}
.uj-tours-hero__headline {
	margin: 0 0 0.5rem;
	font-size: clamp(1.625rem, 3.6vw, 2.5rem);
	font-weight: 600;
	color: #1f2937;
	line-height: 1.1;
}
.uj-tours-hero__subhead {
	margin: 0 0 1rem;
	font: 600 clamp(1.125rem, 2vw, 1.4rem)/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
}
.uj-tours-hero__lede {
	margin: 0 0 1.75rem;
	color: #374151;
	max-width: 56ch;
}
.uj-tours-hero__cta {
	display: inline-block;
	padding: 0.875rem 2rem;
	background: #B3421D;
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	font: 600 1rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-tours-hero__cta:hover {
	background: #8E331A;
	color: #fff;
	transform: translateY(-1px);
}
.uj-tours-hero__trust {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: #6b7280;
}
.uj-tours-hero__trust strong {
	color: #1f2937;
	font-weight: 700;
}
.uj-tours-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Single-column hero variant: no side image, narrower copy column.
   Used by prose pages like /privacy-policy/ where the page is mostly
   long-form text and a flanking image would feel out of place. */
.uj-tours-hero__inner--single {
	display: block !important;
	max-width: 720px;
	margin: 0 auto;
}

/* ------------------------------------------------------------
   Generic section + alt
   ------------------------------------------------------------ */
.uj-tours-section {
	padding: 2rem 1.25rem;
}
.uj-tours-section--alt {
	background: #f9fafb;
}
.uj-tours-section__inner {
	max-width: 980px;
	margin: 0 auto;
}
.uj-tours-section__inner--narrow {
	max-width: 720px;
}
.uj-tours-section__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	color: #B3421D;
	line-height: 1.15;
}
/* H3 directly inside a tours-section inner: prose-page sub-heading style.
   Scoped to direct children so it doesn't fight more-specific component
   H3 rules nested deeper (e.g. .uj-tours-services__title inside service
   cards, FAQ titles inside details elements). */
.uj-tours-section__inner > h3 {
	margin: 1.25rem 0 0.5rem;
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #1f2937;
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.uj-tours-section p {
	margin: 0 0 0.75rem;
	color: #374151;
}
.uj-tours-section__valueprop {
	margin: 1rem 0 0;
	padding-left: 1rem;
	border-left: 4px solid #B3421D;
	color: #1f2937;
}

.uj-tours-bullets {
	margin: 0.75rem 0 0.75rem;
	padding: 0 0 0 1.25rem;
}
.uj-tours-bullets li {
	margin: 0.25rem 0;
	color: #374151;
}

/* ------------------------------------------------------------
   Testimonials grid
   ------------------------------------------------------------ */
.uj-testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.uj-testimonial {
	margin: 0;
	padding: 1.5rem 1.5rem 1.25rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #B3421D;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.uj-testimonial blockquote {
	margin: 0 0 0.875rem;
}
.uj-testimonial blockquote p {
	margin: 0;
	font: italic 1rem/1.55 Georgia, serif;
	color: #1f2937;
}
.uj-testimonial figcaption {
	font-size: 0.8125rem;
	line-height: 1.4;
}
.uj-testimonial figcaption strong {
	color: #B3421D;
	display: block;
}
.uj-testimonial figcaption span {
	color: #6b7280;
}

/* ------------------------------------------------------------
   Inquiry form
   ------------------------------------------------------------ */
.uj-tours-form {
	margin: 1.5rem 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.uj-tours-form .forminator-button-submit,
.uj-tours-form button[type="submit"] {
	display: inline-block !important;
	padding: 0.875rem 2rem !important;
	background: #B3421D !important;
	color: #fff !important;
	font: 600 1rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	text-decoration: none !important;
	border-radius: 999px !important;
	border: 0 !important;
	cursor: pointer !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	min-height: 0 !important;
	transition: background 0.15s ease;
}
.uj-tours-form .forminator-button-submit:hover,
.uj-tours-form button[type="submit"]:hover {
	background: #8E331A !important;
}
.uj-tours-disclaimer {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: #6b7280;
}

/* ------------------------------------------------------------
   Service grid: 2x2 (or 4x1 on widest) layout of what we offer
   ------------------------------------------------------------ */
.uj-tours-services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.uj-tours-services__card {
	margin: 0;
	padding: 1.5rem 1.5rem 1.375rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 4px solid #B3421D;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.uj-tours-services__title {
	margin: 0 0 0.5rem;
	font: 600 1.0625rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	letter-spacing: 0;
}
.uj-tours-services__body {
	margin: 0;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------
   "How it works" — 4-step horizontal process row.
   Numbered badge + step label + one-sentence body per card.
   Mobile collapses to one column (see media query below).
   Card chrome mirrors .uj-tours-services__card for component
   family consistency.
   ------------------------------------------------------------ */
.uj-tours-process {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
.uj-tours-process__step {
	margin: 0;
	padding: 1.5rem 1.25rem 1.375rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.uj-tours-process__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #B3421D;
	color: #fff;
	font: 700 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin-bottom: 0.75rem;
}
.uj-tours-process__label {
	margin: 0 0 0.5rem;
	font: 600 1.0625rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	letter-spacing: 0;
}
.uj-tours-process__body {
	margin: 0;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------
   Tour-guides grid: 3 cards with a circular portrait + bio.
   Mobile collapses to a single column (see media query below).
   Card chrome mirrors .uj-tours-services__card so the two grids
   feel like part of the same component family.
   ------------------------------------------------------------ */
.uj-tours-guides {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.uj-tours-guides__card {
	margin: 0;
	padding: 1.5rem 1.25rem 1.375rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	text-align: center;
}
.uj-tours-guides__photo-wrap {
	margin: 0 auto 0.875rem;
	width: 140px;
	height: 140px;
}
.uj-tours-guides__photo {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.uj-tours-guides__name {
	margin: 0 0 0.625rem;
	font: 600 1.125rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	letter-spacing: 0;
}
.uj-tours-guides__bio {
	margin: 0;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.55;
	text-align: left;
}

/* ------------------------------------------------------------
   FAQ: <details> blocks
   ------------------------------------------------------------ */
.uj-tours-faq {
	margin-top: 1.5rem;
}
.uj-tours-faq__item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 0.625rem;
	padding: 0 1.125rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.uj-tours-faq__item[open] {
	border-color: #d1d5db;
}
.uj-tours-faq__q {
	cursor: pointer;
	padding: 1rem 0;
	font: 600 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	list-style: none;
	position: relative;
	padding-right: 1.75rem;
}
.uj-tours-faq__q::-webkit-details-marker { display: none; }
.uj-tours-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.375rem;
	font-weight: 400;
	color: #B3421D;
	line-height: 1;
	transition: transform 0.15s ease;
}
.uj-tours-faq__item[open] .uj-tours-faq__q::after {
	content: "−";
}
.uj-tours-faq__a {
	padding: 0 0 1rem;
}
.uj-tours-faq__a p {
	margin: 0;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------
   Testimonials "show more" toggle
   ------------------------------------------------------------ */
.uj-testimonials-more {
	margin-top: 1rem;
}
.uj-testimonials-more__toggle {
	cursor: pointer;
	display: inline-block;
	padding: 0.625rem 1.25rem;
	background: transparent;
	color: #B3421D;
	border: 1.5px solid #B3421D;
	border-radius: 999px;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, color 0.15s ease;
	list-style: none;
}
.uj-testimonials-more__toggle::-webkit-details-marker { display: none; }
.uj-testimonials-more__toggle:hover {
	background: #B3421D;
	color: #fff;
}
/* Swap the visible label based on open state. Both labels are in the DOM
   for accessibility; CSS picks which one to show. */
.uj-testimonials-more__label--open { display: none; }
.uj-testimonials-more[open] .uj-testimonials-more__label--closed { display: none; }
.uj-testimonials-more[open] .uj-testimonials-more__label--open { display: inline; }
.uj-testimonials--overflow {
	margin-top: 1.5rem;
}

/* ------------------------------------------------------------
   Lead-magnet newsletter section: slightly more "callout" feel
   than a plain section so it reads as the final ask, not filler.
   ------------------------------------------------------------ */
.uj-tours-section--lead-magnet {
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */
@media (max-width: 860px) {
	.uj-tours-hero { padding: 1.75rem 1rem 2rem; }
	.uj-tours-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.uj-tours-section { padding: 1.5rem 1rem; }
	.uj-testimonials { grid-template-columns: 1fr; gap: 1rem; }
	.uj-tours-services { grid-template-columns: 1fr; gap: 1rem; }
	.uj-tours-guides { grid-template-columns: 1fr; gap: 1rem; }
	.uj-tours-process { grid-template-columns: 1fr; gap: 1rem; }
	.uj-tours-form { padding: 1.25rem; }
}

/* ------------------------------------------------------------
   Tours thank-you page
   ------------------------------------------------------------ */
.uj-tours-thanks-hero {
	text-align: center;
}
.uj-tours-thanks-hero__inner {
	display: block !important;
	max-width: 720px;
	margin: 0 auto;
}
.uj-tours-thanks-hero__check {
	margin: 0 auto 1.25rem;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(179, 66, 29, 0.15);
}
.uj-tours-thanks-hero .uj-tours-hero__lede {
	margin-left: auto;
	margin-right: auto;
}
.uj-tours-hero__cta--ghost {
	background: transparent !important;
	color: #B3421D !important;
	border: 2px solid #B3421D !important;
	padding: 0.75rem 1.75rem !important;
}
.uj-tours-hero__cta--ghost:hover {
	background: #B3421D !important;
	color: #fff !important;
}

/* Partner cards grid */
.uj-partners {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.uj-partner {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.uj-partner:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	border-color: #d1d5db;
}
.uj-partner__image-wrap {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f3f4f6;
	overflow: hidden;
}
.uj-partner__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.uj-partner__cat {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: #B3421D;
	color: #fff;
	font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 3px;
}
.uj-partner__body {
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.uj-partner__title {
	margin: 0 0 0.5rem;
	font: 700 1.125rem/1.3 Georgia, serif;
	color: #B3421D;
}
.uj-partner__desc {
	margin: 0 0 1.25rem;
	color: #4b5563;
	font-size: 0.9375rem;
	line-height: 1.5;
	flex: 1;
}
.uj-partner__cta {
	display: inline-block;
	align-self: flex-start;
	padding: 0.625rem 1.25rem;
	background: #B3421D;
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-partner__cta:hover {
	background: #8E331A;
	transform: translateY(-1px);
}

/* Affiliate disclosure strip */
.uj-tours-disclosure {
	padding: 1.5rem 1.25rem 2rem;
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
}
.uj-tours-disclosure p {
	margin: 0;
	font-size: 0.8125rem;
	color: #6b7280;
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 720px) {
	.uj-partners { grid-template-columns: 1fr; gap: 1rem; }
}

/* Mid-page figure break — used between sections on the Nightlife Tours
   page (and available to other Tours pages). Image fills the inner
   container with the same max width / responsive behaviour as the rest
   of the layout; caption is small, muted, centered. */
.uj-tours-section--figure {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.uj-tours-figure {
	margin: 0;
}
.uj-tours-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.uj-tours-figure figcaption {
	margin-top: 0.625rem;
	font-size: 0.875rem;
	font-style: italic;
	color: #6b7280;
	text-align: center;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Insider hub (/insider/) — page-specific fixes layered on top of the
   inherited .uj-category-page__insider-* + .uj-tours-section
   components so the hub reads as one continuous flow rather than a
   stack of independently-spaced blocks.
   ------------------------------------------------------------------ */

/* Breathing room between the salmon pitch box's CTA buttons and the
   "(Issues creating an account...)" fineprint underneath. Default
   .uj-category-page__insider-fineprint has no top margin, so the
   fineprint hugged the buttons. */
.uj-insider-hub .uj-category-page__insider-fineprint {
	margin-top: 0.875rem !important;
}

/* The pitch blurb has margin-bottom: 2.25rem and the .uj-tours-section
   that follows has padding: 3.5rem 1.25rem (~56px top), which compounded
   to a too-large gap before "What Insider gets you". Collapse the
   section's top padding by targeting the modifier class directly.
   (Adjacent-sibling `+` doesn't work here because the hidden
   .uj-category-page__member-status aside and the auth-swap <script>
   sit between the blurb and the section.) Chained .uj-tours-section
   .uj-insider-hub__benefits selector raises specificity above the base
   .uj-tours-section padding rule. */
.uj-tours-section.uj-insider-hub__benefits {
	padding-top: 0;
}

/* Same problem at the bottom: the pagination nav and the bottom subscribe
   CTA were too close. Bump the CTA away from the pagination. */
.uj-insider-hub__bottom-cta {
	margin-top: 3rem !important;
}

/* "Not ready to subscribe?" free-newsletter pitch at the bottom of the
   hub. Mirrors the .uj-insider-free-cta block injected at the end of
   Insider posts (defined in single-article.css). Copied here so /insider/
   doesn't need to enqueue single-article.css for one component. */
.uj-insider-free-cta {
	margin: 1.5rem 0 0;
	padding: 1.75rem 1.75rem 1.5rem;
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
	border: 1px solid #F0C7B3;
	border-left: 4px solid #B3421D;
	border-radius: 8px;
}
.uj-insider-free-cta__eyebrow {
	margin: 0 0 0.375rem !important;
	font: 700 0.6875rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	color: #B3421D !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.uj-insider-free-cta__heading {
	margin: 0 0 0.625rem !important;
	font: 600 clamp(1.25rem, 2.4vw, 1.625rem)/1.2 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif !important;
	color: #B3421D !important;
}
.uj-insider-free-cta__body {
	margin: 0 0 1rem !important;
	color: #1f2937 !important;
	font: 500 1rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Strip the inner newsletter block's default chrome (grey panel + red
   left bar) so the form merges into the surrounding pill cleanly. Same
   trick used inside .uj-insider-free-cta on Insider posts. */
.uj-insider-free-cta .uj-cta--newsletter {
	background: transparent !important;
	border-left: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}