/* =========================================================
   RHAM — styles.css (Stabilized)
   Phase A: Parser-safe + predictable cascade + mobile-first
   Rules:
   - Base styles target mobile (~360px)
   - Only scale UP via @media (min-width: ...)
   - No duplicate component definitions
   ========================================================= */

/* ---------------------------
   0) Tokens
---------------------------- */
:root{
  /* Brand + neutrals (kept) */
  --green:#1F7A3A;
  --text:#1A1A1A;
  --muted:#5A5F66;
  --bg:#FFFFFF;
  --soft:#F5F6F7;
  --border:#E3E6E8;
  --amber:#C9A24D;

  /* Layout */
  --max:1100px;

  /* Spacing rhythm (12/16/24 system) */
  --s1:12px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;

  /* Radius scale */
  --r1:10px;
  --r2:14px;
  --r3:18px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,.06);

  /* Focus */
  --focus: rgba(31,122,58,.25);
}

/* ---------------------------
   1) Reset / Base
---------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}

img, svg, video, canvas{
  display:block;
  max-width:100%;
}

input, button, textarea, select{
  font:inherit;
}

a{
  color:var(--green);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

p, h1, h2, h3, h4, h5, h6{
  margin:0;
}

ul{
  margin:0;
  padding-left:18px;
}

li{ margin:6px 0; }

small, .muted{ color:var(--muted); }

/* Consistent keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------------------------
   2) Layout primitives
---------------------------- */
.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--s2);
}

.section{
  padding:var(--s5) 0; /* mobile base */
}

.section.soft{
  background:var(--soft);
}

/* Featured “spotlight” band for metrics (A) */
.section.soft.metrics-feature{
  position:relative;
  background:
    radial-gradient(900px 280px at 10% -10%, rgba(31,122,58,.18), transparent 62%),
    radial-gradient(760px 300px at 92% 10%, rgba(201,162,77,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,246,247,1));
  border-top:1px solid rgba(31,122,58,.18);
  border-bottom:1px solid rgba(31,122,58,.12);
}

.section.soft.metrics-feature::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(31,122,58,.25), transparent);
  opacity:.9;
}

.section.soft.metrics-feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 22px
    );
  opacity:.12; /* subtle texture */
  pointer-events:none;
}


.section.soft.metrics-feature h2{
  letter-spacing:-0.2px;
}

.section.soft.metrics-feature .kicker,
.section.soft.metrics-feature .muted{
  color:rgba(90,95,102,.92);
}

/* Simple vertical rhythm helper */
.stack{ display:grid; gap:var(--s2); }

/* ---------------------------
   3) Typography
---------------------------- */
.kicker{
  font-size:14px;
  color:var(--muted);
  margin:0 0 8px;
}

h1{
  font-size:30px;   /* mobile base */
  line-height:1.15;
  margin:0 0 12px;
}

h2{
  font-size:24px;   /* mobile base */
  line-height:1.25;
  margin:0 0 12px;
}

h3{
  font-size:18px;
  margin:0 0 8px;
}

p{
  margin:0 0 12px;
  color:var(--text);
}

/* ---------------------------
   4) Buttons / Badges
---------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;          /* tap target */
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}

.btn.primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.btn.primary:hover{ filter:brightness(.95); }

.badge{
  font-size:12px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}

.badge.verified{
  border-color:rgba(31,122,58,.35);
  background:rgba(31,122,58,.08);
}

.badge.pending{
  border-color:rgba(201,162,77,.45);
  background:rgba(201,162,77,.12);
}

.badge.review{
  border-color:rgba(90,95,102,.35);
  background:rgba(90,95,102,.10);
}

/* Small secondary action button (kept) */
.morebtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;          /* enforce tap target */
  padding:0 14px;
  border-radius:10px;
  border:2px solid rgba(176,0,32,.25);
  background:#fff;
  color:#B00020;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}
.morebtn:hover{ filter:brightness(.98); text-decoration:none; }

/* ---------------------------
   5) Header / Navigation
---------------------------- */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand img{
  width:74px;
  height:74px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
}

