/* ==================================================================
   NEW LIFE EUROPE — v2 integration & legibility layer
   Loads after style.css. Fixes introduced during the WordPress port:
     1. Escape the theme's 700px content constraint (full-width pages)
     2. Restore gradient scrims lost in the HTML→Gutenberg migration
     3. Real responsive behaviour for laptop + phone
     4. Cookie banner (bottom, boxed) + language picker + footer
   ================================================================== */

/* ------------------------------------------------------------------
   1. FULL WIDTH — the block theme caps post content at 700px.
   Our sections manage their own width via .container (max 1180px).
   ------------------------------------------------------------------ */
.is-layout-constrained > .nle-page,
.entry-content > .nle-page,
.wp-block-post-content > .nle-page { max-width: none !important; width: auto; }

/* Our sections are full-bleed and supply their own gutters via .container,
   so the theme's global side padding must not double up on them. */
.entry-content.wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; }

/* Header + footer share the same 1180px rhythm as page content */
.hostinger-ai-menu-wrapper,
footer .wp-block-group.alignwide { max-width: 1180px !important; }

/* Every page ships its own designed hero with its own H1, so the theme's
   automatic page title is a duplicate heading — hide it (also fixes the
   double-H1 that was hurting SEO). */
body:has(.nle-page) .wp-block-post-title.hostinger-ai-page-title { display: none !important; }

/* Kill any stray horizontal overflow from full-bleed sections */
html, body { overflow-x: hidden; max-width: 100%; }

/* ------------------------------------------------------------------
   2. GRADIENT SCRIMS — the source markup used empty <div> scrims which
   the block migration discarded. Rebuilt as pseudo-elements so they
   can never be lost again. This is what makes hero text readable.
   ------------------------------------------------------------------ */
.nle-page .hero__media,
.nle-page .photo-hero__media { position: absolute; inset: 0; }

.nle-page .hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    var(--blue-deep) 0%,
    rgba(18,19,79,0.92) 34%,
    rgba(18,19,79,0.68) 62%,
    rgba(18,19,79,0.38) 100%);
}

.nle-page .photo-hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg,
      var(--blue-deep) 0%,
      rgba(18,19,79,0.95) 42%,
      rgba(18,19,79,0.82) 72%,
      rgba(18,19,79,0.60) 100%),
    linear-gradient(90deg,
      rgba(18,19,79,0.55) 0%,
      rgba(18,19,79,0.15) 70%);
}

/* Destination cards: scrim behind the label, above the photo */
.nle-page .place-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,
    rgba(18,19,79,0.90) 0%,
    rgba(18,19,79,0.38) 52%,
    rgba(18,19,79,0.08) 100%);
}
.nle-page .place-card__body { position: relative; z-index: 2; }

/* Guarantee the content layer sits above every scrim */
.nle-page .photo-hero > .container,
.nle-page .hero > .container { position: relative; z-index: 2; }

/* Belt-and-braces legibility for type set over photography */
.nle-page .hero h1,
.nle-page .photo-hero h1,
.nle-page .place-card h4 { text-shadow: 0 2px 20px rgba(10,10,45,0.55); }
.nle-page .hero .lead,
.nle-page .photo-hero p,
.nle-page .photo-hero .eyebrow { text-shadow: 0 1px 14px rgba(10,10,45,0.5); }
.nle-page .photo-hero p { color: rgba(255,255,255,0.92); }
.nle-page .photo-hero .eyebrow { color: var(--green-bright); font-weight: 700; }

/* Heroes shouldn't dominate the viewport on laptops */
.nle-page .hero { min-height: min(88vh, 760px); }
.nle-page .photo-hero { min-height: min(58vh, 520px); }
.nle-page .photo-hero__content { padding: 3.25rem 0 3.5rem; }

/* ------------------------------------------------------------------
   3. RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nle-page .container { padding: 0 1.75rem; }
}
@media (max-width: 1024px) {
  .nle-page .hero { min-height: auto; }
  .nle-page .hero__content { padding: 3.5rem 0; }
  .nle-page .section { padding: 4rem 0; }
}
@media (max-width: 820px) {
  .nle-page .container { padding: 0 1.25rem; }
  .nle-page .photo-hero { min-height: auto; }
  .nle-page .photo-hero__content { padding: 2.5rem 0 2.75rem; }
  .nle-page .tri-row,
  .nle-page .door-row,
  .nle-page .blog-row,
  .nle-page .step-row,
  .nle-page .reloc-list { flex-direction: column; }
  .nle-page .split { flex-direction: column; gap: 2rem; }
}
@media (max-width: 560px) {
  .nle-page .container { padding: 0 1rem; }
  .nle-page .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .nle-page .photo-hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .nle-page .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nle-page table { min-width: 640px; }
}

/* ------------------------------------------------------------------
   4a. COOKIE BANNER — bottom-anchored card, never clips the layout
   ------------------------------------------------------------------ */
