/*
 * Tokiotours modern skin (Tier 1 facelift).
 * Loaded on top of style.min.css when the `tokiotours_modern_skin` option is on.
 * Compare live with ?modern=0 / ?modern=1. Removing this file + its enqueue reverts everything.
 */

/* ---------- Typography ---------- */
body,
button,
input,
select,
textarea {
	font-family: 'Outfit', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.page-header__heading-title {
	letter-spacing: .1em;
	font-weight: 600;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

[class*="__heading-title"] {
	letter-spacing: .08em;
	font-weight: 600;
}

/* ---------- Hero legibility ---------- */
.page-header__inner {
	position: relative;
}

.page-header__inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .05) 45%, rgba(0, 0, 0, .35) 100%);
	pointer-events: none;
}

.page-header__heading {
	z-index: 20;
}

.page-header__heading-border {
	border-radius: 2px;
}

/* ---------- Cards ---------- */
.tours__item,
.tours-related__item,
.tours-all__item,
.tours-category__item,
.archive-section__item,
.tag-section__item,
.search-all__item,
.blog-all__item {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
	transition: transform .25s ease, box-shadow .25s ease;
}

.tours__item:hover,
.tours-related__item:hover,
.tours-all__item:hover,
.tours-category__item:hover,
.archive-section__item:hover,
.tag-section__item:hover,
.search-all__item:hover,
.blog-all__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.blog-section__item,
.blog-section__item-thumbnail {
	border-radius: 16px;
	overflow: hidden;
}

.blog-section__item {
	box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
	transition: transform .25s ease, box-shadow .25s ease;
}

.blog-section__item:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

/* Touch devices never see hover states: keep the card action reachable. */
@media (hover: none) {
	.tours__item-hover,
	.tours-related__item-hover,
	.tours-all__item-hover,
	.tours-category__item-hover,
	.archive-section__item-hover,
	.tag-section__item-hover,
	.search-all__item-hover {
		opacity: 1;
	}
}

