/*
 * Kamran Tour — base + site-wide styles.
 *
 * Loaded on every page: box-sizing reset, body defaults, image/link
 * basics, a container utility, minimal responsive behavior, and the
 * site header/mobile navigation/footer (since those wrap every
 * template, not just the homepage). Homepage-only section styles
 * live in home.css.
 */

/* Box sizing reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	line-height: 1.5;
}

/* Images */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Links */
a {
	text-decoration: none;
	color: inherit;
}

/* Lists inside nav menus shouldn't carry default bullets/margins */
.main-navigation ul,
.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li,
.footer-navigation li {
	display: inline-block;
}

/* Basic container utility */
.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 16px;
}

/* Minimal responsive behavior */
@media (max-width: 768px) {
	.container {
		padding-inline: 12px;
	}
}

/* Screen-reader-only utility, used by the skip link in header.php */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	padding: 8px 16px;
	background: #fff;
}

/*
 * ------------------------------------------------------------------
 * Site header, mobile navigation, and footer.
 *
 * These wrap every page (not just the homepage), so they live in
 * main.css rather than home.css. Uses the same design tokens as
 * home.css — if a non-front page is viewed, home.css is not
 * loaded, so the small set of variables this section needs is
 * redefined here too, kept in sync manually for now.
 * ------------------------------------------------------------------
 */

:root {
	--kt-forest: #123A2E;
	--kt-forest-light: #1F5C48;
	--kt-gold: #C6A15B;
	--kt-gold-dark: #A8813F;
	--kt-cream: #FAF7F1;
	--kt-ink: #1C2321;
	--kt-line: #E4DFD2;
	--kt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--kt-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kt-header-height: 84px;
}

body {
	font-family: var(--kt-font-body);
	color: var(--kt-ink);
}

/* ---------------------------------------------------------------- */
/* Site header                                                       */
/* ---------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* On the homepage the header starts transparent over the hero image;
   .is-scrolled (added by main.js) gives it a solid background once
   the page scrolls. On every other page it is solid from the start. */
body.home .site-header:not(.is-scrolled) {
	--kt-header-ink: var(--kt-cream);
}

.site-header,
body:not(.home) .site-header {
	--kt-header-ink: var(--kt-forest);
	background: var(--kt-cream);
	box-shadow: 0 1px 0 var(--kt-line);
}

body.home .site-header:not(.is-scrolled) {
	background: transparent;
	box-shadow: none;
}

/* The homepage header is designed to start transparently over the hero.
   Sticky positioning keeps an element in normal flow, so without cancelling
   that reserved height the first paint places cream navigation text over the
   cream page background until scrolling moves the hero underneath. Keep the
   existing sticky behavior, but let the hero begin beneath the header from
   the very first paint. */
body.home .site-header {
	margin-bottom: calc(-1 * var(--kt-header-height));
}

.site-header.is-scrolled {
	background: var(--kt-cream);
	box-shadow: 0 4px 20px -12px rgba(18, 58, 46, 0.35);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--kt-header-height);
}

.site-branding a,
.site-title-link {
	font-family: var(--kt-font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--kt-header-ink, var(--kt-forest));
	letter-spacing: 0.01em;
}

.main-navigation {
	display: flex;
	align-items: center;
	gap: 32px;
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 28px;
}

.main-navigation a {
	font-size: 15px;
	font-weight: 600;
	color: var(--kt-header-ink, var(--kt-forest));
	position: relative;
	padding-block: 4px;
}

.main-navigation a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--kt-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after {
	transform: scaleX(1);
}

.site-header__extras {
	display: flex;
	align-items: center;
	gap: 18px;
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kt-header-ink, var(--kt-forest));
}

.lang-switcher a {
	color: inherit;
	opacity: 0.6;
	padding: 2px 4px;
}

.lang-switcher a[aria-current="true"] {
	opacity: 1;
	border-bottom: 2px solid var(--kt-gold);
}

