/*
Theme Name: Samawa Living
Theme URI: https://samawazanzibar.com
Template: hoteller
Author: Apptology
Author URI: https://apptology.ae
Description: Samawa Living — child theme of Hoteller (Island & Beach demo). Brand palette, self-hosted Suisse BP Int'l typography, and styling overrides for the Samawa Living boutique wellness hotel in Paje, Zanzibar.
Version: 1.0.0
Text Domain: samawa-child
*/

/* =====================================================================
   Brand fonts — self-hosted Suisse BP Int'l
   ===================================================================== */
@font-face{
  font-family:'Suisse BP Intl';
  src:url('assets/fonts/suisse-intl-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Suisse BP Intl';
  src:url('assets/fonts/suisse-intl-thin.otf') format('opentype');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Suisse BP Intl';
  src:url('assets/fonts/suisse-intl-thin-italic.otf') format('opentype');
  font-weight:200; font-style:italic; font-display:swap;
}
/* Cormorant Garamond removed 2026-06-10 — brand book specifies Suisse BP Int'l only. */

/* =====================================================================
   Brand palette tokens
   ===================================================================== */
:root{
  /* Brand book palette. Sage #a0c5c7 is a LIGHT blue-grey — decorative fills/
     borders only; the dark same-hue variants carry interactive use (white text). */
  --sw-sage:#a0c5c7; --sw-sage-dark:#467a7d; --sw-sage-deep:#335458;
  --sw-clay:#d59c75; --sw-clay-dark:#a26a3c; --sw-peach:#eabb94;
  --sw-cream:#fcf9f2; --sw-cream-2:#f7f0e3; --sw-sand:#f3dfc0;
  --sw-ink:#2f2f2f; --sw-ink-soft:#4a4845;
}

/* =====================================================================
   Typography — Suisse everywhere
   ===================================================================== */
body, input, textarea, select, button{
  font-family:'Suisse BP Intl', -apple-system, "Segoe UI", system-ui, sans-serif;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:'Suisse BP Intl', Georgia, serif !important;
  letter-spacing:-0.01em;
}
body{ color:var(--sw-ink); background-color:var(--sw-cream); }

/* Large display headings render thin for an elegant, airy feel */
#page_caption h1, .post_caption h1,
.elementor-element h1.elementor-heading-title,
h1.elementor-heading-title{
  font-weight:200 !important;
  letter-spacing:-0.02em;
}

/* =====================================================================
   Header logo — Samawa wordmark sizing (was a 112x112 emblem)
   ===================================================================== */
#logo_normal img, #logo_transparent img, #logo_sticky img,
#logo .logo_wrapper img, .logo_wrapper img{
  width:auto !important;
  height:auto !important;
  max-height:42px !important;
}
@media (max-width:767px){
  #logo_normal img, #logo_transparent img, #logo_sticky img,
  #logo .logo_wrapper img, .logo_wrapper img{ max-height:34px !important; }
}

/* =====================================================================
   Colour overrides (theme options cover most; these catch Elementor + gaps)
   ===================================================================== */
a{ color:var(--sw-sage); }
a:hover,a:focus{ color:var(--sw-sage-dark); }

.elementor-button,
.elementor-button-link{
  background-color:var(--sw-sage);
  border-color:var(--sw-sage);
}
.elementor-button:hover,
.elementor-button:focus{
  background-color:var(--sw-sage-dark);
  border-color:var(--sw-sage-dark);
}

/* Hoteller (nd/themegoods) buttons */
.nd_options_button, .nd_booking_button,
button.nd_options_button, input[type="submit"]{
  background-color:var(--sw-sage) !important;
  border-color:var(--sw-sage) !important;
  color:#fff !important;
}
.nd_options_button:hover, input[type="submit"]:hover{
  background-color:var(--sw-sage-dark) !important;
  border-color:var(--sw-sage-dark) !important;
}

/* Warm cream base so white sections sit on the brand background */
#wrapper, .top_bar, html{ background-color:var(--sw-cream); }

/* Soften the accommodation amenities band from demo navy to brand sage-deep */
.singleroom_amenities{ background:var(--sw-sage-deep) !important; }
.mphbr-star-rating>span{ color:var(--sw-clay) !important; }

/* =====================================================================
   Transparent-header legibility over bright hero photos
   ===================================================================== */
#wrapper.transparent #logo img,
.transparent #logo img{
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.40));
}
#wrapper.transparent .top_bar:not(.scroll) #menu_wrapper a,
#wrapper.transparent .top_bar:not(.scroll) .header_client_wrapper a,
#wrapper.transparent .top_bar:not(.scroll) #mobile_nav_icon,
.transparent .top_bar:not(.scroll) #nav_wrapper a{
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}

