/**
 * UGT sitewide typography system
 * Inter for body and all headings
 */

/* —— Tokens (also set via inc/fonts.php inline for early availability) —— */
:root {
	--font-heading: "Inter", Arial, Helvetica, sans-serif;
	--font-body: "Inter", Arial, Helvetica, sans-serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-md: 17px;
	--text-lg: 19px;
	--text-xl: 21px;
	--heading-xs: 22px;
	--heading-sm: 26px;
	--heading-md: 34px;
	--heading-lg: 44px;
	--heading-xl: 58px;
	--heading-hero: 72px;
	--leading-tight: 1.02;
	--leading-heading: 1.1;
	--leading-body: 1.7;
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.08em;
	--tracking-eyebrow: 0.12em;
}

/* —— Base —— */
html {
	font-size: 16px;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--font-regular);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-normal);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * All body paragraphs use the same family as .section-lead (Inter).
 * Sizes stay component-specific; only the family is locked sitewide.
 * Overrides parent .prose / body.home .site-main which set --font-main (serif).
 */
p,
.prose,
.prose p,
.entry-content,
.entry-content p,
.section-lead,
.hero-copy,
.text-lead,
.lead-text,
.card__body,
.card__excerpt,
.card-sb__body,
.card-sb__body p,
.wpb_text_column,
.vc_column_text,
.wpb_text_column p,
.vc_column_text p,
.ugt-home .section-lead,
.ugt-safari-single .prose,
.ugt-safari-single .prose p,
.ugt-dest-single .prose,
.ugt-dest-single .prose p,
.ugt-guide-single .prose,
.ugt-guide-single .prose p,
.ugt-hotel-single .prose,
.ugt-hotel-single .prose p,
.ss-overview__copy,
.ss-overview__copy p,
.ss-timeline__body,
.ss-timeline__body p,
.ds-guide__body,
.ds-guide__body p,
.gs-body,
.gs-body p,
body.home .site-main,
body.home .entry-content,
body.home .ugt-home,
body .site-main,
.site-content {
	font-family: var(--font-body);
}

@media (max-width: 700px) {
	body {
		font-size: var(--text-base);
	}
}

/* —— All headings sitewide (Inter) —— */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.hero-title,
.entry-title,
.section-title,
.editorial-heading,
.ugt-safari-single .ss-hero__title,
.ugt-dest-single .ds-hero__title,
.ugt-hotel-single .hs-hero__title,
.ugt-guide-single .gs-hero__title,
.ugt-home .home-hero__title,
.ugt-safaris .sf-hero__title,
.ugt-gt .gt-hero__title,
.ugt-about .about-hero__title,
.ugt-hotels .hotels-hero__title,
.single-post .entry-header .entry-title,
.single-post h1.entry-title {
	font-family: var(--font-heading);
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
	letter-spacing: -0.025em;
}

.hero-title,
.ugt-safari-single .ss-hero__title,
.ugt-dest-single .ds-hero__title,
.ugt-hotel-single .hs-hero__title,
.ugt-guide-single .gs-hero__title,
.ugt-home .home-hero__title,
.ugt-safaris .sf-hero__title,
.ugt-gt .gt-hero__title {
	font-size: clamp(42px, 5vw, 76px);
	line-height: 0.98;
}

.page-title,
.entry-title,
.single-post h1.entry-title {
	font-size: clamp(38px, 4.4vw, 64px);
}

/* —— Section H2 (editorial) —— */
.section-title,
.ugt-home .section-title,
.ugt-safaris .section-title,
.ugt-gt .section-title,
.ugt-about .section-title,
.ugt-dest-single .section-title,
.ugt-safari-single .section-title,
.ugt-hotel-single .section-title,
.ugt-guide-single .section-title,
.ugt-hotels .section-title {
	font-family: var(--font-heading);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: var(--font-semibold);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: none;
}

/* —— Editorial H3 (content columns only) —— */
.editorial-heading,
.article-content h3,
.destination-content h3,
.entry-content h3,
.prose h3,
.ugt-guide-single .gs-body h3,
.ugt-dest-single .ds-guide__body h3,
.single-post .entry-content h3 {
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: var(--font-semibold);
	line-height: 1.15;
}

