/* =========================================================
   Expat Services CR - Layout and typographic rhythm

   Classes you can type into Elementor's "CSS Classes" field:

     esc-grid-2 / esc-grid-3 / esc-grid-4
         Turns a container into an even grid. Columns are always
         equal width and fill the row completely - no ragged edge.
         Collapses to 2 columns on tablet and 1 on phone.

     esc-measure     caps paragraph width for comfortable reading
     esc-center      centres the block and its text
     esc-svc-card    service card: forces every photo to the same 4:3 crop
     esc-card        panel padding, border and hover lift
     esc-btn-outline outlined button on dark backgrounds
   ========================================================= */

/* ---------- Even grids ---------- */
.esc-grid-2,
.esc-grid-3,
.esc-grid-4 {
  display: grid !important;
  align-items: stretch;
}

.esc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Children must not carry their own width, or the grid cell is ignored. */
.esc-grid-2 > .e-con,
.esc-grid-3 > .e-con,
.esc-grid-4 > .e-con,
.esc-grid-2 > .elementor-element,
.esc-grid-3 > .elementor-element,
.esc-grid-4 > .elementor-element {
  width: auto !important;
  max-width: none !important;
  --width: auto;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .esc-grid-3,
  .esc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .esc-grid-2,
  .esc-grid-3,
  .esc-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cards ---------- */
.esc-card {
  height: 100%;
  transition: transform 0.35s var(--esc-ease),
              box-shadow 0.35s var(--esc-ease),
              border-color 0.35s var(--esc-ease);
}

.esc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(14, 77, 60, 0.10);
  border-color: var(--esc-gold);
}

/* Service cards: one consistent crop, whatever the source photo. */
.esc-svc-card .elementor-image-box-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.esc-svc-card .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Reading measure ---------- */
.esc-measure p {
  max-width: 68ch;
}

.esc-center,
.esc-center p {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Vertical rhythm ---------- */
/* Section padding scales with the viewport instead of jumping. */
.esc-section > .e-con-inner,
.esc-section {
  padding-block: clamp(64px, 7.5vw, 112px);
}

@media (max-width: 767px) {
  .esc-section > .e-con-inner,
  .esc-section { padding-block: 56px; }
}

/* ---------- Headings ---------- */
/* Playfair needs a tighter leading than the browser default at display sizes. */
.elementor-widget-heading h1,
.elementor-widget-heading h2 { line-height: 1.14; }

.elementor-widget-heading h3,
.elementor-widget-heading h4 { line-height: 1.3; }

/* Optical fix: Playfair sits slightly high in its box next to sans-serif. */
.esc-eyebrow + .elementor-widget-heading { margin-top: -2px; }

/* ---------- Buttons ---------- */
.esc-btn-outline .elementor-button {
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background-color 0.3s var(--esc-ease),
              border-color 0.3s var(--esc-ease),
              color 0.3s var(--esc-ease);
}

.esc-btn-outline .elementor-button:hover {
  border-color: var(--esc-white);
}

.elementor-button {
  transition: background-color 0.3s var(--esc-ease),
              color 0.3s var(--esc-ease),
              transform 0.2s var(--esc-ease);
}

.elementor-button:hover { transform: translateY(-1px); }

/* ---------- Icon boxes ---------- */
.esc-card .elementor-icon-box-wrapper { height: 100%; }
.esc-card .elementor-icon-box-title { margin-block: 2px 6px; }

/* ---------- Header ---------- */
.esc-header-logo a,
.esc-wordmark a { text-decoration: none; }

/* Keep the nav from crowding the CTA on mid-size screens. */
@media (max-width: 1100px) and (min-width: 1025px) {
  .esc-header { padding-inline: 28px !important; }
}

/* ---------- Footer ---------- */
.esc-footer a { text-decoration: none; }
.esc-footer .elementor-icon-list-item a:hover { color: var(--esc-gold) !important; }

/* Social icons with no link should not look clickable. */
.esc-footer .elementor-social-icon:not([href]) { cursor: default; }

/* ---------------------------------------------------------
   Fluent Forms - brand styling
   Scoped to .esc-form, the CSS class set on the form itself,
   so other forms on the site are untouched.
   --------------------------------------------------------- */
.esc-form .ff-el-input--label label {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--esc-charcoal);
  letter-spacing: 0.2px;
}

.esc-form .ff-el-form-control {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid #D9D4C8;
  border-radius: 4px;
  background: var(--esc-white);
  color: var(--esc-charcoal);
  transition: border-color 0.2s var(--esc-ease), box-shadow 0.2s var(--esc-ease);
}