/* Page-caption hero (standard pages with a featured image) — give the title room */
#page_caption.hasbg{ min-height:460px; }
#page_caption.hasbg h1{ color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,0.35); }

/* =====================================================================
   Scroll-flicker fix
   The fixed header (#elementor_header on Elementor-header pages, the theme
   header on inner pages) repainted every scroll frame because it had no
   compositor layer, and `transition: all` animated layout props on the
   transparent->solid toggle. Promote it to its own GPU layer and scope the
   transition to paint-only properties.
   ===================================================================== */
#elementor_header,
#header_wrapper,
.top_bar,
#nav_wrapper{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}
#elementor_header,
#elementor_header *{
  transition-property: background-color, color, box-shadow, opacity, border-color !important;
}

/* =====================================================================
   Floating WhatsApp button
   ===================================================================== */
.sw-whatsapp{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  z-index:9990; box-shadow:0 4px 14px rgba(0,0,0,0.22);
  transition:transform .2s ease, background .2s ease;
}
.sw-whatsapp:hover,.sw-whatsapp:focus{ background:#1ebe57; color:#fff; transform:translateY(-2px); }
@media (max-width:767px){ .sw-whatsapp{ width:48px; height:48px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); } }
@media print{ .sw-whatsapp{ display:none; } }

/* =====================================================================
   Booking: NightsBridge is the engine — hide MotoPress reservation/search
   forms so guests don't create orphaned (unmonitored) MotoPress bookings.
   Room *details* (size/capacity/amenities/gallery) are untouched.
   ===================================================================== */
.mphb_sc_booking_form-wrapper,
.mphb-booking-form,
.widget_mphb_search_availability_widget,
.mphb_sc_search-wrapper,
.mphb_sc_availability_search-wrapper{
  display:none !important;
}

/* =====================================================================
   Home rooms grid (hoteller-service-grid #270eb52) — the 5 suites wrap
   3 + 2 across a fixed-height float grid; give the two rows breathing room.
   ===================================================================== */
.elementor-element-270eb52 .service-grid-wrapper{
  margin-bottom:48px;
}
@media (max-width:767px){
  .elementor-element-270eb52 .service-grid-wrapper{ margin-bottom:24px; }
}

/* =====================================================================
   Elementor header — keep the hamburger icon and the "Menus" label
   vertically centred. They are inline (width-auto) widgets; in the
   sticky header state the label drifted below the icon. Force middle
   alignment in both the normal and sticky header wrappers.
   ===================================================================== */
#elementor_header .elementor-widget__width-auto,
#elementor_sticky_header .elementor-widget__width-auto{
  vertical-align:middle !important;
}
#elementor_header .elementor-widget-heading .elementor-heading-title,
#elementor_sticky_header .elementor-widget-heading .elementor-heading-title{
  margin:0;
  line-height:1.2;
}

/* =====================================================================
   SECTION headings — Suisse BP Int'l Thin (brand book: the one font is
   Suisse; Thin = titling). The hero keeps its own bolder treatment;
   nav / buttons stay Suisse. (Was Cormorant Garamond — off-brand.)
   ===================================================================== */
h2, h3, h4,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.singleroom_title, .mphb-room-type-title, .page_title{
  font-family:'Suisse BP Intl', Georgia, serif !important;
  font-weight:200 !important;
  letter-spacing:-0.01em !important;
}
/* a touch more scale + airy line-height for serif section headings */
.elementor-widget-heading h2.elementor-heading-title{ line-height:1.12; }

/* keep the hero h1 in Suisse thin (modern boutique statement) */
h1, h1.elementor-heading-title, #page_caption h1, .post_caption h1{
  font-family:'Suisse BP Intl', Georgia, serif !important;
}
/* "Karibu" accent (widget 9992bb4) → Suisse Thin Italic (the brand's italic
   titling cut; replaces the off-brand Silverline script). `body` prefix
   lifts specificity above the heading rule. */
body .elementor-element-9992bb4 .elementor-heading-title{
  font-family:'Suisse BP Intl', Georgia, serif !important;
  font-weight:200 !important; font-style:italic !important;
}
/* nav / buttons stay Suisse */
#menu_wrapper a, #nav_wrapper a, .elementor-button, .nd_options_button{
  font-family:'Suisse BP Intl', -apple-system, system-ui, sans-serif !important;
}

/* =====================================================================
   Home rooms — swipeable carousel (Phase 12b). Convert the existing
   service-grid (#270eb52) from a 3+2 float grid to a horizontal
   scroll-snap carousel (3 visible desktop / 2 tablet / ~1.2 mobile).
   Arrow controls injected by child JS.
   ===================================================================== */