.brand .name{
  font-weight:800;
  letter-spacing:.2px;
}

/* Mobile-first: nav links hidden by default */
.navlinks{
  display:none;
  gap:16px;
  align-items:center;
}

.navlinks a{
  color:var(--text);
  font-weight:600;
  font-size:14px;
}

.navlinks a:hover{
  color:var(--green);
  text-decoration:none;
}

.hamburger{
  display:inline-flex;       /* mobile default */
  align-items:center;
  justify-content:center;
  height:64px;
  width:64px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}

/* Mobile defaults */
.brand img{ width:54px; height:54px; }
.hamburger{ width:44px; height:44px; }

/* Scale up only */
@media (min-width: 720px){
  .brand img{ width:54px; height:54px; }
  .hamburger{ width:44px; height:44px; }
}

.mobilemenu{
  display:none;
  border-top:1px solid var(--border);
}

.mobilemenu a{
  display:block;
  padding:12px 0;
  color:var(--text);
  font-weight:700;
}

.mobilemenu.open{ display:block; }

/* ---------------------------
   6) Hero
---------------------------- */
.hero{ padding:44px 0 24px; }

.hero-grid{
  display:grid;
  grid-template-columns:1fr; /* mobile base */
  gap:22px;
  align-items:start;
}

.hero-card{
  background:linear-gradient(180deg, rgba(31,122,58,.08), rgba(31,122,58,.02));
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:18px;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}

/* ---------------------------
   7) Cards / Grids (canonical base)
---------------------------- */
.grid{
  display:grid;
  gap:14px;
}

/* Mobile-first: 1 column by default */
.grid.cards{ grid-template-columns:1fr; }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:var(--shadow-1);
}

.card .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.card .title{ font-weight:800; }
.card .why{ color:var(--muted); font-size:14px; }
.card .sources{ font-size:13px; }

.card .actions{
  display:flex;
  gap:10px;
  margin-top:4px;
  flex-wrap:wrap;
}

.iconbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:13px;
}

.icon{
  width:16px;
  height:16px;
  display:inline-block;
}

/* ---------------------------
   7a) Metrics (Did You Know) — energetic (A+B+C2)
---------------------------- */
.metrics{
  display:grid;
  grid-template-columns:1fr; /* mobile-first */
  gap:12px;
  margin-top:14px;
}

.metric{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:14px 14px 14px 52px; /* space for icon */
  box-shadow:var(--shadow-2);
  display:grid;
  gap:6px;
  overflow:hidden;
}

/* Subtle sheen for “featured” feel */
.metric::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(31,122,58,.08), transparent 35%, rgba(201,162,77,.06));
  opacity:.7;
  pointer-events:none;
}

/* Left accent stripe */
.metric::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:5px;
  border-radius:999px;
  background:rgba(31,122,58,.75);
}

/* Icon bubble */
.metric .ico{
  position:absolute;
  left:14px;
  top:14px;
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(31,122,58,.14);
  border:1px solid rgba(31,122,58,.22);
  color:var(--green);
  font-weight:950;
  font-size:13px;
  line-height:1;
}

.metric .num{
  font-weight:950;
  font-size:22px;
  line-height:1.05;
  letter-spacing:-0.3px;
  position:relative;
}

.metric .lbl{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  position:relative;
}