.esc-form .ff-el-form-control:focus {
  border-color: var(--esc-green);
  box-shadow: 0 0 0 3px rgba(46, 139, 99, 0.15);
  outline: none;
}

.esc-form .ff-el-form-control::placeholder {
  color: #9A9A93;
}

.esc-form .ff-el-group { margin-bottom: 18px; }

.esc-form .ff-btn-submit {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 34px;
  border: none;
  border-radius: 4px;
  background: var(--esc-gold);
  color: var(--esc-charcoal);
  cursor: pointer;
  transition: background-color 0.3s var(--esc-ease),
              color 0.3s var(--esc-ease),
              transform 0.2s var(--esc-ease);
}

.esc-form .ff-btn-submit:hover {
  background: var(--esc-jungle);
  color: var(--esc-white);
  transform: translateY(-1px);
}

.esc-form .ff-el-is-error .ff-el-form-control { border-color: #C0453B; }
.esc-form .text-danger,
.esc-form .error { color: #C0453B; font-size: 14px; }

.esc-form .ff-message-success {
  background: rgba(46, 139, 99, 0.10);
  border: 1px solid var(--esc-green);
  border-radius: 4px;
  padding: 18px 20px;
  color: var(--esc-jungle);
}

/* Required marker in the brand gold rather than red. */
.esc-form .ff-el-is-required.asterisk-right label:after { color: var(--esc-gold); }

/* ---------------------------------------------------------
   Blog
   --------------------------------------------------------- */
.esc-post-card { height: 100%; }

.esc-post-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.esc-article h2,
.esc-article h3 { margin-top: 1.6em; margin-bottom: 0.5em; }

.esc-article p,
.esc-article li { max-width: 68ch; }

.esc-article ul,
.esc-article ol { margin: 1em 0 1.4em 1.2em; }

.esc-article li { margin-bottom: 0.5em; }

.esc-article blockquote {
  border-left: 3px solid var(--esc-gold);
  padding: 4px 0 4px 20px;
  margin: 1.6em 0;
  font-style: normal;
  color: var(--esc-jungle);
}

.esc-article a { color: var(--esc-green); }
.esc-article a:hover { color: var(--esc-jungle); }

/* ---------------------------------------------------------
   Blog templates (template-parts/archive.php and single.php)
   --------------------------------------------------------- */
.esc-blog-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.esc-blog-inner--narrow { max-width: 780px; }

.esc-blog-hero {
  background: var(--esc-jungle);
  color: var(--esc-white);
  padding-block: clamp(64px, 8vw, 104px);
  text-align: center;
}

.esc-blog-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.14;
  color: var(--esc-white);
  margin: 10px 0 14px;
}

.esc-blog-hero p {
  color: #D8E4DE;
  font-size: 18px;
  line-height: 1.7;
  max-width: 62ch;
  margin-inline: auto;
}

.esc-blog-eyebrow {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--esc-gold);
}

.esc-blog-hero--post { text-align: left; }
.esc-blog-hero--post h1 { max-width: 20ch; }

.esc-post-meta {
  color: #9DBAB0 !important;
  font-size: 15px !important;
  margin: 0 !important;
}

.esc-blog-body { padding-block: clamp(56px, 6vw, 88px); background: var(--esc-white); }

/* ---------- Post grid ---------- */
.esc-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.esc-post-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) { .esc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .esc-post-grid, .esc-post-grid--two { grid-template-columns: minmax(0, 1fr); } }

.esc-post-card {
  display: flex;
  flex-direction: column;
  background: var(--esc-white);
  border: 1px solid var(--esc-line, #E3E0D8);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.35s var(--esc-ease),
              box-shadow 0.35s var(--esc-ease),
              border-color 0.35s var(--esc-ease);
}

.esc-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(14, 77, 60, 0.10);
  border-color: var(--esc-gold);
}

.esc-post-thumb { display: block; overflow: hidden; }
.esc-post-thumb img { transition: transform 0.7s var(--esc-ease); }
.esc-post-card:hover .esc-post-thumb img { transform: scale(1.05); }

.esc-post-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.esc-post-cat {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--esc-green);
}

.esc-post-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
}

.esc-post-title a { color: var(--esc-jungle); text-decoration: none; }
.esc-post-title a:hover { color: var(--esc-green); }

.esc-post-excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: #4A524D;
  margin: 0;
  flex: 1;
}

.esc-post-more {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--esc-green);
  text-decoration: none;
  margin-top: auto;
}