.elementor-element-270eb52 .service-grid-content-wrapper{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:22px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:6px;
}
.elementor-element-270eb52 .service-grid-content-wrapper::-webkit-scrollbar{ display:none; }
.elementor-element-270eb52 .service-grid-wrapper{
  float:none !important;
  flex:0 0 calc((100% - 44px) / 3);
  margin:0 !important;
  scroll-snap-align:start;
}
@media (max-width:1024px){
  .elementor-element-270eb52 .service-grid-wrapper{ flex-basis:calc((100% - 22px) / 2); }
}
@media (max-width:767px){
  .elementor-element-270eb52 .service-grid-wrapper{ flex-basis:82%; }
}
.sw-carousel{ position:relative; }
.sw-carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--sw-ink);
  border:none; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); font-size:22px; line-height:1;
  transition:background .2s ease, opacity .2s ease;
}
.sw-carousel-nav:hover{ background:#fff; }
.sw-carousel-prev{ left:8px; }
.sw-carousel-next{ right:8px; }
.sw-carousel-nav[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:767px){ .sw-carousel-nav{ display:none; } }

/* Hero headline stays one cohesive Suisse statement ("Where the sky" +
   "meets the sea"); the serif rule above had turned the 2nd line serif.
   The supporting tagline keeps the elegant serif italic. */
body .elementor-element-05c07ac .elementor-heading-title,
body .elementor-element-b196aba .elementor-heading-title{
  font-family:'Suisse BP Intl', Georgia, serif !important;
  font-weight:200 !important;
}


/* =====================================================================
   Hover / focus polish (Phase 13) — designed interactive states + a11y
   keyboard focus rings.
   ===================================================================== */
a, .elementor-button, .nd_options_button, button, input, textarea, select{
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.elementor-button:hover, .nd_options_button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.mobile_menu_wrapper a:focus-visible{
  outline: 2px solid var(--sw-sage);
  outline-offset: 2px;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus,
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
  border-color: var(--sw-sage) !important;
  box-shadow: 0 0 0 2px rgba(94,147,150,.18) !important;
  outline: none;
}
/* feature/room cards: subtle image zoom on hover */
.elementor-element-270eb52 .service-grid-wrapper{ overflow:hidden; }
.elementor-element-270eb52 .service-grid-wrapper a, .elementor-element-270eb52 .service-grid-wrapper{ transition: transform .4s ease; }

/* =====================================================================
   Card system for content pages (Phase 13) — lifts the classic pages
   (Wellbeing / Experiences / Offers / Sustainability) into an editorial
   card layout matching the theme, while keeping Samawa content.
   ===================================================================== */
.sw-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:36px auto 56px; max-width:1140px; }
@media (max-width:900px){ .sw-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .sw-cards{ grid-template-columns:1fr; } }
.sw-card{ background:#fff; border-radius:10px; padding:30px 28px; box-shadow:0 6px 24px rgba(47,47,47,.06); border-top:3px solid var(--sw-sage); transition:transform .25s ease, box-shadow .25s ease; }
.sw-card:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(47,47,47,.12); }
.sw-card h3{ margin:0 0 10px; font-family:'Suisse BP Intl',Georgia,serif !important; font-size:1.6rem; font-weight:200; color:var(--sw-ink); }
.sw-card p{ margin:0; color:var(--sw-ink-soft); line-height:1.62; }
.sw-offer{ border-top-color:var(--sw-clay); display:flex; flex-direction:column; }
.sw-badge{ align-self:flex-start; background:var(--sw-clay); color:#fff; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding:5px 13px; border-radius:40px; margin-bottom:14px; }
.sw-validity{ font-size:.8rem; color:var(--sw-ink-soft); font-style:italic; margin-top:10px; }
.sw-btn{ display:inline-block; align-self:flex-start; margin-top:18px; background:var(--sw-sage); color:#fff !important; padding:11px 24px; border-radius:5px; text-decoration:none; font-size:.85rem; letter-spacing:.04em; transition:background .2s ease, transform .2s ease; }
.sw-btn:hover{ background:var(--sw-sage-dark); color:#fff !important; transform:translateY(-2px); }
.sw-section-intro{ max-width:760px; margin:0 auto 6px !important; text-align:center; }
.sw-cta-band{ text-align:center; margin:46px 0 52px; }

/* =====================================================================
   Rooms archive (/accommodation/) — give the header a hero image so it
   matches the editorial pages instead of a bare title band. Root-relative
   URL so it survives the WordPress.com migration.
   ===================================================================== */
.post-type-archive-mphb_room_type #page_caption{
  background-image: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.42)), url("/wp-content/uploads/2026/06/218-1.webp");
  background-size: cover;
  background-position: center;
  min-height: 440px;
}
.post-type-archive-mphb_room_type #page_caption h1{
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* Clean image strip (replaces broken [gallery] on content pages) */
.sw-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1140px; margin:28px auto 8px; }
@media (max-width:767px){ .sw-strip{ grid-template-columns:1fr 1fr; } }
.sw-strip img{ width:100% !important; height:260px !important; object-fit:cover !important; border-radius:8px; display:block; margin:0 !important; max-width:none !important; }