/* Long-form H2 inside articles / guides (not Altezza blog layout — that sets H2/H3 below H1) */
.entry-content h2,
.article-content h2,
.ugt-guide-single .gs-body h2,
.single-post .entry-content h2 {
	font-family: var(--font-heading);
	font-size: clamp(28px, 3vw, 42px);
	font-weight: var(--font-semibold);
	line-height: var(--leading-heading);
}

.article-page .entry-content h2,
.article-page .blog-entry-content h2,
.article-page .article__content h2 {
	font-size: calc(var(--altezza-36, 2.25rem) - 10px);
	line-height: 1.06;
}

.article-page .entry-content h3,
.article-page .blog-entry-content h3,
.article-page .article__content h3 {
	font-size: calc(var(--altezza-36, 2.25rem) - 16px);
	line-height: 1.07;
}

/* —— UI / card titles stay Inter —— */
.card-title,
.feature-title,
.widget-title,
.widget .widget-title,
.ugt-faq__q,
.faq-question,
.faq-item__q,
.ss-aside__title,
.ss-book__title,
.hs-aside__title,
.ds-aside__title,
.gs-aside__title {
	font-family: var(--font-body);
	font-weight: var(--font-bold);
	line-height: 1.25;
}

/* —— Eyebrows —— */
.eyebrow,
.section-label,
.section-eyebrow,
.hero-eyebrow,
.home-hero__eyebrow,
.sf-hero__eyebrow,
.gt-hero__eyebrow,
.ss-hero__eyebrow,
.ds-hero__eyebrow,
.hs-hero__eyebrow,
.gs-hero__eyebrow,
.home-trust__eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.3;
}

/* —— Hero lead —— */
.hero-copy,
.home-hero__lead,
.sf-hero__lead,
.gt-hero__lead,
.ss-hero__lead,
.ds-hero__lead,
.section-lead,
.text-lead,
.lead-text {
	font-family: var(--font-body);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: var(--font-regular);
	line-height: 1.6;
}

/* —— Navigation (Inter only) —— */
.main-navigation a,
.primary-menu a,
.ugt-nav a,
.site-header a,
.mega-menu a,
.mega-menu-heading,
.nav-mega a,
.mobile-menu a,
.menu-mobile a {
	font-family: var(--font-body);
}

.main-navigation a,
.primary-menu > li > a,
.ugt-nav .menu > li > a {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: 1;
}

.mega-menu-heading,
.nav-mega .mega-heading,
.nav-mega .menu-col-title {
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mega-menu a,
.nav-mega a {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	line-height: 1.4;
}

.mobile-menu a,
.menu-mobile a {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
}

.mobile-menu .sub-menu a,
.menu-mobile .sub-menu a {
	font-size: 15px;
	font-weight: var(--font-medium);
}

/* —— Buttons / forms —— */
.btn,
button,
input[type="submit"],
input[type="button"],
.ss-btn,
.ugt-home .btn,
.wpcf7-submit {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	line-height: 1;
	letter-spacing: 0.01em;
}

input,
select,
textarea,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--font-regular);
}

.form-label,
label.form-label,
.wpcf7 label {
	font-family: var(--font-body);
}

::placeholder {
	font-family: var(--font-body);
	font-weight: var(--font-regular);
}

/* —— Tour / safari cards —— */
.tour-card-title,
.card--safari-ugt .card-sb__title,
.card--safari-booking .card-sb__title,
.card--safari-ugt .card-sb__title a,
.card--safari-booking .card-sb__title a {
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1.2vw, 1.15rem);
	font-weight: var(--font-bold);
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.tour-card--compact .tour-card-title,
.card--safari-ugt.card--compact .card-sb__title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: var(--font-bold);
	line-height: 1.25;
}

.tour-price,
.price-main,
.card--safari-ugt .card-sb__price,
.ss-book__price,
.ss-tiers__price {
	font-family: var(--font-body);
	font-weight: var(--font-bold);
	letter-spacing: -0.03em;
}

.tour-meta,
.card--safari-ugt .card-sb__meta,
.meta,
.text-meta {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-medium);
}

.tour-badge,
.card--safari-ugt .card-sb__badge,
.price-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: var(--font-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.price-main {
	font-size: clamp(28px, 2.4vw, 38px);
	letter-spacing: -0.035em;
}

.price-subtext {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-medium);
}

