/*
Theme Name: Karibu Blocks
Description: A native WordPress block theme for Karibu Safari Zanzibar. No page builder required.
Version: 1.2.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: karibu-blocks
License: GPL-2.0-or-later
*/
:root{--ink:#164b76;--muted:#49677f;--paper:#ffffff;--sand:#edf8fb;--accent:#00bdca;--line:#cce0e9;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7}a{color:inherit;text-underline-offset:5px}a:hover{color:#b94000}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #00bdca;outline-offset:6px}img{display:block;max-width:100%;height:auto}figure{margin:0}p{margin:0 0 1.2em}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.04em;margin:0 0 .55em}h1{font-size:clamp(42px,5.7vw,86px)}h2{font-size:clamp(34px,4vw,58px)}h3{font-size:30px}h4,h5,h6{line-height:1.3}button,input{font:inherit}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.wp-site-blocks{padding:0!important}.wp-site-blocks>*{margin-block-start:0!important}.wp-block-group{box-sizing:border-box}.wp-block-group>*{margin-block-start:0}.wp-block-post-content{margin:0}.wp-block-template-part{margin:0}.site-header{background:var(--paper);border-bottom:1px solid var(--line)}.header-row{min-height:108px;display:flex;align-items:center;gap:35px;justify-content:space-between}.brand-wrap{margin:0}.brand{display:block;text-decoration:none;font-family:var(--serif);font-size:32px;letter-spacing:.1em;line-height:1}.brand span{display:block;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.27em;margin-top:10px}.main-nav,.header-row>nav{font-size:12px}.main-nav .wp-block-navigation__container,.header-row>nav{display:flex;gap:24px}.main-nav a,.header-row>nav a{text-decoration:none}.header-row .wp-block-buttons{margin:0}.wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.wp-block-button__link{display:inline-block;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:0;padding:15px 24px;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .2s}.wp-block-button__link:hover{background:#123b5e;color:white}.wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link{background:transparent;color:inherit;border-color:currentColor}.header-row .wp-block-button__link{padding:13px 18px;font-size:12px}.hero{position:relative;isolation:isolate;min-height:710px;display:flex;align-items:center;overflow:hidden;background:#164b76;color:white}.hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,31,28,.79),rgba(6,31,28,.24) 75%);z-index:-1}.hero-copy{padding-block:95px}.hero h1{max-width:850px}.hero-copy>p:not(.eyebrow):not(.hero-note){max-width:510px;font-size:17px;color:#f5f5ed}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:700;line-height:1.7;margin-bottom:24px}.hero .eyebrow{color:#d6e8c5}.hero .wp-block-button:first-child .wp-block-button__link{background:var(--accent);border-color:var(--accent);color:var(--ink)}.hero-note{font-size:9px;letter-spacing:.12em;margin-top:52px;margin-bottom:0}.intro{display:grid;grid-template-columns:1.6fr 1fr;gap:120px;padding-block:100px;align-items:center}.intro-copy>p:last-child{max-width:650px;color:var(--muted)}.intro-notes{padding-left:48px;border-left:1px solid var(--line)}.intro-notes .eyebrow{margin-bottom:7px}.intro-notes>p:not(.eyebrow){font-family:var(--serif);font-size:24px;line-height:1.3;margin-bottom:36px}.intro-notes>p:last-child{margin-bottom:0}.journeys{background:var(--sand);padding-block:90px}.journeys h2{max-width:650px}.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:45px}.journey-card figure{aspect-ratio:4/4.5;margin-bottom:28px;overflow:hidden}.journey-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.journey-card:hover img{transform:scale(1.025)}.journey-card .eyebrow{margin-bottom:12px}.journey-card p:not(.eyebrow){font-size:14px;color:var(--muted)}.journey-card .text-link{display:inline-block;color:var(--ink);font-weight:600;margin-top:6px}.story{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:110px}.story>figure{height:610px}.story>figure img{height:100%;width:100%;object-fit:cover}.story-copy p:not(.eyebrow){color:var(--muted)}.practical{padding-block:70px 100px;border-top:1px solid var(--line)}.practical>p:not(.eyebrow){max-width:650px;color:var(--muted)}.closing{background:var(--ink);color:var(--paper);padding-block:80px}.closing h2{max-width:750px}.closing .eyebrow{color:var(--accent)}.closing .wp-block-button:first-child .wp-block-button__link{background:var(--accent);border-color:var(--accent);color:var(--ink)}.site-footer{padding-block:75px 25px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:60px}.site-footer .brand{margin-bottom:25px}.site-footer h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:0;margin-bottom:24px}.site-footer p{font-size:13px;color:var(--muted);margin-bottom:12px}.site-footer a{text-decoration:none;overflow-wrap:anywhere}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;margin-top:55px}.footer-bottom p{font-size:11px}.page-heading{padding-block:75px 35px;border-bottom:1px solid var(--line);margin-bottom:45px}.page-heading h1{font-size:clamp(40px,5vw,70px)}.article-content{max-width:1000px;padding-bottom:80px}.article-content h2{font-size:clamp(28px,3vw,44px);margin-top:50px}.article-content h3{font-size:28px;margin-top:35px}.article-content>p,.article-content>ul,.article-content>ol{max-width:820px}.article-content>.wp-block-image{margin-block:28px;max-width:900px}.article-content>.wp-block-image img{width:100%;max-height:540px;object-fit:cover}.article-content .wp-block-table{overflow:auto;margin-block:26px}.wp-block-table table{border-collapse:collapse;width:100%;font-size:14px;background:white}.wp-block-table th,.wp-block-table td{border:1px solid var(--line);padding:14px;text-align:left;min-width:100px}.article-content>.closing{margin-top:65px;padding:45px}.article-content .closing .wrap{width:100%}.article-content .closing h2{margin-top:0}.article-content .closing p{max-width:100%}.preview-menu{display:none}.skip-link{position:absolute;left:15px;top:-100px;background:white;padding:12px;z-index:10000}.skip-link:focus{top:15px}.editor-styles-wrapper .hero{min-height:600px}
@media(min-width:1600px){.hero{min-height:780px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header-row{gap:20px}.main-nav .wp-block-navigation__container,.header-row>nav{gap:16px}.header-row>.wp-block-buttons{display:none}.intro{gap:55px}.story{gap:55px}.footer-grid{gap:35px}}
@media(max-width:767px){.wrap{width:calc(100% - 40px)}.header-row{min-height:85px}.brand{font-size:27px}.brand span{font-size:8px}.header-row>nav:not(.main-nav){display:none}.preview-menu{display:block;position:relative}.preview-menu summary{cursor:pointer}.preview-menu nav{position:absolute;right:0;top:40px;width:235px;background:var(--paper);padding:22px;z-index:50;box-shadow:0 6px 25px #164b7620}.preview-menu nav a{display:block;margin-bottom:14px;font-size:14px}.hero{min-height:660px}.hero-copy{padding-block:65px}.hero h1{font-size:49px}.hero-copy>p:not(.eyebrow):not(.hero-note){font-size:15px}.hero-note{max-width:270px;font-size:9px;line-height:1.7}.hero:after{background:linear-gradient(90deg,#061f1cc9,#061f1c40)}.wp-block-buttons{gap:12px}.wp-block-button__link{padding:14px 18px}.intro{grid-template-columns:1fr;gap:35px;padding-block:65px}.intro h2{font-size:35px}.intro-notes{padding-left:20px}.intro-notes>p:not(.eyebrow){font-size:22px}.journeys{padding-block:65px}.journey-grid{grid-template-columns:1fr;gap:42px}.journey-card figure{aspect-ratio:5/4}.journey-card h3{font-size:32px}.story{grid-template-columns:1fr;gap:35px;padding-block:65px}.story>figure{height:410px}.story h2{font-size:39px}.practical{padding-block:55px 65px}.closing{padding-block:60px}.closing h2{font-size:37px}.footer-grid{grid-template-columns:1fr;gap:35px}.site-footer{padding-top:55px}.footer-bottom{gap:15px}.page-heading{padding-block:50px 25px}.article-content>.closing{padding:25px}.article-content{padding-bottom:45px}.article-content .closing h2{font-size:30px}.wp-block-navigation__responsive-container.is-menu-open{background:var(--paper)!important;color:var(--ink)!important;padding:35px!important}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:30px}.media-grid figure{margin:0!important;aspect-ratio:4/3;overflow:hidden}.media-grid img{width:100%;height:100%;object-fit:cover}.article-content .media-grid{max-width:100%}@media(max-width:767px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Keep the photograph anchored to the viewport and clip it to the hero.
   The following sections scroll across it without a JavaScript scroll handler. */
.hero{clip-path:inset(0)}
.hero-photo{position:fixed;inset:0 0 auto;height:100vh;height:100lvh;margin:0}
/* The editor displays the image inside its editable section. */
.editor-styles-wrapper .hero{clip-path:none}
.editor-styles-wrapper .hero-photo{position:absolute;inset:0;height:100%}

/* Center the welcome and primary booking action over the fixed photograph. */
.hero-copy{text-align:center}
.hero h1{max-width:none;margin:0 auto;font-family:var(--sans);font-size:clamp(52px,6.5vw,96px);font-weight:400;line-height:1.4;letter-spacing:.07em}
.hero-copy .wp-block-buttons{justify-content:center;margin-top:42px}
.hero .wp-block-button:first-child .wp-block-button__link{background:#ff5b00;border-color:#ff5b00;color:#fff;border-radius:60px;padding:22px 52px;font-family:var(--serif);font-size:clamp(28px,3vw,44px);font-weight:400;min-width:320px}
.hero .wp-block-button:first-child .wp-block-button__link:hover{background:#d94a00;border-color:#d94a00}
.hero:after{background:rgba(10,48,82,.4)}
@media(max-width:767px){.hero h1{font-size:clamp(40px,12vw,64px)}.hero .wp-block-button:first-child .wp-block-button__link{min-width:0;padding:20px 36px;font-size:30px}.hero-copy .wp-block-buttons{margin-top:32px}}

/* Ocean, turquoise and orange from the reference branding. */
:root{--orange:#ff5b00;--turquoise:#00bdca}
.site-header,.site-footer{background:var(--ink);color:#fff}
.site-header{border-bottom-color:transparent}
.site-header .brand,.site-footer .brand{color:var(--turquoise)}
.site-header .brand span,.site-footer .brand span{color:var(--orange)}
.main-nav a,.site-header .wp-block-navigation{color:#fff}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--orange)}
.site-header .wp-block-button__link{background:var(--orange);border-color:var(--orange);color:#fff}
.site-footer p{color:#e1edf4}
.site-footer a:hover{color:var(--turquoise)}
.footer-bottom{border-top-color:#467596}
.closing .eyebrow{color:#65e3ed}
.closing .wp-block-button:first-child .wp-block-button__link{background:var(--orange);border-color:var(--orange);color:#fff}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--ink)!important;color:#fff!important}
.wp-block-navigation__responsive-container.is-menu-open a{color:#fff}
.hero-copy>p.trip-date{max-width:none;margin:24px auto 0;color:#fff;font-size:clamp(22px,3vw,44px);line-height:1.35;font-family:var(--serif)}

/* Display the supplied square logo without its surrounding empty space. */
.brand-logo{position:relative;width:190px;height:90px;flex-shrink:0;overflow:hidden;margin:0}
.brand-logo a{position:absolute;inset:0;display:block}
.brand-logo img{position:absolute;width:132%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-43.2%)}
.brand-logo:focus-within{outline:3px solid var(--turquoise);outline-offset:4px}
.site-footer .brand-logo{width:220px;height:104px;margin-bottom:20px}
@media(max-width:767px){.site-header .brand-logo{width:150px;height:71px}}

/* Transparent header over the homepage photograph; larger navigation. */
.site-header{background:transparent;color:var(--ink);border:0}
.site-header .main-nav,.site-header .main-nav a{color:var(--ink);font-size:20px;font-weight:600}
.home .site-header{position:absolute;inset:0 0 auto;z-index:10;color:#fff}
.home .site-header .main-nav,.home .site-header .main-nav a{color:#fff}
.site-header .main-nav a:hover{color:var(--orange)}
.home .hero{min-height:100svh}
.home .hero-copy{padding-top:150px}
.site-header .wp-block-navigation__responsive-container.is-menu-open a{color:#fff}
@media(max-width:1000px){
 .main-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}
 .main-nav .wp-block-navigation__responsive-container-open{display:flex!important}
 .main-nav .wp-block-navigation__responsive-container.is-menu-open a{font-size:24px}
}
@media(max-width:767px){.home .hero-copy{padding-top:115px}}

.welcome-intro{display:block;max-width:1000px;text-align:center}
.welcome-intro h2{font-size:clamp(36px,4.5vw,64px);margin-bottom:22px}
.welcome-subtitle{font-size:22px;color:var(--ink)}
.welcome-story{text-align:left;margin-top:40px;font-size:18px;line-height:1.85;color:var(--muted)}
.welcome-intro .wp-block-buttons{justify-content:center}
.welcome-intro .wp-block-button__link{background:var(--orange);border-color:var(--orange);color:#fff;border-radius:40px;font-size:18px;padding:17px 36px}
@media(max-width:767px){.welcome-story{font-size:16px;line-height:1.8}.welcome-subtitle{font-size:19px}}

/* Align navigation with the lettering in the supplied logo. */
@media(min-width:1001px){.site-header .header-row>nav.main-nav,.site-header .header-row>.wp-block-buttons{margin-top:32px}}
.welcome-story p{margin-bottom:2em}
.welcome-story p:last-child{margin-bottom:0}

.package-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:90px;padding-block:85px 100px;text-align:center}
.package-option{display:flex;flex-direction:column;align-items:center}
.package-option h3{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:24px}
.package-option>p{font-family:var(--serif);font-size:23px;line-height:1.7;max-width:540px;margin-bottom:32px}
.package-option .wp-block-buttons{justify-content:center;margin-top:auto;padding-top:10px}
.package-option .wp-block-button__link{min-width:270px;background:var(--orange);border-color:var(--orange);color:#fff;border-radius:50px;padding:21px 38px;font-family:var(--serif);font-weight:700;font-size:22px}
.package-option .wp-block-button__link:hover{background:#d94a00;border-color:#d94a00}
@media(max-width:767px){.package-options{grid-template-columns:1fr;gap:60px;padding-block:60px}.package-option h3{font-size:28px}.package-option>p{font-size:20px}}

/* Every page opens on a fixed experience image beneath the transparent menu. */
.site-header{position:absolute;inset:0 0 auto;z-index:10;color:#fff}
.site-header .main-nav,.site-header .main-nav a{color:#fff}
.site-header .main-nav a:hover{color:var(--orange)}
.inner-page .hero{min-height:100svh}
.inner-page .hero-copy{padding-top:150px}
.inner-page .hero h1{max-width:1000px;font-size:clamp(42px,6vw,84px);letter-spacing:.02em;text-transform:uppercase}
.inner-page .hero .eyebrow{color:#fff}
.page-content-panel{position:relative;z-index:1;background:var(--paper);padding-top:80px}
@media(max-width:767px){.inner-page .hero-copy{padding-top:115px}.inner-page .hero h1{font-size:clamp(36px,10vw,58px);overflow-wrap:break-word}.page-content-panel{padding-top:50px}}

.gallery-map{margin-block:45px 60px}
.gallery-map-frame{display:block;width:100%;height:480px;border:0}
.gallery-map p{margin-top:16px;font-size:14px}
@media(max-width:767px){.gallery-map-frame{height:360px}}

.gallery-closing{background:transparent;color:var(--ink);padding-block:25px 45px}
.gallery-closing .eyebrow{color:var(--ink)}
.wp-block-button__link.has-orange-background-color{color:#fff!important}

.karibu-tours-page .article-content{max-width:1240px}
.tour-introduction{max-width:900px;margin-bottom:65px}
.tour-introduction h2{margin-top:0}
.trip-section{display:grid;grid-template-columns:.95fr 1.05fr 1.1fr;gap:35px;padding-block:50px;border-top:1px solid var(--line);align-items:start}
.trip-section h2{font-size:32px;margin-top:0;line-height:1.2}
.trip-section h3{font-size:26px;margin-top:0;line-height:1.3}
.trip-summary .eyebrow{color:var(--orange);margin-bottom:15px}
.trip-location{font-size:14px;color:var(--muted);margin-bottom:30px}
.trip-summary li{margin-bottom:12px;font-size:15px}
.trip-itinerary>p{font-size:14px;color:var(--muted);margin-bottom:25px}
.itinerary-day{border-bottom:1px solid var(--line);padding:18px 0}
.itinerary-day summary{display:flex;align-items:baseline;gap:13px;cursor:pointer;list-style:none;font-size:20px;font-weight:700;line-height:1.35;color:#bc4300}
.itinerary-day summary::-webkit-details-marker{display:none}
.itinerary-day summary::before{content:'+';font-size:28px;line-height:1;flex-shrink:0}
.itinerary-day[open] summary::before{content:'−'}
.itinerary-day summary:focus-visible{outline:3px solid var(--turquoise);outline-offset:5px}
.itinerary-day>p,.itinerary-day>ul{font-size:15px;line-height:1.75;margin-top:20px}
.itinerary-day li{margin-bottom:10px}
.trip-slideshow{min-width:0}
.trip-slides{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.trip-slides::-webkit-scrollbar{display:none}
.trip-slides .trip-slide{flex:0 0 100%;width:100%;margin:0!important;aspect-ratio:4/3;scroll-snap-align:start}
.trip-slide img{height:100%;width:100%;object-fit:cover}
.trip-slider-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}
.trip-slider-controls button{background:var(--orange);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:23px;cursor:pointer}
.trip-slide-count{font-size:14px;min-width:50px;text-align:center}
.tailored-tours{padding-block:55px;border-top:1px solid var(--line)}
.tour-booking-info{padding-block:20px 50px;max-width:900px}
.tour-booking-info p{font-size:14px;color:var(--muted)}
@media(max-width:1100px){.trip-section{grid-template-columns:1fr 1fr}.trip-slideshow{grid-column:2;grid-row:1}.trip-itinerary{grid-column:1/-1}.trip-summary{grid-column:1;grid-row:1}}
@media(max-width:767px){.trip-section{display:flex;flex-direction:column;gap:30px;padding-block:40px}.trip-section>*{width:100%}.trip-section h2{font-size:29px}.trip-slideshow{order:3}.itinerary-day summary{font-size:19px}}

.karibu-packages-page .article-content{max-width:1240px}
.packages-introduction{max-width:850px;margin-bottom:50px}
.packages-introduction h2{margin-top:0}
.original-package-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:45px 35px;background:var(--sand);margin-bottom:30px;align-items:start}
.original-package-section:nth-of-type(even){background:#f6f8fa}
.original-package-section h2{font-size:32px;line-height:1.25;margin:24px 0}
.original-package-section h3{font-size:24px;line-height:1.3;margin:0 0 25px}
.original-package-section .package-itinerary-copy h3:not(:first-child){margin-top:32px}
.package-itinerary-copy>p{font-family:var(--serif);font-size:18px;line-height:1.8;margin-bottom:24px}
.package-photo-prices{min-width:0}
.package-photo-prices>.wp-block-image{margin:0 0 25px}
.package-photo-prices>.wp-block-image img{width:100%;max-height:390px;object-fit:cover}
.package-price-panel{background:#fff;padding:25px 20px}
.package-price-panel h3{text-align:center;text-transform:uppercase;font-family:var(--sans);font-size:26px;font-weight:400;line-height:1.3}
.package-price-panel .wp-block-table{margin:0;overflow-x:auto}
.package-price-panel table{font-size:14px}
.package-price-panel th{background:var(--orange);color:#fff;font-weight:600}
.package-price-panel th,.package-price-panel td{min-width:85px;padding:14px 10px}
@media(max-width:1000px){.original-package-section{gap:30px;padding:35px 25px}}
@media(max-width:767px){.original-package-section{grid-template-columns:1fr;gap:25px;padding:30px 20px}.original-package-section h2{font-size:28px}.package-price-panel{padding:20px 12px}.package-price-panel h3{font-size:23px}}

/* Closing message sits directly on the page, without a blue panel. */
.closing{background:transparent;color:var(--ink)}
.closing .eyebrow{color:var(--ink)}