/* ==========================================================================
   Expats Pension Review — Free Guides (Resources) section stylesheet
   Scoped entirely under .res-scope so it never leaks into the rest of the
   site, which keeps its own Fraunces/Inter system untouched. This section
   uses EPR's official brand tokens (Open Sans, the EPR Navy gradient, the
   real logo lockup) because these are lead-capture landing pages, matching
   the look of the downloadable guides themselves -- see the epr-brand skill
   for the source of these values.
   ========================================================================== */

.res-scope {
  --r-navy: #0C486A;
  --r-navy-deep: #062638;
  --r-ink: #010507;
  --r-white: #FFFFFF;
  --r-ivory: #F7F5F0;
  --r-mist: #E7EEF2;
  --r-slate: #5A6B77;
  --r-rule: #D5DCE1;
  --r-brass: #B08D57;
  --r-font: 'Open Sans', 'Segoe UI', Arial, sans-serif;

  font-family: var(--r-font);
  color: var(--r-ink);
  background: var(--r-white);
}

.res-scope h1, .res-scope h2, .res-scope h3, .res-scope h4 {
  font-family: var(--r-font);
  font-weight: 700;
  color: var(--r-navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
.res-scope h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; }
.res-scope h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.res-scope h3 { font-size: 1.25rem; }
.res-scope p { color: var(--r-ink); line-height: 1.6; margin: 0 0 1.1em; }
.res-scope p.res-lead { color: var(--r-slate); font-size: 1.1rem; }
.res-scope a { color: var(--r-navy); }
.res-scope ul { padding-left: 1.2em; }
.res-scope li { margin-bottom: 0.5em; line-height: 1.5; }
.res-scope strong { color: var(--r-navy-deep); }

/* ---------------- Minimal landing-page header ---------------- */
/* Deliberately lighter than the main site chrome: a lead-capture page
   should not tempt a visitor away via a full dropdown nav before they've
   downloaded the guide they came for. Logo plus one way back, nothing else. */
.res-topbar {
  background: var(--r-white);
  border-bottom: 1px solid var(--r-rule);
  padding: 1rem 0;
}
.res-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.res-topbar-logo { height: 34px; width: auto; display: block; }
.res-topbar-link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--r-navy);
  text-decoration: none;
}
.res-topbar-link:hover { color: var(--r-navy-deep); text-decoration: underline; }

/* Visually hidden but still readable by screen readers / search engines.
   Used for the real <h1> on landing pages, where the hero image already
   carries the headline visually (see .res-hero-banner below). */
.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;
}

/* ---------------- Landing-page breadcrumb + hero image ---------------- */
.res-breadcrumb-bar { background: var(--r-ivory); padding: 0.8rem 0; }
.res-breadcrumb-bar .breadcrumb { margin-bottom: 0; }
/* No object-fit:cover/crop on the image itself: the source is a composed
   16:9 graphic with its own headline baked in, so it is always shown in
   full at its natural ratio (cropping was cutting the headline off part
   way through). Instead it's kept smaller by sitting inside the normal
   page container rather than running full-bleed edge to edge -- a visitor
   can then see page content peeking above and below it on load, which
   signals there's more to scroll to, and the arrow button below reinforces
   that and jumps straight past the image to the guide details. */
.res-hero-banner { width: 100%; background: var(--r-white); padding: 1.6rem 0 0.4rem; }
.res-hero-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--r-navy-deep);
  line-height: 0;
}
.res-hero-img-wrap img { width: 100%; height: auto; display: block; }
.res-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r-navy);
  box-shadow: 0 2px 10px rgba(1, 5, 7, 0.25);
  text-decoration: none;
  animation: res-scroll-cue-bounce 1.8s ease-in-out infinite;
}
.res-scroll-cue svg { width: 20px; height: 20px; }
.res-scroll-cue:hover { background: #fff; }
@keyframes res-scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
#resource-whats-inside { scroll-margin-top: 90px; }

/* ---------------- Resources list (one guide per row) ---------------- */
.res-list { display: flex; flex-direction: column; }
.res-list-row {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 2.8rem) 0;
  border-bottom: 1px solid var(--r-rule);
}
.res-list-row:first-child { padding-top: 0; }
.res-list-row:last-child { border-bottom: none; padding-bottom: 0; }
.res-list-row.res-row-reverse { flex-direction: row-reverse; }
.res-list-image, .res-list-content { flex: 1 1 0; min-width: 0; }
.res-list-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.res-list-content h2 { margin-bottom: 0.3em; }
/* Specificity note: .res-scope ul/li (0,1,1) would otherwise beat a bare
   .res-bullets/.res-bullets li (0,1,0) -- see the .res-btn fix above for the
   same issue -- so these are qualified with .res-scope too. */
