/*
 * Egypt Magic Tours — Main CSS
 * Design tokens match design-preview/egypt-magic.html exactly.
 * Section-specific styles live in assets/css/sections/*.css (enqueued on demand).
 */

/* ===== DESIGN TOKENS ===== */

/* ── GOLD MODE (default — warm desert palette) ───────────────── */
/* ── Metric-matched font fallbacks (CLS) ───────────────────────────
 * Barlow Condensed arrives ~2s after first paint. Until then the browser
 * uses a much WIDER system sans, so the hero headline renders on more
 * lines and everything below it — including the split hero's video column
 * — jumps upward when the real font swaps in. Measured CLS 0.29 at 768px.
 *
 * These faces alias a condensed system font and adjust its metrics so the
 * fallback occupies almost the same space as the real face, which keeps
 * the brand typography (no font-display: optional) while removing the
 * reflow. Tuned against Barlow's own metrics (unitsPerEm 1000,
 * ascender 1062, descender 262).
 * ---------------------------------------------------------------- */
@font-face {
  font-family: 'Cairo Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  /* 96% measured in-browser against Segoe UI: Cairo renders the Latin test
     string at 94.6% of Segoe and the Arabic one at 97.3%, so 96% splits the
     difference and keeps both scripts within ~1.5%. Arial was a far worse
     base (84.9% Latin vs 117.3% Arabic). Without this the Arabic hero had
     the same font-swap reflow the Latin pages had — CLS 0.15 at 768px. */
  size-adjust:        96%;
  ascent-override:    100%;
  descent-override:   28%;
  line-gap-override:  0%;
}

@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'), local('Arial');
  /* 77.8% measured in-browser: 'DISCOVER THE MAGIC' at 100px renders
     705.5px in Barlow Condensed vs 906.6px in Arial Narrow. Guessing 87%
     left the fallback 11.8% too wide, so the headline still broke onto a
     different number of lines and the gold <em> jumped 41px on swap. */
  size-adjust:        78%;
  ascent-override:    106%;
  descent-override:   26%;
  line-gap-override:  0%;
}
@font-face {
  font-family: 'Barlow Semi Condensed Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue'), local('Arial');
  size-adjust:        86%;
  ascent-override:    106%;
  descent-override:   26%;
  line-gap-override:  0%;
}

:root,
html[data-theme="gold"] {
  --em-bg:        #f4ece0;   /* warm papyrus */
  --em-bg2:       #efe5d6;
  --em-ink:       #1c1813;   /* near-black warm */
  --em-muted:     #7a6f5f;
  --em-gold:      #c0883a;   /* desert gold (primary accent) */
  --em-gold-d:    #a06f28;
  --em-teal:      #2a7d74;
  --em-line:      rgba(28,24,19,.14);
  --em-dark:      #16130d;
  --em-ease:      cubic-bezier(.16,1,.3,1);
  /* rgba channels for use in box-shadows / backgrounds */
  --em-dark-rgb:  22, 19, 13;
  --em-gold-rgb:  192, 136, 58;

  --em-font-head: 'Barlow Condensed', 'Barlow Condensed Fallback', sans-serif;
  --em-font-body: 'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', sans-serif;
}

/* ── BLUE MODE — Tourvex-inspired cool palette ───────────────── */
/* Colors sourced from duruthemes.com/demo/html/tourvex/          */
html[data-theme="blue"] {
  --em-bg:        #f4f5f8;   /* cool light gray */
  --em-bg2:       #eceef5;
  --em-ink:       #0f2454;   /* Tourvex dark navy */
  --em-muted:     #5e6282;   /* Tourvex body gray */
  --em-gold:      #2095AE;   /* Tourvex teal (primary accent) */
  --em-gold-d:    #1a7a92;
  --em-teal:      #e4a853;   /* Tourvex amber (secondary accent) */
  --em-line:      rgba(15,36,84,.12);
  --em-dark:      #0f2454;   /* Tourvex navy for dark sections */
  --em-dark-rgb:  15, 36, 84;
  --em-gold-rgb:  32, 149, 174;
}

/* ── Blue mode: targeted rgba overrides that CSS vars can't reach ─ */

/* Blog card dark overlay — hardcoded rgba must be overridden per mode */
html[data-theme="blue"] .em-home-page .em-post::after {
  background: linear-gradient(180deg, rgba(15,36,84,.38) 0%, rgba(15,36,84,.60) 42%, rgba(15,36,84,.92) 100%);
}
/* Hero marquee overlay gradient at tablet (fades left→right; right stays visible) */
html[data-theme="blue"] .em-home-page .em-hero::before {
  background: linear-gradient(100deg, #f4f5f8 44%, rgba(15,36,84,.05) 78%, transparent 100%);
}
@media (max-width: 640px) {
  html[data-theme="blue"] .em-home-page .em-hero::before {
    background: linear-gradient(180deg, #f4f5f8 38%, rgba(15,36,84,.05) 62%, #f4f5f8 92%);
  }
}

html[data-theme="blue"] body:not(.em-home-page) #em-nav {
  /* Transparent initially — match home page feel */
}
html[data-theme="blue"] #em-nav.em-nav--scrolled {
  background: rgba(15,36,84,.95);
}
html[data-theme="blue"] .em-home-page #em-nav.em-nav--scrolled {
  background: #f4f5f8;   /* cool-light on scroll for homepage */
  box-shadow: 0 1px 0 rgba(15,36,84,.14);
}
html[data-theme="blue"] .em-home-page .em-nav.em-nav--open { background: #0f2454; }
/* Testimonial card dark gradient — replace warm dark with navy */
html[data-theme="blue"] .em-home-page .em-tcard::after {
  background: linear-gradient(180deg, transparent 30%, rgba(15,36,84,.58) 65%, rgba(15,36,84,.96));
}

/* RTL: switch to Cairo for Arabic + full RTL layout */
html[lang="ar"] {
  --em-font-head: 'Cairo', 'Cairo Fallback', sans-serif;
  --em-font-body: 'Cairo', 'Cairo Fallback', sans-serif;
  direction: rtl;
}
html[lang="ar"] .em-subtitle { letter-spacing: .04em; }
html[lang="ar"] .em-subtitle::before { display: none; }
html[lang="ar"] .em-subtitle::after {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--em-gold);
}
html[lang="ar"] .em-nav {
  direction: rtl;
}
html[lang="ar"] .em-nav-links {
  flex-direction: row-reverse;
}
html[lang="ar"] .em-mob-menu nav {
  direction: rtl;
}
html[lang="ar"] .em-mob-menu__langs {
  flex-direction: row-reverse;
}

/* ===== GLOBAL RESETS ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  font-family: var(--em-font-body);
  background:  var(--em-bg);
  color:       var(--em-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* `html body`, not `body`, and the extra specificity is the whole point.
 *
 * Hello Elementor ships assets/css/reset.css with `body { background-color:
 * #fff }`, and WordPress enqueues it AFTER this file. Same specificity, later
 * wins — so the rule above never applied and the page background was white,
 * not papyrus. It went unnoticed because almost every section paints its own
 * background; the body only shows through where one does NOT, which is why it
 * surfaced as a bright white band under the homepage map section (.em-homemap
 * is transparent and carries 144px of padding) rather than as an obviously
 * white page.
 *
 * Raising specificity rather than re-ordering the enqueue: the load order is
 * the parent theme's to decide, and a dependency added here to force it would
 * break the next time Hello Elementor changes how it registers reset.css.
 *
 * Still reads the token, so the Blue theme's cool grey continues to apply. */
html body { background: var(--em-bg); }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--em-font-head);
  font-weight:    600;
  line-height:    1.02;
  letter-spacing: -.01em;
}

.em-subtitle {
  font-family:     var(--em-font-head);
  text-transform:  uppercase;
  letter-spacing:  .28em;
  font-size:       .8rem;
  font-weight:     600;
  color:           var(--em-gold);
  display:         inline-flex;
  align-items:     center;
  gap:             .7rem;
}
.em-subtitle::before {
  content:    '';
  width:      30px;
  height:     1px;
  background: var(--em-gold);
}
html[lang="ar"] .em-subtitle { letter-spacing: .06em; }

