/*
 * Kurt Safari site-wide type and links (KS_Kit_Fonts).
 *
 * 1. The site font: Lato, self-hosted, on every page.
 *
 * Three files (Latin subset — the six site languages are all Latin script — weights 400 / 700 / 900,
 * ~14 KB each) served from the site and preloaded. No Google Fonts request, no Open Sans, Roboto or
 * Roboto Slab. "Lato Fallback" is Arial resized to Lato's measurements, so when the real font arrives
 * nothing on the page moves.
 *
 * Every text on the page is set in Lato — header, menu, content, cards, forms, footer, popups, floating
 * buttons — except icon glyphs (<i>/<svg>, or pseudo-elements with their own icon family) and
 * third-party widgets that bring their own brand type (TripAdvisor badges) or live in their own frame
 * (Google Maps, reCAPTCHA, the chat bot).
 */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/lato-latin-900.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 97.1%; ascent-override: 101.7%; descent-override: 21.9%; line-gap-override: 0%; }

:root {
	--ks-font: "Lato", "Lato Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Elementor's global fonts (kit: Roboto / Roboto Slab, never loaded) → Lato */
	--e-global-typography-primary-font-family: "Lato";
	--e-global-typography-secondary-font-family: "Lato";
	--e-global-typography-text-font-family: "Lato";
	--e-global-typography-accent-font-family: "Lato";
}

body,
body :is(h1, h2, h3, h4, h5, h6, p, a, span, li, dt, dd, label, legend, input, select, textarea, button, strong, b, em, small, td, th, caption, figcaption, option, blockquote, cite, q, div, time, address)
	:where(:not(.ks26, [class*="eicon"], [class*="fa-"], .dashicons, #wpadminbar, #wpadminbar *, [class^="TA_"] *, [class*=" TA_"] *, [id^="CDSWID"] *)) {
	font-family: var(--ks-font) !important;
}

/* form dropdowns: Elementor's own arrow glyph comes from its 108 KB icon font. Where the form draws its
   SVG arrow instead (.remove-before) the glyph is empty but would still fetch the font; elsewhere the same
   chevron is drawn in CSS. */
.elementor-field-group .elementor-select-wrapper.remove-before::before { font-family: inherit !important; }
.elementor-field-group .elementor-select-wrapper:not(.remove-before)::before {
	content: "" !important; font-family: inherit !important; width: 11px; height: 7px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 2. Links the site does not style itself are the brand gold, not the theme's default pink (#c36) and
      blue hover. Low specificity on purpose: any link Elementor or a plugin colours keeps its colour. */
body a { color: #8C5B1A; }
body a:hover, body a:focus { color: #774C14; }

/* 3. Phones: the site's sticky bar (footer: Book Now · WhatsApp Us and the trust strip, 96 px) covered the chat bot's
      launcher and the floating WhatsApp button, so neither could be tapped (QA 14 Oct, CRO-01). Both sit above it.
      The chat bot draws itself in its own (shadow) box from its host element: the host becomes the screen minus the
      bar, so the launcher and the open chat stay clear of it; the host lets taps through, the widget's own parts
      take them as before. The bar is in the tour footer (template 20601) only, so only tour pages move them; elsewhere
      they stay at the bottom edge, as on live (pre-prod QA 15 Oct, B-L2). */
@media (max-width: 767px) {
	body.single-tour .e-contact-buttons { bottom: 108px !important; }
	body.single-tour #voiceflow-chat { position: fixed !important; inset: 0 0 96px 0; transform: translateZ(0); pointer-events: none; z-index: 10000; }
}

/* 4. Tour cards: Essential Addons lays its whole-card link over the card (z-index 9999), so a click on the card's
      own buttons (View Tour, WhatsApp) opened the tour instead (QA 14 Oct, H-03). The buttons sit above it.
      Each card is its own stacking layer, so those z-indexes stay inside the card: a grid of cards scrolled under the
      fixed header (z-index 10000) no longer paints its buttons over the menu (live, 19 Oct). */
.ks-card { isolation: isolate; }
.ks-card :is(.elementor-widget-button, .elementor-widget-icon, .elementor-widget-icon-list, .elementor-widget-social-icons) { z-index: 10000; }
.ks-card :is(.elementor-widget-button, .elementor-widget-icon, .elementor-widget-icon-list, .elementor-widget-social-icons):not(.elementor-absolute, .elementor-fixed) { position: relative; }

/* 5. Forms in popups (the phone bar's Book Now): 16 px fields on phones (iPhones zoom into smaller ones) and a
      visible focus ring */
@media (max-width: 767px) {
	.elementor-popup-modal .elementor-form .elementor-field-group :is(input, select, textarea) { font-size: 16px !important; }
}
.elementor-popup-modal .elementor-form :is(input, select, textarea, button):focus-visible { outline: 2px solid #8C5B1A !important; outline-offset: 2px; }

/* 6. A popup's close button keeps its look but gets a 34 px tap / click area (it was 14 px) */
.elementor-popup-modal .dialog-close-button { padding: 10px; margin: -10px; box-sizing: content-box; }
