/* Trade Caravan — Design System
   Mobile-first, no frameworks, ~12 KB target
   ================================================ */

/* -------------------------------------------------------
   Custom properties
   ------------------------------------------------------- */
:root {
  --navy:       #0F2B4F;
  --teal:       #0F6E56;
  --teal-light: #1D9E75;
  --gold:       #B45309;
  --gold-bright:#F59E0B;
  --white:      #FFFFFF;
  --grey-50:    #F8FAFC;
  --grey-100:   #F1F5F9;
  --grey-200:   #E2E8F0;
  --grey-400:   #94A3B8;
  --grey-500:   #64748B;
  --grey-600:   #475569;
  --grey-800:   #1E293B;
  --red:        #DC2626;
  --green:      #16A34A;
  --teal-bright:#2DD4BF;   /* teal that stays readable on the navy result box */

  --radius:     6px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 2px 8px rgba(0,0,0,.10);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.12);
  --transition: 180ms ease;
  --font:       system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:  ui-monospace,"Cascadia Code",monospace;
  --max-w:      1140px;
  --nav-h:      58px;
}

/* -------------------------------------------------------
   Reset
   ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey-800);
  background: var(--white);
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); text-decoration: underline; }
ul, ol { padding-left: 1.25rem; }
h1,h2,h3,h4,h5,h6 { line-height: 1.25; color: var(--navy); font-weight: 700; }
h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p + p { margin-top: .75rem; }

/* -------------------------------------------------------
   Skip link (a11y)
   ------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--teal);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  z-index: 9999;
}
.skip-link:focus { top: .5rem; }

/* -------------------------------------------------------
   Layout
   ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .container { padding: 0 1.5rem; } }

.section     { padding: 3rem 0; }
.section-alt { padding: 3rem 0; background: var(--grey-50); }

.grid-2 { display: grid; gap: 1.25rem; }
.grid-3 { display: grid; gap: 1.25rem; }
.grid-4 { display: grid; gap: 1.25rem; }

@media (min-width: 600px)  { .grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 600px)  { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px)  { .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px)  { .grid-4 { grid-template-columns: repeat(4,1fr); } }

/* -------------------------------------------------------
   Navigation
   ------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--navy);
  height: var(--nav-h);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo span { color: var(--teal-light); }
.nav-logo:hover { text-decoration: none; color: #fff; }

.nav-links {
  display: none;
  list-style: none;
  padding: 0;
  gap: .25rem;
}
/* margin-right:auto groups the links with the logo on the left and pushes
   the search + profile to the right. This makes the right-hand cluster behave
   the same whether signed-out (search only) or signed-in (search + profile),
   so the bar no longer looks lopsided when the account menu is added. */
/* The full horizontal nav (9 links + search + account pill) only fits on wider
   desktops; below 1100px we use the hamburger drawer instead, so the links never
   crowd, wrap to two lines, or squeeze the search box into a grey blob. */
@media (min-width: 1100px) { .nav-links { display: flex; align-items: center; margin-right: auto; } }

