/* organicexport.info — restored layout
   Echoes the original portal's structure: banner, rule, breadcrumb,
   left country nav, single content column. Independent rebuild. */

:root{
  --navy:#1f3a93;        /* wordmark + nav active */
  --navy-deep:#16306f;
  --rule:#1f5fa9;        /* thick header rule */
  --cyan:#1799d0;        /* wordmark accent */
  --link:#0071b3;
  --link-hover:#16306f;
  --grey:#5f6b7a;
  --accent-text:#007cb3;
  --border:#7fb2e5;
  --border-soft:#c9dcf1;
  --ink:#1a1a1a;
  --ink-soft:#3d4450;
  --bg:#fff;
  --bg-alt:#f4f8fc;
  --head:#1f4e9c;
  --font: "Segoe UI", Tahoma, Verdana, Geneva, Arial, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.62;
}
img{max-width:100%;height:auto}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- banner ---------- */
.banner{padding:22px 0 16px}
.banner-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.wordmark{font-size:38px;line-height:1;font-weight:400;letter-spacing:-.5px;text-decoration:none;white-space:nowrap}
.wordmark .w1{color:var(--navy)}
.wordmark .w2{color:var(--cyan)}
.wordmark .w3{color:var(--grey)}
.banner-note{font-size:11.5px;line-height:1.5;color:var(--grey);max-width:330px;text-align:right}
.banner-note strong{color:var(--ink-soft);font-weight:600}
.rule{height:4px;background:var(--rule)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:12.5px;color:var(--grey);padding:12px 0 6px}
.crumb a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.crumb a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:46px;padding:8px 0 60px;align-items:start}
.cols > *{min-width:0}

/* ---------- left nav ---------- */
.nav{position:sticky;top:14px}
.nav .nav-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--grey);margin:0 0 10px;font-weight:700;
}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0 0 6px}
.nav a{
  display:block;padding:7px 12px;background:#fff;color:var(--navy);
  border:1px solid var(--border);border-bottom-width:2px;
  font-weight:700;font-size:13.5px;text-decoration:none;
}
.nav a:hover{background:var(--bg-alt)}
.nav a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.nav .sep{height:14px}

/* ---------- content ---------- */
.main h1{color:var(--head);font-size:26px;line-height:1.25;margin:6px 0 20px;font-weight:700}
.main h2{color:var(--head);font-size:18.5px;line-height:1.3;margin:34px 0 12px;font-weight:700}
.main h3{color:var(--navy-deep);font-size:15.5px;margin:22px 0 8px;font-weight:700}
.main{overflow-wrap:break-word}
.main p{margin:0 0 14px;max-width:70ch}
.main ul,.main ol{margin:0 0 16px;padding-left:22px;max-width:70ch}
.main li{margin:0 0 7px}
.main a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.main a:hover{color:var(--link-hover);text-decoration-thickness:2px}
.lede{font-size:16px;color:var(--ink-soft)}

.tablewrap{overflow-x:auto;margin:0 0 18px}
table{border-collapse:collapse;font-size:13.5px;width:100%}
th,td{border:1px solid var(--border-soft);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--bg-alt);color:var(--navy-deep);font-weight:700}

.linklist{list-style:none;padding:0;max-width:74ch}
.linklist li{margin:0 0 13px;padding-left:15px;position:relative}
.linklist li::before{content:"–";position:absolute;left:0;color:var(--accent-text);font-weight:700}
.linklist .note{display:block;color:var(--ink-soft);font-size:13.5px}

.note-box{
  border:1px solid var(--border-soft);border-left:4px solid var(--cyan);
  background:var(--bg-alt);padding:13px 16px;margin:0 0 20px;font-size:13.5px;
}
.note-box p{margin:0 0 8px;max-width:none}
.note-box p:last-child{margin:0}

.updated{margin-top:38px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--grey)}

/* ---------- country index on home ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin:0 0 26px;padding:0;list-style:none}
.grid a{
  display:block;padding:9px 12px;border:1px solid var(--border);border-bottom-width:2px;
  color:var(--navy);font-weight:700;font-size:13.5px;text-decoration:none;
}
.grid a:hover{background:var(--bg-alt)}

/* ---------- related ---------- */
.related{margin-top:40px;padding-top:16px;border-top:2px solid var(--rule)}
.related h2{margin-top:0;font-size:16px}
.related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:7px;max-width:none}
.related li{margin:0}
.related a{display:block;padding:5px 11px;border:1px solid var(--border-soft);font-size:13px;color:var(--link);text-decoration:none}
/* related items are bordered chips, not inline links — the border is the non-colour cue */
.related a:hover{background:var(--bg-alt)}

/* ---------- form ---------- */
.form{max-width:520px}
.field{margin:0 0 15px}
.field label{display:block;font-weight:700;font-size:13.5px;color:var(--navy-deep);margin:0 0 5px}
.field input,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);
  font:inherit;font-size:14px;background:#fff;color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:-2px}
button{
  background:var(--navy);color:#fff;border:0;padding:11px 26px;
  font:inherit;font-weight:700;cursor:pointer;
}
button:hover{background:var(--navy-deep)}

/* ---------- footer ---------- */
.foot{border-top:4px solid var(--rule);padding:20px 0 40px;font-size:12.5px;color:var(--grey)}
.foot ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--link-hover)}
.foot p{margin:0 0 7px;max-width:88ch}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .cols{grid-template-columns:minmax(0,1fr);gap:26px}
  .nav{position:static;order:2;border-top:1px solid var(--border-soft);padding-top:20px}
  .main{order:1}
  .nav ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
  .nav li{margin:0}
  .wordmark{font-size:29px}
  .banner-note{text-align:left;max-width:none}
}
@media (max-width:560px){ .wrap{padding:0 15px} .wordmark{font-size:24px} }

@media print{ .nav,.related,.foot{display:none} .cols{display:block} }