/* =========================================================
   ExpatEase conversion glue CSS
   Pairs with Elementor theme-builder templates (Site Header /
   Site Footer) and the native Home page. Only rules that no
   Elementor control can produce live here. Everything else is
   set through widget controls / the Kit.
   ========================================================= */

/* 1. Transparent header -> solid on scroll.
   Elementor Pro sticky adds .elementor-sticky--effects after the
   configured effects offset (60px). This is Elementor's official
   transparent-sticky-header pattern. */
.expat-header {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.expat-header.elementor-sticky--effects,
body.single-post .expat-header {
  background-color: rgba(249, 247, 242, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #D9D2C7;
}
.expat-header.elementor-sticky--effects .expat-nav .elementor-nav-menu--main .elementor-item,
body.single-post .expat-header .expat-nav .elementor-nav-menu--main .elementor-item {
  color: #1A1A1A !important;
}
.expat-header.elementor-sticky--effects .expat-nav .elementor-nav-menu--main .elementor-item:hover,
.expat-header.elementor-sticky--effects .expat-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
body.single-post .expat-header .expat-nav .elementor-nav-menu--main .elementor-item:hover,
body.single-post .expat-header .expat-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--e-global-color-primary) !important;
}
.expat-header.elementor-sticky--effects .expat-nav .elementor-menu-toggle,
body.single-post .expat-header .expat-nav .elementor-menu-toggle {
  color: #1A1A1A !important;
  background-color: rgba(217, 210, 199, 0.6) !important;
}

/* 1b. Elementor's optimized-markup experiment dropped the classic
   "last paragraph has no bottom margin" reset for text-editor
   widgets; restore it so widget margins stay authoritative. */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}
.elementor-widget-text-editor p:first-child {
  margin-top: 0;
}

/* 2. Two-tone headings: an <em> inside any Elementor heading
   renders italic warm oak, matching the site's display style. */
.elementor-heading-title em {
  color: var(--e-global-color-primary);
  font-style: italic;
}

/* 3. Language switcher in the top bar (anchors live in a
   text-editor widget; behavior in expatease-glue.js). */
.expat-lang a.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  color: inherit;
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
.expat-lang a.lang-btn:hover {
  opacity: 1;
  color: var(--e-global-color-primary);
}
.expat-lang a.lang-btn.is-active {
  opacity: 1;
  color: var(--e-global-color-primary);
  background-color: rgba(191, 160, 131, 0.12);
}
.expat-lang .lang-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(249, 247, 242, 0.15);
}
.expat-lang .lang-sep {
  opacity: 0.3;
  margin: 0 4px;
}

/* 4. (floating WhatsApp button removed site-wide per client request) */

/* 5. Partner logo carousel: grayscale until hover, logo centered
   in an 80px lane (the Image Carousel widget has no CSS-filter
   control). */
.expat-partners .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.expat-partners .swiper-slide img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.5s ease, opacity 0.5s ease;
}
.expat-partners .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

/* 5b. Footer contact list: kill the base 5px text padding so the
   icon-to-text gap lands at ~7px (no control covers this default). */
.expat-contact-list .elementor-icon-list-text {
  padding-left: 0 !important;
}

/* 5c2. Contact info icon circles: fixed 40px slot beside the text
   column (the widget custom-width rule loses the container cascade). */
.expat-info-icon {
  width: 40px !important;
  max-width: 40px !important;
  flex-shrink: 0;
}

/* 5c3. Long contact values (email) must wrap inside their column,
   and links inherit the surrounding ink color instead of theme blue
   (text-editor has no link-color control). */
.expat-contact-value {
  overflow-wrap: anywhere;
}
.expat-contact-value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-contact-value a:hover {
  color: var(--e-global-color-primary);
}

/* 5c5. Inquiry form fields: the form widget has no field-padding
   control; match the original 12x16 input padding. */
.expat-inquiry-form .elementor-field-textual,
.expat-inquiry-form select.elementor-field-textual,
.expat-side-form .elementor-field-textual,
.expat-side-form select.elementor-field-textual {
  padding: 12px 16px;
}

/* 5c6. Submit button: browsers don't give <button> a pointer cursor
   by default and no control covers it. */