/* =====================================================================
   PHASE 14 — Home polish round 2 + real TripAdvisor reviews (2026-06-05)
   ===================================================================== */

/* Header left group (burger icon + "Menu") — keep on ONE vertically-centred
   row in BOTH the static header and the sticky clone. Structural selectors
   (not element IDs) so the sticky clone is covered too. */
#elementor_header .elementor-top-column:first-child > .elementor-widget-wrap,
#elementor_sticky_header .elementor-top-column:first-child > .elementor-widget-wrap{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:flex-start; gap:10px;
}
/* Zero the item margins. The burger image widget ships Elementor's default
   spacing (3px top + 20px bottom); align-items:center centres each item's MARGIN
   box, so that bottom margin shoved the icon ~9px above "Menu" in the sticky
   clone. Margins gone -> both items centre on their content box -> aligned. */
#elementor_header .elementor-top-column:first-child > .elementor-widget-wrap > .elementor-widget,
#elementor_sticky_header .elementor-top-column:first-child > .elementor-widget-wrap > .elementor-widget{
  width:auto !important; flex:0 0 auto !important; margin:0 !important;
}
#elementor_header .elementor-top-column:first-child .elementor-heading-title,
#elementor_sticky_header .elementor-top-column:first-child .elementor-heading-title{
  line-height:1 !important; margin:0 !important;
}

/* (3) Intro "Nestled…" — full-width column, centred on a readable measure */
.elementor-element-14bf7d6{ max-width:980px; margin-left:auto; margin-right:auto; }
.elementor-element-14bf7d6 .elementor-heading-title{ text-align:center; }

/* (4) Oasis — image matches the text column height; larger, airier type */
.elementor-element-28fbac8 img{
  height:520px; width:100%; object-fit:cover; border-radius:4px; display:block;
}
@media (max-width:1024px){ .elementor-element-28fbac8 img{ height:380px; } }
.elementor-element-fce244c .elementor-heading-title{ font-size:32px; }
.elementor-element-a63e100, .elementor-element-a63e100 p{ font-size:17px; line-height:1.75; }

/* (7) TripAdvisor — real guest reviews (renders everywhere, incl. localhost) */
.sw-tareviews{ max-width:1160px; margin:0 auto; text-align:center; }
.sw-tareviews__head{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; margin-bottom:34px;
}
.sw-tareviews__rating{
  font-family:'Suisse BP Intl', Georgia, serif; font-size:48px; line-height:1;
  color:var(--sw-sage-deep); font-weight:200;
}
.sw-tareviews__stars{ color:var(--sw-clay); letter-spacing:2px; font-size:22px; }
.sw-tareviews__count{
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--sw-ink-soft);
}
.sw-tareviews__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.sw-tacard{
  flex:0 1 320px; display:flex; flex-direction:column; text-align:left; margin:0;
  background:#fff; border:1px solid #ece4d6; border-radius:7px; padding:26px 24px;
  box-shadow:0 6px 24px rgba(47,47,47,.05);
}
.sw-tacard__stars{ color:var(--sw-clay); letter-spacing:2px; font-size:15px; margin-bottom:12px; }
.sw-tacard__title{ margin:0 0 8px; font-weight:600; font-size:15px; color:var(--sw-sage-deep); }
.sw-tacard__quote{
  margin:0 0 18px; padding:0; border:0; font-style:normal;
  font-size:15px; line-height:1.65; color:var(--sw-ink);
}
.sw-tacard__by{ margin-top:auto; display:flex; flex-direction:column; gap:3px; }
.sw-tacard__name{ font-weight:600; font-size:14px; color:var(--sw-ink); }
.sw-tacard__meta{ font-size:11.5px; color:#8a8a8a; text-transform:uppercase; letter-spacing:.08em; }
.sw-tareviews__cta{ margin-top:36px; }
.sw-tareviews__cta .sw-btn{ margin-top:0; }
@media (max-width:767px){ .sw-tacard{ flex:0 1 100%; } }

/* =====================================================================
   PHASE 15 — register the Hoteller demo handwriting script (Silverline).
   The font file shipped with the demo but no @font-face declared it, so
   the Guest Reviews quote (66d4bf3, already set to this family in Elementor)
   and "Karibu" (9992bb4) fell back to sans-serif/cursive. Root-relative URL
   so it survives the WordPress.com migration.
   ===================================================================== */
/* Silverline script removed 2026-06-10 — brand book specifies Suisse only;
   "Karibu" (9992bb4) + the guest-review quote (66d4bf3) now use Suisse Thin Italic. */
/* script needs a little more leading than Elementor's 1.2em default */
.elementor-element-66d4bf3 .elementor-heading-title,
.elementor-element-66d4bf3{ line-height:1.4 !important; }
body .elementor-element-66d4bf3 .elementor-heading-title{
  font-family:'Suisse BP Intl', Georgia, serif !important;
  font-weight:200 !important; font-style:italic !important;
}

/* =====================================================================
   PHASE 16 — image-topped cards. Each .sw-card gets an optional top image
   (.sw-card__img) + a padded .sw-card__body so text & image read as one
   editorial card. Applies on Experiences/Wellbeing/Offers/Sustainability.
   ===================================================================== */
.sw-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.sw-card__img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .5s ease; }
.sw-card:hover .sw-card__img{ transform:scale(1.05); }
.sw-card__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1 1 auto; }
.sw-offer .sw-btn{ margin-top:auto; }