.nav-links a {
  display: block;
  padding: .4rem .7rem;
  color: rgba(255,255,255,.82);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;          /* never wrap a label to two lines */
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ── Knowledge Base nav dropdown (native <details>, mirrors .profile-menu) ── */
.nav-dd-wrap { position: relative; }
.nav-dd summary {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem;
  color: rgba(255,255,255,.82);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius); cursor: pointer; list-style: none;
  transition: background var(--transition), color var(--transition);
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary:hover,
.nav-dd summary.active,
.nav-dd[open] summary { background: rgba(255,255,255,.1); color: #fff; }
.nav-dd-chevron { transition: transform var(--transition); opacity: .7; }
.nav-dd[open] .nav-dd-chevron { transform: rotate(180deg); }
.nav-dd summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.nav-dd-panel {
  position: absolute; top: 100%; left: 0; margin-top: .4rem;
  min-width: 230px; background: #fff;
  border: 1px solid var(--grey-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: .35rem; z-index: 300;
}
.nav-dd-panel a {
  display: block; padding: .5rem .65rem; border-radius: var(--radius);
  color: var(--navy); font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.nav-dd-panel a small {
  display: block; color: var(--grey-500); font-size: .72rem; font-weight: 400; margin-top: .1rem;
}
.nav-dd-panel a:hover { background: var(--grey-50); color: var(--navy); }
.nav-dd-panel a.active { background: var(--teal); color: #fff; }
.nav-dd-panel a.active small { color: rgba(255,255,255,.85); }

/* Sign In button sits inside .nav-links — override element-level styles so
   .btn-primary renders correctly (specificity win: two classes > one class + element). */
.nav-links .btn { display: inline-flex; }
.nav-links .btn-primary { background: var(--teal); color: #fff; }
.nav-links .btn-primary:hover { background: var(--teal-light); color: #fff; }

.nav-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  max-width: 260px;
  margin-left: auto;
}
.nav-search input {
  width: 100%;
  padding: .4rem .75rem;
  border: none;
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .875rem;
  outline: none;
}
.nav-search input::placeholder { color: rgba(255,255,255,.5); }
.nav-search input:focus { background: rgba(255,255,255,.2); }
/* Desktop layout (links visible from 1100px): the links carry margin-right:auto
   to push the right cluster over, so the search must NOT also claim free space.
   Between 1100–1299px the row is still tight, so the inline search is hidden
   (it would otherwise shrink to a grey blob); it returns as a fixed-width box
   only from 1300px where there is genuine room. Below 1100px (hamburger mode)
   the search keeps its full-width mobile behaviour. */
@media (min-width: 1100px) and (max-width: 1299px) { .nav-search { display: none; } }
@media (min-width: 1300px) { .nav-search { flex: 0 1 220px; margin-left: 0; } }

.nav-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  color: #fff;
}
@media (min-width: 1100px) { .nav-menu-btn { display: none; } }

.nav-signin-mobile {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,.85);
  padding: .35rem;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.nav-signin-mobile:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
@media (min-width: 1100px) { .nav-signin-mobile { display: none; } }

.nav-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--navy);
  z-index: 190;
  overflow-y: auto;
  padding: 1.5rem;
}
.nav-drawer.open { display: block; }
.nav-drawer ul { list-style: none; padding: 0; }
.nav-drawer a {
  display: block;
  padding: .75rem .5rem;
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
}
.nav-drawer a:hover { color: #fff; }

/* FX ticker */
.fx-ticker {
  background: var(--grey-800);
  color: var(--grey-400);
  font-size: .75rem;
  padding: .25rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.fx-ticker-inner {
  display: flex;
  gap: 2rem;
  animation: ticker 30s linear infinite;
}
.fx-ticker-inner:hover { animation-play-state: paused; }
.fx-pair { display: inline-flex; gap: .35rem; align-items: center; }
.fx-pair .rate { color: #fff; font-weight: 600; }
.fx-up   { color: var(--green); }
.fx-down { color: var(--red); }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -------------------------------------------------------
   Hero
   ------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  color: #fff;
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.hero h1 { color: #fff; margin-bottom: .75rem; }
.hero h1 em { color: var(--gold-bright); font-style: normal; }
.hero p { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 560px; margin: 0 auto 1.75rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------
   Buttons
   ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; }

.btn-primary  { background: var(--teal);    color: #fff; }
.btn-primary:hover  { background: var(--teal-light); color: #fff; }

.btn-gold     { background: var(--gold);    color: #fff; }
.btn-gold:hover     { background: #c55f0a; color: #fff; }

.btn-ghost    { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover    { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn-outline  { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover  { background: var(--teal); color: #fff; }

.btn-sm { padding: .4rem .875rem; font-size: .8rem; }
.btn-lg { padding: .85rem 1.75rem; font-size: 1rem; }

/* -------------------------------------------------------
   Cards
   ------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.card-sm { padding: .875rem 1rem; }
.card-hover {
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Tool cards */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  color: inherit;
}
.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  border-top-color: var(--teal-light);
}
.tool-card .icon {
  font-size: 1.75rem;
  line-height: 1;
}
.tool-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: .2rem; }
.tool-card p  { font-size: .85rem; color: var(--grey-600); margin: 0; }

/* News cards */
.news-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-top: 3px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.news-card:hover { box-shadow: var(--shadow); }
.news-card--high   { border-top-color: var(--red); }
.news-card--medium { border-top-color: var(--gold-bright); }
.news-card--watch  { border-top-color: #3B82F6; }
.news-card-meta  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.news-card h3    { font-size: 1rem; color: var(--navy); }
.news-card h3 a  { color: inherit; }
.news-card h3 a:hover { color: var(--teal); text-decoration: none; }
.news-card p     { font-size: .875rem; color: var(--grey-600); margin: 0; flex-grow: 1; }
.news-card-link  { font-size: .8rem; font-weight: 600; color: var(--teal); margin-top: .25rem; }
.news-card-link:hover { color: var(--teal-light); text-decoration: none; }

/* Job rows */
.job-row {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1rem;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow var(--transition);
}
.job-row:hover { box-shadow: var(--shadow-sm); }
@media (min-width: 600px) {
  .job-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.job-row-info h4 { font-size: .95rem; color: var(--navy); margin-bottom: .2rem; }
.job-row-info span { font-size: .8rem; color: var(--grey-600); }

/* -------------------------------------------------------
   Badges
   ------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge-verified   { background: #CCFBF1; color: #0F6E56; }
.badge-featured   { background: #FEF3C7; color: #92400E; }
.badge-high       { background: #FEE2E2; color: #991B1B; }
.badge-medium     { background: #FEF3C7; color: #92400E; }
.badge-watch      { background: #DBEAFE; color: #1E40AF; }
.badge-za         { background: #DCFCE7; color: #166534; }
.badge-africa     { background: #F0FDF4; color: #15803D; }
.badge-global     { background: #EFF6FF; color: #1D4ED8; }
.badge-port       { background: #F0F9FF; color: #0369A1; }
.badge-regulatory { background: #FDF4FF; color: #7E22CE; }
.badge-opinion    { background: #FFF7ED; color: #C2410C; }

/* -------------------------------------------------------
   Forms
   ------------------------------------------------------- */
.form-group  { display: flex; flex-direction: column; gap: .35rem; }
.form-label  { font-size: .875rem; font-weight: 600; color: var(--grey-800); }
.form-hint   { font-size: .78rem; color: var(--grey-600); }

.form-input,
.form-select,
textarea {
  width: 100%;
  padding: .6rem .875rem;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font);
  color: var(--grey-800);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  min-height: 44px;
}
.form-input:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,110,86,.15);
}
textarea { resize: vertical; min-height: 100px; }

/* -------------------------------------------------------
   Calculator / Result boxes
   ------------------------------------------------------- */
.result-box {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.result-value {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1;
}
.result-label { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .25rem; }

.breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .875rem;
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-total {
  display: flex;
  justify-content: space-between;
  padding: .75rem 0 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-bright);
}

/* Everything rendered inside the navy .result-box must stay readable on navy:
   muted copy, teal highlights and outline buttons switch to light variants,
   and JS-injected working panels / tables / save widgets sit on a white
   inner card so their dark text keeps its contrast. */
.result-box .text-muted { color: rgba(255,255,255,.78); }
.result-box .breakdown-highlight { color: var(--teal-bright); }
.result-box .btn-outline { color: var(--teal-bright); border-color: var(--teal-bright); }
.result-box .btn-outline:hover { background: var(--teal-bright); color: var(--navy); }
.calc-panel,
.email-capture-widget {
  background: var(--white);
  color: var(--grey-800);
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  background: var(--white);
  color: var(--grey-800);
}
.calc-table th, .calc-table td { padding: .4rem .55rem; border: 1px solid var(--grey-200); }
.calc-table th { background: var(--grey-50); color: var(--navy); text-align: left; }
.calc-table tr.calc-total td { background: var(--grey-100); color: var(--navy); font-weight: 700; }

/* Affiliate CTA */
.affiliate-cta {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.affiliate-cta h4 { color: var(--navy); margin-bottom: .35rem; }
.affiliate-cta p  { font-size: .875rem; color: var(--grey-600); margin-bottom: .75rem; }

/* -------------------------------------------------------
   Typography helpers
   ------------------------------------------------------- */
.section-title { font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--navy); margin-bottom: .375rem; }
.section-sub   { color: var(--grey-600); font-size: .95rem; margin-bottom: 1.5rem; }
.section-hdr   { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.section-link  { font-size: .875rem; font-weight: 600; color: var(--teal); white-space: nowrap; }

/* Prose (article body) */
.prose { max-width: 72ch; }
.prose h2 { margin: 2rem 0 .75rem; font-size: 1.35rem; }
.prose h3 { margin: 1.5rem 0 .5rem; }
.prose p  { margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; }
.prose li { margin-bottom: .35rem; }
.prose blockquote {
  border-left: 3px solid var(--teal);
  padding: .5rem 1rem;
  margin: 1.25rem 0;
  background: var(--grey-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--grey-600);
}
.prose a { font-weight: 500; }
.prose strong { color: var(--navy); }
.prose code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--grey-100);
  padding: .15em .4em;
  border-radius: 3px;
}
/* Shared horizontal-scroll utility for any wide table on a narrow screen.
   Wrap a table in <div class="table-scroll">…</div>, or rely on the .prose
   table / .admin-table rules below which scroll on their own. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose table {
  display: block;          /* allow horizontal scroll on phones */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
}
.prose th, .prose td {
  padding: .6rem .8rem;
  border: 1px solid var(--grey-200);
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
}
.prose tbody th {
  background: var(--grey-50);
  color: var(--navy);
  font-weight: 600;
}
.prose tbody tr:nth-child(even) td { background: var(--grey-50); }

/* -------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--grey-600);
  padding: .75rem 0;
}
.breadcrumb a    { color: var(--grey-600); }
.breadcrumb a:hover { color: var(--teal); text-decoration: none; }
.breadcrumb-sep  { color: var(--grey-400); }
.breadcrumb-current { color: var(--grey-800); font-weight: 500; }

/* -------------------------------------------------------
   Feedback widget
   ------------------------------------------------------- */
.feedback-widget {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--grey-600);
}
.feedback-btn {
  background: none;
  border: 1.5px solid var(--grey-200);
  padding: .35rem .875rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: .85rem;
  transition: border-color var(--transition), background var(--transition);
}
.feedback-btn:hover { border-color: var(--teal); background: rgba(15,110,86,.06); }
.feedback-btn.voted { border-color: var(--teal); background: rgba(15,110,86,.1); color: var(--teal); font-weight: 600; }
/* Signed-in members: the currently-saved choice (changeable, so no disabling). */
.feedback-btn.is-selected { border-color: var(--teal); background: rgba(15,110,86,.14); color: var(--teal); font-weight: 600; box-shadow: inset 0 0 0 1px var(--teal); }
.feedback-msg { color: var(--teal); font-weight: 600; font-size: .85rem; }

/* -------------------------------------------------------
   WhatsApp share
   ------------------------------------------------------- */
.wa-share {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #25D366;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition);
}
.wa-share:hover { background: #20B858; color: #fff; text-decoration: none; }

/* Contextual share strip (tools / port status / news) */
.share-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  /* Balanced spacing: the page's own <main> already carries a bottom padding,
     so keep the strip's top margin modest (it stacks on top of that) while
     leaving a comfortable gap before the footer — avoids the oversized void
     that a large top margin left above "Share this with a colleague". */
  margin: 1rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--grey-50, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
}
.share-strip-label { font-size: .92rem; font-weight: 600; color: var(--navy, #0F2B4F); }
.share-strip-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 40px;
  padding: 0 1rem;
  box-sizing: border-box;
  background: #fff;
  color: var(--navy, #0F2B4F);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.share-btn svg { flex-shrink: 0; }
.share-btn:hover { border-color: var(--teal, #0F6E56); color: var(--teal, #0F6E56); text-decoration: none; }
.share-btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.share-btn--wa:hover { background: #1EB457; border-color: #1EB457; color: #fff; }
.share-btn.copied { background: #f0fdf9; border-color: #0F6E56; color: #0F6E56; }
@media (max-width: 560px) {
  .share-strip-actions { margin-left: 0; width: 100%; }
  .share-btn { flex: 1 1 auto; }
}
.wa-share::before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* -------------------------------------------------------
   Skeleton loaders
   ------------------------------------------------------- */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
.skeleton,
.skeleton-text,
.skeleton-title {
  background: linear-gradient(90deg, var(--grey-200) 25%, var(--grey-100) 50%, var(--grey-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}
.skeleton       { height: 200px; }
.skeleton-title { height: 1.5rem; width: 70%; margin-bottom: .75rem; }
.skeleton-text  { height: 1rem; margin-bottom: .5rem; }
.skeleton-text:last-child { width: 50%; }

/* -------------------------------------------------------
   Related grid
   ------------------------------------------------------- */
.related-grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .related-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .related-grid { grid-template-columns: repeat(3,1fr); } }

/* -------------------------------------------------------
   Filter tabs
   ------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.filter-btn {
  padding: .4rem 1rem;
  border: 1.5px solid var(--grey-200);
  border-radius: 20px;
  background: var(--white);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  color: var(--grey-600);
}
.filter-btn:hover   { border-color: var(--teal); color: var(--teal); }
.filter-btn.active  { border-color: var(--teal); background: var(--teal); color: #fff; }

/* -------------------------------------------------------
   Pagination
   ------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--grey-600);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  text-decoration: none;
}
.page-link:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }
.page-link.active { border-color: var(--teal); background: var(--teal); color: #fff; }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* -------------------------------------------------------
   Impact indicator
   ------------------------------------------------------- */
.impact-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--grey-600);
}
.impact-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.impact-dot.high   { background: var(--red); }
.impact-dot.medium { background: var(--gold); }
.impact-dot.watch  { background: #3B82F6; }

/* Live indicator */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-light);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.85); }
}

/* -------------------------------------------------------
   Page hero (inner pages)
   ------------------------------------------------------- */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  color: #fff;
  padding: 2.5rem 0;
}
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p  { color: rgba(255,255,255,.75); max-width: 600px; }

/* -------------------------------------------------------
   Notice / alert banners
   ------------------------------------------------------- */
.notice {
  padding: .875rem 1.125rem;
  border-radius: var(--radius);
  font-size: .875rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 1rem 0;
}
.notice-info    { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.notice-success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.notice-warn    { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.notice-danger  { background: #FEF2F2; color: #991B1B; border: 1px solid #FEE2E2; }

/* -------------------------------------------------------
   Footer
   ------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.65);
  padding: 2.5rem 0 1.5rem;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px)  { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; } }

.footer-brand p { font-size: .85rem; margin-top: .5rem; }
.footer-col h4  { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.footer-col ul  { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.footer-col a   { color: rgba(255,255,255,.65); font-size: .85rem; transition: color var(--transition); }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .78rem;
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: #fff; }

/* -------------------------------------------------------
   Mobile bottom nav
   ------------------------------------------------------- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--grey-200);
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  /* Installed-app (PWA) polish: keep the tab targets above the iPhone home
     indicator (requires viewport-fit=cover on the viewport meta). */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1099px) { .mobile-bottom-nav { display: flex; } }

/* While the on-screen keyboard is up, hide the bar (native-app behaviour).
   Re-showing it after the keyboard closes also forces a fresh layout, which
   un-sticks the iOS standalone-PWA bug where a fixed bottom bar stays pinned
   to the shrunken keyboard viewport — mid-screen. body.kb-open is toggled by
   the visualViewport watcher in js/app.js. */
body.kb-open .mobile-bottom-nav { display: none; }

.mobile-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .6rem .25rem .5rem;
  font-size: .65rem;
  font-weight: 600;
  color: var(--grey-600);
  text-decoration: none;
  min-height: 44px;
  transition: color var(--transition);
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(--teal); }
.mobile-bottom-nav .icon { font-size: 1.2rem; line-height: 1; }

/* Spacer so content isn't hidden behind mobile nav (+ safe area in the PWA) */
.mobile-nav-spacer { height: calc(64px + env(safe-area-inset-bottom, 0px)); display: block; }
@media (min-width: 1100px) { .mobile-nav-spacer { display: none; } }

/* -------------------------------------------------------
   Utility
   ------------------------------------------------------- */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-sm      { font-size: .875rem; }
.text-xs      { font-size: .78rem; }
.text-muted   { color: var(--grey-600); }
.text-navy    { color: var(--navy); }
.text-teal    { color: var(--teal); }
.text-gold    { color: var(--gold); }
.font-bold    { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.justify-between { justify-content: space-between; }

/* -------------------------------------------------------
   Admin panel — enterprise-simple. Keep it monochrome,
   high-contrast, and predictable. No flashy gradients.
   ------------------------------------------------------- */
.admin-shell { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.admin-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey-500); margin: 0 0 .25rem;
}
.admin-title { margin: 0 0 1.5rem; font-size: 1.45rem; color: var(--navy); }
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem; margin-bottom: 1.5rem;
}
.admin-stat {
  background: #fff; border: 1px solid var(--grey-200); border-radius: 10px;
  padding: 1rem 1.25rem; text-decoration: none; display: block; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.admin-stat:hover { border-color: var(--teal); transform: translateY(-1px); }
.admin-stat--alert { border-color: var(--gold); background: #fffdf4; }
.admin-stat__value { font-size: 1.75rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.admin-stat__label {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey-500); margin-top: .35rem;
}
.admin-stat__pill {
  display: inline-block; margin-top: .4rem; font-size: .68rem; font-weight: 700;
  background: var(--gold); color: #fff; padding: .1rem .45rem; border-radius: 999px;
}
.admin-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.admin-action {
  display: block; background: #fff; border: 1px solid var(--grey-200);
  border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.admin-action:hover { border-color: var(--teal); }
.admin-action h3 { margin: 0 0 .25rem; font-size: .95rem; color: var(--navy); }
.admin-action p { margin: 0; font-size: .82rem; color: var(--grey-500); }
.admin-toolbar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
}
.admin-toolbar form { display: flex; gap: .5rem; flex: 1; max-width: 420px; }
.admin-status {
  display: inline-block; padding: .2rem .55rem; border-radius: 4px;
  font-size: .72rem; font-weight: 600;
}
.admin-status--active    { background: #dcfce7; color: #166534; }
.admin-status--pending   { background: #fef9c3; color: #854d0e; }
.admin-status--suspended { background: #fee2e2; color: #991b1b; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff;
  border: 1px solid var(--grey-200); border-radius: 10px; overflow: hidden;
}
.admin-table th {
  text-align: left; padding: .65rem .75rem; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey-500); background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}
.admin-table td {
  padding: .65rem .75rem; border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--grey-50); }
.admin-table tr.is-pending td { background: #fffdf4; }
/* On phones, let admin tables scroll horizontally instead of overflowing the
   viewport (the Admin Dashboard is an installable PWA used on mobile). */
@media (max-width: 700px) {
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.admin-flash {
  background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px;
  padding: .75rem 1rem; margin-bottom: 1rem; color: #166534; font-size: .85rem;
}
.admin-flash--error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* ============================================================
   Profile menu (header avatar dropdown) + dashboard layout
   ============================================================ */
/* Signed-in account menu. NOTE: these rules MUST match the .profile-* class
   names actually rendered in includes/header.php (.profile-name / .profile-chevron
   / .profile-panel / .profile-header*). They previously targeted a different set
   of names (.profile-trigger/.profile-dropdown/.profile-chev), so the trigger
   wasn't laid out as a pill and the avatar had no background — the lopsided
   signed-in nav. */
.nav-profile { position: relative; flex-shrink: 0; }
.profile-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .6rem .28rem .35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.08);
  transition: background .15s, border-color .15s;
}
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover,
.profile-menu[open] summary { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
  flex-shrink: 0;
}
.profile-avatar-lg { width: 44px; height: 44px; font-size: .95rem; }
.profile-name {
  color: #fff; font-size: .9rem; font-weight: 600;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-chevron { color: rgba(255,255,255,.7); transition: transform .15s; flex-shrink: 0; }
.profile-menu[open] .profile-chevron { transform: rotate(180deg); }

.profile-panel {
  position: absolute; right: 0; top: calc(100% + .5rem);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 43, 79, .18);
  min-width: 260px; max-width: 300px;
  padding: .35rem 0;
  z-index: 250;
}
.profile-header { padding: .85rem 1rem .9rem; border-bottom: 1px solid #e2e8f0; }
.profile-header-name { font-weight: 700; color: #0F2B4F; font-size: .95rem; }
.profile-header-email {
  font-size: .8rem; color: #64748b; margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-header-plan { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; }
.profile-plan-pill {
  display: inline-block;
  padding: .1rem .5rem; border-radius: 999px;
  background: #f0fdfa; color: #0F6E56; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.profile-upgrade { font-size: .72rem; font-weight: 700; color: #0F6E56; text-decoration: none; }
.profile-upgrade:hover { text-decoration: underline; }
.profile-panel a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem;
  font-size: .88rem; color: #1f2937; text-decoration: none;
  transition: background .15s;
}
.profile-panel a:hover { background: #f1f5f9; }
.profile-panel hr { border: 0; border-top: 1px solid #e2e8f0; margin: .35rem 0; }
.profile-admin { color: #C8A04B !important; }
.profile-signout { color: #dc2626 !important; }
@media (max-width: 640px) {
  .profile-panel { right: 0; left: auto; }
}
.profile-menu summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------------
   Dashboard layout (sidebar + content)
   ------------------------------------------------------------ */
.dash-wrap {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  padding: 1.5rem 1rem 3rem;
  max-width: 1180px; margin: 0 auto;
}
@media (min-width: 880px) { .dash-wrap { grid-template-columns: 240px 1fr; } }

.dash-side {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1rem .75rem; height: fit-content;
}
.dash-side-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .25rem .5rem .75rem;
  border-bottom: 1px solid #e2e8f0; margin-bottom: .5rem;
}
.dash-side-head .meta { min-width: 0; flex: 1; }
.dash-side-head .meta strong { display: block; font-size: .92rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-side-head .meta span { display: block; font-size: .75rem; color: var(--grey-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-side nav { display: flex; flex-direction: column; gap: .1rem; }
.dash-side nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: 8px;
  font-size: .9rem; color: #1f2937; text-decoration: none;
  transition: background .15s, color .15s;
}
.dash-side nav a:hover { background: #f1f5f9; }
.dash-side nav a.is-active { background: #f0fdfa; color: #0F6E56; font-weight: 600; }
.dash-side nav a span[aria-hidden="true"] { width: 18px; text-align: center; }

.dash-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1rem;
}
.dash-card h2 { font-size: 1.05rem; color: var(--navy); margin: 0 0 1rem; }
.dash-flash { padding: .85rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.dash-flash--success { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.dash-flash--error   { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.dash-flash--info    { background: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; }
.dash-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .dash-grid-2 { grid-template-columns: 1fr 1fr; } }
.dash-readonly {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .65rem .85rem; font-size: .9rem; color: var(--grey-600);
}
.dash-readonly strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-500); margin-bottom: .15rem; font-weight: 600; }

.plan-card {
  border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem; transition: border-color .15s;
}
.plan-card.is-current { border-color: var(--teal); background: linear-gradient(180deg, #f0fdfa, #fff); }
.plan-card .price { font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.plan-card .price span { font-size: .8rem; font-weight: 500; color: var(--grey-500); }