.esc-post-more:after { content: " \2192"; }
.esc-post-more:hover { color: var(--esc-gold); }

/* ---------- Single post ---------- */
.esc-post-hero-img { margin: 0 0 36px; }
.esc-post-hero-img img { width: 100%; border-radius: 6px; display: block; }

.esc-post-cta {
  margin-top: 52px;
  padding: 34px 32px;
  background: var(--esc-sand);
  border-radius: 8px;
}

.esc-post-cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  color: var(--esc-jungle);
  margin: 0 0 10px;
}

.esc-post-cta p { margin: 0 0 20px; color: var(--esc-charcoal); }

.esc-post-cta-btn {
  display: inline-block;
  background: var(--esc-gold);
  color: var(--esc-charcoal);
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s var(--esc-ease), color 0.3s var(--esc-ease);
}

.esc-post-cta-btn:hover { background: var(--esc-jungle); color: var(--esc-white); }

.esc-related { margin-top: 56px; }

.esc-related > h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  color: var(--esc-jungle);
  margin: 0 0 22px;
}

/* ---------- Pagination ---------- */
.esc-blog .pagination,
.esc-blog .navigation.pagination { margin-top: 44px; }

.esc-blog .page-numbers {
  font-family: "Source Sans 3", sans-serif;
  font-size: 15px;
  padding: 9px 15px;
  border: 1px solid #E3E0D8;
  border-radius: 4px;
  color: var(--esc-charcoal);
  text-decoration: none;
  margin-right: 6px;
}

.esc-blog .page-numbers.current,
.esc-blog .page-numbers:hover {
  background: var(--esc-jungle);
  border-color: var(--esc-jungle);
  color: var(--esc-white);
}

.esc-post-empty { color: #4A524D; font-size: 18px; }

/* =========================================================
   REFINEMENTS
   Loaded after everything above, so these rules win.
   ========================================================= */

/* ---------------------------------------------------------
   1. Grid fix

   Elementor boxed containers are .e-con.e-con-boxed wrapping
   an .e-con-inner that carries the max-width. Forcing display:grid
   on the outer element destroys that centring and the content
   slides to the viewport edge. So: when the grid class sits on a
   boxed container, apply the grid to the inner wrapper instead.
   --------------------------------------------------------- */
.e-con-boxed.esc-grid-2,
.e-con-boxed.esc-grid-3,
.e-con-boxed.esc-grid-4 {
  display: block !important;
}

.e-con-boxed.esc-grid-2 > .e-con-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-con-boxed.esc-grid-3 > .e-con-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-con-boxed.esc-grid-4 > .e-con-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.e-con-boxed.esc-grid-2 > .e-con-inner > *,
.e-con-boxed.esc-grid-3 > .e-con-inner > *,
.e-con-boxed.esc-grid-4 > .e-con-inner > * {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .e-con-boxed.esc-grid-3 > .e-con-inner,
  .e-con-boxed.esc-grid-4 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .e-con-boxed.esc-grid-2 > .e-con-inner,
  .e-con-boxed.esc-grid-3 > .e-con-inner,
  .e-con-boxed.esc-grid-4 > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Never let a section's content touch the viewport edge. */
.e-con-boxed > .e-con-inner { padding-inline: clamp(20px, 4vw, 40px); }

/* ---------------------------------------------------------
   2. Icon treatment for the service cards

   The service artwork is line-art, not photography. Cropping it
   to a photo ratio looked wrong. Instead: one fixed size, centred,
   sitting on a tinted tile so the differing source styles read as
   one set.
   --------------------------------------------------------- */
.esc-svc-card .elementor-image-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.esc-svc-card .elementor-image-box-img {
  width: 96px !important;
  height: 96px;
  margin: 0 0 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--esc-sand);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background-color 0.35s var(--esc-ease);
}

.esc-svc-card .elementor-image-box-img img {
  width: 56px;
  height: 56px;
  aspect-ratio: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.esc-card:hover .esc-svc-card .elementor-image-box-img {
  background: #EFE7D6;
}

.esc-svc-card .elementor-image-box-content { width: 100%; }

.esc-svc-card .elementor-image-box-title { margin-bottom: 10px; }

/* ---------------------------------------------------------
   3. Cards: more room to breathe, and real depth
   --------------------------------------------------------- */
.esc-card {
  padding: 38px 32px !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(43, 47, 44, 0.04),
              0 8px 24px rgba(14, 77, 60, 0.05);
}

.esc-card:hover {
  box-shadow: 0 2px 4px rgba(43, 47, 44, 0.05),
              0 22px 48px rgba(14, 77, 60, 0.12);
}

@media (max-width: 767px) {
  .esc-card { padding: 30px 24px !important; }
}

/* Image-box cards manage their own padding through the widget. */
.esc-card .elementor-widget-image-box { width: 100%; }

/* Centre the icon boxes properly, including the icon itself. */
.esc-card .elementor-icon-box-wrapper { text-align: center; }
.esc-card .elementor-icon-box-icon { margin-inline: auto; }

.esc-card .elementor-icon-box-icon .elementor-icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--esc-sand);
  border-radius: 50%;
  transition: background-color 0.35s var(--esc-ease),
              color 0.35s var(--esc-ease);
}