.expat-inquiry-form button[type="submit"],
.expat-side-form button[type="submit"] {
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 5c4. Last testimonial spans both columns on tablet only (the grid-item
   span control has no reliable per-device override). */
@media (min-width: 768px) and (max-width: 1024px) {
  .expat-span2-tablet {
    grid-column: span 2;
  }
}

/* 5c. Page-hero breadcrumb (anchors live in a text-editor widget) */
.expat-breadcrumb a {
  color: rgba(249, 247, 242, 0.7);
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-breadcrumb a:hover {
  color: var(--e-global-color-primary);
}
.expat-breadcrumb .sep {
  color: rgba(249, 247, 242, 0.35);
  margin: 0 8px;
}
.expat-breadcrumb .current {
  color: var(--e-global-color-primary);
}

/* 5d. Uploaded outline SVG icons (heroicons): keep stroke style —
   Elementor's icon CSS would otherwise fill the paths. */
.expat-icon-outline .elementor-icon svg {
  fill: none !important;
  stroke: currentColor;
}

/* 5e. Article single-post template */
.expat-crumb-dark a {
  color: var(--e-global-color-text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-crumb-dark a:hover {
  color: var(--e-global-color-primary);
}
.expat-crumb-dark .sep {
  color: var(--e-global-color-ccsage);
  margin: 0 2px;
}
.expat-post-content h2,
.expat-post-content h3,
.expat-post-content h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--e-global-color-secondary);
  margin: 1.6em 0 0.6em;
  line-height: 1.3;
}
.expat-post-content h2 { font-size: 26px; font-weight: 700; }
.expat-post-content h3 { font-size: 21px; font-weight: 600; }
.expat-post-content a { color: var(--e-global-color-primary); }
.expat-post-content { overflow-wrap: anywhere; }
.expat-post-content [id] { scroll-margin-top: 120px; }
.expat-post-content .post-toc {
  background-color: rgba(234, 227, 217, 0.4);
  border: 1px solid var(--e-global-color-ccbords);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 32px;
}
.expat-post-content .post-toc h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
}
.expat-post-content .post-toc ol {
  margin: 0;
  padding-left: 1.25em;
}
.expat-post-content .post-toc li { margin-bottom: 6px; }
.expat-post-content .post-toc li:last-child { margin-bottom: 0; }
.expat-post-content .post-toc a {
  color: var(--e-global-color-text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-post-content .post-toc a:hover {
  color: var(--e-global-color-primary);
}
.expat-post-content ul,
.expat-post-content ol { padding-left: 1.4em; margin: 0.8em 0; }
.expat-post-content li { margin-bottom: 0.4em; }
.expat-toc .elementor-toc__header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
}
.expat-cta-value { overflow-wrap: anywhere; }
.expat-cta-value .elementor-heading-title a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.expat-cta-value .elementor-heading-title a:hover { color: var(--e-global-color-primary); }
.expat-oak-link a {
  color: var(--e-global-color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.25s ease;
}
.expat-oak-link a:hover { color: var(--e-global-color-accent); }
.expat-bio a { color: var(--e-global-color-primary); text-decoration: none; }
.expat-bio a:hover { color: var(--e-global-color-accent); }
.expat-side-list ul { list-style: none; margin: 0; padding: 0; }
.expat-side-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--e-global-color-ccbords);
}
.expat-side-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.expat-side-list li:first-child { padding-top: 0; }
.expat-side-list a {
  color: var(--e-global-color-text);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-side-list a:hover { color: var(--e-global-color-primary); }
.expat-rpm-thumb img { width: 80px; height: 64px; object-fit: cover; }

/* 5f. Archive card title is a link: keep the ink color, hint on hover */
.expat-card-title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.expat-card-title .elementor-heading-title a:hover {
  color: var(--e-global-color-primary);
}

/* 6. Hero scroll cue */
.expat-scroll-cue {
  animation: expatBounce 2.4s ease-in-out infinite;
}
@keyframes expatBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* 7. Anchored sections land below the sticky header */
.e-con[id] {
  scroll-margin-top: 120px;
}

/* 8. Hide Google Translate chrome (same rules as the legacy site.css) */
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-tooltip { display: none !important; }
font[style] { background: transparent !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .expat-wa-float .elementor-icon::before,
  .expat-scroll-cue { animation: none; }
}