/* ==== EthicOps refined theme (compact, navy) ==== */
:root{
  --wrap: 880px;          /* overall content width */
  --bg:#0c2340;           /* deep navy background */
  --surface:#0f2e50;      /* header strip */
  --panel:#f4eee6;        /* hero panel */
  --paper:#ffffff;        /* cards/panels */
  --ink:#0b1220;          /* primary text */
  --card-text:#0b1220;    /* text used on light cards */
  --muted:#6b7280;        /* secondary text */
  --brand:#2563eb; --brand-600:#1d4ed8;
  --gold:#f59e0b; --gold-600:#d97706;
  --line:rgba(0,0,0,.08);
  --radius:16px;
  --shadow:0 12px 34px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.6; min-height:100vh;
}

/* Layout wrap */
.wrap, main, .container {max-width:var(--wrap); margin:0 auto; padding:0 16px}
section{margin:24px 0}

/* Utility accent panel variants */
.panel-accent{background:#0d3352;color:#d3e3f3;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.1rem 1.25rem;box-shadow:0 4px 18px -6px rgba(0,0,0,.4)}
.panel-accent .btn{box-shadow:0 4px 14px rgba(0,0,0,.35)}
/* Improved small text contrast (AA/AAA) */
.panel-accent small,.panel-accent .small{color:#bcd4e3}

/* Subtle divider under simplified hero banners */
.site-hero + .container, .site-hero + main, .site-hero + .wrap{position:relative}
.site-hero + .container:before, .site-hero + main:before, .site-hero + .wrap:before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:120px;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.4),rgba(255,255,255,.05))}

/* ===== Typography utility classes (removes scattered inline styles) ===== */
.title-md{font-size:1.35rem;line-height:1.25;margin-top:0}
.title-sm{font-size:1.05rem;font-weight:600;letter-spacing:.3px;margin:.2rem 0 .75rem}
.meta-small{font-size:.75rem;letter-spacing:.25px}

/* ===== Newsletter (shared styling) ===== */
.newsletter-block{background:#0d3352;color:#d3e3f3;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1.75rem 1.6rem;display:flex;flex-wrap:wrap;gap:1.75rem;align-items:flex-start;box-shadow:0 6px 24px -4px rgba(0,0,0,.45)}
.newsletter-copy{flex:1 1 260px;min-width:240px;max-width:480px}
.newsletter-title{margin:0 0 .4rem;font-size:1.65rem;line-height:1.15;color:#fff;font-weight:800;letter-spacing:.4px}
.newsletter-tagline{margin:.2rem 0 0;max-width:50ch;font-size:.98rem;font-weight:500;color:#c5d7e6}
.newsletter-form-wrapper{flex:1 1 300px;min-width:260px}
.newsletter-noscript{display:block;margin-top:.75rem;font-size:.75rem;opacity:.75;color:#bcd4e3}
@media (max-width:740px){
  .newsletter-block{padding:1.4rem 1.1rem}
  .newsletter-title{font-size:1.4rem}
}



/* Buttons */
.btn, a.button, .cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:999px; background:var(--brand);
  color:#fff; font-weight:600; text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{background:var(--brand-600)}
.btn.donate{background:var(--gold); color:#111}
.btn.donate:hover{background:var(--gold-600)}

/* Hero */
.hero, #hero, .jumbotron{
  background:var(--panel);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  padding:22px; margin:24px auto; max-width:var(--wrap);
}
.hero h1{font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.2; margin:.2rem 0 1rem}
.lead{color:var(--muted); max-width:70ch}

/* Cards & general content */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin:16px 0}
img{max-width:100%; height:auto; display:block; border-radius:12px}

/* Figures inside panels: maintain symmetry and spacing */
figure.sprinkle-figure, figure.inline-image{ display:block; text-align:center; }
figure.inline-image{ padding:6px 0; }

/* Footer */
footer, .site-footer{color:#cbd5e1; padding:24px 16px}

/* --- restore card look for content sections --- */
main.wrap > section:not(.hero){
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
/* ensure plain paragraphs right under main still readable */

main.wrap > p { color: var(--ink); background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:12px 14px; box-shadow: var(--shadow); }

/* ===== Layout helpers ===== */
.container { max-width: 1160px; margin-inline: auto; padding-inline: 1rem; }

.card {
  background: var(--card, #f6efe6);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 1.25rem;
}

/* ===== Hero card with image on RIGHT ===== */
.hero-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* text | image */
  gap: 1.5rem;
  align-items: center;
}

.hero-card h1 { margin: 0 0 .5rem; line-height: 1.15; }
.hero-card .lead { font-size: 1.05rem; color: var(--ink, #0b1f3b); margin: .35rem 0 1rem; }
.hero-card .subsub {
  margin-top: .75rem;
  font-size: .95rem;
  color: var(--muted, #6b7a90);
}

.hero-card .media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Stack on narrow screens */
@media (max-width: 900px) {
  .hero-card { grid-template-columns: 1fr; }
  .hero-card .media { order: -1; } /* image on top when stacked */
}

/* ===== Section header (middle strip) ===== */
.section-subtle {
  background: var(--bg, #0d2b57);
  color: #fff;
  border-radius: 14px;
  padding: .9rem 1.1rem;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ===== Comparison table ===== */
.table-wrap { overflow-x: auto; padding-bottom: .5rem; }
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e7e2d9;
  border-radius: 12px;
}
.compare-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: .85rem 1rem;
  color: var(--ink, #0b1f3b);
}
.compare-table th,
.compare-table td {
  padding: .75rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid #eee6db;
}
.compare-table thead th {
  position: sticky; top: 0; background: #faf7f2; z-index: 1;
}
.compare-table tbody tr:nth-child(odd) td { background: #fff; }
.compare-table tbody tr:nth-child(even) td { background: #fcfaf7; }
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky; left: 0; background: inherit; font-weight: 600;
  box-shadow: 1px 0 0 #eee6db;
}

/* check / x / warn badges */
.badge { display:inline-block; min-width:1.55rem; text-align:center; border-radius:8px; padding:.15rem .45rem; font-weight:700; font-size:.85rem; }
.badge.yes { background:#e8f7e9; color:#0e7a22; }
.badge.no  { background:#fdeaea; color:#b2171c; }
.badge.warn{ background:#fff4da; color:#8a5a00; }

.note { font-size:.85rem; color:#6b7a90; }

/* Legal theme moved to assets/css/theme-legal.css */


/* ===== Consistent image sizing across non-index pages ===== */
/* Decorative/wide images should not overwhelm copy. Keep a symmetric, modest height. */
.sprinkle-figure{ margin:12px auto 18px; }
img.sprinkle{
  width:100%;
  height:clamp(180px, 38vh, 340px);
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e5eaf1;
  box-shadow: 0 4px 12px rgba(2,8,20,.08);
}

/* Inline screenshots or product previews centered with a comfortable max width */
.inline-image img{
  width:100%;
  max-width:780px;
  margin:14px auto 18px;
  border:1px solid #e5eaf1;
  border-radius:12px;
  box-shadow: 0 4px 12px rgba(2,8,20,.08);
}

/* On very small screens, keep images compact */
@media (max-width: 600px){
  img.sprinkle{ height:clamp(140px, 32vh, 240px); }
  .inline-image img{ max-width:100%; margin:12px auto; }
}


/* Minimal Proton badge styling (optional helper) */
.proton-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: #0b1220;
  color: #cfe4ff;
  text-decoration: none;
  font-weight: 600;
}
.proton-badge img { display:block; width:18px; height:18px; }