.nle-cookie {
  position: fixed; z-index: 99998;
  left: 50%; transform: translateX(-50%) translateY(140%);
  bottom: 18px; width: min(940px, calc(100% - 28px));
  background: #fff; color: var(--ink, #17172E);
  border: 1px solid #E5E1D3; border-radius: 16px;
  box-shadow: 0 20px 55px rgba(18,19,79,0.20);
  padding: 20px 22px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  font-family: 'Inter', system-ui, sans-serif;
  transition: transform .45s cubic-bezier(.22,.9,.3,1);
}
.nle-cookie.is-visible { transform: translateX(-50%) translateY(0); }
.nle-cookie__text { flex: 1 1 380px; font-size: 13.5px; line-height: 1.6; color: #4a4a63; margin: 0; }
.nle-cookie__text strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: var(--ink, #17172E); margin-bottom: 4px; font-weight: 600; }
.nle-cookie__text a { color: var(--blue, #1E20A5); text-decoration: underline; text-underline-offset: 2px; }
.nle-cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nle-cookie__btn {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  padding: 11px 22px; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.nle-cookie__btn--accept { background: var(--green, #4F8C2A); color: #fff; }
.nle-cookie__btn--accept:hover { background: #3f7420; }
.nle-cookie__btn--reject { background: transparent; color: var(--blue, #1E20A5); border-color: #d8d5c6; }
.nle-cookie__btn--reject:hover { border-color: var(--blue, #1E20A5); }
.nle-cookie__btn--prefs { background: transparent; color: #6b6b82; padding: 11px 8px; text-decoration: underline; }
.nle-cookie__prefs { flex: 1 1 100%; border-top: 1px solid #eee9dc; margin-top: 4px; padding-top: 14px; display: none; }
.nle-cookie.is-prefs-open .nle-cookie__prefs { display: block; }
.nle-cookie__row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 13px; color: #4a4a63; }
.nle-cookie__row b { color: var(--ink, #17172E); font-weight: 600; }
@media (max-width: 620px) {
  .nle-cookie { padding: 16px; bottom: 10px; gap: 12px; }
  .nle-cookie__actions { width: 100%; }
  .nle-cookie__btn--accept, .nle-cookie__btn--reject { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------
   4b. LANGUAGE PICKER (top right of the header)
   ------------------------------------------------------------------ */
.nle-lang { position: relative; font-family: 'Montserrat', sans-serif; margin-left: 14px; flex-shrink: 0; }
.nle-lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1.5px solid #dcd8c9; border-radius: 100px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 700; color: var(--ink, #17172E);
  cursor: pointer; transition: all .2s ease; line-height: 1;
}
.nle-lang__btn:hover { border-color: var(--blue, #1E20A5); color: var(--blue, #1E20A5); }
.nle-lang__caret { width: 9px; height: 9px; transition: transform .2s ease; }
.nle-lang.is-open .nle-lang__caret { transform: rotate(180deg); }
.nle-lang__panel {
  position: absolute; right: 0; top: calc(100% + 9px);
  background: #fff; border: 1px solid #E5E1D3; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(18,19,79,0.16);
  padding: 6px; min-width: 194px; z-index: 1200;
  display: none; max-height: 60vh; overflow-y: auto;
}
.nle-lang.is-open .nle-lang__panel { display: block; }
.nle-lang__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--ink, #17172E);
  font-family: 'Inter', system-ui, sans-serif;
}
.nle-lang__item:hover { background: #f3f2ea; }
.nle-lang__item.is-active { background: #eef0fb; color: var(--blue, #1E20A5); font-weight: 600; }
.nle-lang__flag { font-size: 16px; line-height: 1; }

/* Hide Google Translate's injected chrome */
.goog-te-banner-frame, .goog-te-gadget-icon, #goog-gt-tt, .goog-tooltip { display: none !important; }
.skiptranslate > iframe { display: none !important; visibility: hidden !important; height: 0 !important; }
body { top: 0 !important; position: static !important; }
#nle_gt_host { position: absolute !important; left: -9999px !important; height: 0 !important; overflow: hidden; }
font[style*="vertical-align"] { box-shadow: none !important; background: transparent !important; }

@media (max-width: 820px) {
  .nle-lang { margin-left: 8px; }
  .nle-lang__btn { padding: 6px 10px; font-size: 12px; }
}

/* ------------------------------------------------------------------
   4c. FOOTER
   ------------------------------------------------------------------ */
.nle-foot__title {
  font-family: 'Montserrat', sans-serif !important; font-size: 12px !important;
  letter-spacing: 0.09em; text-transform: uppercase; opacity: .62;
  margin-bottom: 1.1rem !important; font-weight: 700 !important;
}
.nle-foot__links { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.nle-foot__links li { margin: 0 0 .62rem 0 !important; }
.nle-foot__links a { text-decoration: none; opacity: .9; transition: opacity .18s ease; font-size: 14.5px; }
.nle-foot__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.nle-foot__brand p { font-size: 14px; line-height: 1.65; opacity: .78; }
.nle-foot__bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 2.5rem !important; padding-top: 1.5rem !important;
  display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
}
.nle-foot__bottom p { font-size: 12.5px !important; opacity: .6; margin: 0 !important; }
.nle-foot__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.nle-foot__legal a { font-size: 12.5px; opacity: .6; text-decoration: none; }
.nle-foot__legal a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 820px) {
  .nle-foot__bottom { flex-direction: column; gap: .6rem; text-align: left; }
}

/* ------------------------------------------------------------------
   4d. QUIZ — ensure results are always visible even if the theme or a
   cache plugin interferes with the inline styles
   ------------------------------------------------------------------ */
.nle-quiz .nle-step { display: none; }
.nle-quiz .nle-step.current { display: block; }
.nle-quiz .nle-result-card { opacity: 1 !important; transform: none !important; }
.nle-quiz { scroll-margin-top: 90px; }

/* The navigation row stays put for the whole quiz — including the results
   step, where the primary button becomes "Start over". Previously it was
   hidden at the end, which made the quiz look like it had done nothing. */
.nle-quiz #nleNav { display: flex !important; }
.nle-quiz .nle-results .nle-nav { display: none !important; }

/* The design system resets buttons with `.nle-page button { background: none }`
   (specificity 0,1,1). That out-ranks the quiz's own `.nle-btn-next` rule
   (0,1,0), so the primary button rendered as white text on a transparent
   background — an invisible button sitting on a white card. Restored here at
   a specificity the reset cannot beat. */
.nle-page .nle-quiz .nle-btn {
  border: 2px solid transparent;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px 26px; border-radius: 100px; cursor: pointer;
}
.nle-page .nle-quiz .nle-btn-next { background: #7BC64A; color: #fff; margin-left: auto; }
.nle-page .nle-quiz .nle-btn-next:hover:not(:disabled) { background: #5a9e30; }
.nle-page .nle-quiz .nle-btn-next:disabled { background: #d4d4e0; color: #fff; cursor: not-allowed; opacity: 1; }
.nle-page .nle-quiz .nle-btn-back { background: transparent; color: #888; }
.nle-page .nle-quiz .nle-btn-back:hover { background: transparent; color: #16162a; }
.nle-page .nle-quiz .nle-btn-restart { background: #eef0fb; color: #1E20A5; }

/* ==================================================================
   5. SPACING & PILL FIXES
   The source HTML carried spacing in inline style attributes
   (e.g. <h3 style="margin-top:2rem">) and the block migration dropped
   them. Combined with the design's `* { margin: 0 }` reset that left
   headings, captions and callouts with no rhythm at all. WordPress
   also injects its own blockGap margins between children of flow
   groups, which stretched the country pills into ovals.
   This block restores the original rhythm deterministically in CSS.
   ================================================================== */

/* Neutralise WordPress's blockGap so our design owns all spacing.
   `:where()` keeps this at .is-layout-flow specificity (0,1,0) so it beats
   WP's own rule (same weight, loaded later) while still losing to the
   element-level rhythm rules below (0,1,1+). Order matters here. */
:where(.nle-page) .is-layout-flow > * + * { margin-block-start: 0; }

/* --- Country / category pills --- */
.nle-page .door-card__tags { align-items: flex-start; row-gap: 6px; }
.nle-page .tag {
  display: inline-flex; align-items: center; align-self: flex-start;
  white-space: nowrap; line-height: 1.45; flex: 0 0 auto;
}

/* --- Vertical rhythm --- */
.nle-page h2 { margin-bottom: 1.25rem; }
.nle-page h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.nle-page h4 { margin-bottom: 0.5rem; }
.nle-page p + p { margin-top: 1rem; }
.nle-page p + h2,
.nle-page ul + h2,
.nle-page p + h3,
.nle-page ul + h3,
.nle-page .card + h3 { margin-top: 2rem; }
.nle-page h2 + h3 { margin-top: 1rem; }
.nle-page h2:first-child,
.nle-page h3:first-child,
.nle-page h4:first-child { margin-top: 0; }

/* Callouts, card rows and tables need air above them */
.nle-page .card,
.nle-page .checklist,
.nle-page .tri-row,
.nle-page .door-row,
.nle-page .blog-row,
.nle-page .step-row,
.nle-page .reloc-list,
.nle-page .panel-dark,
.nle-page .scroller { margin-top: 2rem; }
.nle-page .card:first-child,
.nle-page .checklist:first-child,
.nle-page .tri-row:first-child { margin-top: 0; }

/* A caption/eyebrow always gets breathing room under it */
.nle-page .eyebrow { margin-bottom: 1rem; }
.nle-page .blog-card__meta { margin-bottom: 0.7rem; }

/* Containers that already space their children with flex `gap`
   must not double up on the margins above. */
.nle-page .prose > *,
.nle-page .blog-body > *,
.nle-page .checklist > *,
.nle-page .check-item > * { margin-top: 0; margin-bottom: 0; }
.nle-page .prose h3 { margin-top: 0.75rem; }
.nle-page .blog-body h2 { margin-top: 1rem; }
.nle-page .blog-body h3 { margin-top: 0.5rem; }
.nle-page .section-head p { margin-top: 0.5rem; }

/* Hero and CTA bands keep their own explicit spacing */
.nle-page .hero h1,
.nle-page .photo-hero h1,
.nle-page .page-hero h1 { margin-top: 0; }
.nle-page .cta-band h2 { margin-top: 0; }
.nle-page .cta-band p { margin-bottom: 2.5rem; }
.nle-page .cta-band__actions { margin-top: 0; }
.nle-page .cta-band__note { margin-top: 1.5rem; }
.nle-page .disclaimer { margin-top: 1.25rem; }

/* ================================================================
   6. FOOTER — SISTER PRACTICE (Spain Property Advisory)
   The .btn--* classes are scoped under .nle-page, so the footer
   button needs its own styling here.
   ================================================================ */
.nle-foot__sister {
  margin-top: 1.6rem !important;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.nle-foot__sisterlabel {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: .55;
  font-weight: 700 !important;
  margin: 0 0 .85rem 0 !important;
}
.nle-foot__sisterbtn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 11px 22px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nle-foot__sisterbtn .wp-block-button__link:hover,
.nle-foot__sisterbtn .wp-block-button__link:focus-visible {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 820px) {
  .nle-foot__sister { margin-top: 1.2rem !important; }
}

/* ================================================================
   7. BUTTON BLOCK FIX
   Gutenberg renders core/button as
     <div class="wp-block-button btn btn--primary"><a class="wp-block-button__link">
   so our .btn treatment lands on the WRAPPER while the inner <a>
   keeps its own padding and background — producing double-padded
   pills (82px tall instead of the designed ~50px).
   Neutralise the wrapper; move the full treatment onto the <a>.
   ================================================================ */
.nle-page .wp-block-button.btn {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
.nle-page .wp-block-button.btn > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 32px; border-radius: var(--r-pill);
  font-family: var(--struct); font-weight: 700; font-size: 14.5px;
  letter-spacing: 0.01em; transition: var(--ease); white-space: nowrap;
  border: 2px solid transparent; text-decoration: none;
}
.nle-page .wp-block-button.btn--lg > .wp-block-button__link {
  padding: 18px 40px; font-size: 15.5px;
}
.nle-page .wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--green); color: #fff;
}
.nle-page .wp-block-button.btn--primary > .wp-block-button__link:hover {
  background: #3f7420; transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(79,140,42,0.32);
}
.nle-page .wp-block-button.btn--outline > .wp-block-button__link {
  background: transparent; color: var(--blue); border-color: var(--blue);
}
.nle-page .wp-block-button.btn--outline > .wp-block-button__link:hover {
  background: var(--blue); color: #fff;
}
.nle-page .wp-block-button.btn--outline-light > .wp-block-button__link {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.5);
}
.nle-page .wp-block-button.btn--outline-light > .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12); border-color: #fff;
}
.nle-page .wp-block-button.btn--blue > .wp-block-button__link {
  background: var(--blue); color: #fff;
}
.nle-page .wp-block-button.btn--blue > .wp-block-button__link:hover {
  background: var(--blue-deep); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(30,32,165,0.3);
}
.nle-page .wp-block-button.btn--block,
.nle-page .wp-block-button.btn--block > .wp-block-button__link { width: 100%; }

@media (max-width: 560px) {
  .nle-page .wp-block-button.btn > .wp-block-button__link { white-space: normal; text-align: center; }
}