/* ============================================================
   OKERE TOURISM HUB — front-end layer (ports the static v3
   preview's signature features onto the Elementor/XPRO site)
   ============================================================ */
:root{
  --okf:#0C2B1F; --okp:#1C6B47; --okc:#B26A2B; --oks:#EAD9BD;
  --okpaper:#F6F3EA; --okink:#132A20; --okline:rgba(19,42,32,.14);
  --okaqua:#2DD4BF; --okcream:#FDFBF4;
}

/* ---------- announcement ticker (moving text bar) ---------- */
.ok-ticker{background:var(--okf);color:var(--oks);overflow:hidden;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-family:Manrope,sans-serif;position:relative;z-index:121}
.ok-ticker-track{display:flex;gap:2.2rem;padding:.55rem 0;width:max-content;animation:okTicker 38s linear infinite;white-space:nowrap}
.ok-ticker-track i{font-style:normal;color:var(--okc)}
.ok-ticker:hover .ok-ticker-track{animation-play-state:paused}
@keyframes okTicker{to{transform:translateX(-50%)}}

/* ---------- scroll progress bar ---------- */
.ok-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;pointer-events:none}
.ok-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--okp),#0E7490,var(--okc))}

/* ---------- glass sticky header ---------- */
.xpro-theme-builder-header{position:sticky!important;top:0;z-index:120;transition:box-shadow .3s ease}
.xpro-theme-builder-header .e-con-boxed{background-color:rgba(246,243,234,.85)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(19,42,32,.12)}
body.ok-scrolled .xpro-theme-builder-header{box-shadow:0 2px 18px rgba(12,43,31,.12)}
/* robust one-row layout: auto widths, brand | menu (flex) | actions */
.xpro-theme-builder-header .e-con-inner{display:flex;flex-wrap:nowrap!important;align-items:center;min-height:74px;gap:16px}
.xpro-theme-builder-header .e-con-inner>.e-con{width:auto!important;max-width:none!important;flex:0 0 auto!important;min-width:0}
.xpro-theme-builder-header .e-con-inner>.e-con:nth-child(2){flex:1 1 auto!important;justify-content:center}
.xpro-theme-builder-header .e-con-inner>.e-con:last-child{justify-content:flex-end;flex-direction:row!important;align-items:center;gap:10px}
.xpro-site-title{font-family:Fraunces,Georgia,serif!important;white-space:nowrap;margin:0!important}
.xpro-elementor-horizontal-navbar-nav{flex-wrap:nowrap!important;white-space:nowrap}
.xpro-elementor-horizontal-navbar-nav>li>a.menu-link{border-radius:999px;padding:8px 14px!important;font-family:Manrope,sans-serif;font-weight:600;font-size:14.5px;color:#132A20!important;transition:background .25s,color .25s}
.xpro-elementor-horizontal-navbar-nav>li>a.menu-link:hover,
.xpro-elementor-horizontal-navbar-nav>li.current-menu-item>a.menu-link{background:var(--oks);color:var(--okf)!important}
.xpro-elementor-dropdown-menu{border-radius:16px!important;border:1px solid var(--okline)!important;box-shadow:0 30px 70px -22px rgba(12,43,31,.32)!important;overflow:hidden;background:#FFFDF7!important;padding:6px!important}
.xpro-elementor-dropdown-menu li a{border-radius:10px;padding:10px 14px!important;font-family:Manrope,sans-serif;font-weight:500;transition:background .2s,color .2s}
.xpro-elementor-dropdown-menu li a:hover{background:var(--oks)!important;color:var(--okf)!important}

/* ---------- HOME hero slideshow (Ken Burns) ---------- */
.ok-hero{position:relative;overflow:hidden}
.ok-hero-slides{position:absolute;inset:0;z-index:0;pointer-events:none}
.ok-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,22,15,.32) 0%,rgba(8,22,15,.10) 42%,rgba(8,22,15,.85) 100%)}
.ok-hero>.e-con{position:relative;z-index:2}
.ok-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.ok-slide.on{opacity:1}
.ok-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.ok-slide.on img{animation:okKenburns 7s ease forwards}
@keyframes okKenburns{from{transform:scale(1.14) translateY(1.5%)}to{transform:scale(1.02) translateY(0)}}
.ok-hero.ok-hero-ready{background-image:none!important}
.ok-hero-tabs{display:flex;gap:.5rem;margin-top:1rem;width:auto}
.ok-hero-tabs button{flex:1;height:3px;border-radius:3px;background:rgba(246,243,234,.35);position:relative;overflow:hidden;border:0;padding:0;cursor:pointer}
.ok-hero-tabs button span{position:absolute;inset:0;background:var(--okc);transform:scaleX(0);transform-origin:left}
.ok-hero-tabs button.on span{animation:okTabfill 7s linear forwards}
@keyframes okTabfill{to{transform:scaleX(1)}}

