/*
Theme Name: RelocateMENA Child
Theme URI: https://relocatemena.com
Description: Clean child theme of GeneratePress for the RelocateMENA rebuild. Reproduces the legacy JupiterX look (Source Sans Pro, teal palette, 1140px) on Elementor free + custom widgets. No JupiterX/Jet/RevSlider/Pro.
Author: RelocateMENA
Template: generatepress
Version: 1.0.0
Text Domain: relocatemena-child
*/

/* ===== Design tokens (from audit/01d-design-system.json) ===== */
:root{
  --rm-teal:#38A2A8; --rm-teal-alt:#3FB7BE; --rm-teal-light:#4BD5DD; --rm-teal-dark:#2A8287;
  --rm-text:#5E5E5E; --rm-near-black:#1B1B1B; --rm-black:#000; --rm-white:#fff;
  --rm-light-grey:#E2E2E2; --rm-border:#DADADA; --rm-border2:#E9ECEF; --rm-footer-text:#F8F9FA;
  --rm-content-width:1140px;
}

/* ===== Base typography (Source Sans Pro) ===== */
body, .entry-content, button, input, select, textarea{
  font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16px; line-height:1.6; color:var(--rm-text); font-weight:400;
}
h1,h2,h3,h4,h5,h6{ font-family:"Source Sans Pro", sans-serif; color:var(--rm-text); }
h1{ font-size:24px; font-weight:400; line-height:1.4; color:var(--rm-teal-dark); }
h2{ font-size:22px; font-weight:500; line-height:1.2; }
h3{ font-size:18px; font-weight:500; line-height:1.6; }
h4{ font-size:16px; font-weight:500; line-height:1.6; }
h5{ font-size:32px; font-weight:500; line-height:1.3; color:var(--rm-teal); }
h6{ font-size:1rem; font-weight:500; line-height:1.2; }

a{ color:var(--rm-teal); }
a:hover{ color:var(--rm-black); }

/* ===== Layout width ===== */
.grid-container, .inside-article, .site-content .container{ max-width:var(--rm-content-width); }

/* ===== Edge-to-edge: Elementor full-template pages span the viewport so section BACKGROUNDS reach the
   screen edges (legacy look). #page is a .grid-container capped at 1140 (rule above) which boxes the whole
   site with grey gutters; un-cap it on Elementor pages only. Section CONTENT stays boxed via Elementor's
   own `.elementor-section-boxed > .elementor-container{max-width:1140}`. Standard pages/posts keep the
   1140 cap for readability. ===== */
.page-template-elementor_header_footer #page{ max-width:100% !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }
.page-template-elementor_header_footer #content.site-content{ padding-left:0 !important; padding-right:0 !important; }
.page-template-elementor_header_footer .entry-content{ margin-left:0; margin-right:0; }
/* 50px breathing room below the header on standard inner pages (NOT the full-bleed home/guide video
   heroes, which sit flush under the transparent overlay header) */
.page-template-elementor_header_footer:not(.rm-overlay-header):not(.rm-guide-page) #content.site-content{ padding-top:50px !important; }

/* ===== Buttons (teal) ===== */
.wp-block-button__link, button.button, .button, input[type="submit"]{
  background:var(--rm-teal); color:#fff; border-radius:3px;
}
.wp-block-button__link:hover, .button:hover, input[type="submit"]:hover{ background:var(--rm-teal-dark); }