/* —— Destination cards —— */
.destination-card-title,
.dest-m-card__title {
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 1.25vw, 1.2rem);
	font-weight: var(--font-bold);
	line-height: 1.25;
	letter-spacing: -0.015em;
	text-transform: none;
}

.destination-card-tagline,
.dest-m-card__sub {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	text-transform: none;
}

.destination-card-copy,
.dest-m-card__text {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--font-regular);
	line-height: 1.55;
	text-transform: none;
}

.destination-card-link,
.dest-m-card__cta {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-bold);
	text-transform: uppercase;
}

.dest-m-card__link {
	font-family: var(--font-body);
	text-transform: none;
}

/* —— Hotel cards —— */
.hotel-card-title,
.ugt-hotels .hotel-card__title,
.hs-related__title,
.ss-day-lodge__name {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: var(--font-semibold);
	line-height: 1.2;
}

.ss-day-lodge__name {
	font-size: 0.92rem;
}

.hotel-price,
.ugt-hotels .hotel-card__price {
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: var(--font-bold);
}

.hotel-meta,
.ugt-hotels .hotel-card__meta {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-medium);
}

/* —— Blog / guides —— */
.single-post .entry-content,
.travel-guide-content,
.ugt-guide-single .gs-body,
.ugt-guide-single .prose {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.8;
}

.ugt-guide-single .gs-body,
.travel-guide-content {
	font-size: 17px;
	line-height: 1.75;
}

.article-content,
.guide-content,
.single-post .entry-content {
	max-width: 760px;
}

/* Give the article column +100px (container boost was 250px → 350px). */
.article-page {
	--article-container-boost: 21.875rem; /* 350px */
}


.ugt-dest-single .ds-guide__body,
.destination-main-content {
	max-width: 820px;
}

.entry-content p,
.article-content p,
.ugt-guide-single .gs-body p {
	margin-bottom: 1.35em;
}

/* Blog image placeholders — replace in WP editor */
.entry-content .ugt-img-ph,
.article-content .ugt-img-ph {
	margin: 2em 0;
	max-width: 100%;
}

.entry-content .ugt-img-ph img,
.article-content .ugt-img-ph img {
	display: block;
	width: 100%;
	height: auto;
	background: #e8ebe6;
}

.entry-content .ugt-img-ph figcaption,
.article-content .ugt-img-ph figcaption {
	margin-top: 0.65em;
	font-size: 0.92em;
	line-height: 1.45;
	color: #4a5548;
	font-style: italic;
}

.entry-content ul,
.entry-content ol,
.article-content ul,
.article-content ol {
	font-family: var(--font-body);
	font-size: inherit;
	line-height: 1.7;
}

blockquote {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: var(--font-medium);
	line-height: 1.3;
}

.guide-callout {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
}

/* —— Destination UI —— */
.destination-tabs a,
.ds-tabs a,
.ugt-dest-single .ds-tabs a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
}

.destination-facts,
.ds-facts,
.ugt-dest-single .ds-facts {
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

/* —— Tables —— */
table {
	font-family: var(--font-body);
	font-size: var(--text-sm);
}

table th {
	font-weight: var(--font-bold);
}

table td {
	font-weight: var(--font-regular);
}

/* —— FAQ —— */
.faq-question,
.ugt-faq__q,
.faq-item__q,
.faq-item dt {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
}

.faq-answer,
.ugt-faq__a,
.faq-item__a,
.faq-item dd {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.65;
}

/* —— Sidebars —— */
.sidebar,
.widget-area,
.ss-aside,
.ds-aside,
.hs-aside,
.gs-aside {
	font-family: var(--font-body);
}

.sidebar a,
.widget-area a,
.ss-aside a,
.ds-aside a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
}

/* —— Footer (Inter) —— */
.site-footer,
.ugt-footer,
.ugt-site-cta {
	font-family: var(--font-body);
}

.footer-heading,
.ugt-footer__heading,
.site-footer .widget-title,
.ugt-site-cta__copy h2 {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
}

.footer-link,
.ugt-footer a,
.site-footer a {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-regular);
	line-height: 1.8;
}

.footer-description,
.ugt-footer__desc {
	font-size: var(--text-sm);
	line-height: 1.65;
}