.em-title {
  font-family:    var(--em-font-head);
  font-weight:    600;
  text-transform: uppercase;
  font-size:      clamp(2.2rem, 5vw, 4.4rem);
  line-height:    .98;
  letter-spacing: -.015em;
}
.em-title em {
  font-style:     italic;
  font-weight:    500;
  color:          var(--em-gold);
  font-family:    Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== ANIMATION CLASSES (client-usable via Elementor CSS Classes field) =====
 * anim-reveal     — fade + rise as element enters viewport
 * anim-parallax   — parallax layer (moves at 0.5× scroll speed)
 * anim-stagger    — children stagger in sequence
 * anim-countup    — numeric count-up on scroll enter
 * anim-split      — headline word-by-word reveal
 * All activated by animations.js. Elementor editor: classes are ignored (no animation).
 */

/* Pre-animation state — elements are visible by default (progressive enhancement) */
[class*="anim-"] { /* intentionally empty — JS sets initial states */ }

/* Elementor editor: kill all animations for live editing comfort */
body.elementor-editor-active [class*="anim-"] {
  opacity:   1 !important;
  transform: none !important;
}

/* ===== SELECTION ===== */
::selection { background: var(--em-gold); color: #fff; }

/* ===== CUSTOM CURSOR ===== */
#em-cursor {
  position:       fixed;
  width:          14px;
  height:         14px;
  background:     var(--em-gold);
  border-radius:  50%;
  pointer-events: none;
  z-index:        9999;
  transform:      translate(-50%, -50%);
  transition:     width .25s var(--em-ease), height .25s var(--em-ease),
                  background .25s var(--em-ease), opacity .25s var(--em-ease);
  mix-blend-mode: multiply;
  will-change:    transform;
}
#em-cursor.em-cursor--grow {
  width:      44px;
  height:     44px;
  background: var(--em-teal);
  opacity:    .55;
}
@media (pointer: coarse) { #em-cursor { display: none; } }

/* ===== NAVIGATION — GLOBAL LAYOUT (all pages) ===== */
/* Inner layout: flex row with brand | links | actions */
.em-nav {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          1.3rem clamp(1.2rem, 5vw, 3rem);
}
.em-nav.em-nav--scrolled { padding-top: .85rem; padding-bottom: .85rem; }

/* ===== COLOR THEME SWITCHER ===== */
.em-theme-sw {
  display:       flex;
  border-radius: 999px;
  overflow:      hidden;
  box-shadow:    0 0 0 1px rgba(128,128,128,.25);
  font-family:   var(--em-font-head);
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background:    rgba(128,128,128,.08);
}
.em-theme-sw__btn {
  padding:        .4rem .72rem;
  background:     none;
  border:         none;
  cursor:         pointer;
  color:          inherit;
  opacity:        .55;
  transition:     background .3s, opacity .25s, color .25s;
  display:        flex;
  align-items:    center;
  gap:            .28rem;
  white-space:    nowrap;
  line-height:    1;
}
.em-theme-sw__btn.is-active {
  background: var(--em-gold);
  color:      #fff;
  opacity:    1;
}
/* Adapt to dark nav on scroll */
#em-nav.em-nav--scrolled .em-theme-sw {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
/* Adapt to dark nav bg on non-home pages */
body:not(.em-home-page) .em-theme-sw {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
/* Very small screens: icon-only (same as ≤640px rule below, font-size:0 hides labels) */
@media (max-width: 480px) { .em-theme-sw { font-size: 0; } }

/* Brand logo — an image since Sep 2026.
   The text properties below are NOT dead code: if the logo fails to load, the
   alt text renders in their place, and it should still look like the wordmark
   it replaced rather than a bare browser default. */
.em-brand {
  font-family:     var(--em-font-head);
  font-weight:     700;
  font-size:       1.5rem;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  display:         flex;
  align-items:     center;
  gap:             .5rem;
  text-decoration: none;
  color:           var(--em-ink);
}
/* The file carries its own 507x160 aspect ratio, so only the height is ever
   set — width:auto stops the flex row from squashing it, and the height is
   what the breakpoint ladder further down steps. */
.em-brand__img {
  display:   block;
  height:    72px;
  width:     auto;
  max-width: 100%;
}

/* Desktop nav links */
.em-nav-links {
  display:     flex;
  gap:         2rem;
  align-items: center;
  list-style:  none;
  margin:      0;
  padding:     0;
}
.em-nav-links li { list-style: none; }
.em-nav-links a {
  font-family:     var(--em-font-head);
  text-transform:  uppercase;
  letter-spacing:  .06em;
  font-weight:     500;
  font-size:       1rem;
  position:        relative;
  overflow:        hidden;
  height:          1.5em;
  display:         inline-block;
  text-decoration: none;
  color:           var(--em-ink);
}
.em-nav-links a .rt { display: block; transition: transform .4s var(--em-ease); }
.em-nav-links a .rt::after {
  content:  attr(data-t);
  position: absolute;
  left: 0; top: 100%;
  color: var(--em-gold);
}
.em-nav-links a:hover .rt { transform: translateY(-100%); }

/* ── Dropdown menus ──────────────────────────────────────────────── */
.em-nav-has-drop { position: relative; }

.em-nav-dropdown {
  position:       absolute;
  top:            calc(100% + .8rem);
  left:           50%;
  transform:      translateX(-50%);
  min-width:      180px;
  background:     var(--em-dark);
  border-top:     2px solid var(--em-gold);
  border-radius:  0 0 8px 8px;
  padding:        .5rem 0;
  list-style:     none;
  margin:         0;
  opacity:        0;
  pointer-events: none;
  transform:      translateX(-50%) translateY(6px);
  transition:     opacity .22s var(--em-ease), transform .22s var(--em-ease);
  z-index:        1000;
  white-space:    nowrap;
  box-shadow:     0 16px 40px rgba(0,0,0,.35);
}
/* The panel sits .8rem BELOW its trigger, and that gap belonged to
   neither. Moving the pointer down towards the menu left the trigger,
   :hover was lost and the panel vanished before the cursor arrived — so
   no dropdown item could be clicked on any page. This invisible bridge
   spans the gap and is a child of the panel, so crossing it keeps
   .em-nav-has-drop:hover alive. It only takes pointer events while the
   panel is open, because the closed panel is pointer-events: none. */
.em-nav-dropdown::before {
  content:  '';
  position: absolute;
  left:     0;
  right:    0;
  top:      -.9rem;
  height:   .9rem;
}

.em-nav-has-drop:hover .em-nav-dropdown,
.em-nav-has-drop:focus-within .em-nav-dropdown {
  opacity:        1;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
}
.em-nav-dropdown li { list-style: none; }
.em-nav-dropdown a {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  padding:       .55rem 1.1rem;
  font-family:   var(--em-font-body);
  font-size:     .88rem;
  font-weight:   500;
  letter-spacing: .03em;
  text-transform: none;
  color:         rgba(255,255,255,.78);
  text-decoration: none;
  overflow:      visible;
  height:        auto;
  transition:    color .18s, background .18s;
}
.em-nav-dropdown a:hover {
  color:      var(--em-gold);
  background: rgba(255,255,255,.04);
  transform:  none;
}
.em-nav-dropdown a svg { opacity: .7; flex-shrink: 0; }
.em-nav-dropdown a:hover svg { opacity: 1; }
.em-nav-dropdown__count {
  margin-left:  auto;
  font-size:    .72rem;
  opacity:      .45;
  padding-left: .6rem;
}
.em-nav-dropdown__divider {
  height:     1px;
  background: rgba(255,255,255,.08);
  margin:     .35rem .7rem;
}

/* Nile Cruise — gold accent in desktop nav */
.em-nav-cruise > a {
  color: var(--em-gold) !important;
}
.em-nav-cruise > a .rt::after { color: var(--em-gold-d); }

/* Mobile menu group labels + sub-items */
.em-mob-menu__group-label {
  display:        block;
  font-family:    var(--em-font-head);
  font-size:      .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--em-gold);
  opacity:        .7;
  padding:        1.1rem 2rem .3rem;
  pointer-events: none;
}
.em-mob-menu__sub {
  /* No indent. The overlay list is CENTRED, and an indent inside a centred
     box does not read as an indent — it just moves the text off the axis:
     `padding-left: 2.8rem` put every child's text 22.4px to the right of the
     parents' centre line (measured at 390: AQUATIC's glyphs ran 182.1→252.7
     against ACTIVITIES centred on 195), which is what made the column look
     accidentally ragged rather than deliberately nested.
     It was also PHYSICAL, so in Arabic the children were indented from the
     left — the wrong edge entirely.

     Hierarchy here is carried by size, weight and opacity, which the design
     already had, plus the group rhythm in the 1024 block. Nothing new is
     introduced and nothing is recoloured. */
  font-size:    1.3rem !important;
  opacity:      .8;
}
.em-mob-menu__cruise {
  color:        var(--em-gold) !important;
  font-weight:  600 !important;
}

/* Actions (lang + burger) */
.em-nav-actions { display: flex; align-items: center; gap: 1.2rem; }

/* Non-homepage: fully transparent initially (matches home page feel).
   Darkens on scroll via .em-nav--scrolled. */
body:not(.em-home-page) .em-brand         { color: var(--em-bg); }
body:not(.em-home-page) .em-nav-links a   { color: var(--em-bg); }
body:not(.em-home-page) .em-lang__current {
  color:        var(--em-bg);
  border-color: rgba(244,236,224,.3);
}
body:not(.em-home-page) .em-burger        { color: var(--em-bg); }

/* ===== NAVIGATION — ID RULES ===== */
#em-nav {
  position:   fixed;
  top:        0;
  inset-inline-start: 0;
  width:      100%;
  z-index:    900;
  transition: background .35s var(--em-ease),
              box-shadow .35s var(--em-ease),
              transform  .35s var(--em-ease);
  /* No will-change: transform — it creates a containing block for position:fixed
     children (mobile overlay), causing inset:0 to fill nav height not viewport */
}
#em-nav.em-nav--scrolled {
  background: rgba(22, 19, 13, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 32px rgba(0,0,0,.22);
}
#em-nav.em-nav--hide {
  transform: translateY(-110%);
}

/* ===== MOBILE NAV ===== */
.em-burger {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    .4rem;
  color:      inherit;
  line-height: 0;
}

/* Mobile fullscreen overlay — lives OUTSIDE #em-nav as a sibling element.
   No stacking-context parent → z-index:9999 is document-level, above everything. */
.em-mob-menu { display: none; }

/* 1024, not 640. The six desktop links plus the wordmark do not fit below
   it: at 1024 the nav row measured 1053px against a 1024px viewport and the
   wordmark printed over ACTIVITIES; at 768 the language, theme and menu
   controls were all pushed off the right edge. Tablets therefore run the
   SAME overlay phones already had — no second navigation, no new design,
   only the width at which the two existing forms swap.

   The compact phone metrics (nav padding, brand size, action gap) stay on
   their own 640 breakpoint further down this file, so nothing about the
   header's appearance changes between 641 and 1024 except which of the two
   existing navigations is on screen. */
