/*
Theme Name: Hamia Zanzibar
Theme URI: https://hamiazanzibar.com
Description: Child theme of Astra for Hamia Zanzibar — ports the original Astro design system (fonts, palette, typography, buttons) so the WordPress build matches the bespoke site.
Author: Rob Darlington
Template: astra
Version: 1.0.0
Text Domain: hamia
*/

/* ============================================================================
   HAMIA ZANZIBAR — global design foundation
   Ported from ../frontend/src/styles/global.css. Fonts live in this theme at
   assets/fonts/ (relative URLs below). Edit here, then ./push-theme.sh.
   ========================================================================== */

/* --- Self-hosted fonts (bundled in the child theme) --- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('assets/fonts/playfair-display-latin.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('assets/fonts/playfair-display-latin-ext.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');}

/* --- Design tokens --- */
:root{
  --color-sand:#f5efe6; --color-sand-light:#faf7f2; --color-sand-dark:#e8dfd2;
  --color-terracotta:#b04a32; --color-terracotta-dark:#8f3a28; --color-terracotta-light:#e07858;
  --color-ocean:#1a7a8a; --color-ocean-dark:#125d6a; --color-ocean-light:#2ba3b7;
  --color-palm:#2d5a27; --color-palm-light:#4a8a42;
  --color-charcoal:#1a1a1a; --color-slate:#3a3a3a; --color-warm-gray:#6b6560; --color-warm-gray-light:#9a9490;
  --color-white:#fff; --color-cream:#fdfcfa;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-accent:'Cormorant Garamond',Georgia,serif;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.8125rem); --text-sm:clamp(0.8125rem,0.75rem + 0.3vw,0.9375rem);
  --text-base:clamp(0.9375rem,0.875rem + 0.3vw,1.0625rem); --text-lg:clamp(1.0625rem,0.95rem + 0.5vw,1.25rem);
  --text-xl:clamp(1.25rem,1.1rem + 0.75vw,1.5rem); --text-2xl:clamp(1.5rem,1.2rem + 1.5vw,2rem);
  --text-3xl:clamp(1.875rem,1.4rem + 2.4vw,2.75rem); --text-4xl:clamp(2.25rem,1.6rem + 3.2vw,3.75rem);
  --text-5xl:clamp(2.75rem,1.8rem + 4.8vw,5rem);
  --space-xs:clamp(0.25rem,0.2rem + 0.25vw,0.5rem); --space-sm:clamp(0.5rem,0.4rem + 0.5vw,0.75rem);
  --space-md:clamp(0.75rem,0.6rem + 0.75vw,1.25rem); --space-lg:clamp(1.25rem,1rem + 1.25vw,2rem);
  --space-xl:clamp(2rem,1.5rem + 2.5vw,3.5rem); --space-2xl:clamp(3rem,2rem + 5vw,6rem);
  --space-3xl:clamp(4rem,2.5rem + 7.5vw,9rem);
  --container-max:1200px; --container-wide:1400px; --container-narrow:800px; --gutter:clamp(1rem,0.5rem + 2.5vw,2rem);
  --radius-sm:0.375rem; --radius-md:0.625rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);
  --shadow-xl:0 24px 60px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.06);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --duration-fast:150ms; --duration-base:300ms; --duration-slow:500ms;
}

/* --- Base typography (matches Astro site) --- */
body,.ast-container{font-family:var(--font-body);}
body{font-size:var(--text-base);line-height:1.7;color:var(--color-slate);background-color:var(--color-cream);}
h1,h2,h3,h4,h5,h6,.entry-title,.ast-single-post .entry-title{
  font-family:var(--font-display);font-weight:600;line-height:1.2;color:var(--color-charcoal);text-wrap:balance;}
p{text-wrap:pretty;}
a{text-decoration:none;}
a:hover{color:var(--color-terracotta);}
::selection{background-color:var(--color-terracotta);color:#fff;}

/* Accent label + divider used by section headers */
.hamia-label{font-family:var(--font-accent);font-size:var(--text-sm);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-terracotta);display:block;margin-bottom:var(--space-sm);}
.hamia-divider{width:60px;height:2px;background:var(--color-terracotta);border:none;margin:0 auto var(--space-md);}

/* --- Buttons: map Astra / Gutenberg / Spectra / SureForms to the .btn look --- */
.ast-button,.wp-block-button__link,button.wp-element-button,
.wp-block-search__button,.sureforms-form button[type="submit"],.srfm-submit-btn,
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.04em;text-transform:uppercase;padding:.9em 2em;
  border-radius:var(--radius-sm);border:none;line-height:1.1;
  background-color:var(--color-terracotta);color:#fff;
  transition:background-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);}