/* =====================================================================
   PHASE 16 (superseded 2026-06-10): the /accommodation/ archive now renders
   via a child template — archive-mphb_room_type.php — that reuses the
   single-room "Other Rooms" card markup (.singleroom_other_rooms /
   .room_grid_wrapper), so it inherits the parent theme's room-card styling
   verbatim. The old .sidebar_content / .mphb_room_type / .post_* overrides
   (and the get_the_excerpt spec-line filter) were removed. The archive
   #page_caption hero rules above still apply.
   ===================================================================== */
/* Center a partial last row: the parent's float grid left-aligns a trailing
   row of 2, which breaks the rhythm — switch the archive container to centered
   flexbox (scoped to .sw-room-archive so the single-page "Other Rooms" section
   is untouched). Card width math mirrors the parent's 3/2/1 columns. */
.sw-room-archive{ padding-bottom:84px; }   /* parent wrapper padding is single-page-scoped → add archive breathing room above the footer */
.sw-room-archive .singleroom_other_rooms{
  display:flex; flex-wrap:wrap; justify-content:center; gap:50px 30px;
}
.sw-room-archive .room_grid_wrapper.one_third{
  float:none !important; margin:0 !important; width:calc(33.33% - 20px);
}
@media (max-width:960px){
  .sw-room-archive .room_grid_wrapper.one_third{ width:calc(50% - 15px); }
}
@media (max-width:600px){
  .sw-room-archive .room_grid_wrapper.one_third{ width:100%; }
}
/* The parent's .post_img_hover carries a dark lazy-load gradient (#222→#444);
   because the image renders inline-block it leaves a baseline gap, so that dark
   bg shows as a band under the room-card photos. Make the image a block that
   fills the card and drop the placeholder bg. Covers the archive + the single-
   page "Other Rooms" section (both use .singleroom_other_rooms). */
.singleroom_other_rooms .post_img_hover{ display:block; background:none !important; line-height:0; }
.singleroom_other_rooms .post_img_hover img{ display:block; width:100%; height:auto; }

/* =====================================================================
   PHASE 17 — Mobile design refinements (client feedback, 2026-06-08)
   NB: most of the client's "mobile" report was a broken local dev server
   serving the whole site unstyled (root cause fixed separately). These are
   the genuine refinements that remain on the correctly-rendered site.
   ===================================================================== */

/* (#8) "Book now" — the header CTA (widget cb90b54) rendered as a bare white
   text link. Make it a prominent clay button. The widget class also covers
   the sticky-header clone. */
.elementor-element-cb90b54 .elementor-heading-title{ margin:0 !important; }
.elementor-element-cb90b54 .elementor-heading-title a{
  display:inline-block;
  background:var(--sw-clay);
  color:#fff !important;
  padding:11px 22px;
  border-radius:6px;
  font-size:14px;
  letter-spacing:.03em;
  line-height:1.3;
  box-shadow:0 4px 14px rgba(0,0,0,.20);
}
.elementor-element-cb90b54 .elementor-heading-title a:hover,
.elementor-element-cb90b54 .elementor-heading-title a:focus{
  background:var(--sw-clay-dark); color:#fff !important;
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.26);
}
@media (max-width:767px){
  .elementor-element-cb90b54 .elementor-heading-title a{ padding:9px 16px; font-size:13px; }
}

/* (#5,#6,#7) Hero headline + subtitle — mobile/tablet only (desktop keeps its
   airy thin treatment). Bolder, more legible headline over the bright hero
   photo; subtitle a touch larger; gap under the headline tightened. */
@media (max-width:1024px){
  body .elementor-element-05c07ac .elementor-heading-title,
  body .elementor-element-b196aba .elementor-heading-title{
    font-weight:400 !important;
    text-shadow:0 2px 16px rgba(0,0,0,.36);
  }
  body .elementor-element-082edd7 .elementor-heading-title{ font-size:17px !important; }
  body .elementor-element-082edd7{ margin-top:-8px; }
}