/* —— Breadcrumbs —— */
.breadcrumbs,
.breadcrumb,
.ugt-breadcrumbs,
.ss-crumbs,
.ds-crumbs {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
}

/* —— Trust bar —— */
.trust-title,
.home-trust__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
}

.trust-text,
.home-trust__text {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.4;
}

/* —— Timeline / itinerary editorial bits —— */
.ugt-safari-single .ss-timeline__title {
	font-family: var(--font-heading);
	font-weight: var(--font-semibold);
}

.ugt-safari-single .ss-timeline__body,
.ugt-safari-single .ss-overview__copy {
	font-family: var(--font-body);
}

/* —— WPBakery / plugin text columns —— */
.wpb_text_column,
.vc_column_text,
.wpb_wrapper > p {
	font-family: var(--font-body);
}

/* Large VC headings that behave like section titles */
.vc_custom_heading.ugt-section-title,
h2.vc_custom_heading {
	font-family: var(--font-heading);
	font-weight: var(--font-semibold);
}

/* —— Utilities —— */
.font-heading {
	font-family: var(--font-heading);
}

.font-body {
	font-family: var(--font-body);
}

.font-semibold {
	font-weight: var(--font-semibold);
}

.font-bold {
	font-weight: var(--font-bold);
}

.text-eyebrow {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.text-lead {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: 1.7;
}

.text-small {
	font-size: var(--text-sm);
}

.text-meta {
	font-size: 13px;
	font-weight: var(--font-medium);
}
/**
 * Homepage mobile tap-target + card image fit fixes.
 */

/* Responsive card images fill media frames */
.dest-m-card__media img,
.dest-m-card__img,
.ugt-blog-card__media img,
.ugt-blog-card__img,
.card--safari-ugt .card-sb__img,
.home-gorilla-parks__media img,
.home-why__media img,
.home-why-travel__figure img,
.home-compare__media img,
.home-wildlife__hero-img img,
.home-wildlife__park-media img,
.home-chimp-places__media img,
.home-interests__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dest-m-card__media picture,
.ugt-blog-card__media picture,
.card--safari-ugt .card-sb__media-visual picture,
.home-gorilla-parks__media picture,
.home-why__media picture,
.home-why-travel__figure picture,
.home-compare__media picture {
	display: contents;
}

/* —— Mobile tap targets (min ~44px) —— */
@media (max-width: 768px) {
	.btn,
	.btn--home-primary,
	.btn--home-secondary,
	.card--safari-ugt .card-sb__footer-cta,
	.home-destinations__view-all,
	.ugt-site-cta__actions a,
	.ugt-site-cta .btn,
	.wpcf7-submit,
	input[type="submit"] {
		min-height: 44px;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.dest-m-card__cta,
	.ugt-blog-card__cta,
	.home-compare__country-cta,
	.section-link,
	.section-more a,
	.home-gorilla-parks__cta {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.55rem 0;
	}

	.ugt-footer__nav a,
	.ugt-footer .menu a,
	.ugt-footer__legal a,
	.ugt-footer__cols a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.35rem 0;
	}

	.ugt-footer .social-icons__link,
	.social-icons__link {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.ugt-footer-partners__list a {
		min-height: 44px;
		padding: 0.25rem;
	}

	body .ugt-top-bar__link,
	body .top-bar a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0.35rem 0.15rem;
	}

	.primary-nav .menu > li > a,
	.ugt-nav .menu > li > a,
	.menu-mobile a,
	.mobile-menu a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.card--safari-ugt .card-sb__fav {
		min-width: 44px;
		min-height: 44px;
	}

	.ugt-faq__item summary,
	.faq-item__q {
		min-height: 44px;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.home-hero__dot {
		min-width: 44px;
		min-height: 44px;
	}

	.home-wildlife__park,
	.home-chimp-places__card,
	.home-interests__card {
		min-height: 44px;
	}

	/* Space stacked text links */
	.ugt-footer__nav li + li,
	.ugt-footer__cols li + li {
		margin-top: 0.15rem;
	}
}

/* picture wrappers */
.home-wildlife__hero-img picture,
.home-wildlife__park-media picture,
.home-wildlife__side-img picture,
.home-chimp-places__media picture,
.home-chimp__hero-img picture,
.home-chimp__side-img picture,
.home-interests__media picture,
.home-hero__slide picture { display: contents; }