/* ---------- Buttons ---------- */
.button,
.tours-category__button-link,
.page-header__filter input[type="submit"],
input[type="submit"] {
	border-radius: 999px;
	transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.button:hover,
.tours-category__button-link:hover,
.page-header__filter input[type="submit"]:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.page-header__filter select {
	border-radius: 999px;
}

/* ---------- Imagery ---------- */
.block__gallery,
.block__gallery-inner,
.content-styling img,
.reviews__slide-picture {
	border-radius: 14px;
}

/* ---------- Carousel dots ---------- */
.slick-dots li button:before {
	font-size: 9px;
	color: #fff;
	opacity: .45;
}

.slick-dots li.slick-active button:before {
	color: #fff;
	opacity: 1;
}

/* ---------- Mobile: big, stacked hero filter controls ---------- */
@media only screen and (max-width: 1023px) {
	.page-header__filter ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.page-header__filter select {
		font-size: 17px !important;
		height: 54px !important;
		line-height: normal !important;
		padding: 0 44px 0 22px !important;
		width: min(320px, 84vw) !important;
		box-sizing: border-box !important;
	}

	.page-header__filter input[type="submit"],
	.page-header__filter input {
		font-size: 17px !important;
		height: 54px !important;
		padding: 0 22px !important;
		width: min(320px, 84vw) !important;
		box-sizing: border-box !important;
	}

	.page-header__filter a.button {
		font-size: 17px !important;
		height: 54px !important;
		padding: 0 22px !important;
		width: min(320px, 84vw) !important;
		box-sizing: border-box !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.page-header__filter ul li {
		margin-bottom: 14px;
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.tours__item,
	.tours-related__item,
	.tours-all__item,
	.tours-category__item,
	.archive-section__item,
	.blog-section__item,
	.blog-all__item,
	.button,
	.tours-category__button-link,
	input[type="submit"] {
		transition: none;
	}
}

/* ---------- Palette A: warm paper, vermillion, deep teal ---------- */
:root {
	--tt-paper: #FAF7F2;
	--tt-ink: #1D1D1F;
	--tt-verm: #EC0C43;
	--tt-teal: #0F6E56;
}

body {
	background-color: var(--tt-paper) !important;
}

/* Navigation always overlays hero photos: links stay white (theme default). */
body .site-header__wrapper .main-navigation .menu .current-menu-item,
body .site-header__wrapper .main-navigation .menu .current_page_item {
	background-color: var(--tt-verm) !important;
}

body .site-header__wrapper .main-navigation .menu .current-menu-item a,
body .site-header__wrapper .main-navigation .menu .current_page_item a {
	color: #fff !important;
}

/* Section headings: ink on paper. The hero title stays white over photos. */
[class*="__heading-title"] {
	color: var(--tt-ink) !important;
}

.page-header__heading-title {
	color: #fff !important;
}

/* The homepage tours grid floats up over the hero photo on desktop,
   so its heading needs to stay white there; on mobile it sits on paper. */
@media only screen and (min-width: 1024px) {
	.tours__heading-title {
		color: #fff !important;
		text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
	}
}

[class*="__heading-border"] {
	background-color: var(--tt-verm) !important;
	border-color: var(--tt-verm) !important;
}

.page-header__heading-border {
	background-color: #fff !important;
	border-color: #fff !important;
}

/* Category chips row + pagination were white-on-teal. */
.tours-category__filter-link {
	color: var(--tt-ink) !important;
}

.tours-category__filter-link:hover {
	color: var(--tt-teal) !important;
}

.page-numbers,
.posts-navigation a,
.nav-links a {
	color: var(--tt-ink) !important;
}

/* Buttons: vermillion primaries, teal secondaries. */
.button,
.tours__item-link,
.tours-related__item-link,
.tours-all__item-link,
.tours-category__item-link,
.tag-section__item-link,
.search-all__item-link,
.archive-section__item-link,
.blog-section__item-link,
.blog-all__item-link,
.blog-related__item-link,
.page-header__filter a.button,
.page-header__filter input[type="submit"],
input[type="submit"] {
	background-color: var(--tt-verm) !important;
	color: #fff !important;
}

.tours-category__button-link {
	background-color: var(--tt-verm) !important;
	color: #fff !important;
}

/* Links inside page content (templates emit inline teal). */
.content-styling a {
	color: var(--tt-teal) !important;
}

/* Reviews carousel text sits on the page background now. */
.reviews__slide-wrapper,
.reviews__slide-content,
.reviews__slide-name {
	color: var(--tt-ink) !important;
}

/* ---------- Footer redesign ---------- */
.site-footer {
	background-color: #161512 !important;
}

.site-footer__wrapper {
	padding: 60px 24px !important;
	gap: 32px;
}

.site-footer .textwidget > span,
.site-footer .widget > span {
	font-size: .78em !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #9a938a !important;
	margin: 0 0 18px 0 !important;
}

/* Spans inside footer links are content, not headings. */
.site-footer a span {
	display: inline !important;
	margin: 0 !important;
	font-size: 1em !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.site-footer a {
	color: #d9d4cc;
	transition: color .2s ease;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer p {
	color: #b8b2a8;
}

.site-footer ul {
	padding-left: 0;
}

.site-footer li {
	list-style: none;
	margin: 0 0 10px 0;
}

.site-footer__copyright {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 20px 24px !important;
	background-color: #161512 !important;
}

.site-footer__copyright p,
.site-footer__copyright a {
	font-size: .95em;
	color: #8a857c !important;
}

.site-footer li {
	margin: 0 0 12px 0;
}

.site-footer .textwidget p {
	line-height: 1.7;
}

.site-footer__copyright a:hover {
	color: #fff !important;
}

/* Pages without a hero photo (tag archives, search, 404): dark nav on paper. */
body.tag .main-navigation .menu-item a,
body.search .main-navigation .menu-item a,
body.error404 .main-navigation .menu-item a {
	color: var(--tt-ink) !important;
}

body.tag .main-navigation--active .menu-item a,
body.search .main-navigation--active .menu-item a,
body.error404 .main-navigation--active .menu-item a {
	color: #fff !important;
}

body.tag #nav-icon3 span,
body.search #nav-icon3 span,
body.error404 #nav-icon3 span {
	background: var(--tt-ink);
}

body.tag .site-header--active #nav-icon3 span,
body.search .site-header--active #nav-icon3 span,
body.error404 .site-header--active #nav-icon3 span {
	background: #fff;
}

/* Back-to-home button on tag listing pages. */
.tag-section__back {
	display: inline-block;
	margin-top: 22px;
	border: 1.5px solid var(--tt-verm);
	color: var(--tt-verm);
	border-radius: 999px;
	padding: 9px 24px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}

.tag-section__back:hover {
	background-color: var(--tt-verm);
	color: #fff;
}

/* When the header gains its dark scrolled background, links go back to white
   on pages that otherwise use dark nav text. */
body.tag .header--scrolled .main-navigation .menu-item a,
body.search .header--scrolled .main-navigation .menu-item a,
body.error404 .header--scrolled .main-navigation .menu-item a {
	color: #fff !important;
}

body.tag .header--scrolled #nav-icon3 span,
body.search .header--scrolled #nav-icon3 span,
body.error404 .header--scrolled #nav-icon3 span {
	background: #fff;
}

/* Breathing room between the tag-page heading (with back button) and the cards. */
.tag-section__heading {
	margin-bottom: 48px !important;
}

.tag-section__item {
	margin-bottom: 32px;
}