.ast-button:hover,.wp-block-button__link:hover,button.wp-element-button:hover,
.sureforms-form button[type="submit"]:hover,.srfm-submit-btn:hover,.btn:hover{
  background-color:var(--color-terracotta-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
/* Modifiers: class sits on the .wp-block-button wrapper, but styles the inner
   link (avoids double padding/background on the wrapper). */
.wp-block-button.btn--secondary .wp-block-button__link{background:transparent;border:1.5px solid #fff;color:#fff;}
.wp-block-button.btn--secondary .wp-block-button__link:hover{background:#fff;color:var(--color-charcoal);}
.wp-block-button.btn--outline .wp-block-button__link{background:transparent;border:1.5px solid var(--color-terracotta);color:var(--color-terracotta);}
.wp-block-button.btn--outline .wp-block-button__link:hover{background:var(--color-terracotta);color:#fff;}
.wp-block-button.btn--whatsapp .wp-block-button__link{background-color:#1a8540;}
.wp-block-button.btn--whatsapp .wp-block-button__link:hover{background-color:#156e34;}
.wp-block-button.btn--lg .wp-block-button__link{font-size:var(--text-base);padding:1em 2.5em;}
/* Bare-anchor variants (used inside HTML blocks, not core buttons) */
a.btn.btn--secondary{background:transparent;color:#fff;border:1.5px solid #fff;}
a.btn.btn--outline{background:transparent;color:var(--color-terracotta);border:1.5px solid var(--color-terracotta);}
a.btn.btn--whatsapp{background-color:#1a8540;}
a.btn.btn--lg{font-size:var(--text-base);padding:1em 2.5em;}

/* --- Header (Astra) accents --- */
.ast-primary-menu .menu-link,.main-header-menu .menu-link{
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;letter-spacing:.04em;}
.ast-primary-menu .menu-link:hover{color:var(--color-terracotta);}

/* Stacked HAMIA / ZANZIBAR wordmark (replaces plain site title) */
.hamia-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.hamia-logo__main { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.3em; color: var(--color-charcoal); }
.hamia-logo__sub { font-family: var(--font-accent); font-size: var(--text-xs); letter-spacing: 0.5em; color: var(--color-warm-gray); margin-top: 2px; }
.site-title { line-height: 1 !important; }

/* BOOK NOW — last nav item styled as a compact terracotta pill button.
   Astra gives menu links line-height:80px (full header height); without
   resetting it the background fills the whole nav row instead of a pill.
   So we vertically-centre the item and give the link its own tight box. */
.hamia-book-now { display: flex !important; align-items: center; }
.hamia-book-now > .menu-link,
.hamia-book-now > a { background: var(--color-terracotta); color: #fff !important; border-radius: var(--radius-sm); padding: 0.7em 1.4em !important; height: auto !important; line-height: 1 !important; text-transform: uppercase; font-size: var(--text-xs) !important; font-weight: 600; letter-spacing: 0.05em; transition: background-color var(--duration-base) var(--ease-out); }
.hamia-book-now > .menu-link:hover,
.hamia-book-now > a:hover { background: var(--color-terracotta-dark); color: #fff !important; }
.hamia-book-now > .menu-link::after { display: none !important; }

/* Transparent header (over the hero) — light logo/nav like the original */
.ast-theme-transparent-header .hamia-logo__main { color: #fff; }
.ast-theme-transparent-header .hamia-logo__sub { color: rgba(255,255,255,0.8); }
.ast-theme-transparent-header .site-title a,
.ast-theme-transparent-header .site-title a:focus,
.ast-theme-transparent-header .site-title a:hover,
.ast-theme-transparent-header .ast-site-title-wrap .site-title a{color:#fff;}
.ast-theme-transparent-header .ast-builder-menu .menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .menu-link{color:#fff;}
.ast-theme-transparent-header .ast-builder-menu .menu-item > .menu-link:hover{color:var(--color-terracotta-light);}
.ast-theme-transparent-header .ast-mobile-menu-buttons-minimal.menu-toggle{color:#fff;}

/* --- Mobile menu: white burger/X + dark branded off-canvas drawer ---
   The burger sits over the dark hero (no sticky header), so white always works.
   The SVGs use fill:currentColor, so colouring .menu-toggle covers burger + X.
   Astra's off-canvas drawer defaults to a white panel, so we darken it to
   charcoal and make the close (X) + links white for a legible, on-brand menu. */
.menu-toggle,
.menu-toggle .ast-mobile-svg { color:#fff !important; fill:#fff !important; }
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content { background: var(--color-charcoal) !important; }
/* Close (X) — Astra sets it #3a3a3a inline; force white (unscoped: it only
   exists in the mobile drawer). Cover both currentColor and any path fill. */
.menu-toggle-close,
.menu-toggle-close svg,
.menu-toggle-close svg path { color:#fff !important; fill:#fff !important; }
.ast-mobile-popup-drawer .main-header-menu .menu-link,
.ast-mobile-popup-drawer .menu-item > .menu-link { color:#fff !important; }
.ast-mobile-popup-drawer .menu-item > .menu-link:hover { color:var(--color-terracotta-light) !important; }
.ast-mobile-popup-drawer .main-header-menu .menu-item { border-color: rgba(255,255,255,0.08); }
/* Keep the Book Now item a terracotta pill inside the dark drawer */
.ast-mobile-popup-drawer .hamia-book-now > .menu-link { background: var(--color-terracotta); color:#fff !important; }
.ast-mobile-popup-drawer .hamia-book-now > .menu-link:hover { background: var(--color-terracotta-dark); color:#fff !important; }

/* --- Footer: hide Astra's builder footer, use our custom 4-col footer --- */
.site-footer{display:none !important;}
.hamia-footer{background:var(--color-charcoal);color:rgba(255,255,255,.7);padding:var(--space-2xl) var(--gutter) var(--space-lg);}
.hamia-footer__inner{max-width:var(--container-max);margin-inline:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid rgba(255,255,255,.1);}
.hamia-footer__logo{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;letter-spacing:.3em;color:#fff;display:block;margin-bottom:var(--space-sm);}
.hamia-footer__tagline{font-family:var(--font-accent);font-style:italic;color:var(--color-terracotta-light);margin-bottom:var(--space-md);}
.hamia-footer__desc{line-height:1.7;font-size:var(--text-sm);margin:0;}
.hamia-footer__heading{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:var(--space-md);}
.hamia-footer__col ul{display:flex;flex-direction:column;gap:var(--space-sm);list-style:none;margin:0;padding:0;}
.hamia-footer__col a{color:rgba(255,255,255,.7);}
.hamia-footer__col a:hover{color:#fff;}
.hamia-footer__facts li{font-size:var(--text-sm);}
.hamia-footer__cta p{margin-bottom:var(--space-md);line-height:1.6;}
.hamia-footer__btn{display:inline-flex;align-items:center;gap:.5em;background:#1a8540;color:#fff;padding:.8em 1.6em;border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;}
.hamia-footer__btn:hover{background:#156e34;color:#fff;}
.hamia-footer__bottom{max-width:var(--container-max);margin:var(--space-lg) auto 0;text-align:center;font-size:var(--text-xs);}
@media (max-width:768px){.hamia-footer__inner{grid-template-columns:1fr;gap:var(--space-lg);}}

/* --- Layout helpers reused by page content --- */
.hamia-section{padding-block:var(--space-2xl);}
.hamia-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);}

/* --- Shared inner-page hero (Rooms, Amenities, Location, …) — core Cover --- */
.hamia-page-hero.wp-block-cover{min-height:55vh;min-height:55svh;align-items:center;}
.hamia-page-hero .wp-block-cover__background.has-background-dim{
  background-color:transparent !important;
  background-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 100%) !important;opacity:1 !important;}
.hamia-page-hero .wp-block-cover__inner-container{
  text-align:center;width:100%;max-width:var(--container-max);
  margin-inline:auto;padding-inline:var(--gutter);padding-top:4rem;}
.hamia-page-hero .wp-block-cover__inner-container,
.hamia-page-hero .wp-block-cover__inner-container p,
.hamia-page-hero .wp-block-cover__inner-container h1,
.hamia-page-hero__label,.hamia-page-hero__title,.hamia-page-hero__subtitle{color:#fff !important;}
.hamia-page-hero__label{font-family:var(--font-accent);font-size:var(--text-sm);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-terracotta-light) !important;margin-bottom:var(--space-sm);}
.hamia-page-hero__title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;
  margin-bottom:var(--space-sm);text-shadow:0 2px 20px rgba(0,0,0,.3);}
.hamia-page-hero__subtitle{font-size:var(--text-xl);color:rgba(255,255,255,.9) !important;margin:0 auto;max-width:600px;}

/* --- Shared dark CTA banner text colours (Rooms, Amenities, Location, etc.) ---
   The CTA sits on a dark Cover image; Astra's global paragraph colour otherwise
   wins on <p> and leaves the copy dark-on-dark. Force white here (once) so every
   .hamia-cta banner across the site is legible. Titles/strong = pure white,
   body/price = slightly translucent white. */
.hamia-cta .wp-block-cover__inner-container,
.hamia-cta .wp-block-cover__inner-container p,
.hamia-cta__title,
.hamia-cta__price strong{color:#fff !important;}
.hamia-cta__text{color:rgba(255,255,255,.85) !important;}
.hamia-cta__price{color:rgba(255,255,255,.75) !important;}