/* =====================================================================
   PHASE 18 — Home hero: Ken-Burns slideshow polish + bespoke text reveal
   + scroll cue (2026-06-09). The slideshow itself is native Elementor on
   section 0110ad6; everything here is presentation/motion in the child theme.
   ===================================================================== */

/* (a) Legibility scrim — replace the flat Elementor overlay with a bottom-
   weighted gradient so the white headline reads on every slide (bright suite,
   dining, yoga, pool) without darkening the whole image. */
.elementor-element-0110ad6 > .elementor-background-overlay{
  background: linear-gradient(to top,
     rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.08) 64%, rgba(0,0,0,0) 100%) !important;
  opacity: 1 !important;
}

/* (b) Neutralise the theme's "smoove" scroll-animation inside the hero so it
   can't hold the column hidden or fight the bespoke reveal below. */
.elementor-element-0110ad6 .smoove{ transform:none !important; opacity:1 !important; }

/* (c) Bespoke staggered text reveal. The hidden state applies ONLY when JS is
   active (html.sw-hero-js, set in <head> before paint) and motion is allowed,
   so no-JS and reduced-motion users see the text instantly — no FOUC, never
   stuck hidden. Each line flies up + unblurs in sequence. */
html.sw-hero-js .elementor-element-0110ad6 .elementor-element-05c07ac .elementor-heading-title,
html.sw-hero-js .elementor-element-0110ad6 .elementor-element-b196aba .elementor-heading-title,
html.sw-hero-js .elementor-element-0110ad6 .elementor-element-082edd7 .elementor-heading-title{
  opacity:0; transform:translateY(30px); filter:blur(7px);
  will-change:opacity, transform, filter;
}
.elementor-element-0110ad6.sw-hero-in .elementor-element-05c07ac .elementor-heading-title{ animation:sw-hero-line .95s cubic-bezier(.16,1,.3,1) .10s both; }
.elementor-element-0110ad6.sw-hero-in .elementor-element-b196aba .elementor-heading-title{ animation:sw-hero-line .95s cubic-bezier(.16,1,.3,1) .28s both; }
.elementor-element-0110ad6.sw-hero-in .elementor-element-082edd7 .elementor-heading-title{ animation:sw-hero-line .95s cubic-bezier(.16,1,.3,1) .50s both; }
@keyframes sw-hero-line{
  from{ opacity:0; transform:translateY(30px); filter:blur(7px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}

/* (d) Scroll cue — minimal "mouse" indicator, bottom-centre of the hero,
   fades out on first scroll. */
.sw-scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.72); border-radius:14px;
  z-index:5; opacity:.9; transition:opacity .45s ease; pointer-events:none;
}
.sw-scroll-cue::after{
  content:""; position:absolute; left:50%; top:8px; width:3px; height:8px; border-radius:2px;
  background:#fff; transform:translateX(-50%); animation:sw-scroll-dot 1.7s ease-in-out infinite;
}
.sw-scroll-cue.is-hidden{ opacity:0; }
@keyframes sw-scroll-dot{
  0%{ opacity:0; transform:translate(-50%,0); }
  30%{ opacity:1; } 70%{ opacity:1; transform:translate(-50%,13px); }
  100%{ opacity:0; transform:translate(-50%,13px); }
}

/* (e) Accessibility — honour reduced-motion: text instant, cue static. */
@media (prefers-reduced-motion: reduce){
  html.sw-hero-js .elementor-element-0110ad6 .elementor-heading-title{
    opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;
  }
  .sw-scroll-cue::after{ animation:none; top:15px; }
}

/* =====================================================================
   PHASE 19 — Brand colour alignment (2026-06-10)
   Brand palette: clay #d59c75 · sage #a0c5c7 · peach #eabb94 · sand #f3dfc0.
   The page base is warmed to brand sand. The brand sage is a light blue-grey
   (used decoratively — e.g. card top-borders now render it), so interactive
   elements use the WCAG-safe dark same-hue variant. The primary CTA stays clay.
   ===================================================================== */
html, body, #wrapper{ background-color:var(--sw-sand) !important; }

/* Interactive sage → accessible deep sage (AA on the sand page bg) */
a{ color:var(--sw-sage-deep); }
a:hover, a:focus{ color:var(--sw-sage-deep); text-decoration:underline; }
.elementor-button, .elementor-button-link,
.nd_options_button, .nd_booking_button, button.nd_options_button,
input[type="submit"], .sw-btn{
  background-color:var(--sw-sage-dark) !important;
  border-color:var(--sw-sage-dark) !important;
}
.elementor-button:hover, .elementor-button:focus,
.nd_options_button:hover, input[type="submit"]:hover, .sw-btn:hover{
  background-color:var(--sw-sage-deep) !important;
  border-color:var(--sw-sage-deep) !important;
}
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.mobile_menu_wrapper a:focus-visible{ outline-color:var(--sw-sage-dark) !important; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus,
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
  border-color:var(--sw-sage-dark) !important;
}