@media (max-width: 1024px) {
  .em-burger   { display: block; }
  .em-nav-links { display: none !important; } /* desktop row hidden on mobile */

  /* Fullscreen overlay */
  .em-mob-menu {
    display:         flex;
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      var(--em-dark, #16130d);
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    /* The 18-item menu measures 864px, which is taller than a short phone or
       a landscape tablet. With `center` alone the overflow spills equally off
       BOTH ends and none of it can be reached: measured 6 links unreachable
       at 320, 4 at 375, 2 at 360 and 1024-landscape, 1 at 390.

       `safe center` keeps the menu centred whenever it fits and falls back to
       start alignment only when it does not, so the overflow all goes to one
       end where `overflow-y: auto` can scroll to it. The plain `center` above
       is left in place deliberately as the fallback for engines that do not
       understand safe alignment — they drop the line below and keep today's
       behaviour rather than losing centring altogether. */
    justify-content: safe center;
    overflow-y:      auto;
    gap:             .2rem;
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    transition:      opacity .4s var(--em-ease), visibility .4s;
  }
  .em-mob-menu.is-open {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
  }

  /* Close button (top-right corner of overlay) */
  .em-mob-menu__close {
    position:    absolute;
    top:         1.2rem;
    right:       1.2rem;
    background:  none;
    border:      none;
    color:       #f4ece0;
    cursor:      pointer;
    padding:     .5rem;
    line-height: 0;
    opacity:     .7;
    transition:  opacity .2s;
  }
  .em-mob-menu__close:hover { opacity: 1; }

  /* Nav links inside overlay */
  .em-mob-menu nav {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .15rem;
  }
  .em-mob-menu nav a {
    display:         block;
    font-size:       2.2rem;
    font-family:     var(--em-font-head, 'Barlow Condensed', sans-serif);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    color:           rgba(244,236,224,.75);
    text-decoration: none;
    padding:         .55rem 0;
    line-height:     1.1;
    transition:      color .2s;
  }
  .em-mob-menu nav a:hover,
  .em-mob-menu nav a:active { color: var(--em-gold, #c0883a); }

  /* ── GROUP RHYTHM ──────────────────────────────────────────────────
     Every item was 2.4px from the next, so the distance from DESERT to
     EXCURSIONS — a category boundary — was exactly the distance from
     AQUATIC to CULTURAL, two members of the same set. With 18 items at one
     even pitch the eye gets a list, not a structure.

     Two rules restore the grouping, and they key off classes the mobile
     walker ALREADY emits (inc/nav-menus.php adds .em-mob-menu__sub at
     depth > 0). No markup change, no new class, no PHP. */

  /* Line padding is the one piece of vertical space that carries no meaning
     — it is not a gap BETWEEN anything, it is slack inside each row, and
     with 18 rows it is where the menu's height actually goes. Trimming it
     leaves every hierarchy gap below at its full value, so the breaks get
     relatively MORE prominent as the rows get tighter.

     Headings: .55rem -> .42rem, ~4px per row over 6 rows. They stay 52px
     tall, comfortably above the 44px touch minimum and still visually
     dominant over the children. */
  .em-mob-menu nav a { padding-block: .42rem; }

  /* Children tighten up, so a set reads as one block — but only to .3rem,
     not further: at .28rem the rows fell to 35.8px and these are the
     smallest tap targets in the menu. */
  .em-mob-menu nav a.em-mob-menu__sub { padding-block: .3rem; }

  /* A little air after a heading, before its own children start. */
  .em-mob-menu nav a:not(.em-mob-menu__sub) + a.em-mob-menu__sub {
    margin-block-start: .3rem;
  }

  /* …and a real break where a child set ENDS and the next top-level item
     begins: DESERT→EXCURSIONS, NILE CRUISES→DESTINATIONS, SIWA→ABOUT.
     ABOUT / BLOG / CONTACT have no children, so they are not separated
     from each other and close the menu as one final group — which is
     what they are. */
  .em-mob-menu nav a.em-mob-menu__sub + a:not(.em-mob-menu__sub) {
    margin-block-start: 1.5rem;
  }

  /* The overlay had no padding at all, so with the menu taller than the
     screen the first heading rendered flush at y=0, level with the close
     button and touching the top edge. This is breathing room, not a move:
     the close button is absolutely positioned against the padding box,
     whose origin is the border edge, so it stays exactly where it is.

     3.6rem, not the 4.6rem first tried: the close button sits top-RIGHT and
     the first heading is centred and narrow (ACTIVITIES spans x=115→275 at
     390 against a button at x=318→362), so the two never share horizontal
     space and the padding only has to read as breathing room, not clear the
     button's full height. The extra rem was pure height.

     The switcher's own bottom margin is dropped in favour of this single
     1.8rem foot, so the bottom is one value rather than two stacked.

     Vertical only — no horizontal inset. A 1.2rem side padding narrowed the
     content box to 281.6px at 320, which is just under what the four
     language pills need on one line, so they wrapped and the menu grew 52px
     on exactly the narrowest screen it should be shortest on. Nothing in
     the overlay needs a side inset: every row is centred and the widest
     (DESTINATIONS, ~205px at 320) clears the edges on its own. */
  .em-mob-menu {
    padding-block: 3.6rem 1.8rem;
  }

  /* Language switcher row inside mobile overlay.
     1.8rem, down from 2.4rem: this is the seam between the navigation and
     the utility controls, so it should read as one step bigger than a
     category break (1.5rem) — not as a void. */
  .em-mob-menu__langs {
    display:         flex;
    gap:             1rem;
    margin-top:      1.8rem;
    flex-wrap:       wrap;
    justify-content: center;
  }
  .em-mob-menu__lang {
    display:         flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .4rem .9rem;
    border:          1px solid rgba(244,236,224,.2);
    border-radius:   999px;
    font-family:     var(--em-font-head, 'Barlow Condensed', sans-serif);
    font-weight:     600;
    font-size:       .85rem;
    letter-spacing:  .1em;
    text-transform:  uppercase;
    color:           rgba(244,236,224,.65);
    text-decoration: none;
    transition:      border-color .2s, color .2s;
  }
  .em-mob-menu__lang:hover,
  .em-mob-menu__lang.is-active {
    border-color: var(--em-gold, #c0883a);
    color:        var(--em-gold, #c0883a);
  }

  /* ── Theme switcher moves OUT of the phone header and INTO the overlay ──
     The phone header has room for exactly three things — wordmark, language,
     burger — and the theme switcher was the fourth. It is the only one of
     the four that is not navigation, so it is the one that moves.

     Below is the OVERLAY instance (nav.php prints the same buttons into
     .em-mob-menu); the header instance is hidden a few rules further down.
     One is visible at any width, never both: the header copy is display:none
     at ≤1024 and this overlay does not exist above 1024.

     Why the control could not simply be re-parented in CSS: #em-nav is
     `position: fixed; z-index: 900`, which makes it a stacking context, and
     the overlay is a SIBLING of <header> at z-index 9999. Every descendant
     of the header therefore paints below the open overlay no matter what
     z-index it carries. Lifting #em-nav above 9999 would drag the whole bar
     — wordmark, language, burger — on top of the overlay and over its close
     button. Printing the buttons a second time is the smaller change.

     Selectors carry #em-mob-menu (1,1,0) on purpose: Hello Elementor's
     reset.css styles `[type="button"]` at (0,1,0) and loads after this file,
     and `body:not(.em-home-page) .em-theme-sw` is (0,2,0). Both are cleared
     by the id. Same trap already documented for the header controls. */
  #em-mob-menu .em-theme-sw {
    display:        flex;
    /* .9rem above, nothing below. The language row and this switcher are
       ONE utility block, so the gap between them is deliberately smaller
       than the 1.8rem seam that separates the block from the navigation.
       The foot clearance now comes from the overlay's own padding-bottom
       rather than a margin stacked on top of it — the earlier 1.6rem here
       plus 1.4rem there gave 3rem of dead space at the bottom. */
    margin:         .9rem 0 0;
    border-radius:  999px;
    overflow:       hidden;
    /* The overlay is a scrolling column flex container. `overflow: hidden`
       above — which the pill needs, so the active half's gold fill follows
       the 999px radius — also drops this item's automatic minimum size to
       zero, and the 18-item menu overflows, so the switcher was flattened to
       height 0 at the very bottom: measured y=899.7, h=0, unclickable at
       320/390/768/1024. `flex: 0 0 auto` opts it out of shrinking; the
       overlay's own `overflow-y: auto` still scrolls to it. */
    flex:           0 0 auto;
    /* The @480 rule sets font-size:0 to hide the labels in the cramped phone
       header. There is no shortage of room here, so the labels come back. */
    font-size:      .8rem;
    font-family:    var(--em-font-head, 'Barlow Condensed', sans-serif);
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* Same treatment as .em-mob-menu__lang above, so the row reads as part
       of the overlay rather than a piece of the header dropped into it. */
    background:     rgba(244,236,224,.06);
    box-shadow:     0 0 0 1px rgba(244,236,224,.2);
    color:          rgba(244,236,224,.65);
  }
  #em-mob-menu .em-theme-sw__btn {
    display:     flex;
    align-items: center;
    gap:         .3rem;
    padding:     .42rem 1rem;
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       inherit;
    opacity:     .75;
    line-height: 1;
    white-space: nowrap;
    font:        inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    transition:  background .3s, opacity .25s, color .25s;
  }
  #em-mob-menu .em-theme-sw__btn.is-active {
    background: var(--em-gold, #c0883a);
    color:      #fff;
    opacity:    1;
  }
  #em-mob-menu .em-theme-sw__btn svg { width: 11px; height: 11px; }

  /* The header instance steps aside. (0,3,0) so sections/home.css, which
     declares its own .em-home-page header rules at (0,2,0) and loads later,
     cannot leave the switcher on screen on the homepage only. */
  .em-site-header .em-nav .em-theme-sw { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER CONTROLS — cascade defence against Hello Elementor's reset
   ═══════════════════════════════════════════════════════════════

   Hello Elementor enqueues assets/css/reset.css AFTER this file, and it
   styles `[type="button"], [type="submit"], button` with
   `display:inline-block; font-size:1rem; padding:.5rem 1rem`.

   `[type="button"]` is an ATTRIBUTE selector — specificity (0,1,0), the same
   weight as a class — so every single-class rule this file writes for a
   `<button type="button">` loses on load order alone. That is not a
   theoretical concern; it is what made the header unusable:

     .em-theme-sw__btn  kept 1rem type under a `font-size:0` parent, so the
                        "Gold"/"Blue" labels still rendered and the switcher
                        measured 143px instead of ~50px (162px in Arabic)
     .em-burger         took 16px of side padding instead of 6.4px, and its
                        `display:none` lost to `inline-block`, which printed
                        a hamburger on desktop on every non-home page
     together           the actions cluster reached 261px against a 390px
                        viewport, putting the burger at x=386–442 — entirely
                        outside the screen, silently clipped by
                        `body { overflow-x: hidden }`

   Every declaration below RESTATES a value this file already declares. None
   of it is a new design decision; it only gives those values a specificity
   the reset cannot reach. Scoped to .em-site-header so no Elementor,
   WordPress or plugin button anywhere else on the page is affected — this
   is a shield around our own component, not a global override.

   The pair that swaps the header between its desktop and mobile forms
   carries a third class (.em-nav) on purpose: sections/home.css declares
   `.em-home-page .em-burger { display: none }` at (0,2,0) and loads later,
   so a (0,2,0) rule here would win everywhere EXCEPT the homepage — which
   is exactly how a header ends up behaving differently on one page.

   DELIBERATELY NARROW SCOPE. Only two things are defended unconditionally:
   the burger's `display`, because a hamburger printing on a 1440 desktop is
   a defect at every width, and its box metrics, which are inert while it is
   hidden. The theme switcher and language button are defended ONLY below
   640, where the icon-only compaction is what makes the row fit. Above that
   they keep exactly the metrics they render with today — restating their
   authored padding at desktop would shrink both controls, and however
   accidental that rendering is, it is the composition currently signed off
   at 1280 and 1440. Flagged in the report rather than changed here. */

.em-site-header .em-burger {
  display:     none;
  padding:     .4rem;
  font-size:   inherit;
  line-height: 0;
}

@media (max-width: 1024px) {
  .em-site-header .em-nav .em-nav-links { display: none; }
  .em-site-header .em-nav .em-burger    { display: block; }
}

/* Phone compaction, restated at a specificity the reset cannot reach. Same
   values the 640 block further down already declares — those lose to
   `[type="button"]`.

   Only the language button is defended here now. The theme switcher used to
   need the same shield (the reset kept it 143px wide with its labels still
   painting under a `font-size: 0` parent), but it is `display: none` in the
   header at ≤1024 and lives in the overlay instead, so a ≤640 rule for it
   could never match. Its overlay metrics are set in the 1024 block above. */
@media (max-width: 640px) {
  .em-site-header .em-lang__current {
    display: flex;
    padding: .42rem .5rem;
    gap:     0;
  }
}

/* ===== 404 / UTILITY ===== */
.em-util-page {
  min-height:      80vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8rem 2rem 4rem;
  text-align:      center;
}
.em-util-page .em-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .8rem;
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight:    600;
  font-size:      .95rem;
  padding:        .9rem 1.8rem;
  border-radius:  999px;
  background:     var(--em-ink);
  color:          var(--em-bg);
  text-decoration: none;
  transition:     background .3s var(--em-ease);
  margin-top:     2rem;
}
.em-util-page .em-btn:hover { background: var(--em-gold); }

/* ===== TO-TOP PROGRESS BUTTON ===== */
.em-to-top {
  position:         fixed;
  bottom:           2rem;
  inset-inline-start: 1.8rem;
  z-index:         800;
  width:           46px;
  height:          46px;
  border:          none;
  border-radius:   50%;
  background:      var(--em-gold);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transform:       translateY(12px);
  pointer-events:  none;
  transition:      opacity .3s var(--em-ease),
                   transform .3s var(--em-ease),
                   background .2s;
}
.em-to-top svg {
  width:  20px;
  height: 20px;
  fill:   none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.em-to-top--show {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.em-to-top:hover { background: var(--em-gold-d); }

/* SVG progress ring (set via JS: stroke-dashoffset) */
.em-to-top__ring {
  position: absolute;
  inset:    0;
  width:    46px;
  height:   46px;
  transform: rotate(-90deg);
}
.em-to-top__ring circle {
  fill:             none;
  stroke:           var(--em-gold-d);
  stroke-width:     2;
  stroke-dasharray: 133;   /* ≈ 2π × 21.2 */
  stroke-dashoffset: 133;
  transition:       stroke-dashoffset .12s linear;
}

/* ===== WATERMARK ===== */
.em-watermark {
  position:       absolute;
  inset-inline-start: 50%;
  top:            50%;
  transform:      translate(-50%, -50%);
  font-family:    var(--em-font-head);
  font-size:      clamp(6rem, 14vw, 16rem);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          transparent;
  -webkit-text-stroke: 1px rgba(192,136,58,.14);
  white-space:    nowrap;
  pointer-events: none;
  user-select:    none;
  z-index:        0;
  will-change:    transform;
}

/* ===== SECTION WATERMARK DRIFT (JS applies translateX via GSAP) ===== */
[data-watermark] { overflow: hidden; position: relative; }
[data-watermark] > .em-watermark {
  white-space: nowrap;
}

/* ===== TEXT SPLIT REVEAL — WORD WRAPPER ===== */
.em-word {
  display:        inline-block;
  overflow:       hidden;
  vertical-align: bottom;
  line-height:    1.05;
}
.em-word-inner {
  display:    inline-block;
  will-change: transform;
}

/* ===== SHINE SWEEP ===== */
.anim-shine {
  position:   relative;
  overflow:   hidden;
}
.anim-shine::after {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       linear-gradient(105deg,
                      transparent 40%,
                      rgba(255,255,255,.32) 50%,
                      transparent 60%);
  transform:        translateX(-110%);
  pointer-events:   none;
}
.anim-shine.anim-shine--active::after {
  animation: shineSweep .7s var(--em-ease) forwards;
}
@keyframes shineSweep {
  to { transform: translateX(110%); }
}

/* ===== COUNT-UP DATA BADGE ===== */
[data-count] {
  font-family:    var(--em-font-head);
  font-variant-numeric: tabular-nums;
}

/* ===== IMAGE REVEAL WRAPPERS ===== */
.anim-image-reveal {
  overflow: hidden;
  position: relative;
}
.anim-image-reveal img,
.anim-image-reveal .em-img {
  display:    block;
  width:      100%;
  will-change: transform;
}

.anim-radius-reveal {
  overflow:      hidden;
  border-radius: 2px;
}
.anim-radius-reveal.is-revealed {
  border-radius: 0;
  transition: border-radius .6s var(--em-ease);
}

.anim-scroll-zoom {
  overflow: hidden;
}
.anim-scroll-zoom > * {
  will-change: transform;
}

/* ===== STAGGER HELPERS ===== */
.anim-stagger,
.anim-stagger-left,
.anim-stagger-spread {
  /* Children animate via JS; parent is purely a container */
}
/* Reduced-motion: children always visible */
@media (prefers-reduced-motion: reduce) {
  .anim-stagger > *,
  .anim-stagger-left > *,
  .anim-stagger-spread > *,
  .anim-reveal,
  .anim-split,
  .anim-image-reveal img,
  .anim-scroll-zoom > * {
    opacity:   1 !important;
    transform: none !important;
  }
}

/* ===== PARALLAX LAYER ===== */
.anim-parallax {
  will-change: transform;
}

/* ===== TICKER / MARQUEE ===== */
.em-ticker {
  overflow:        hidden;
  white-space:     nowrap;
}
.em-ticker__track {
  display:         inline-flex;
  gap:             0;
  will-change:     transform;
}
.em-ticker__item {
  display:         inline-flex;
  align-items:     center;
  padding-inline:  1.6rem;
  font-family:     var(--em-font-head);
  font-weight:     600;
  text-transform:  uppercase;
  letter-spacing:  .12em;
  font-size:       .9rem;
  color:           var(--em-gold);
  flex-shrink:     0;
}
.em-ticker__sep {
  display:     inline-block;
  margin-inline: .4rem;
  opacity:     .4;
}

/* ===== CARD TILT CONTAINER ===== */
[data-tilt] {
  transform-style:  preserve-3d;
  transform-origin: center center;
  will-change:      transform;
}
[data-tilt] .em-tilt-inner {
  transform:     translateZ(16px);
  will-change:   transform;
}

/* ===== FAQ ACCORDION ===== */
.em-faq__item {
  border-bottom:  1px solid var(--em-line);
  overflow:       hidden;
}
.em-faq__q {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.2rem 0;
  cursor:          pointer;
  font-family:     var(--em-font-head);
  font-weight:     600;
  font-size:       1.15rem;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  gap:             1rem;
  user-select:     none;
}
.em-faq__q::after {
  content:       '+';
  font-size:     1.5rem;
  font-weight:   300;
  line-height:   1;
  flex-shrink:   0;
  transition:    transform .3s var(--em-ease);
  color:         var(--em-gold);
}
.em-faq__item.is-open .em-faq__q::after { transform: rotate(45deg); }
.em-faq__a {
  overflow:   hidden;
  height:     0;
  font-size:  .98rem;
  color:      var(--em-muted);
  line-height: 1.7;
}
.em-faq__a__inner { padding-bottom: 1.2rem; }

/* ===== LANGUAGE SWITCHER ===== */
.em-lang {
  position:   relative;
  display:    inline-block;
}
.em-lang__current {
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  background:     none;
  border:         1px solid var(--em-line);
  border-radius:  999px;
  padding:        .45rem .8rem;
  cursor:         pointer;
  font-family:    var(--em-font-head);
  font-weight:    600;
  font-size:      .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          inherit;
  transition:     border-color .25s;
}
.em-lang__current:hover { border-color: var(--em-gold); }
.em-lang__dropdown {
  position:   absolute;
  top:        calc(100% + .5rem);
  inset-inline-end: 0;   /* right-aligned: extends toward center, never off-screen */
  background: var(--em-dark);
  border-radius: 6px;
  padding:    .4rem 0;
  min-width:  140px;
  overflow:   hidden;
  opacity:    0;
  pointer-events: none;
  transform:  translateY(-6px);
  transition: opacity .25s var(--em-ease), transform .25s var(--em-ease);
  z-index:    100;
}
.em-lang.is-open .em-lang__dropdown {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}
.em-lang__option {
  display:     block;
  padding:     .45rem 1rem;
  font-family: var(--em-font-head);
  font-weight: 600;
  font-size:   .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:       rgba(255,255,255,.75);
  text-decoration: none;
  transition:  color .2s, background .2s;
}
.em-lang__option:hover,
.em-lang__option.is-active {
  color:      var(--em-gold);
  background: rgba(255,255,255,.04);
}

/* ===== TESTIMONIALS SLIDER ===== */
.em-testimonials {
  overflow: hidden;
}
.em-testimonials__track {
  display:      flex;
  will-change:  transform;
}
.em-tcard {
  flex-shrink:    0;
  width:          100%;
  padding-inline: 1rem;
}
.em-tcard__body {
  background:    var(--em-bg2);
  border-radius: 10px;
  padding:       2rem;
}
.em-tcard__quote {
  font-size:   1.05rem;
  line-height: 1.75;
  color:       var(--em-ink);
  margin:      0 0 1.2rem;
}
.em-tcard__author {
  font-family:    var(--em-font-head);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size:      .82rem;
  color:          var(--em-gold);
}
.em-tcard__stars {
  color:        var(--em-gold);
  font-size:    .9rem;
  margin-bottom: .5rem;
}
.em-testimonials__dots {
  display:         flex;
  justify-content: center;
  gap:             .5rem;
  margin-top:      1.5rem;
}
.em-testimonials__dot {
  width:          8px;
  height:         8px;
  border-radius:  50%;
  background:     var(--em-muted);
  border:         none;
  cursor:         pointer;
  transition:     background .25s, transform .25s;
  padding:        0;
}
.em-testimonials__dot.is-active {
  background: var(--em-gold);
  transform:  scale(1.3);
}

/* ===== BLOG CARDS POST-HOVER ACTIVE STATE ===== */
.em-post .em-ph {
  position:            absolute;
  inset:               -8%;
  background-size:     cover;
  background-position: center;
  opacity:             0;
  transition:          opacity .6s var(--em-ease);
}
.em-post.is-active .em-ph,
.em-post:hover      .em-ph { opacity: 1; }
.em-post.is-active  .em-ph {
  animation: shaderDrift 9s ease-in-out infinite alternate;
}
@keyframes shaderDrift {
  0%   { transform: scale(1)    translateY(0); }
  50%  { transform: scale(1.06) translateY(-3%); }
  100% { transform: scale(1.03) translateY(3%); }
}

/* ===== SITE FOOTER — GLOBAL STYLES (all pages) ===== */
.em-site-footer {
  background:     var(--em-dark);
  color:          var(--em-bg);
  padding-top:    5rem;
  padding-bottom: 2.5rem;
}
.em-site-footer a { color: inherit; }

/* Newsletter block */
.em-subscribe {
  text-align: center;
  max-width:  640px;
  margin:     0 auto 3.5rem;
}
.em-subscribe .em-title { color: var(--em-bg); }
.em-newsletter {
  display:       flex;
  gap:           .6rem;
  max-width:     440px;
  margin:        1.6rem auto .8rem;
  background:    rgba(244,236,224,.08);
  border:        1px solid rgba(244,236,224,.2);
  border-radius: 999px;
  padding:       .4rem .4rem .4rem 1.4rem;
}
.em-newsletter input {
  flex:        1;
  background:  none;
  border:      none;
  color:       var(--em-bg);
  font-family: var(--em-font-body);
  font-size:   1rem;
  outline:     none;
}
.em-newsletter input::placeholder { color: rgba(244,236,224,.5); }
.em-newsletter button {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  background:    var(--em-gold);
  color:         #fff;
  border:        none;
  cursor:        pointer;
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
  transition:    background .2s, transform .2s;
}
.em-newsletter button:hover { background: var(--em-gold-d); transform: scale(1.08); }
.em-subscribe > p { color: rgba(244,236,224,.6); font-size: .9rem; }

/* Instagram strip */
.em-insta-strip {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   .5rem;
}
.em-insta-strip .ig {
  position: relative;
  height:   150px;
  overflow: hidden;
}
.em-insta-strip .ig .ph {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  transition:          transform .6s;
}
.em-insta-strip .ig:hover .ph { transform: scale(1.12); }
.em-insta-strip .ig:not(.follow)::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(192,136,58,0);
  transition: background .4s;
  z-index:    1;
}
.em-insta-strip .ig:not(.follow):hover::before { background: rgba(192,136,58,.55); }
.em-insta-strip .ig.follow {
  display:        grid;
  place-items:    center;
  background:     var(--em-gold);
  color:          #fff;
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  text-align:     center;
  font-weight:    600;
  letter-spacing: .05em;
  text-decoration: none;
}
.em-insta-strip .ig.follow:hover { background: var(--em-gold-d); }

/* Footer bottom bar */
.em-foot-bottom {
  border-top:  1px solid rgba(244,236,224,.14);
  margin-top:  3rem;
  padding:     1.8rem 0;
  display:     flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap:   wrap;
  gap:         1rem;
}
.em-foot-bottom .links ul {
  list-style: none;
  display:    flex;
  gap:        1.4rem;
  margin:     0;
  padding:    0;
}
.em-foot-bottom .links a {
  font-family:     var(--em-font-head);
  text-transform:  uppercase;
  letter-spacing:  .05em;
  font-size:       .95rem;
  color:           var(--em-bg);
  text-decoration: none;
  transition:      color .2s;
}
.em-foot-bottom .links a:hover { color: var(--em-gold); }
.em-foot-bottom p { color: rgba(244,236,224,.7); font-size: .9rem; }

/* Social icons */
.em-social { display: flex; gap: .7rem; }
.em-social a {
  width:          38px;
  height:         38px;
  border-radius:  50%;
  border:         1px solid rgba(244,236,224,.3);
  display:        grid;
  place-items:    center;
  color:          var(--em-bg);
  text-decoration: none;
  transition:     background .3s, border-color .3s;
}
.em-social a:hover { background: var(--em-gold); border-color: var(--em-gold); }

/* Footer watermark */
.em-foot-wm {
  color:          var(--em-bg);
  opacity:        .05;
  font-family:    var(--em-font-head);
  font-weight:    700;
  text-transform: uppercase;
  font-size:      clamp(4rem, 14vw, 12rem);
  text-align:     center;
  line-height:    .8;
  letter-spacing: .02em;
  pointer-events: none;
  margin-top:     1rem;
  overflow:       hidden;
}

@media (max-width: 1000px) {
  .em-nav-links { gap: 1.2rem; }
  .em-insta-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .em-insta-strip { grid-template-columns: repeat(2, 1fr); }
  /* Compact nav padding so all items fit on small screens */
  .em-nav                 { padding: .95rem .85rem; }
  .em-brand               { font-size: 1.1rem; gap: .28rem; }
  .em-brand__img          { height: 52px; }
  .em-nav-actions         { gap: .45rem; }
  /* Theme switcher: keep on mobile but icon-only — font-size:0 hides text labels */
  .em-theme-sw            { font-size: 0; }
  .em-theme-sw__btn       { padding: .38rem .46rem; gap: 0; }
  .em-theme-sw__btn svg   { width: 11px; height: 11px; }
  /* Lang: globe icon only, no "EN" text */
  .em-lang__current span  { display: none; }
  .em-lang__current       { padding: .42rem .5rem; gap: 0; }
  /* Dropdown: wider to prevent wrap on small screens */
  .em-lang__dropdown      { min-width: 140px; }
}

/* ===== GLOBAL CONTAINER (non-homepage pages need this; homepage overrides via .em-home-page scope) ===== */
.container {
  width:         min(1240px, 92vw);
  margin-inline: auto;
}

/* ===== INNER-PAGE SECTION SPACING ===== */
/* All non-home pages share these base padding / typography rules */
body:not(.em-home-page) .sec,
body:not(.em-home-page) section:not(.em-archive-hero) {
  padding: clamp(4rem, 9vw, 7rem) 0;
}

/* Ensure inner pages render section headings with sensible sizes */
body:not(.em-home-page) .em-title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.02;
}
body:not(.em-home-page) .em-subtitle {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--em-font-head);
  color: var(--em-gold);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}
body:not(.em-home-page) .em-subtitle::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* ===== UTILITY CLASSES ===== */
.em-sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space: nowrap;
  border:    0;
}
.em-visually-hidden {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:    -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space: nowrap;
  border:    0;
}

/* ===== WHATSAPP FLOATING BUTTON ===== */
.em-wa-float {
  position:       fixed;
  bottom:         1.75rem;
  right:          1.75rem;
  z-index:        9000;
  display:        flex;
  align-items:    center;
  gap:            .6rem;
  background:     #25D366;
  color:          #fff;
  border-radius:  3rem;
  padding:        .7rem 1.1rem .7rem .85rem;
  text-decoration: none;
  font-family:    var(--em-font-body);
  font-weight:    600;
  font-size:      .875rem;
  line-height:    1;
  box-shadow:     0 4px 18px rgba(37,211,102,.45);
  transition:     transform .22s var(--em-ease), box-shadow .22s var(--em-ease), padding .22s var(--em-ease);
  overflow:       hidden;
  white-space:    nowrap;
  max-width:      14rem;
}
.em-wa-float svg {
  flex-shrink: 0;
  width:  22px;
  height: 22px;
  fill:   #fff;
}
.em-wa-float__label {
  display:    inline-block;
  max-width:  0;
  opacity:    0;
  overflow:   hidden;
  transition: max-width .28s var(--em-ease), opacity .2s ease;
}
.em-wa-float:hover .em-wa-float__label,
.em-wa-float:focus .em-wa-float__label {
  max-width:  8rem;
  opacity:    1;
}
.em-wa-float:hover,
.em-wa-float:focus {
  transform:  translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,.55);
}
@media (max-width: 480px) {
  .em-wa-float {
    bottom: 1.25rem;
    right:  1.25rem;
    padding: .65rem;
    border-radius: 50%;
  }
  .em-wa-float__label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING CTAs — Book on WhatsApp / Request a quote
   One component, two densities: a compact pair on the homepage cards and
   the full-width stack in the tour sidebar. Rendered by inc/cta.php, which
   is also where both URLs come from.
   ═══════════════════════════════════════════════════════════════ */

.em-ctas {
  display: grid;
  gap: .5rem;
}

.em-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  font-family: var(--em-font-head);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background .22s var(--em-ease), color .22s var(--em-ease),
              transform .22s var(--em-ease), border-color .22s var(--em-ease);
}
.em-cta svg { flex: none; }

.em-cta--wa {
  background: #25d366;
  color: #fff;
  border: 1px solid #25d366;
}
.em-cta--wa:hover { background: #1eb855; border-color: #1eb855; transform: translateY(-1px); }

.em-cta--quote {
  /* Transparent-on-white made this button vanish into the card: a hairline
     border at 20% ink and body-coloured text is not a button, it is a
     suggestion. It now carries the papyrus surface and a full-strength ink
     border, so it reads as the secondary action rather than disappearing.
     Measured 14.3:1 text-on-surface (#1c1813 on #efe5d6), far past WCAG AA. */
  background: var(--em-bg2);
  color: var(--em-ink);
  border: 1.5px solid var(--em-ink);
  font-weight: 600;
}
.em-cta--quote:hover {
  background: var(--em-ink);
  border-color: var(--em-ink);
  color: var(--em-bg);
  transform: translateY(-1px);
}

.em-cta:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 2px; }

/* Hello Elementor's reset paints every anchor-button on hover; these are
   anchors, but its .btn rules and link colours still reach them. */
.em-ctas .em-cta,
.em-ctas .em-cta:hover { text-decoration: none; }

/* ── Card density ──────────────────────────────────────────────
   Two across where there is room, stacked where there is not. The pair sits
   BELOW the price row so it never competes with the title, the image or the
   transport selector. */
.em-ctas--card {
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .7rem;
}
.em-ctas--card .em-cta {
  padding: .55rem .5rem;
  font-size: .68rem;
  letter-spacing: .05em;
}
.em-ctas--card .em-cta svg { width: 13px; height: 13px; }

/* Below ~380px of card width two buttons cannot hold their labels, so they
   stack rather than shrink into unreadability. */
@media (max-width: 520px) {
  .em-ctas--card { grid-template-columns: 1fr; }
}

/* The must-have cards are a single anchor, so their CTAs sit just outside it
   and need to line up with the card's own edges. */
.em-mustdo__row > li .em-ctas--card,
.em-must__row > li .em-ctas--card {
  margin-top: .55rem;
}

html[dir="rtl"] .em-cta { letter-spacing: 0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — brand, trust, contact, social
   Replaces the newsletter/Instagram-strip footer. Four columns on desktop,
   two on tablet, stacked on mobile.
   ═══════════════════════════════════════════════════════════════ */

/* ── Explore strip ────────────────────────────────────────────
   The visual band the old "Instagram feed" occupied, rebuilt from real
   tours. Five tour tiles plus one social card: six columns on desktop, a
   snapping horizontal scroller below 768 so the tiles keep their size
   instead of shrinking to thumbnails. */

.em-foot-gallery {
  padding: clamp(2.6rem, 5vw, 3.6rem) 0 0;
  border-bottom: 1px solid rgba(244,236,224,.1);
  padding-bottom: clamp(2.4rem, 4.5vw, 3.2rem);
}

.em-foot-gallery__h {
  margin: 0 0 1.1rem;
  font-family: var(--em-font-head);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--em-bg);
}

.em-foot-gallery__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
}