.res-scope .res-bullets { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.res-scope .res-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.97rem;
  line-height: 1.5;
}
.res-bullets li svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--r-navy); }
@media (max-width: 760px) {
  .res-list-row, .res-list-row.res-row-reverse { flex-direction: column; align-items: stretch; }
}

/* ---------------- Hero band (signature gradient) ---------------- */
.res-hero {
  background: linear-gradient(100deg, var(--r-navy) 0%, var(--r-navy-deep) 55%, var(--r-ink) 100%);
  color: #fff;
  padding: clamp(2.6rem, 6vw, 4rem) 0;
}
.res-hero h1 { color: #fff; max-width: 34ch; }
.res-hero h2 { color: #fff; }
.res-hero p.res-lead { color: rgba(255,255,255,0.86); max-width: 56ch; }
.res-hero .res-eyebrow { color: var(--r-white); opacity: 0.8; }
.res-hub-hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.res-hub-hero { text-align: center; }
.res-hub-hero p.res-lead { max-width: 56ch; margin-left: auto; margin-right: auto; }

.res-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-navy);
  margin-bottom: 0.6em;
}

/* ---------------- Layout helpers ---------------- */
.res-section { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.res-section-ivory { background: var(--r-ivory); }
.res-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.res-landing-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
}
@media (max-width: 860px) {
  .res-landing-grid { grid-template-columns: 1fr; }
  /* On mobile the form should come straight after the hero image, above
     the "what's inside" list, so it's the first thing a visitor hits when
     they scroll past the hero -- rather than making them scroll through
     the whole list first. Desktop keeps its left-text/right-form layout
     (the DOM order already matches that, so no override is needed there). */
  .res-landing-form { order: -1; }
}

/* ---------------- Guide cards (hub page) ---------------- */
.res-card {
  background: var(--r-white);
  border: 1px solid var(--r-rule);
  border-radius: 6px;
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.res-card-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-navy);
  background: var(--r-mist);
  padding: 0.3em 0.75em;
  border-radius: 999px;
  margin-bottom: 0.9rem;
  align-self: flex-start;
}
.res-card h3 { margin-bottom: 0.4em; }
.res-card p { color: var(--r-slate); font-size: 0.96rem; flex: 1; }
.res-card .res-pages { font-size: 0.82rem; color: var(--r-slate); margin-bottom: 0.9rem; }

/* ---------------- Buttons ---------------- */
.res-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--r-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85em 1.5em;
  border-radius: 6px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;
  line-height: 1.2;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Specificity note: .res-scope a sets color: var(--r-navy) on every link in
   this section (0,1,1). A bare .res-btn-primary etc. is only (0,1,0), so it
   would lose that fight and render invisible navy-on-navy/navy-on-dark text
   on any <a class="res-btn ...">. Prefixing with .res-scope bumps these to
   (0,2,0)/(0,2,1), which wins. */
