/* ============================================================
   Salaton Safaris — shared chrome overrides for the Plexify theme
   Loaded site-wide by templates/layout/plexify.html.twig.
   Only SHARED chrome lives here: header spacing + logo chip, the
   dark .salaton-footer, and generic card-image helpers (keyed to
   card classes so they only take effect where those cards exist).
   Page-specific CSS (e.g. the home hero) stays on each page via
   {% block extra_head %}.
   ============================================================ */

/* --- Brand palette: retheme the Plexify lime (--primary #C8F31D) to the
   Salaton logo colours — golden amber accent + dark brown. Overriding the
   theme's CSS variables recolours buttons/badges/accents site-wide. --- */
:root {
	/* Official brand gold #BB7229 (RGB 187,114,41) — see salaton-brand-spec */
	--primary: #BB7229;
	--primary-hover: #A56424;
	--primary-dark: #8C561F;
	--rgba-primary-1: rgba(187, 114, 41, 0.1);
	--rgba-primary-2: rgba(187, 114, 41, 0.2);
	--rgba-primary-3: rgba(187, 114, 41, 0.3);
	--rgba-primary-4: rgba(187, 114, 41, 0.4);
	--rgba-primary-5: rgba(187, 114, 41, 0.5);
	--rgba-primary-6: rgba(187, 114, 41, 0.6);
	--rgba-primary-7: rgba(187, 114, 41, 0.7);
	--rgba-primary-8: rgba(187, 114, 41, 0.8);
	--rgba-primary-9: rgba(187, 114, 41, 0.9);

	/* Salaton brand tokens (official): gold + dark brown, no green */
	--salaton-gold: #BB7229;
	--salaton-brown: #62250D;
	--salaton-dark: #2A1710;

	/* Brand font: Montserrat (official brand manual) replaces the theme's
	   Poppins (base) + Oswald (titles). These two vars drive almost all site
	   text; the few hardcoded "Kanit" rules (tooltips/popovers/old footer) are
	   edge cases. */
	--font-family-base: 'Montserrat', sans-serif;
	--font-family-title: 'Montserrat', sans-serif;
}

/* --- Brand font: force Montserrat where the theme hardcodes Kanit/Oswald so
   headings + body read consistently as Montserrat. --- */
body, h1, h2, h3, h4, h5, h6,
.title, .sub-title, .dz-title,
.btn, .nav, .navbar-nav, input, textarea, select, button {
	font-family: 'Montserrat', sans-serif;
}

/* --- Light text on the gold/brown brand fills (the theme defaults to dark
   text, which is low-contrast on our amber). The .sale-badge starburst is
   always gold, so its text should always be white. --- */
.sale-badge, .sale-badge strong, .sale-badge.style-1, .sale-badge.style-1 strong { color: #fff; }

/* --- Header: spacing from top + visible logo over the hero --- */
.site-header.header-transparent:not(.is-fixed) { top: 20px; }
.site-header.style-1:not(.is-fixed) .inner-bar > .logo-header {
	background: rgba(255, 255, 255, .92); border-radius: 14px; padding: 6px 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

/* --- Inner-page banners: the transparent header + logo overlay the top of the
   banner. The theme vertically-centres the title inside a short banner
   (350px desktop → 230px mobile), so on smaller screens the title rises up
   under the logo. Reserve headroom so the title always clears the header. --- */
.dz-bnr-inr .dz-bnr-inr-entry { padding-top: 140px; }
@media (max-width: 991px) {
	.dz-bnr-inr { --dz-banner-height: 320px; }
	.dz-bnr-inr .dz-bnr-inr-entry { padding-top: 130px; }
}
@media (max-width: 575px) {
	.dz-bnr-inr { --dz-banner-height: 300px; }
	.dz-bnr-inr .dz-bnr-inr-entry { padding-top: 120px; }
}

/* --- Footer: dark, organized, consistent colours --- */
.salaton-footer { background-color: var(--salaton-dark); color: rgba(255, 255, 255, .72); }
.salaton-footer .footer-top { padding: 70px 0 30px; }
.salaton-footer .footer-logo { display: inline-block; background: #fff; padding: 10px 16px; border-radius: 12px; margin-bottom: 22px; }
.salaton-footer .footer-logo img { max-width: 165px; display: block; }
.salaton-footer .footer-about { font-size: 15px; line-height: 1.75; margin-bottom: 22px; color: rgba(255, 255, 255, .72); }
.salaton-footer .footer-heading { color: #fff; font-size: 20px; font-weight: 600; margin-bottom: 24px; padding-bottom: 12px; position: relative; }
.salaton-footer .footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--salaton-gold); border-radius: 2px; }
.salaton-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.salaton-footer .footer-links li { margin-bottom: 12px; }
.salaton-footer .footer-links a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: all .2s; }
.salaton-footer .footer-links a:hover { color: var(--salaton-gold); padding-left: 5px; }
.salaton-footer .footer-contact { list-style: none; padding: 0; margin: 0; }
.salaton-footer .footer-contact li { display: flex; gap: 12px; margin-bottom: 16px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.salaton-footer .footer-contact li i { color: var(--salaton-gold); margin-top: 4px; flex-shrink: 0; }
.salaton-footer .footer-contact a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s; }
.salaton-footer .footer-contact a:hover { color: var(--salaton-gold); }
.salaton-footer .footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.salaton-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: all .2s; }
.salaton-footer .footer-social a:hover { background: var(--salaton-gold); color: var(--salaton-dark); }
.salaton-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.salaton-footer .footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 22px 0; }
.salaton-footer .footer-bottom-inner p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .55); }
.salaton-footer .footer-bottom-inner a { color: var(--salaton-gold); text-decoration: none; }
@media (max-width: 767px) { .salaton-footer .footer-bottom-inner { justify-content: center; text-align: center; } }