.esc-card:hover .elementor-icon-box-icon .elementor-icon {
  background: var(--esc-jungle);
  color: var(--esc-white) !important;
}

.esc-card:hover .elementor-icon-box-icon .elementor-icon svg { fill: var(--esc-white); }
.esc-card:hover .elementor-icon-box-icon .elementor-icon i { color: var(--esc-white); }

/* Checklists inside cards read better left-aligned even when the
   heading above them is centred. */
.esc-card .elementor-icon-list-items { text-align: left; }

/* ---------------------------------------------------------
   4. Typographic scale
   Bigger, more confident headings. Basic pages are usually
   basic because the type never commits.
   --------------------------------------------------------- */
.esc-eyebrow {
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.esc-eyebrow:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--esc-gold);
}

/* Centred sections get a centred rule. */
.elementor-widget-heading.esc-eyebrow .elementor-heading-title { display: inline-block; }

.esc-center .esc-eyebrow:after,
[style*="text-align:center"] .esc-eyebrow:after { left: 50%; transform: translateX(-50%); }

.elementor-widget-heading h2 { letter-spacing: -0.4px; }
.elementor-widget-heading h1 { letter-spacing: -0.8px; }

/* ---------------------------------------------------------
   5. Illustrations
   The line-art assets are low resolution. Shown large they look
   soft and cheap, so they are capped.
   --------------------------------------------------------- */
.esc-illustration img {
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  display: block;
}

/* ---------------------------------------------------------
   6. Numbered steps
   --------------------------------------------------------- */
.esc-step-num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--esc-sand);
  color: var(--esc-jungle) !important;
  font-size: 22px !important;
  border: 1px solid #E3D9C2;
}

/* ---------------------------------------------------------
   7. Section separation
   Adjacent white sections were blurring into each other.
   --------------------------------------------------------- */
.esc-rule > .e-con-inner { border-top: 1px solid #ECE8DE; padding-top: clamp(56px, 6vw, 96px); }

/* ---------------------------------------------------------
   8. Lists
   --------------------------------------------------------- */
.elementor-icon-list-item { align-items: flex-start !important; }
.elementor-icon-list-icon { padding-top: 5px; }

/* ---------------------------------------------------------
   9. Orphan grid items

   Seven cards in rows of three leaves the last one stranded at
   the left. Centre it instead so the block reads as finished.
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .esc-grid-3 > *:last-child:nth-child(3n + 1) { grid-column: 2 / 3; }
  .e-con-boxed.esc-grid-3 > .e-con-inner > *:last-child:nth-child(3n + 1) { grid-column: 2 / 3; }

  .esc-grid-4 > *:last-child:nth-child(4n + 1) { grid-column: 2 / 4; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .esc-grid-3 > *:last-child:nth-child(2n + 1),
  .esc-grid-4 > *:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto !important;
  }
}

/* ---------------------------------------------------------
   10. Two-column text and image blocks

   Keep the photo from towering over its paragraph, and give it
   the same corner radius as everything else.
   --------------------------------------------------------- */
.esc-grid-2 .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.esc-grid-2 .elementor-widget-image { line-height: 0; }

/* An illustration is not a photograph: never crop it, never blow it up. */
.esc-illustration img,
.esc-grid-2 .esc-illustration img {
  aspect-ratio: auto;
  object-fit: contain;
  max-width: 420px;
  border-radius: 0;
}

/* ---------------------------------------------------------
   11. Headings, final scale
   --------------------------------------------------------- */
.esc-blog-hero h1,
.elementor-widget-heading h2 { text-wrap: balance; }

/* Stop long headings running the full width of a wide screen. */
.esc-center .elementor-heading-title { max-width: 22ch; margin-inline: auto; }

/* ---------------------------------------------------------
   12. Hero polish
   --------------------------------------------------------- */
.esc-parallax .elementor-heading-title { text-shadow: 0 1px 30px rgba(10, 59, 46, 0.35); }