.res-scope .res-btn-primary,
.res-scope a.res-btn-primary { background: var(--r-navy); color: #fff; }
.res-scope .res-btn-primary:hover,
.res-scope a.res-btn-primary:hover { background: var(--r-navy-deep); color: #fff; }
.res-scope .res-btn-outline,
.res-scope a.res-btn-outline { background: transparent; border-color: var(--r-navy); color: var(--r-navy); }
.res-scope .res-btn-outline:hover,
.res-scope a.res-btn-outline:hover { background: var(--r-navy); color: #fff; }
.res-scope .res-btn-outline-light,
.res-scope a.res-btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.65); color: #fff; }
.res-scope .res-btn-outline-light:hover,
.res-scope a.res-btn-outline-light:hover { background: #fff; color: var(--r-navy); border-color: #fff; }
.res-btn-block { width: 100%; }

/* ---------------- What's inside list ---------------- */
.res-inside-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.res-inside-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--r-rule);
}
.res-inside-list li:last-child { border-bottom: none; }
.res-inside-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--r-mist);
  color: var(--r-navy);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Also reused (outside .res-inside-list) for the thank-you page's res-step
   rows, so these are unscoped rather than qualified to .res-inside-list. */
.res-inside-title { font-weight: 700; color: var(--r-navy-deep); display: block; }
.res-inside-desc { font-size: 0.92rem; color: var(--r-slate); display: block; }
.res-step .res-inside-title { margin-bottom: 0.2rem; }

/* ---------------- Download form card ---------------- */
.res-form-card {
  background: var(--r-mist);
  border-radius: 6px;
  padding: clamp(1.4rem, 3vw, 2rem);
  position: sticky;
  top: 1.5rem;
}
.res-form-card h2 { font-size: 1.3rem; }
.res-field { margin-bottom: 1.1rem; }
.res-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--r-navy-deep);
  margin-bottom: 0.4rem;
}
.res-field input[type="text"],
.res-field input[type="email"],
.res-field input[type="tel"] {
  width: 100%;
  font-family: var(--r-font);
  font-size: 1rem;
  padding: 0.8em 0.9em;
  border: 1.5px solid var(--r-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--r-ink);
  min-height: 48px;
}
.res-field input:focus {
  border-color: var(--r-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(12,72,106,0.15);
}
.res-consent {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  margin: 1.3rem 0;
  font-size: 0.85rem;
  color: var(--r-slate);
  line-height: 1.5;
}
.res-consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--r-navy); }
.res-form-error {
  display: none;
  background: #fdeeee;
  border: 1px solid #e0b4b4;
  color: #8a2b2b;
  border-radius: 6px;
  padding: 0.8em 1em;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.res-form-error.is-visible { display: block; }

/* ---------------- Disclaimer / risk-warning box ---------------- */
.res-disclaimer {
  background: var(--r-white);
  border: 1px solid var(--r-rule);
  border-left: 4px solid var(--r-navy);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  color: var(--r-slate);
  margin: 1.5rem 0;
}
.res-disclaimer strong { color: var(--r-navy-deep); }
.res-disclaimer p { margin: 0 0 0.6em; font-size: inherit; color: inherit; }
.res-disclaimer p:last-child { margin-bottom: 0; }

/* ---------------- Trust strip ---------------- */
.res-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--r-rule);
  font-size: 0.85rem;
  color: var(--r-slate);
  font-weight: 600;
}
/* The ICONS svg strings carry no width/height, so without this they fall
   back to the browser's default replaced-element size (very large). Keep
   them small and sat inline next to their label. */
.res-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.res-trust svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--r-navy);
}

/* ---------------- Thank-you page ---------------- */
.res-thankyou-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--r-mist);
  color: var(--r-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
}
.res-thankyou-icon svg { width: 34px; height: 34px; }
.res-steps { display: grid; gap: 1rem; margin: 1.8rem 0; text-align: left; }
.res-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--r-ivory);
  border-radius: 6px;
  padding: 1.1rem 1.3rem;
}
.res-step-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--r-white);
  border: 1px solid var(--r-rule);
  color: var(--r-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-step-icon svg { width: 18px; height: 18px; }

/* ---------------- Minimal footer note for the res-scope pages ---------------- */
.res-scope .res-footnote {
  font-size: 0.8rem;
  color: var(--r-slate);
  border-top: 1px solid var(--r-rule);
  margin-top: 2rem;
  padding-top: 1.2rem;
}