/* --- Whole-card click target. The theme's .view-btn is a decorative
   cursor-follow circle (pointer-events:none), so safari/destination cards
   need a real stretched link to be clickable anywhere. --- */
.travel-card, .dz-card.style-6 { position: relative; }
/* z-index sits above the card's own overlay bars (.dz-info is z-index:11,
   .travel-info is z-index:1) so the whole card — image AND caption — is one
   click target. All covered inner links point to the same detail page. */
.card-link-overlay { position: absolute; inset: 0; z-index: 12; }
.card-link-overlay:focus-visible { outline: 3px solid var(--salaton-gold); outline-offset: -3px; }

/* --- Card-image helpers (keyed to card classes; harmless where absent) --- */

/* Featured Safaris: uniform portrait images like the template (570x840) */
.travel-card .travel-media { height: 100%; }
.travel-card .travel-media img { width: 100%; aspect-ratio: 570 / 840; object-fit: cover; display: block; }

/* Experiences cards: equal-height cards + uniform images */
.dz-card.style-8.blog-half .dz-media a { display: block; width: 100%; height: 100%; }
.dz-card.style-8.blog-half .dz-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-card.style-8.blog-half .dz-info .dz-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-card.style-8.blog-half .dz-info .text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dz-card.style-8.blog-half .dz-info .bottom-content { margin-top: auto; }
@media (min-width: 768px) { .dz-card.style-8.blog-half:not(.empty) { height: 350px; } }
@media (max-width: 767px) { .dz-card.style-8.blog-half:not(.empty) .dz-media { height: 220px; } }

/* Location/service cards: uniform images */
.location-card .dz-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 10px; }

/* Blog/news cards: uniform images + equal cards */
.dz-card.style-7 .dz-media a { display: block; width: 100%; height: 100%; }
.dz-card.style-7 .dz-info .dz-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .dz-card.style-7 .dz-media { height: 250px; } }
@media (max-width: 767px) { .dz-card.style-7 .dz-media { height: 220px; } }

/* --- Dropdown menu indicators -------------------------------------------
   Parent nav items (.sub-menu-down) need a visible caret so desktop users
   see they expand and phone users know to tap. The theme's own carets don't
   render here: the desktop :after uses the "feather" glyph \e842 and the
   mobile i.tabindex uses "Font Awesome 5 Free" — neither font paints the
   intended glyph in this build. Use a plain Unicode caret (▾, U+25BE) that
   renders in the normal UI font, so it's dependable on every device. */

/* Desktop caret (next to the label) */
.header-nav.xmenu > .nav > li.sub-menu-down > a:after,
.header-nav.xmenu > .nav > li.menu-item-has-children > a:after {
	content: "\25BE" !important; /* ▾ down caret */
	font-family: inherit !important;
	font-weight: 400;
	font-size: 0.7em;
	width: auto; height: auto;
	margin-left: 7px;
	margin-top: 0;
	vertical-align: middle;
	display: inline-block;
	transition: transform .25s ease;
}
/* Flip to point up while the dropdown is open (desktop opens on hover) */
.header-nav.xmenu > .nav > li.sub-menu-down:hover > a:after,
.header-nav.xmenu > .nav > li.menu-item-has-children:hover > a:after {
	transform: rotate(180deg);
}

/* Mobile caret (the theme renders i.tabindex as a tappable square) */
@media only screen and (max-width: 991px) {
	.header-nav.xmenu > .nav > li.sub-menu-down > a i.tabindex,
	.header-nav.xmenu > .nav > li.menu-item-has-children > a i.tabindex {
		font-family: inherit !important;
		font-weight: 400;
	}
	.header-nav.xmenu > .nav > li.sub-menu-down > a i.tabindex:before,
	.header-nav.xmenu > .nav > li.menu-item-has-children > a i.tabindex:before {
		content: "\25BE" !important; /* ▾ down caret */
	}
	.header-nav.xmenu > .nav > li.sub-menu-down.open > a i.tabindex:before,
	.header-nav.xmenu > .nav > li.menu-item-has-children.open > a i.tabindex:before {
		content: "\25B4" !important; /* ▴ up caret when open */
	}
}

/* ============================================================
   Accessibility: raise low-contrast text on light backgrounds so it
   meets WCAG AA. Scoped to light sections so white-on-dark variants
   (hero, dark overlays) are untouched. Colours are brand gold/brown.
   ============================================================ */
.bg-white .sub-title,
.bg-light .sub-title,
.bg-higlight .sub-title,
.content-inner-1 .sub-title {
	color: var(--salaton-brown); /* #62250D on white ≈ 9:1 */
}
.bg-white .list-title,
.bg-higlight .list-title,
.content-inner-1 .list-title {
	color: var(--salaton-dark); /* #2A1710 */
}
/* Testimonial attribution ("… Google Review") was too light on bg-light */
.testimonial-section .role,
.testimonial-content .role {
	color: #5c4634; /* dark brown ≈ 6.5:1 on near-white */
}