/* =====================================================================
   PHASE 20 — WCAG AA contrast remediation (2026-06-10)
   Verified fails on the brand sand bg: Elementor footer/menu links rendered
   the theme accent #5e9396 (2.6–3.5:1 on sand/white) and the TripAdvisor CTA
   used black theme text on the sage-dark fill (4.34:1). Fixes take editorial
   /footer link text to deep sage (>=6.3:1 on sand, 8.3:1 on white) and force
   white button labels on the dark-sage/clay fills (>=4.6:1). Every measured
   failing link sits on a LIGHT surface (the footer is light), so deepening is
   safe — no white-on-dark link is in scope. Social-icon glyphs (3.75:1) are
   graphics and already clear the 3:1 non-text threshold, so they're left.
   ===================================================================== */
.elementor-widget-icon-list a,
.elementor-widget-text-editor a,
.elementor-widget-icon-box a:not(.elementor-button),
.entry-content a:not(.elementor-button),
.post_header_title a{
  color:var(--sw-sage-deep) !important;
}
.elementor-widget-icon-list a:hover,
.elementor-widget-text-editor a:hover,
.elementor-widget-icon-box a:not(.elementor-button):hover,
.entry-content a:not(.elementor-button):hover,
.post_header_title a:hover{
  color:var(--sw-sage-deep) !important; text-decoration:underline !important;
}

/* Primary buttons/CTAs: white label on the dark-sage/clay fill (the elementor
   button group sets the fill but some CTAs inherit black theme text). */
.elementor-button, .elementor-button-link,
.elementor-button .elementor-button-text,
.elementor-button-content-wrapper,
.nd_options_button, .nd_booking_button, button.nd_options_button,
input[type="submit"], .sw-btn, a.button{
  color:#fff !important;
}

/* =====================================================================
   PHASE 22 — accent heading legibility (2026-06-10)
   The brand clay #d59c75 accent headings rendered ~1.5:1 on the sand bg (and
   flashed bold→thin as Suisse loaded). Darken to clay-dark #a26a3c (~3.4:1, AA
   for these 24–55px headings) and bolden the section eyebrows to 400 so they
   read clearly and stay put. The two large script accents (Karibu, Chef Johari)
   keep their thin italic, darkened only. Font preloading (functions.php) removes
   the load flash for the thin cuts too.
   ===================================================================== */
body .elementor-element-a8a85db .elementor-heading-title,   /* Wellbeing */
body .elementor-element-fad0366 .elementor-heading-title,   /* Experiences */
body .elementor-element-d63a9b0 .elementor-heading-title,   /* Special Offers */
body .elementor-element-7db4b5f .elementor-heading-title{   /* Find us in Paje */
  color:var(--sw-clay-dark) !important; font-weight:400 !important;
}
body .elementor-element-9992bb4 .elementor-heading-title,   /* Karibu (script) */
body .elementor-element-569be0d .elementor-heading-title{   /* Chef Johari (script) */
  color:var(--sw-clay-dark) !important;
}

/* =====================================================================
   PHASE 23 — editorial feature rows (2026-06-10)
   Restaurant-bar-style alternating image+text. Used on /sustainability/
   "Our Sustainable Approach"; reusable on other content pages. Rows flip
   the image side via :nth-child(even) and stack image-first on mobile.
   ===================================================================== */
.sw-features{ max-width:1140px; margin:40px auto 56px; }
.sw-feature{ display:flex; align-items:center; gap:54px; margin:0 0 60px; }
.sw-feature:last-child{ margin-bottom:0; }
.sw-feature:nth-child(even){ flex-direction:row-reverse; }
.sw-feature__media{ flex:0 0 44%; }
.sw-feature__media img{
  width:100%; height:auto; display:block; border-radius:10px;
  box-shadow:0 8px 30px rgba(47,47,47,.12);
}
.sw-feature__body{ flex:1 1 auto; }
.sw-feature__body h3{
  margin:0 0 14px; font-family:'Suisse BP Intl', Georgia, serif !important;
  font-weight:400; font-size:1.7rem; line-height:1.2; color:var(--sw-clay-dark);
}
.sw-feature__body p{ margin:0; color:var(--sw-ink-soft); line-height:1.72; font-size:1.02rem; }
@media (max-width:768px){
  .sw-feature, .sw-feature:nth-child(even){ flex-direction:column; gap:20px; margin-bottom:44px; }
  .sw-feature__media{ flex-basis:auto; width:100%; }
}

/* =====================================================================
   PHASE 24 — header / menu tweaks (2026-06-16)
   ===================================================================== */