/* ---------- hero panel widget spacing (native Elementor 2-col layout) ---------- */
/* Layout (row, text left / panel right) now comes from native Elementor container
   settings. These only tidy spacing between the panel's own widgets. */
.ok-hp-sub{margin-top:.3rem}
.ok-hp-lab{margin-top:.1rem}
.ok-hp-num .elementor-heading-title{line-height:1.15}

/* ---------- marquee (big italic scrolling strip) ---------- */
.ok-marquee{overflow:hidden;padding:1.2rem 0;border-top:1px solid var(--okline);border-bottom:1px solid var(--okline);background:var(--okpaper)}
.ok-marquee-track{display:flex;gap:3rem;width:max-content;animation:okTicker 30s linear infinite;font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.6rem);font-style:italic;color:transparent;-webkit-text-stroke:1px #4D5F55;white-space:nowrap}
.ok-marquee-track b{font-weight:500;color:var(--okc);-webkit-text-stroke:0;font-style:normal}

/* ---------- floating WhatsApp / call ---------- */
.ok-floats{position:fixed;right:1.3rem;bottom:5.6rem;z-index:110;display:grid;gap:.7rem}
.ok-float{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff!important;box-shadow:0 12px 34px -10px rgba(12,43,31,.35);transition:transform .3s ease;text-decoration:none!important}
.ok-float:hover{transform:translateY(-4px) scale(1.05);color:#fff}
.ok-float svg{width:22px;height:22px;fill:currentColor}
.ok-float-wa{background:#25d366;animation:okWaPulse 2.6s infinite}
.ok-float-call{background:#0E7490}
@keyframes okWaPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ---------- back to top ---------- */
.ok-backtop{position:fixed;right:1.42rem;bottom:1.3rem;z-index:110;width:46px;height:46px;border-radius:50%;background:var(--okf);color:var(--okpaper);display:grid;place-items:center;box-shadow:0 12px 34px -10px rgba(12,43,31,.35);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .35s;border:0;cursor:pointer}
.ok-backtop.on{opacity:1;visibility:visible;transform:none}
.ok-backtop:hover{transform:translateY(-3px);background:var(--okp)}
.ok-backtop svg{width:16px;height:16px;stroke:currentColor}

/* ---------- search overlay ---------- */
.ok-search-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--okline);background:#FFFDF7;color:var(--okink);display:inline-grid;place-items:center;cursor:pointer;margin-left:10px;transition:all .3s}
.ok-search-btn:hover{border-color:var(--okp);color:var(--okp);transform:translateY(-2px)}
.ok-search-btn svg{width:16px;height:16px}
.ok-search{position:fixed;inset:0;z-index:160;background:rgba(246,243,234,.9);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:grid;place-items:start center;padding-top:14vh;opacity:0;visibility:hidden;transition:all .35s}
.ok-search.on{opacity:1;visibility:visible}
.ok-search-close{position:absolute;top:1.4rem;right:1.6rem;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--okline);background:transparent;font-size:20px;cursor:pointer;color:var(--okink)}
.ok-search-box{width:min(640px,90%)}
.ok-search-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--okp);margin:0 0 12px;font-family:Manrope,sans-serif}
.ok-search input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--okink);font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,4vw,2.4rem);padding:6px 0;outline:none;color:var(--okink)}
.ok-search-results{margin:1.4rem 0 0;padding:0;list-style:none;display:grid;gap:8px;max-height:46vh;overflow:auto}
.ok-search-results a{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#FFFDF7;border:1px solid var(--okline);border-radius:14px;padding:14px 18px;transition:all .25s;text-decoration:none;color:var(--okink)}
.ok-search-results a:hover{border-color:var(--okp);transform:translateX(4px)}
.ok-search-results strong{font-size:15px;font-family:Manrope,sans-serif}
.ok-search-results small{color:#4D5F55;display:block;font-size:12.5px}

/* ---------- cookie banner ---------- */
.ok-cookie{position:fixed;left:1.2rem;bottom:1.2rem;z-index:170;max-width:400px;background:#FFFDF7;border:1px solid var(--okline);border-radius:18px;box-shadow:0 30px 70px -22px rgba(12,43,31,.4);padding:20px 22px;animation:okSlideup .6s ease;font-family:Manrope,sans-serif}
.ok-cookie p{font-size:14px;margin:0 0 12px;color:#4D5F55}
.ok-cookie a{color:var(--okp);font-weight:700}
.ok-cookie-actions{display:flex;gap:8px}
.ok-cookie-actions button{border-radius:999px;padding:8px 18px;font-weight:700;font-size:13px;cursor:pointer;border:1.5px solid transparent;font-family:inherit}
.ok-cookie-accept{background:var(--okf);color:var(--okpaper)}
.ok-cookie-decline{background:transparent;border-color:var(--okline)!important;color:var(--okink)}
@keyframes okSlideup{from{transform:translateY(24px);opacity:0}}
@media(max-width:640px){.ok-cookie{left:.8rem;right:.8rem;max-width:none}}

/* ---------- organic blob hero images on inner pages ---------- */
body:not(.home) .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-image img{
  aspect-ratio:5/4.4;object-fit:cover;
  border-radius:46% 54% 42% 58%/55% 45% 55% 45%!important;
  box-shadow:0 30px 70px -22px rgba(12,43,31,.32)}
@keyframes okBlob{
  0%{border-radius:46% 54% 42% 58%/55% 45% 55% 45%}
  100%{border-radius:56% 44% 58% 42%/45% 55% 45% 55%}}
body:not(.home) .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-image:hover img{transform:none}

/* ---------- footer polish ---------- */
.xpro-theme-builder-footer a{transition:color .25s,padding-left .25s}
.xpro-theme-builder-footer .xpro-info-list-item a:hover,.xpro-theme-builder-footer .xpro-infolist a:hover{padding-left:4px;color:#FDFBF4!important}

/* ---------- entrance-animation keyframes (Elementor doesn't auto-load them
   for DB-injected animations) ---------- */
.elementor-invisible{visibility:visible!important}
.animated{animation-duration:1.1s;animation-fill-mode:both;visibility:visible!important}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translateZ(0)}}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fadeIn{animation-name:fadeIn}

/* ---------- theme background, font & color enforcement (beats Astra defaults) ---------- */
body,.site,.hfeed.site,#content,.site-content,.ast-plain-container .site-content{background-color:#F6F3EA!important}
body,button,input,select,textarea,p,li,.elementor-widget-text-editor{font-family:Manrope,-apple-system,'Segoe UI',sans-serif!important}
body{color:#132A20}
h1,h2,h3,.elementor-heading-title.elementor-size-default{font-family:Fraunces,Georgia,serif!important}
h4,h5,h6{font-family:Manrope,sans-serif!important}
/* kickers (h6 heading widgets) keep Manrope via their own settings */
.elementor-widget-heading h6.elementor-heading-title{font-family:Manrope,sans-serif!important}
p{color:inherit}
.site-content a:not(.elementor-button):not(.ok-float):not(.menu-link){color:#1C6B47}
.site-content a:not(.elementor-button):not(.ok-float):not(.menu-link):hover{color:#B26A2B}
h1 em,h2 em,h3 em,h4 em{font-style:italic!important;font-weight:400!important;color:#B26A2B!important;font-family:Fraunces,Georgia,serif!important}
.xpro-theme-builder-header .e-con-inner{max-width:1280px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ok-ticker-track,.ok-marquee-track,.ok-slide.on img,.ok-hero-tabs button.on span,.ok-float-wa{animation:none!important}
  .ok-slide{transition:none}
}

/* ---------- header action cluster (dark + search) ---------- */
.ok-hdr-actions{display:inline-flex;align-items:center;gap:8px;margin-right:10px}
.ok-search-btn,.ok-theme-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--okline);background:#FFFDF7;color:var(--okink);display:inline-grid;place-items:center;cursor:pointer;transition:all .3s;padding:0}
.ok-search-btn:hover,.ok-theme-btn:hover{border-color:var(--okp);color:var(--okp);transform:translateY(-2px)}
.ok-search-btn svg,.ok-theme-btn svg{width:16px;height:16px}
.ok-theme-btn .ok-ic-moon{display:none}
body.ok-dark .ok-theme-btn .ok-ic-sun{display:none}
body.ok-dark .ok-theme-btn .ok-ic-moon{display:block}

/* ---------- dark mode ---------- */
body.ok-dark,body.ok-dark .site,body.ok-dark .hfeed.site,body.ok-dark #content,body.ok-dark .site-content,body.ok-dark .ast-plain-container .site-content{background-color:#0b1613!important}
body.ok-dark{color:#eef0e6}
body.ok-dark p,body.ok-dark li,body.ok-dark .elementor-widget-text-editor,body.ok-dark .elementor-icon-list-text{color:#a8b8ac!important}
body.ok-dark h1,body.ok-dark h2,body.ok-dark h3,body.ok-dark h4,body.ok-dark h5,body.ok-dark h6,body.ok-dark .elementor-heading-title{color:#eef0e6!important}
body.ok-dark h1 em,body.ok-dark h2 em,body.ok-dark h3 em,body.ok-dark h4 em{color:#e0a35c!important}
/* section backgrounds (cream → dark) */
body.ok-dark .elementor > .e-con{background-color:transparent!important}
body.ok-dark .e-con[style*="background-color"],body.ok-dark .elementor-element > .e-con-inner{background-color:transparent!important}
/* cards keep contrast */
body.ok-dark .ok-lift{background-color:#12241d!important;border-color:rgba(238,240,230,.12)!important}
body.ok-dark .ok-lift .elementor-heading-title{color:#eef0e6!important}
/* header + footer + tables */
body.ok-dark .xpro-theme-builder-header .e-con-boxed{background-color:rgba(11,22,19,.85)!important;border-bottom-color:rgba(238,240,230,.12)}
body.ok-dark .xpro-elementor-horizontal-navbar-nav>li>a.menu-link{color:#eef0e6!important}
body.ok-dark .ok-search-btn,body.ok-dark .ok-theme-btn{background:#12241d;border-color:rgba(238,240,230,.18);color:#eef0e6}
body.ok-dark .ok-table{background:#12241d;border-color:rgba(238,240,230,.14)}
body.ok-dark .ok-table td{border-bottom-color:rgba(238,240,230,.1)}
body.ok-dark .ok-table td:first-child{color:#eef0e6}
body.ok-dark .ok-ticker{background:#050f0a}
body.ok-dark .ok-marquee{background:#0b1613;border-color:rgba(238,240,230,.12)}
body.ok-dark .ok-cookie,body.ok-dark .ok-search{background:#12241d}
body.ok-dark .ok-search{background:rgba(11,22,19,.92)}
body.ok-dark .ok-search input{color:#eef0e6;border-bottom-color:#eef0e6}
body.ok-dark .ok-search-results a{background:#12241d;border-color:rgba(238,240,230,.14);color:#eef0e6}
body.ok-dark .elementor-icon-box-icon .elementor-icon{background-color:#1c3a2c!important}

/* ---------- HOME hero: constrain text width like the preview (approx 60%) ---------- */
body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child > .e-con-inner{max-width:1280px;margin-inline:auto}
body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-heading .elementor-heading-title,
body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-text-editor{max-width:620px}
@media(max-width:1024px){
  body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-heading .elementor-heading-title,
  body.home .elementor[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-text-editor{max-width:100%}
}