/* why-romania.css — page-specific styles.
   This page renders .wr-hero (shared global class) and previously had NO
   per-page CSS, so the mobile hero restructure could only reach it via a
   dedicated file. functions.php auto-enqueues <slug>.css, so this loads
   automatically on /our-story/why-romania/. */

/* === PA hero mobile restructure (auto, 2026-05-31) === prefix:wr */
@media (max-width:980px){
  .wr-hero{
    display:flex; flex-direction:column;
    min-height:0 !important; height:auto !important;
    padding:0 !important; background:var(--paper);
    position:relative; overflow:hidden; align-items:stretch !important;
  }
  .wr-hero-bg{
    position:relative !important; inset:auto !important; z-index:auto !important;
    width:100%; aspect-ratio:4/3; height:auto !important; order:1; flex:0 0 auto;
  }
  .wr-hero-bg img{
    position:absolute !important; inset:0 !important;
    width:100%; height:100% !important; object-fit:cover; object-position:center 30%;
  }
  .wr-hero > .container,
  .wr-hero > .wr-hero-content,
  .wr-hero .wr-hero-content{
    position:static !important; inset:auto !important;
    padding:0 !important; max-width:100%; width:100%; margin:0;
    background:var(--paper); color:var(--ink);
    order:2; flex:1 1 auto; min-height:0 !important; display:block !important;
  }
  .wr-hero-eyebrow, .wr-hero .eyebrow{ display:none !important; }
  .wr-hero h1{
    position:absolute !important; top:37.5vw; left:0; right:0; transform:translateY(-50%);
    margin:0 !important; padding:0 24px; max-width:none; text-align:center !important; color:var(--paper-w);
    font-size:clamp(26px,7vw,38px) !important; line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5); z-index:3;
  }
  .wr-hero h1 .accent, .wr-hero h1 span{ color:var(--gold-l); }
  .wr-hero .lede, .wr-hero p.sub{
    margin:0 !important; padding:22px 22px 8px; max-width:none;
    background:var(--paper); color:#4a4a3d !important; font-size:14.5px; line-height:1.5; text-align:center;
    text-shadow:none !important;
  }
  .wr-hero .lede strong{ color:var(--ink); }
  .wr-hero .hero-actions, .wr-hero .actions, .wr-hero .wr-hero-actions{
    margin:0 !important; padding:0 22px 24px; background:var(--paper);
    display:flex; flex-direction:row; flex-wrap:wrap; gap:10px;
    align-items:center; justify-content:center; width:100%;
  }
  .wr-hero .btn-light{ background:transparent; border:1.5px solid var(--green-d); color:var(--green-d); }
  .wr-hero .btn-light:hover{ background:var(--green-d); color:var(--paper-w); }
  .wr-hero .hero-meta, .wr-hero .meta, .wr-hero .wr-hero-meta{ display:none !important; }
}

/* === PA hero mobile contrast/meta fix (auto, 2026-05-31b) === prefix:wr */
@media (max-width:980px){
  .wr-hero .lede, .wr-hero p.lede,
  .wr-hero p.sub, .wr-hero .sub{ color:#4a4a3d !important; text-shadow:none !important; }
  .wr-hero .lede strong, .wr-hero p.lede strong{ color:var(--ink) !important; }
  .wr-hero .attrib, .wr-hero .attribution{ color:var(--gold-d) !important; }
}

/* === Why Romania: Christa section recoloured from lime to primary green,
   with the text contrast fixed (Matt, 3 Jun 2026).
   The shared .wr-christa component uses --leaf (#a0bc5f, lime) with dark-green
   text. On this page Matt wants the primary brand green (--green) instead, so
   the dark text is swapped for light/cream to stay legible. Scoped to this
   page so the shared component and foster-to-forever are untouched.
   === prefix:wr */
.page-why-romania-wrap .wr-christa{ background:var(--green); color:var(--paper-w); }
.page-why-romania-wrap .wr-christa .heading .eyebrow{ color:var(--gold-l); }
.page-why-romania-wrap .wr-christa h2{ color:var(--paper-w); }
.page-why-romania-wrap .wr-christa h2 span{ color:var(--gold-l); }
.page-why-romania-wrap .wr-christa .body{ color:var(--paper-w); }
.page-why-romania-wrap .wr-christa .body strong{ color:#fff; }
/* keep the pullquote a pale cream island so its dark text stays legible */
.page-why-romania-wrap .wr-christa .pullquote,
.page-why-romania-wrap .wr-christa .pullquote .src{ color:var(--green-d); }
/* decorative corner paw: gold and subtle on the darker green */
.page-why-romania-wrap .wr-christa::before{ background:var(--gold); opacity:0.14; }