.lang-switcher span[aria-hidden="true"] {
	opacity: 0.35;
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--kt-header-ink, var(--kt-forest));
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
	.main-navigation {
		position: fixed;
		inset: var(--kt-header-height) 0 0 0;
		background: var(--kt-cream);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 32px 24px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
	}

	.main-navigation li {
		width: 100%;
	}

	.main-navigation a {
		display: block;
		padding: 14px 4px;
		font-size: 17px;
		border-bottom: 1px solid var(--kt-line);
		color: var(--kt-forest);
	}

	.main-navigation .kt-btn {
		margin-top: 20px;
		width: 100%;
	}

	.menu-toggle {
		display: inline-flex;
	}
}

/* ---------------------------------------------------------------- */
/* Site footer                                                       */
/* ---------------------------------------------------------------- */

.site-footer {
	background: var(--kt-forest);
	color: rgba(250, 247, 241, 0.78);
	padding-block: 76px 24px;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--kt-cream);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(140px, 0.85fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(250, 247, 241, 0.14);
}

.site-footer__grid--no-social {
	grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(160px, 1fr));
}

.site-footer__brand-col {
	max-width: 340px;
}

.site-footer__brand {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--kt-font-display);
	font-size: clamp(24px, 2.1vw, 30px);
	font-weight: 600;
	line-height: 1.15;
	color: var(--kt-cream);
}

.site-footer__tagline {
	max-width: 31ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: rgba(250, 247, 241, 0.64);
}

.site-footer__heading {
	margin: 2px 0 18px;
	font-family: var(--kt-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kt-gold);
}

.site-footer .footer-navigation ul,
.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.site-footer .footer-navigation li {
	display: block;
}

.site-footer .footer-navigation a,
.site-footer__list,
.site-footer__social-link {
	font-size: 14px;
	line-height: 1.65;
}

.site-footer .footer-navigation a {
	display: inline-flex;
	padding-block: 2px;
}

.site-footer__contact-list {
	gap: 15px;
}

.site-footer__contact-list li {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.site-footer__item-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(250, 247, 241, 0.46);
}

.site-footer__location {
	max-width: 23ch;
	color: rgba(250, 247, 241, 0.64);
}

.site-footer__social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	padding: 5px 8px 5px 5px;
	border-radius: 999px;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background: rgba(250, 247, 241, 0.06);
	transform: translateY(-1px);
}

.site-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-radius: 50%;
	color: var(--kt-gold);
}

.site-footer__social-icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-footer__social-icon .site-footer__icon-fill {
	fill: currentColor;
	stroke: none;
}

.site-footer .site-info {
	padding-top: 24px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(250, 247, 241, 0.48);
}

.site-footer .site-info p {
	margin: 0;
}

.site-info__primary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.site-info__privacy {
	white-space: nowrap;
}

.site-info__credit {
	margin-top: 10px !important;
	padding-top: 10px;
	border-top: 1px solid rgba(250, 247, 241, 0.07);
	font-size: 11px;
	color: rgba(250, 247, 241, 0.34);
}

@media (max-width: 900px) {
	.site-footer__grid,
	.site-footer__grid--no-social {
		grid-template-columns: 1.2fr 1fr;
		gap: 42px 56px;
	}
}

@media (max-width: 600px) {
	.site-footer {
		padding-block: 58px 20px;
	}

	.site-footer__grid,
	.site-footer__grid--no-social {
		grid-template-columns: 1fr;
		gap: 34px;
		padding-bottom: 38px;
		text-align: center;
	}

	.site-footer__brand-col,
	.site-footer__tagline,
	.site-footer__location {
		max-width: none;
	}

	.site-footer .footer-navigation ul,
	.site-footer__list,
	.site-footer__social {
		align-items: center;
	}

	.site-footer__contact-list li {
		align-items: center;
	}

	.site-info__primary {
		justify-content: center;
		text-align: center;
	}

	.site-info__credit {
		text-align: center;
	}
}