.em-galtile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(244,236,224,.06);
  transition: transform .45s var(--em-ease), box-shadow .45s var(--em-ease);
}
.em-galtile:hover,
.em-galtile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}
.em-galtile:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }

/* Two class names deep on purpose: Elementor ships `.elementor img
   { height: auto }` (0,1,1), which beat a single-class rule and left every
   landscape photo sitting at its natural height in the top half of a square
   tile. */
.em-foot-gallery .em-galtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .7s var(--em-ease);
}
.em-galtile:hover .em-galtile__img,
.em-galtile:focus-visible .em-galtile__img { transform: scale(1.07); }

.em-galtile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,19,13,.9) 0%, rgba(22,19,13,.45) 42%, rgba(22,19,13,0) 72%);
}

.em-galtile__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: .12rem;
  padding: .6rem .65rem .65rem;
  color: var(--em-bg);
}
.em-galtile__cap em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-gold);
}
.em-galtile__cap b {
  font-family: var(--em-font-head);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
  /* Two lines, then ellipsis — a long tour name must not push the caption
     over the picture it belongs to. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The social card — the ONE Instagram element here. The tiles beside it are
   our tours, not posts, and are never labelled as a feed. */
.em-galtile--social {
  display: grid;
  place-items: center;
  /* At .28 alpha over #16130d this card read as a hole in the strip rather
     than the sixth tile. Enough gold to hold its own next to a photograph. */
  background:
    linear-gradient(145deg, rgba(192,136,58,.62), rgba(42,125,116,.5)),
    var(--em-dark);
  border: 1px solid rgba(192,136,58,.55);
}
.em-galtile__social {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: .5rem;
  text-align: center;
  color: var(--em-bg);
}
.em-galtile__social svg { width: 28px; height: 28px; color: var(--em-bg); }
.em-galtile__social b {
  font-family: var(--em-font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.em-galtile__social em {
  font-style: normal;
  font-size: .68rem;
  line-height: 1.3;
  word-break: break-all;
  color: rgba(255,255,255,.82);
}

@media (max-width: 900px) {
  .em-foot-gallery__strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  /* Scroller, not a squeeze: six 60px squares tell the customer nothing. */
  .em-foot-gallery__strip {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edge so the strip reads as "more to the right".
       .container has no padding of its own — it is min(1240px, 92vw) centred
       — so the gutter to cancel is half the leftover viewport. */
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
    padding-bottom: .25rem;
  }
  .em-foot-gallery__strip::-webkit-scrollbar { display: none; }
  .em-foot-gallery__strip > li {
    flex: 0 0 clamp(140px, 42vw, 190px);
    scroll-snap-align: start;
  }
  .em-galtile:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .em-galtile,
  .em-galtile__img { transition: none; }
  .em-galtile:hover,
  .em-galtile:focus-visible { transform: none; }
  .em-galtile:hover .em-galtile__img,
  .em-galtile:focus-visible .em-galtile__img { transform: none; }
}

.em-foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.4rem 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem;
}

.em-foot-col { min-width: 0; }

.em-foot-brand {
  margin: 0 0 .5rem;
  font-family: var(--em-font-head);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--em-bg);
}
.em-foot-tag {
  margin: 0 0 1.2rem;
  max-width: 34ch;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(244,236,224,.6);
}

.em-foot-h {
  margin: 0 0 .9rem;
  font-family: var(--em-font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-gold);
}

/* ── Contact ─────────────────────────────────────────────────── */
.em-foot-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.em-foot-contact a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon value" ".    label";
  align-items: center;
  gap: .1rem .6rem;
  color: var(--em-bg);
  text-decoration: none;
  transition: color .2s var(--em-ease);
}
.em-foot-contact svg { grid-area: icon; color: var(--em-gold); }
.em-foot-contact span { grid-area: value; font-size: .98rem; }
.em-foot-contact em {
  grid-area: label;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,236,224,.45);
}
.em-foot-contact a:hover { color: var(--em-gold); }
.em-foot-contact a:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; border-radius: 6px; }