/* Icon tint variants (optional but energetic) */
.metric.m-money .ico{ background:rgba(31,122,58,.14); border-color:rgba(31,122,58,.22); }
.metric.m-budget .ico{ background:rgba(201,162,77,.18); border-color:rgba(201,162,77,.28); color:#8a6a1f; }
.metric.m-trade  .ico{ background:rgba(90,95,102,.14); border-color:rgba(90,95,102,.24); color:#334155; }
.metric.m-growth .ico{ background:rgba(31,122,58,.14); border-color:rgba(31,122,58,.22); }
.metric.m-invest .ico{ background:rgba(201,162,77,.18); border-color:rgba(201,162,77,.28); color:#8a6a1f; }
.metric.m-wage   .ico{ background:rgba(31,122,58,.14); border-color:rgba(31,122,58,.22); }
.metric.m-policy .ico{ background:rgba(31,122,58,.14); border-color:rgba(31,122,58,.22); }
.metric.m-states .ico{ background:rgba(90,95,102,.14); border-color:rgba(90,95,102,.24); color:#334155; }

/* Scale up only */
@media (min-width: 720px){
  .metrics{ grid-template-columns:repeat(2, 1fr); }
  .metric .num{ font-size:24px; }
}

@media (min-width: 1120px){
  .metrics{ grid-template-columns:repeat(3, 1fr); }
}

/* ---------------------------
   8) CTA band
---------------------------- */
.cta-band{
  background:var(--green);
  color:#fff;
  padding:22px 0;
}

.cta-band .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.cta-band p{
  margin:0;
  color:#fff;
  font-weight:700;
}

.cta-band .btn{
  background:#fff;
  color:var(--green);
  border-color:#fff;
}

/* ---------------------------
   CTA pill (section footer)
---------------------------- */
.cta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(31,122,58,.22);
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow-1);
  font-weight:800;
  color:var(--text);
  text-decoration:none;
}

.cta-pill:hover{
  text-decoration:none;
  filter:brightness(.99);
  border-color:rgba(31,122,58,.32);
}

.cta-pill:active{
  transform:translateY(1px);
}

.cta-pill .cta-ico{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(31,122,58,.14);
  border:1px solid rgba(31,122,58,.20);
  color:var(--green);
  font-weight:950;
}


/* ---------------------------
   9) Forms
---------------------------- */
.form{
  display:grid;
  gap:12px;
  max-width:720px;
}

.field label{
  display:block;
  font-weight:800;
  font-size:13px;
  margin:0 0 6px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:15px;
  font-family:inherit;
  background:#fff;
}

.field textarea{
  min-height:120px;
  resize:vertical;
}

.help{
  font-size:13px;
  color:var(--muted);
}

.error{
  color:#B00020;
  font-weight:800;
}

.notice{
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:14px;
  background:#fff;
}

.notice.good{
  border-color:rgba(31,122,58,.35);
  background:rgba(31,122,58,.08);
}

.notice.bad{
  border-color:rgba(176,0,32,.35);
  background:rgba(176,0,32,.06);
}


/* ---------------------------
   10) Footer (tidy + mobile-first)
---------------------------- */
.footer{
  border-top:1px solid rgba(31,122,58,.14);
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(31,122,58,.06), transparent 60%),
    radial-gradient(700px 240px at 92% 30%, rgba(201,162,77,.06), transparent 62%),
    #fff;
  padding:28px 0 18px;
}

/* Mobile-first: stacked, clear grouping */
.footergrid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* Brand block reads like a module */
.footerbrand{
  padding:14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r2);
  background:rgba(255,255,255,.75);
  box-shadow:var(--shadow-1);
}
.footerbrand h3{
  margin:0 0 8px;
}
.footerbrand p{
  margin:0;
}

/* Columns look like grouped blocks */
.footercol{
  padding:14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r2);
  background:rgba(255,255,255,.75);
  box-shadow:var(--shadow-1);
}

.footercol h3{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:-0.1px;
}

/* Link list: tidy rhythm + tap-friendly rows */
.footerlinks{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.footerlinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  color:var(--text);
  text-decoration:none;
  font-weight:650;
  font-size:14px;

  padding:10px 10px;
  border-radius:12px;
  background:rgba(31,122,58,.04);
  border:1px solid rgba(31,122,58,.10);
}

.footerlinks a:hover{
  color:var(--text);
  text-decoration:none;
  background:rgba(31,122,58,.07);
  border-color:rgba(31,122,58,.16);
}

/* Small arrow affordance without extra markup */
.footerlinks a::after{
  content:"›";
  color:rgba(26,26,26,.45);
  font-weight:900;
}

/* Bottom bar */
.footerbottom{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(31,122,58,.12);
}