/* ===== Title bar (page H1 + breadcrumb), matches legacy JupiterX ===== */
.rm-title-bar{ background:#f3f4f5; border-bottom:1px solid var(--rm-border2); padding:28px 20px; }
.rm-title-bar-inner{ max-width:1140px; margin:0 auto; }
.rm-title-bar-title{ font-size:2.5rem; font-weight:500; color:var(--rm-text); margin:0; line-height:1.2; }
.rm-breadcrumb{ margin-top:8px; font-size:13px; color:#888; }
.rm-breadcrumb a{ color:var(--rm-teal); }
@media(max-width:768px){ .rm-title-bar-title{ font-size:1.7rem; } }

/* hero slider heading must stay readable on colored sections */
.rm-slider-h{ color:#fff !important; }

/* internal-linking block appended to hub pages (links to formerly-orphan pages) */
.rm-related-links{ background:#f6f8f8; border-top:1px solid var(--rm-border2); padding:40px 20px; }
.rm-related-inner{ max-width:1140px; margin:0 auto; }
.rm-related-links h2{ font-size:22px; font-weight:600; color:var(--rm-near-black); margin:0 0 16px; }
.rm-related-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; }
.rm-related-links li{ margin:0; }
.rm-related-links a{ color:var(--rm-teal-dark); font-weight:600; font-size:15px; }
.rm-related-links a:hover{ color:var(--rm-teal); text-decoration:underline; }

/* hassle-free "Looking to Simplify Your Relocation?" teal section (c683059): trim the heavy 120px top
   padding now that the page has no title bar above it (edge-to-edge handled by the rule above). */
.elementor-element-c683059{ padding-top:55px !important; }
@media(max-width:768px){ .elementor-element-c683059{ padding-top:44px !important; } }

/* Elementor pages: hide GP featured-image page header (fallback to the PHP filter) */
.page-template-elementor_header_footer .featured-image.page-header-image{ display:none !important; }

/* ===== Header (white, logo left, nav + CTA right) ===== */
.site-header{ background:#fff; border-bottom:1px solid var(--rm-border2); }
.main-navigation{ background:#fff; }
.main-navigation .main-nav>ul>li>a{ color:var(--rm-near-black); font-weight:600; font-size:14px; }
.main-navigation .main-nav>ul>li>a:hover,
.main-navigation .main-nav>ul>li.current-menu-item>a{ color:var(--rm-teal); }
/* ----- Dropdown menus (4-level cascade, like legacy) ----- */
.main-navigation ul ul{ background:#fff; border:1px solid var(--rm-border2); width:250px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.main-navigation .main-nav ul ul li{ width:250px; }
.main-navigation .main-nav ul ul a{ padding:11px 18px; font-size:14px; line-height:1.3; color:var(--rm-near-black); }
.main-navigation .main-nav ul ul li:not(:last-child)>a{ border-bottom:1px solid var(--rm-border2); }
/* hover/focus highlight (inner-page white dropdowns) */
.main-navigation .main-nav ul ul li:hover>a,
.main-navigation .main-nav ul ul li.sfHover>a,
.main-navigation .main-nav ul ul a:hover,
.main-navigation .main-nav ul ul .current-menu-item>a{ background:var(--rm-teal); color:#fff; }
/* ----- Brand lockup: teal globe + "RELOCATE MENA" (Montserrat 700) + italic tagline (legacy header) ----- */
.rm-brand{ margin:0; line-height:1; }
.rm-logo-link{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.rm-logo-globe{ width:30px; height:30px; display:block; flex:0 0 auto; }
.rm-logo-text{ font-family:"Montserrat", sans-serif; font-weight:700; font-size:30px; line-height:1;
  text-transform:uppercase; letter-spacing:3.5px; color:#1B1B1B; white-space:nowrap; }
.rm-tagline{ margin:6px 0 0; color:var(--rm-text); font-style:italic; font-size:13px; line-height:1.2; }
.rm-tagline em{ font-style:italic; }
.site-branding .main-title a::before{ content:none; } /* drop the old globe glyph */
@media(max-width:1024px){ .rm-logo-text{ font-size:26px; letter-spacing:3px; } }
@media(max-width:768px){ .rm-logo-text{ font-size:20px; letter-spacing:2px; } .rm-tagline{ font-size:11px; } }
.rm-cta-callback{
  display:inline-block; margin:0 0 0 18px; padding:10px 20px; background:var(--rm-teal); color:#fff !important;
  border-radius:3px; font-weight:600; font-size:14px; align-self:center; white-space:nowrap;
}
.rm-cta-callback:hover{ background:var(--rm-teal-dark); color:#fff !important; }
.inside-navigation{ display:flex; align-items:center; }
/* ----- Mobile menu toggle "☰ Menu": the Elementor kit paints every bare <button> teal
   (button{background:#38A2A8}) and GP's toggle isn't in .mobile-menu-control-wrapper, so that
   teal leaks onto the toggle. Neutralize -> clean, high-contrast, no box. ----- */
.main-navigation .menu-toggle{
  background:transparent !important; color:var(--rm-near-black) !important;
  font-weight:600; font-size:15px; letter-spacing:.4px; box-shadow:none !important;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus{ background:transparent !important; color:var(--rm-teal) !important; }
.menu-toggle .gp-icon, .main-navigation .menu-toggle .mobile-menu{ color:inherit; }
/* expanded mobile menu items: white panel, dark text (never white-on-white) */
.main-navigation.toggled .main-nav>ul{ background:#fff; }
.main-navigation.toggled .main-nav ul li a{ color:var(--rm-near-black) !important; border-top:1px solid var(--rm-border2); }
.main-navigation.toggled .main-nav ul li a:hover{ background:var(--rm-teal) !important; color:#fff !important; }

/* ===== Footer (dark, two menu columns + copyright) ===== */
.rm-footer{ background:var(--rm-near-black); color:var(--rm-footer-text); padding:40px 20px; }
.rm-footer-inner{ max-width:1140px; margin:0 auto; display:flex; gap:60px; flex-wrap:wrap; }
.rm-footer-col{ flex:1; min-width:200px; }
.rm-footer-menu{ list-style:none; margin:0; padding:0; }
.rm-footer-menu li{ margin:0 0 8px; }
.rm-footer a, .rm-footer-menu a{ color:var(--rm-footer-text); font-size:14px; }
.rm-footer a:hover{ color:var(--rm-teal-light); }
.site-footer .inside-site-info{ background:var(--rm-black); color:var(--rm-footer-text); }
.site-info, .site-footer{ background:var(--rm-black); color:var(--rm-footer-text); }
@media(max-width:768px){ .rm-footer-inner{ flex-direction:column; gap:24px; } }

/* ===== Transparent header overlaid on a video hero (front page + country-guide pages) ===== */
body.rm-overlay-header .site-header{ position:absolute; top:0; left:0; right:0; z-index:30; background:transparent; border-bottom:none; }
body.rm-overlay-header .main-navigation{ background:transparent; }
/* mobile toggle stays white on the transparent header, dark once scrolled solid */
body.rm-overlay-header .main-navigation .menu-toggle{ color:#fff !important; }
body.rm-overlay-header.rm-scrolled .main-navigation .menu-toggle{ color:var(--rm-near-black) !important; }
body.rm-overlay-header .inside-header{ padding-top:18px; padding-bottom:18px; max-width:100% !important; }
/* over the transparent video header the wordmark goes white (globe stays teal); reverts when scrolled solid */
body.rm-overlay-header .rm-logo-text{ color:#fff; }
body.rm-overlay-header.rm-scrolled .rm-logo-text{ color:#1B1B1B; }
body.rm-overlay-header .rm-tagline{ margin:3px 0 0; color:#fff; font-style:italic; font-size:13px; font-weight:400; line-height:1.2; }
body.rm-overlay-header .rm-tagline em{ font-style:italic; }
body.rm-overlay-header .main-navigation .main-nav>ul>li>a{ color:#fff; font-weight:600; }
body.rm-overlay-header .main-navigation .main-nav>ul>li>a:hover,
body.rm-overlay-header .main-navigation .main-nav>ul>li.current-menu-item>a{ color:var(--rm-teal-light); }
/* on the transparent header, don't show GP's dark hover-box behind top-level items */
body.rm-overlay-header .main-navigation .main-nav>ul>li:hover>a,
body.rm-overlay-header .main-navigation .main-nav>ul>li.sfHover>a{ background:transparent !important; color:var(--rm-teal-light) !important; }
body.rm-overlay-header .main-navigation ul ul{ background:#1b1b1b; border-color:#333; }   /* dropdowns stay readable */
body.rm-overlay-header .main-navigation .main-nav ul ul a{ color:#fff; }
body.rm-overlay-header .main-navigation .main-nav ul ul li:not(:last-child)>a{ border-bottom-color:#333; }
body.rm-overlay-header .main-navigation .main-nav ul ul li:hover>a,
body.rm-overlay-header .main-navigation .main-nav ul ul li.sfHover>a,
body.rm-overlay-header .main-navigation .main-nav ul ul a:hover,
body.rm-overlay-header .main-navigation .main-nav ul ul .current-menu-item>a{ background:var(--rm-teal); color:#fff; }
body.rm-overlay-header .rm-cta-callback{ background:transparent; border:1px solid rgba(255,255,255,.85); color:#fff !important; }
body.rm-overlay-header .rm-cta-callback:hover{ background:#fff; color:var(--rm-teal-dark) !important; border-color:#fff; }

/* ===== Sticky header ===== */
/* inner pages: the solid white header sticks natively as you scroll */
.site-header{ position:sticky; top:0; z-index:40; transition:background .25s ease, box-shadow .25s ease; }
body.rm-scrolled .site-header{ box-shadow:0 2px 14px rgba(0,0,0,.08); }
/* overlay pages (home/guides): header overlays the hero (transparent) until you scroll past ~80px, then
   it becomes a fixed solid white bar with dark logo/nav (set by the .rm-scrolled rules above + below). */
body.rm-overlay-header.rm-scrolled .site-header{ position:fixed; top:0; left:0; right:0; background:#fff !important; border-bottom:1px solid var(--rm-border2); }
body.rm-overlay-header.rm-scrolled .main-navigation{ background:transparent; }
body.rm-overlay-header.rm-scrolled .rm-tagline{ color:var(--rm-text); }
body.rm-overlay-header.rm-scrolled .main-navigation .main-nav>ul>li>a{ color:var(--rm-near-black); }
body.rm-overlay-header.rm-scrolled .main-navigation .main-nav>ul>li>a:hover,
body.rm-overlay-header.rm-scrolled .main-navigation .main-nav>ul>li.current-menu-item>a{ color:var(--rm-teal); }
body.rm-overlay-header.rm-scrolled .rm-cta-callback{ background:var(--rm-teal); border-color:var(--rm-teal); color:#fff !important; }
/* scrolled overlay dropdowns match the inner (white) scheme */
body.rm-overlay-header.rm-scrolled .main-navigation ul ul{ background:#fff; border-color:var(--rm-border2); }
body.rm-overlay-header.rm-scrolled .main-navigation .main-nav ul ul a{ color:var(--rm-near-black); }

/* ===== Submenu flip: open a flyout to the LEFT when it would overflow the right viewport edge ===== */
.main-navigation .main-nav ul ul.rm-flip-left{ left:auto !important; right:100% !important; }
.main-navigation .main-nav > ul > li > ul.sub-menu.rm-flip-left{ left:auto !important; right:0 !important; }

/* ===== Country-guide hero: fullscreen ping-pong video, handwriting heading, centred x&y ===== */
body.rm-guide-page #page{ max-width:100% !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }
body.rm-guide-page #content.site-content{ padding:0 !important; }
body.rm-guide-page .site-content, body.rm-guide-page .site-main, body.rm-guide-page .content-area, body.rm-guide-page .entry-content{ margin-top:0 !important; padding-top:0 !important; }
body.rm-guide-page .elementor-top-section:first-of-type,
body.rm-guide-page .elementor-top-section:first-of-type .elementor-container,
body.rm-guide-page .elementor-top-section:first-of-type .elementor-column,
body.rm-guide-page .elementor-top-section:first-of-type .elementor-widget-wrap,
body.rm-guide-page .elementor-top-section:first-of-type .elementor-widget,
body.rm-guide-page .elementor-top-section:first-of-type .elementor-widget-container{
  padding:0 !important; margin:0 !important; width:100% !important; max-width:100% !important; overflow:visible !important;
}
.rm-guide-hero{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:100vh; min-height:560px;
  overflow:hidden; background:#10363b; display:flex; align-items:center; justify-content:center; }
.rm-guide-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.rm-guide-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:1; }
.rm-guide-inner{ position:relative; z-index:2; text-align:center; padding:0 22px; max-width:1100px; }
/* selector carries .rm-guide-hero so it outranks the Elementor kit's `.elementor-kit-4 h1` (which would
   otherwise force the heading to 24px Source-Sans teal and bury it in the video). */
.rm-guide-hero .rm-guide-h{ font-family:"Shadows Into Light", cursive !important; color:#fff !important; font-weight:400 !important;
  font-size:clamp(46px, 8.5vw, 104px) !important; line-height:1.04 !important; margin:0 0 6px; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.rm-guide-hero .rm-guide-sub{ color:#fff !important; font-weight:700; font-size:clamp(18px,2.5vw,30px); line-height:1.3; margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.5); }
.rm-guide-hero .rm-guide-sub .rm-dia{ color:var(--rm-teal-light); margin:0 .12em; font-weight:400; }
@media(max-width:768px){ .rm-guide-hero{ height:80vh; min-height:430px; } }
/* edge-to-edge: the site wrapper #page is a .grid-container capped at 1140px (line 36) -> that boxes the
   WHOLE site with grey body gutters. Un-cap it + the header on the full-bleed front page so the hero
   spans the viewport (legacy homepage is edge-to-edge). */
body.home #page{ max-width:100% !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }
body.home .inside-header{ max-width:100% !important; }
body.home #content.site-content{ padding:0 !important; }
body.home .site-content, body.home .site-main, body.home .content-area, body.home .entry-content{ margin-top:0; padding-top:0; }
/* hero section: full-bleed, no teal section bg/overlay leaking, video fills the viewport (legacy useFullScreenHeight) */
body.home .elementor-top-section:first-of-type{ background:transparent !important; padding:0 !important; margin:0 !important; }
body.home .elementor-top-section:first-of-type > .elementor-background-overlay{ display:none !important; }
/* hero height = the legacy RevSlider height (600px @ desktop). Force the whole wrapper chain to that exact
   height, then ABSOLUTELY pin the hero to fill it (inset:0) so a wrapper's vertical-centering can't push
   the video down -> no grey gap/line above it; text stays flex-centered. */
body.home .elementor-top-section:first-of-type,
body.home .elementor-top-section:first-of-type .elementor-container,
body.home .elementor-top-section:first-of-type .elementor-column,
body.home .elementor-top-section:first-of-type .elementor-widget-wrap,
body.home .elementor-top-section:first-of-type .elementor-widget,
body.home .elementor-top-section:first-of-type .elementor-widget-container{
  height:600px !important; min-height:600px !important; padding:0 !important; margin:0 !important;
  width:100% !important; max-width:100% !important;
}
body.home .elementor-top-section:first-of-type{ position:relative !important; }
/* make the section the ONLY positioned ancestor so the hero's inset:0 references it (0..600), not a
   vertically-centered wrapper */
body.home .elementor-top-section:first-of-type .elementor-container,
body.home .elementor-top-section:first-of-type .elementor-column,
body.home .elementor-top-section:first-of-type .elementor-widget-wrap,
body.home .elementor-top-section:first-of-type .elementor-widget,
body.home .elementor-top-section:first-of-type .elementor-widget-container{ position:static !important; }
body.home .rm-slider, body.home .rm-slider-video, body.home .rm-slider-img{
  position:absolute !important; inset:0 !important; height:auto !important; min-height:0 !important;
  width:100% !important; margin:0 !important;
}
/* mobile: legacy hides the video hero & shows a text-only section; instead show the same hero with the
   poster image (no heavy video on mobile) and hide the duplicate text-only section */
@media(max-width:768px){
  body.home{ overflow-x:hidden; }
  body.home .elementor-top-section:first-of-type{ display:block !important; }
  body.home .elementor-top-section:nth-of-type(2){ display:none !important; }
  body.home .rm-slider-bgvideo{ display:none; }
  body.home .rm-slider-video{ background-image:url(/wp-content/uploads/revslider/video-media/RM-Home2_12_layer.jpeg); background-size:cover; background-position:center; }
  /* override the fixed 600px desktop height with a shorter mobile hero */
  body.home .elementor-top-section:first-of-type,
  body.home .elementor-top-section:first-of-type .elementor-container,
  body.home .elementor-top-section:first-of-type .elementor-column,
  body.home .elementor-top-section:first-of-type .elementor-widget-wrap,
  body.home .elementor-top-section:first-of-type .elementor-widget,
  body.home .elementor-top-section:first-of-type .elementor-widget-container,
  body.home .rm-slider, body.home .rm-slider-video, body.home .rm-slider-img{ height:440px !important; min-height:440px !important; }
  /* the extra CTA button + long tagline overflow the mobile header row -> drop them on mobile
     (nav links remain in the hamburger menu; header becomes logo + ☰) */
  .rm-cta-callback{ display:none !important; }
  body.home .rm-tagline{ display:none !important; }
  body.home .rm-slider{ width:100vw !important; max-width:100vw !important; padding:80px 16px !important; box-sizing:border-box !important; }
  /* min-width:0 lets the flex item shrink so the heading/subtitle wrap instead of overflowing */
  body.home .rm-slider-inner{ max-width:100% !important; width:100% !important; min-width:0 !important; padding:0 !important; }
  body.home .rm-slider .rm-slider-h{ font-size:30px !important; }
  body.home .rm-slider .rm-slider-sub{ font-size:17px !important; }
}

/* =========================================================================
   Homepage "All Posts" sidebar + post-card cleanup
   ========================================================================= */

/* (3) Remove the redundant "Categories" heading above the All Posts widget. */
.elementor-element-9e16b04{ display:none !important; }

/* (2) All Posts category list: drop the default disc bullets; give it row
   separators, a custom teal marker and comfortable spacing. */
.elementor-widget-wp-widget-categories ul{ list-style:none; margin:0; padding:0; }
.elementor-widget-wp-widget-categories li.cat-item{ margin:0; }
.elementor-widget-wp-widget-categories li.cat-item + li.cat-item{ border-top:1px solid var(--rm-border2); }
.elementor-widget-wp-widget-categories li.cat-item a{
  position:relative; display:block; padding:9px 6px 9px 20px;
  font-size:15px; line-height:1.35; color:var(--rm-near-black,#333);
  text-decoration:none; transition:color .15s ease, padding .15s ease;
}
.elementor-widget-wp-widget-categories li.cat-item a::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--rm-teal);
}
.elementor-widget-wp-widget-categories li.cat-item a:hover{ color:var(--rm-teal); padding-left:24px; }

/* (4) Posts without a real photo: the [rm_posts] thumb is fixed at 200px with
   object-fit:cover, which crops the 16:9 auto-generated title-cards (and
   collapses to nothing when a post has no image at all). Use a 16:9 box so the
   title-cards show in full, with a branded teal gradient as the empty-state. */
.rm-posts .rm-post-thumb{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg, var(--rm-teal), var(--rm-teal-dark));
}
.rm-posts .rm-post-thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
/* Branded placeholder when a card has no real photo (the widget skips the
   auto-generated title-cards, leaving the thumb empty so this shows through). */
.rm-posts .rm-post-thumb:not(:has(img))::after{
  content:"Relocate MENA"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; padding:0 14px;
  text-align:center; font-family:"Montserrat", sans-serif; font-weight:700;
  font-size:clamp(17px, 2vw, 24px); letter-spacing:.4px; color:#fff;
}