/* "Book Now" CTA → all caps (the 3 header variants + the menu overlay). */
.elementor-element-bb8fb31 .elementor-heading-title,   /* Header (56) */
.elementor-element-3980fe4 .elementor-heading-title,   /* Header Sticky (68) */
.elementor-element-cb90b54 .elementor-heading-title,   /* Header Transparent (74) */
.elementor-element-b82dfb6 .elementor-heading-title{   /* Fullscreen Menu (81) */
  text-transform:uppercase !important;
}
/* Remove the menu tagline "Boutique wellness hotel · Paje, Zanzibar" (client). */
.elementor-element-3de701d{ display:none !important; }
/* Align the menu "Follow us" label with the social icons — its 20px bottom
   margin was pulling the (centered) text ~10px above the icon row. */
.elementor-element-8d8ca2b{ margin-bottom:0 !important; }

/* =====================================================================
   PHASE 25 — fullscreen menu: compact so the overlay fits the viewport
   without scrolling. Desktop only — mobile keeps larger touch targets and
   a longer scrolling menu there is expected/fine.
   ===================================================================== */
@media (min-width:769px){
  /* The visible menu nav is two Elementor icon-lists — b7ac270 (main, 12 items)
     and 5a9d2e0 (room types, 5 items), both 26px. Shrink the text + tighten the
     per-item spacing so the overlay fits the viewport without scrolling. */
  .elementor-element-b7ac270 .elementor-icon-list-text,
  .elementor-element-5a9d2e0 .elementor-icon-list-text{ font-size:18px !important; line-height:1.35 !important; }
  .elementor-element-b7ac270 .elementor-icon-list-item,
  .elementor-element-5a9d2e0 .elementor-icon-list-item{ padding-top:4px !important; padding-bottom:4px !important; }
  /* Tighten the big menu headings (template 81). */
  .elementor-element-f898e19 .elementor-heading-title,   /* "Samawa Living" */
  .elementor-element-8b98d99 .elementor-heading-title,   /* "Our Rooms" */
  .elementor-element-50621ef .elementor-heading-title{   /* "Types" */
    font-size:28px !important; line-height:1.12 !important;
  }
}



/* =====================================================================
   PHASE 26 — BOOK NOW header CTA: one slick clay button across every
   header state — transparent (cb90b54), sticky (3980fe4), standard
   (bb8fb31) and fullscreen-menu (b82dfb6).
   ===================================================================== */
.elementor-element-cb90b54 .elementor-heading-title a,
.elementor-element-3980fe4 .elementor-heading-title a,
.elementor-element-bb8fb31 .elementor-heading-title a,
.elementor-element-b82dfb6 .elementor-heading-title a{
  display:inline-block;
  background:var(--sw-clay) !important;
  color:#fff !important;
  white-space:nowrap;
  padding:11px 22px !important;
  border-radius:8px;
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:.05em;
  font-weight:400;
  vertical-align:middle;
  box-shadow:0 4px 14px rgba(47,47,47,.18);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.elementor-element-cb90b54 .elementor-heading-title a:hover,
.elementor-element-cb90b54 .elementor-heading-title a:focus,
.elementor-element-3980fe4 .elementor-heading-title a:hover,
.elementor-element-3980fe4 .elementor-heading-title a:focus,
.elementor-element-bb8fb31 .elementor-heading-title a:hover,
.elementor-element-bb8fb31 .elementor-heading-title a:focus,
.elementor-element-b82dfb6 .elementor-heading-title a:hover,
.elementor-element-b82dfb6 .elementor-heading-title a:focus{
  background:var(--sw-clay-dark) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(47,47,47,.26);
}
@media (max-width:767px){
  .elementor-element-cb90b54 .elementor-heading-title a,
  .elementor-element-3980fe4 .elementor-heading-title a,
  .elementor-element-bb8fb31 .elementor-heading-title a{
    padding:11px 17px !important;
    font-size:13px !important;
    border-radius:7px;
  }
}

/* =====================================================================
   PHASE 27 — floating buttons: lift back-to-top (#toTop) above the
   WhatsApp button + restyle on-brand. JS scroll-to-show untouched.
   ===================================================================== */
#toTop{
  width:54px !important;
  height:54px !important;
  right:20px !important;
  bottom:calc(86px + env(safe-area-inset-bottom)) !important;
  z-index:9989 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--sw-sage-dark) !important;
  border-radius:50% !important;
  box-shadow:0 4px 14px rgba(47,47,47,.22) !important;
  color:#fff !important;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#toTop:hover{
  background:var(--sw-sage-deep) !important;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(47,47,47,.28) !important;
}
#toTop span,
#toTop .ti-angle-up{ color:#fff !important; font-size:20px !important; line-height:1 !important; }
@media (max-width:767px){
  #toTop{
    width:48px !important; height:48px !important;
    right:14px !important;
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
  }
}