/* ── Links ───────────────────────────────────────────────────── */
.em-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.em-foot-links a {
  color: rgba(244,236,224,.72);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--em-ease), border-color .2s var(--em-ease);
}
.em-foot-links a:hover { color: var(--em-bg); border-bottom-color: var(--em-gold); }
.em-foot-links a:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }

/* ── Registered company ──────────────────────────────────────── */
.em-legal {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(244,236,224,.16);
  border-radius: 14px;
  background: rgba(244,236,224,.04);
}
.em-legal__name {
  margin: 0 0 .35rem;
  font-family: var(--em-font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--em-bg);
}
.em-legal__eu {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .8rem;
  font-size: .84rem;
  line-height: 1.4;
  color: rgba(244,236,224,.72);
}
.em-legal__flag { font-size: 1.05rem; line-height: 1; }
.em-legal__ids { margin: 0; display: grid; gap: .5rem; }
.em-legal__ids > div { display: grid; gap: 1px; }
.em-legal__ids dt {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244,236,224,.45);
}
.em-legal__ids dd {
  margin: 0;
  font-family: var(--em-font-head);
  font-size: .98rem;
  letter-spacing: .04em;
  color: var(--em-bg);
}

/* ── Social ──────────────────────────────────────────────────── */
.em-social { display: flex; gap: .5rem; }
.em-social__link {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244,236,224,.2);
  color: var(--em-bg);
  transition: background .22s var(--em-ease), color .22s var(--em-ease),
              border-color .22s var(--em-ease), transform .22s var(--em-ease);
}
.em-social__link:hover {
  background: var(--em-gold);
  border-color: var(--em-gold);
  color: #fff;
  transform: translateY(-2px);
}
.em-social__link:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }

