/* WordPress-only pieces. Colours and type come from live.css. */

/* Skip link and focus states (accessibility) */
.saf-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#482E1F;color:#fff;padding:8px 14px;border-radius:9999px}
.saf-skip:focus{left:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #E3521D;outline-offset:2px}

/* Desktop dropdowns: open on hover and on keyboard focus */
.saf-dd{display:none}
.saf-dd-wrap:hover>.saf-dd,.saf-dd-wrap:focus-within>.saf-dd,.saf-dd-wrap.is-open>.saf-dd{display:block}

/* Mobile menu */
.saf-mobile.is-open{display:block}

/* Language panel */
.saf-lang-panel.is-open{display:block}

/* FAQ toggles (details/summary keep every answer in the HTML) */
.saf-faq summary{list-style:none}
.saf-faq summary::-webkit-details-marker{display:none}
.saf-faq details[open] .saf-faq__chev{transform:rotate(180deg)}
.cursor-pointer{cursor:pointer}

/* Article body, same rules as the live post template */
.article-body{color:#4a3626;font-size:1.075rem;line-height:1.8}
.article-body>p{margin:0 0 1.35rem}
.article-body .lead{font-size:1.28rem;line-height:1.7;color:#2B1C11;font-weight:500;margin-bottom:1.8rem}
.article-body h2{font-family:var(--font-display,Georgia,serif);font-size:1.7rem;line-height:1.25;color:#482E1F;margin:2.6rem 0 1rem}
.article-body h3{font-family:var(--font-display,Georgia,serif);font-size:1.3rem;color:#482E1F;margin:2rem 0 .7rem}
.article-body ul{margin:0 0 1.5rem;padding-left:0;list-style:none}
.article-body li{position:relative;padding-left:1.6rem;margin-bottom:.7rem}
.article-body li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:#E3521D}
.article-body strong{color:#2B1C11;font-weight:650}
.article-body a{color:#B23A14;text-decoration:underline}
@media (min-width:640px){.article-body{font-size:1.12rem}.article-body h2{font-size:2rem}}

/* Simple text pages written in WordPress and destination guide sections */
.saf-prose{color:rgba(72,46,31,.82);line-height:1.75}
.saf-prose p{margin:0 0 1rem}
.saf-prose h2{font-size:1.5rem;color:#482E1F;margin:2rem 0 .75rem}
.saf-prose h3{font-size:1.2rem;color:#482E1F;margin:1.5rem 0 .5rem}
.saf-prose ul{padding-left:1.25rem;list-style:disc;margin:0 0 1rem}
.saf-prose a{color:#B23A14;text-decoration:underline}
.saf-tour-overview p{margin:0 0 .75rem}
.saf-dest-body p{margin:0 0 1rem}

/* Hero slideshow (homepage) */
.saf-hero-slide{transition:opacity 1s}

/* Google Translate gadget tidy-up */
.goog-te-gadget{font-size:12px!important;color:#482E1F!important}
.goog-te-combo{border:1px solid rgba(72,46,31,.2);border-radius:8px;padding:6px}

/* Destination slider buttons */
.saf-slider__track{scroll-behavior:smooth}

/* Pagination on archives */
.nav-links{display:flex;gap:.5rem}
.nav-links .page-numbers{padding:.4rem .8rem;border-radius:9999px;border:1px solid rgba(72,46,31,.2)}
.nav-links .current{background:#482E1F;color:#fff}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Keep header items on one line whatever system font the visitor has */
header nav a,header .h-9{white-space:nowrap}

/* Larger tap areas on small controls without changing how they look (WCAG 2.5.8). */
button[aria-label^="Show slide"]::after { content: ""; position: absolute; inset: -12px -3px; }
button[aria-label^="Show slide"] { position: relative; }
main a.inline-flex.text-sm.font-semibold:not(.absolute):not(.rounded-full) { position: relative; }
main a.inline-flex.text-sm.font-semibold:not(.absolute):not(.rounded-full)::after { content: ""; position: absolute; inset: -8px 0; }

/* The live site's compiled CSS is missing these two brand colours, so its dark call-to-action
   boxes and orange buttons (Best Safaris, Activities, FAQs, blog posts, Destinations) show white
   text on the cream page background. Same colours as the rest of the site. */
.bg-brand-brown { background-color: #482E1F; }
.bg-brand-orange { background-color: #E3521D; }
.hover\:bg-brand-orange-dark:hover { background-color: #C4441A; }

/* Very narrow phones (320px): long email addresses and labels wrap instead of pushing the page sideways. */
@media (max-width: 359px) {
	main .flex > div { min-width: 0; }
	main a[href^="mailto:"], main a[href^="tel:"], main p, main dd { overflow-wrap: anywhere; }
}

/* WeChat QR and membership badge (Company Information > WeChat and badges) */
.saf-footer-extras { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem; }
.saf-wechat--footer { display: flex; align-items: center; gap: .75rem; }
.saf-wechat--footer p { max-width: 8rem; font-size: .8125rem; line-height: 1.4; color: rgba(255,255,255,.7); }
.saf-wechat-qr { display: block; width: 112px; height: 112px; padding: 6px; border-radius: 12px; background: #fff; }
.saf-wechat--contact { margin-top: .75rem; }
.saf-wechat--contact .saf-wechat-qr { border: 1px solid rgba(43,28,17,.12); }
.saf-badge { display: inline-block; border-radius: 12px; }
.saf-badge img { display: block; width: 96px; height: 96px; }
.saf-wechat a:focus-visible, .saf-badge:focus-visible { outline: 2px solid #E0A340; outline-offset: 3px; }

/* Larger invisible tap area for the hero slide dots (look unchanged) */
button[aria-label^="Show slide"] { position: relative; }
button[aria-label^="Show slide"]::after { content: ""; position: absolute; inset: -14px -6px; }