.tiny{
  font-size:12px;
  color:var(--muted);
  margin:0;
}

/* Scale up only */
@media (min-width: 720px){
  .footer{
    padding:34px 0 20px;
  }

  .footergrid{
    grid-template-columns:2fr 1fr;
    gap:18px;
    align-items:start;
  }
}

@media (min-width: 980px){
  .footergrid{
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:18px;
  }
}



/* ---------------------------
   11) Accordion / QA
---------------------------- */
.accordion{ max-width:900px; }

.qa{
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:14px;
  background:#fff;
  margin:10px 0;
  box-shadow:var(--shadow-1);
}

.qa button{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:0;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}

.qa .a{
  display:none;
  padding-top:10px;
  color:var(--muted);
}

.qa.open .a{ display:block; }

/* ---------------------------
   12) Sector thumbnails
---------------------------- */
.sector-thumb{
  width:60px;
  height:60px;
  border-radius:var(--r2);
  object-fit:cover;
  border:1px solid var(--border);
  background:#fff;
}
.sector-card{ align-items:center; }

/* ---------------------------
   13) Mini cards (Achievements stack)
---------------------------- */
.mini-card{
  display:flex;
  gap:14px;
  align-items:center;
  border:2px solid rgba(31,122,58,.65);
  border-radius:var(--r3);
  padding:12px;
  background:#fff;
  box-shadow:var(--shadow-1);
}

.mini-card .thumbwrap{ flex:0 0 auto; }

.mini-thumb{
  width:86px;
  height:86px;
  border-radius:var(--r2);
  object-fit:cover;
  border:1px solid var(--border);
  background:rgba(31,122,58,.06);
}

.mini-card .content{ width:100%; }

.mini-card .title{
  font-weight:900;
  font-size:18px;
  margin:0;
  line-height:1.15;
}

.mini-card .subtitle{
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

.mini-card .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

/* Card links: avoid underline within cards (controlled, not blanket) */
.card-link{ text-decoration:none; }
.card-link:hover{ text-decoration:none; }

/* ---------------------------
   14) RHAM News (scoped image-news-card)
   NOTE: keep scope to avoid leaking to global cards
---------------------------- */
.rham-news .image-news-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--r2);
  padding:14px;
  box-shadow:var(--shadow-2);
}

.rham-news .card-news-image-reduced{
  width:84px;   /* mobile base */
  height:84px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(31,122,58,.06);
  flex:0 0 auto;
}

.rham-news .news-card-content{
  flex:1 1 auto;
  min-width:0;
}

/* IMPORTANT: avoid heading-type collisions inside cards */
.rham-news .news-title{
  font-size:18px;
  line-height:1.2;
  margin:0 0 6px;
  font-weight:900;
}

.rham-news .summary{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.rham-news .expand-btn{
  margin-top:10px;
  min-height:44px; /* tap target */
  padding:0 14px;
  border-radius:10px;
  border:2px solid rgba(176,0,32,.25);
  background:#fff;
  color:#B00020;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}

.rham-news .extra{
  display:none;
  margin-top:10px;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
}

/* ---------------------------
   15) Responsive enhancements (min-width only)
---------------------------- */
@media (min-width: 600px){
  .rham-news .card-news-image-reduced{ width:90px; height:90px; }
  .sector-thumb{ width:72px; height:72px; }
}

@media (min-width: 720px){
  h1{ font-size:36px; }
  .footergrid{ grid-template-columns:1fr 1fr; }

  /* Desktop nav appears; hamburger hides */
  .navlinks{ display:flex; }
  .hamburger{ display:none; }
  .mobilemenu{ display:none !important; } /* menu should not persist on desktop */
}

@media (min-width: 980px){
  .hero-grid{ grid-template-columns:1.15fr .85fr; }
  .grid.cards{ grid-template-columns:repeat(2, 1fr); }
  .footergrid{ grid-template-columns:2fr 1fr 1fr 1fr; }
}

@media (min-width: 1120px){
  .grid.cards{ grid-template-columns:repeat(3, 1fr); }
}