/* ── Bottom bar ──────────────────────────────────────────────── */
.em-site-footer .em-foot-bottom {
  display: flex;
  justify-content: center;
  padding: 1.3rem 0 2rem;
  border-top: 1px solid rgba(244,236,224,.12);
}
.em-site-footer .em-foot-bottom p {
  margin: 0;
  font-size: .84rem;
  color: rgba(244,236,224,.5);
}

@media (max-width: 1024px) {
  .em-foot-grid { grid-template-columns: 1fr 1fr; }
  .em-foot-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .em-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .em-foot-tag { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .em-social__link:hover { transform: none; }
}


/* ── Clickable editorial imagery (about + FAQ) ─────────────────
   The pictures were already there; these rules give the ones that now link
   somewhere a visible affordance, a focus ring and a destination label. */
.em-about-imgs .ai.is-linked,
.em-faq-img.is-linked {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}
.em-about-imgs .ai.is-linked img,
.em-faq-img.is-linked img {
  transition: transform .55s var(--em-ease);
}
.em-about-imgs .ai.is-linked:hover img,
.em-faq-img.is-linked:hover img { transform: scale(1.05); }

.ai__go {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--em-ink);
  font-family: var(--em-font-head);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--em-ease), transform .28s var(--em-ease);
}
.em-about-imgs .ai.is-linked:hover .ai__go,
.em-about-imgs .ai.is-linked:focus-visible .ai__go,
.em-faq-img.is-linked:hover .ai__go,
.em-faq-img.is-linked:focus-visible .ai__go { opacity: 1; transform: none; }

.em-about-imgs .ai.is-linked:focus-visible,
.em-faq-img.is-linked:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 4px; }

html[dir="rtl"] .ai__go svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .em-about-imgs .ai.is-linked img,
  .em-faq-img.is-linked img,
  .ai__go { transition: none; }
  .em-about-imgs .ai.is-linked:hover img,
  .em-faq-img.is-linked:hover img { transform: none; }
  /* the label must still appear — it is the affordance, not decoration */
  .ai__go { transform: none; }
}


/* "Hurghada Excursions" is a materially longer wordmark than "Egypt Magic":
   two full words instead of a compound. It needs to step down earlier so the
   header does not run into the nav on mid-size screens.

   That ladder was built for TEXT. The logo image is font-independent and
   already narrower than the text it replaced — 165px at desktop size against
   roughly 250px — so the same rungs now step the image HEIGHT instead. Same
   breakpoints, same intent, one problem fewer: nothing here depends any more
   on which font a language happens to load. The font-size values stay for the
   alt-text fallback. */
@media (max-width: 1200px) { .em-brand { font-size: 1.28rem; letter-spacing: .02em; } .em-brand__img { height: 62px; } }
@media (max-width: 1024px) { .em-brand { font-size: 1.12rem; } .em-brand__img { height: 56px; } }
@media (max-width: 420px)  { .em-brand { font-size: 1rem; gap: .35rem; } .em-brand__img { height: 46px; } }

/* The 420 step never reached the HOMEPAGE. sections/home.css sets
   `.em-home-page .em-brand { font-size: 1.1rem }` inside its own 640 block
   at (0,2,0) and loads later, so the wordmark stayed 1.1rem there while
   every other page stepped down — 183px against 165px. Those 18px were the
   whole reason the homepage header still overran at 320 (measured 15px)
   once the controls were the right size again.

   This is the ladder above applying where it was always meant to, not a new
   value: same 1rem, same .35rem, same breakpoint. (0,3,0) because (0,2,0)
   ties with home.css and loses on order. */
@media (max-width: 420px) {
  .em-site-header .em-nav .em-brand      { font-size: 1rem; gap: .35rem; }
  .em-site-header .em-nav .em-brand__img { height: 46px; }
}

/* One more rung on the SAME ladder, for the narrowest phones only.
   With the controls back at their designed size the row still did not fit
   at 320: measured 323px on the English homepage and 363px on the Arabic
   one, where html[lang="ar"] renders the Latin wordmark in Cairo and it
   comes out 210px against Barlow's 171px. The wordmark is the only element
   in the row with any give — the three controls are already at their
   minimum and none may be dropped — so it takes one more step, and the two
   existing compaction knobs (nav padding, action gap) take the rest.

   Scoped to 360 so 375 and 390, which already fit, are untouched. The
   selectors carry .em-nav because sections/home.css declares the homepage
   equivalents at (0,2,0) and loads later. */
@media (max-width: 360px) {
  .em-site-header #em-nav                { padding-inline: .55rem; }
  .em-site-header .em-nav .em-brand      { font-size: .92rem; gap: .26rem; }
  .em-site-header .em-nav .em-brand__img { height: 42px; }
  .em-site-header .em-nav .em-nav-actions { gap: .3rem; }
}

/* The last rung, at the 340 boundary the footer already uses, and it exists
   for Arabic. `html[lang="ar"]` swaps --em-font-head to Cairo, which also
   swaps the LATIN wordmark: "Hurghada Excursions" measures 193px in Cairo
   against 157px in Barlow Condensed at the same size, and those ~35px are
   the entire remaining deficit at 320 (measured 12-16px over). Every other
   language already fits at 320 without this.

   Pinning the wordmark to Barlow in all languages would be the smaller
   change and the template's own comment argues for it — but that is a
   typography decision about the brand, not a responsive one, so it is
   raised in the report instead of taken here.

   RESOLVED Sep 2026, and not by typography: the wordmark is an image now, so
   it measures the same in every language and the Arabic deficit this rung was
   built for no longer exists. The rung is kept because 320px is still 320px
   and the image may as well take the last step with everything else — it just
   no longer carries a language-specific reason. */
@media (max-width: 340px) {
  .em-site-header .em-nav .em-brand      { font-size: .82rem; }
  .em-site-header .em-nav .em-brand__img { height: 40px; }
}


/* ═══════════════════════════════════════════════════════════════
   LEGAL — footer notice block + the policy page body
   ═══════════════════════════════════════════════════════════════ */

.em-foot-bottom { display: grid; gap: .6rem; }

.em-foot-copy {
  margin: 0;
  color: rgba(244,236,224,.78);
  font-size: .92rem;
}

/* Small on purpose: it is a notice, not a paragraph anyone reads for
   pleasure, and it must not compete with the contact details above it. */
.em-foot-notice {
  margin: 0;
  max-width: 92ch;
  color: rgba(244,236,224,.45);
  font-size: .74rem;
  line-height: 1.55;
}

.em-foot-legal {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
}
.em-foot-legal a {
  color: rgba(244,236,224,.72);
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.em-foot-legal a:hover { color: var(--em-gold); border-bottom-color: var(--em-gold); }
.em-foot-legal a:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }

/* ── The policy page itself ──────────────────────────────────── */
.em-legal-doc { max-width: 74ch; }
.em-legal-doc__updated {
  margin: 0 0 2rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--em-gold-d);
}
.em-legal-doc h2 {
  margin: 2.4rem 0 .8rem;
  font-family: var(--em-font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--em-ink);
}
.em-legal-doc h2:first-of-type { margin-top: 0; }
.em-legal-doc p {
  margin: 0 0 1rem;
  line-height: 1.75;
  color: var(--em-ink);
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 5O — FOOTER RE-ARCHITECTURE
   ═══════════════════════════════════════════════════════════════

   Measured before touching anything: 1212px at 1440, 1836 at 768, 1745 at
   390, 1806 at 320. The 768 figure is the tell — the footer was TALLER on a
   tablet than on a desktop, because every column stacks while every padding
   stays at its desktop value.

   Where the height was going at 1440:

     154px  the HURGHADA wordmark, in flow, at opacity .05 — a sixth of the
            whole footer spent on something almost invisible
     ~120px dead space under the short columns, because a 2-item contact list
            and a 5-item link list sit in a grid row sized by the tallest
     ~80px  a 5rem top pad above a band that already has its own 3.6rem
     ~60px  a bottom bar laying copyright, a four-line ownership notice and
            the legal links out as one wrapping flex row

   None of that is information. Every piece of information in this footer is
   still here — the same links, the same contact details, the same company
   registration, the same notice, the same six gallery tiles. What changed is
   that the wordmark stopped paying rent for floor space, and the paddings
   stopped being set for a screen nobody is on.

   Everything below is CSS only. The footer markup, its links, its gallery
   and its legal text are untouched.

   The selectors are ELEMENT-QUALIFIED (`footer.em-site-footer ...`) on
   purpose. sections/home.css carries a parallel `.em-home-page .em-foot-*`
   set at (0,2,0) and loads after main.css, so a plain two-class rule here
   would lose on the homepage and win everywhere else — which is precisely
   how a footer ends up looking like two different footers. (0,2,1) beats
   (0,2,0) regardless of load order. */


/* ── the wordmark becomes the ground ───────────────────────────
   HURGHADA is the right instinct in the wrong box. As a flow element it is
   a 154px band of near-invisible type; as a background it is the thing that
   makes the footer feel like a place rather than a list of links.

   It stays exactly where it is in the DOM. Absolute positioning takes it out
   of flow, and z-index puts it behind the container that follows it, so no
   PHP moves and nothing about the reading order changes. */
footer.em-site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(2.4rem, 4vw, 3rem);
  padding-bottom: clamp(1.6rem, 3vw, 2rem);
}
footer.em-site-footer > .container { position: relative; z-index: 1; }

footer.em-site-footer .em-foot-wm {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  bottom: -.14em;          /* sink the baseline so the letters bleed off */
  margin: 0;
  /* Bigger than it has ever been, and far quieter. A watermark reads as
     deliberate at display scale and as a mistake at heading scale — the
     failure mode of "just shrink the font-size" is a mid-sized grey word
     sitting in the middle of nothing. 92vw of a 1240px container keeps it
     inside the page at every width, so it can never cause a scrollbar. */
  font-size: min(23vw, 20rem);
  line-height: .78;
  text-align: center;
  white-space: nowrap;
  /* .05 was tuned for a solid band with nothing over it. Under live text it
     has to stay under the readable threshold: at .045 the letterforms are
     present as texture and no link ever loses contrast against them. */
  opacity: .045;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

/* The drift is kept — it is the one piece of motion in the footer and it
   reads as heat haze — but halved, because a background element that moves
   as much as a foreground one stops being a background. */
@keyframes em-o-wm-drift {
  from { transform: translateX(-14px); }
  to   { transform: translateX(14px); }
}
footer.em-site-footer .em-foot-wm {
  animation: em-o-wm-drift 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  footer.em-site-footer .em-foot-wm { animation: none; transform: none; }
}


/* ── row 1: the explore band ───────────────────────────────────
   The six tiles, their pictures and their links are untouched; only the
   air around them is tightened. */
footer.em-site-footer .em-foot-gallery {
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
footer.em-site-footer .em-foot-gallery__h {
  margin-bottom: .85rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: .01em;
}


/* ── row 2: brand, contact, explore, company ───────────────────
   The columns were sized 1.5 / 1 / 1 / 1.2 and gapped 2.4rem — generous for
   a row whose tallest cell is a five-link list. Tightened, and the vertical
   pad roughly halved. */
footer.em-site-footer .em-foot-grid {
  gap: 1.8rem 2rem;
  padding: clamp(1.8rem, 3.4vw, 2.6rem) 0 clamp(1.2rem, 2.4vw, 1.7rem);
}
/* The two-column footer gives each column ~170px below 620px, and
   `info@hurghadaguidee.com` measures 189px at .98rem. Both the column and
   the value track inside .em-foot-contact a (grid: auto 1fr) size to
   min-content by default, so neither could shrink: the address ran straight
   across into the Explore column and printed over "Activities" — measured
   x=16→230 against a column ending at 205, at every width from 341 to 620,
   in every language.

   Letting the address break is the whole fix. Above 620px the column is
   already wider than the address, so nothing there changes, and no content,
   breakpoint or footer style is touched. */
footer.em-site-footer .em-foot-contact a    { min-width: 0; }
footer.em-site-footer .em-foot-contact span { min-width: 0; overflow-wrap: anywhere; }

footer.em-site-footer .em-foot-tag { margin-bottom: .95rem; font-size: .88rem; }
footer.em-site-footer .em-foot-h { margin-bottom: .7rem; }
footer.em-site-footer .em-legal { padding: .85rem .95rem; }
footer.em-site-footer .em-legal__eu { margin-bottom: .6rem; }


/* ── row 3: legal ──────────────────────────────────────────────
   Was one wrapping flex row carrying a short copyright line, a four-line
   ownership notice and two legal links — so the longest, least-read text on
   the page sat in the middle at the same weight as everything else.

   Now two rows, laid out with grid areas so the PHP order (copy, notice,
   links) needs no change: the two things a visitor might actually click or
   check sit together on the first line, and the notice runs quietly beneath
   them at a readable measure. */
footer.em-site-footer .em-foot-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "copy   legal"
    "notice notice";
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(244,236,224,.12);
}
footer.em-site-footer .em-foot-copy   { grid-area: copy;   font-size: .86rem; }
footer.em-site-footer .em-foot-legal  { grid-area: legal;  margin: 0; }
footer.em-site-footer .em-foot-notice {
  grid-area: notice;
  max-width: 108ch;
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(244,236,224,.38);
}


/* ── responsive ────────────────────────────────────────────────
   768 was the worst width in the whole set (1836px, taller than desktop)
   because the four columns stack one per row while the desktop paddings
   stay. Two columns for the three SHORT blocks removes a full column height
   without shrinking a single tap target. */
/* Measured at 1024 and 768 and both were the same failure: main.css drops to
   two columns at 1024 and spans the brand across both, so every row used
   about half its width and the other half was empty. Three half-empty rows is
   what "a stack of WordPress widgets" actually looks like.

   901-1024 keeps FOUR columns. The container is 942px there, which leaves
   ~216px a column — enough for the longest item in any of them (the email at
   .98rem is ~175px) and the row stops being mostly air.

   621-900 keeps two columns but STOPS SPANNING: brand beside contact, explore
   beside the registration card. Two full rows instead of three half-empty
   ones, and nothing shrinks. */
@media (min-width: 901px) and (max-width: 1024px) {
  footer.em-site-footer .em-foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
    gap: 1.5rem 1.4rem;
  }
  footer.em-site-footer .em-foot-col--brand { grid-column: auto; }
  footer.em-site-footer .em-foot-tag { max-width: none; }
}

@media (min-width: 621px) and (max-width: 900px) {
  footer.em-site-footer .em-foot-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 1.7rem 2rem;
  }
  footer.em-site-footer .em-foot-col--brand { grid-column: auto; }
  footer.em-site-footer .em-foot-tag { max-width: 30ch; }
}
@media (max-width: 620px) {
  footer.em-site-footer .em-foot-grid {
    grid-template-columns: 1fr 1fr;
    /* Column gutter widened from 1.2rem. The address is the longest
       unbreakable string in the footer and `overflow-wrap: anywhere` lets it
       run to the very edge of its column, so the 19.2px grid gap was the only
       thing between its last character and "Explore" — measured 20px at 360,
       23px at 430 and 24px at 390, which reads as a collision even though the
       boxes never overlap. 2rem puts a deliberate 32px gutter there.
       Row gap, columns, typography and the desktop footer are untouched. */
    gap: 1.5rem 2rem;
  }
  /* …and the gutter alone is not enough, because `overflow-wrap: anywhere`
     lets the address wrap at the very last pixel of its column, so whatever
     the grid gap is, that is the entire separation. Reserving 14px inside
     the contact column moves the wrap point in by that much and guarantees
     ~46px of white space between the address and "Explore" at every width —
     including the 320 case, where the column is only ~131px wide and the
     address is ~189px, so it always breaks.

     `padding-inline-end` is logical: LTR it protects the right edge next to
     Explore, RTL it protects the left, which is where Explore then sits. No
     font size, colour, structure or desktop rule is touched, and the icons
     (grid-area: icon, inline-start) do not move. */
  footer.em-site-footer .em-foot-contact { padding-inline-end: .875rem; }
  /* The brand statement and the registration card both want the full width:
     one is a sentence, the other is a bordered card with two long codes. */
  footer.em-site-footer .em-foot-col--brand,
  footer.em-site-footer .em-foot-col--legal { grid-column: 1 / -1; }
  footer.em-site-footer .em-foot-bottom {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "legal" "notice";
    gap: .6rem;
  }
}

/* ── the address on ONE line ───────────────────────────────────
   Letting it wrap (above) stopped it colliding with Explore, but a business
   address broken across two lines reads as a layout accident rather than a
   contact detail, so it should not wrap at all.

   Measured, not estimated: `info@hurghadaguidee.com` is 190px on one line,
   and its column needs 228px once the 16px icon, the 8px icon gap and the
   14px reserve are added. Against that, a 50/50 split gives the column
   153px at 360, 167px at 390 and 186px at 430.

   So there are two different problems here, not one:

   430-620 — the row IS wide enough (370px needed, 404 available at 430); it
   was only the even split that starved the address. Widening the contact
   share is enough, and this is exactly the "move Explore over" fix. Explore
   still gets 138px at 430 for a 110px longest link.

   341-429 — the row is NOT wide enough. At 390 one line needs 370px of the
   367px that exist. Three pixels. No gutter tweak, no ratio and no nudge can
   buy them, and the only lever left would be shrinking the address below
   legibility. Both columns therefore take the full width, and Explore's link
   list goes two-across so the footer does not grow a row's worth of height
   in exchange. Below 341 the footer is already single-column and the address
   already fits. */
@media (min-width: 430px) and (max-width: 620px) {
  /* 1.7fr leaves the contact column 234px at the 430 boundary — six more
     than the address needs, rather than the one pixel a tighter ratio would
     leave to rounding. */
  footer.em-site-footer .em-foot-grid { grid-template-columns: 1.7fr 1fr; }
}

@media (min-width: 341px) and (max-width: 429px) {
  footer.em-site-footer .em-foot-col--contact,
  footer.em-site-footer .em-foot-col--explore { grid-column: 1 / -1; }
  /* The reserve existed only to keep the address off Explore. Nothing sits
     beside it now, so it is 14px of the width the address needs. */
  footer.em-site-footer .em-foot-contact { padding-inline-end: 0; }
  /* Four links stacked in a full-width row would waste the width and cost
     the height the change just saved. Two across spends it instead. */
  footer.em-site-footer .em-foot-col--explore .em-foot-links {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
  }
}
/* The single-column fallback was first set at 380, and measuring it showed
   why that was wrong: 375 fell into it and came out 138px TALLER than 390,
   which is a footer that gets bigger as the screen gets smaller. 340 puts
   only the genuinely narrow phones in one column. */
@media (max-width: 340px) {
  footer.em-site-footer .em-foot-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  footer.em-site-footer .em-foot-wm { font-size: 26vw; }
}

/* The explore band was the single biggest block left at 768: a 3-across grid
   put six tiles on two rows, 542px of the 1460 total. The horizontal
   scroller that already runs below 767 does the same job in one row, keeps
   all six tiles at a size worth looking at, and is the more natural gesture
   on a tablet anyway. Raising its threshold to 900 is the change; the
   scroller itself is untouched. */
@media (min-width: 768px) and (max-width: 900px) {
  footer.em-site-footer .em-foot-gallery__strip {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc((100vw - 100%) / -2);
    padding-inline: calc((100vw - 100%) / 2);
    padding-bottom: .25rem;
  }
  footer.em-site-footer .em-foot-gallery__strip::-webkit-scrollbar { display: none; }
  footer.em-site-footer .em-foot-gallery__strip > li {
    flex: 0 0 clamp(150px, 26vw, 200px);
    scroll-snap-align: start;
  }
}