/* ==== 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 */
  --muted:#6b7280;        /* secondary text */
  --brand:#2563eb; --brand-600:#1d4ed8;
  --gold:#f59e0b; --gold-600:#d97706;
  --line:rgba(0,0,0,.08);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{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}

/* Site header */
body>header, .site-header{
  background:var(--surface);
  color:#e6eef9;
  border-bottom:1px solid rgba(255,255,255,.09);
}
body>header .inner, .site-header .inner{
  max-width:var(--wrap); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
body>header img[alt*="logo" i]{height:26px; width:auto; display:inline-block; vertical-align:middle}
body>header nav a{
  color:#e6eef9; text-decoration:none; padding:.45rem .7rem; border-radius:10px; font-size:.95rem;
}
body>header nav a:hover{background:rgba(255,255,255,.10)}
body>header nav .active{background:rgba(255,255,255,.15)}
/* hide any stray select "Menu" fallback in header */
body>header select{display:none}

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

/* 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); }

/* --- Hero layout fixes --- */
.hero .card{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:24px;
  align-items:start;            /* stop tall stretching */
}
.hero .hero-text{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hero .illus{ align-self:center }

/* Horizontal button row */
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;               /* wrap on small screens */
}
.actions .btn{ white-space:nowrap }

/* Inline donate (small PayPal image button) */
.donate-inline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.donate-inline form{ margin:0 }
.donate-inline input[type="image"]{
  height:28px; width:auto; vertical-align:middle;
}

/* Safety: if duplicate blocks remain, hide them */
.hero .card > .actions + .donate-inline{ display:none }

/* === HERO: hard placement + no stretching === */
.hero .card{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 24px;
  align-items: start;              /* stop 100% height stretching */
}

/* Pin columns explicitly */
.hero .hero-text{ grid-column: 1; }
.hero .illus{ grid-column: 2; align-self: center; }
.hero .illus img{ max-width:100%; height:auto; display:block; }

/* Put ALL CTAs in a horizontal row under the copy */
.actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;                 /* wraps neatly on mobile */
  align-items: center;
}
.actions .btn{ white-space: nowrap; height: auto; }

/* Inline PayPal donate button */
.donate-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.donate-inline form{ margin: 0 }
.donate-inline input[type="image"]{ height: 28px; width: auto }

/* Safety net: hide any STRAY hero-level blocks that escaped .hero-text */
.hero .card > .actions,
.hero .card > .donate-inline{
  display: none !important;
}

/* Absolute belt-and-suspenders: if something forced vertical writing */
button, .btn, .actions, .donate-inline{
  writing-mode: horizontal-tb !important;
}

/* ====== GLOBAL SAFETY RESETS ====== */
/* Kill accidental vertical writing anywhere */
html, body, main, section, article, h1, h2, h3, h4, h5, h6, p, li, a, button {
  writing-mode: horizontal-tb !important;
}

/* Avoid mysterious full-height stretch in grids */
.card, .pricing-grid { align-items: start !important; }

/* ====== BUTTON VISIBILITY ====== */
/* Some theme sets button text transparent until :hover — force visible */
.btn, .btn * { color: inherit !important; text-shadow: none !important; }

/* Our two button styles */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:12px 16px; font-weight:800; border-radius:14px;
  border:2px solid transparent; line-height:1; text-decoration:none;
}
.btn-primary { background: var(--cta, #f59f45); color: var(--cta-ink, #111827); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost { background:#fff; color:#0f172a; border-color:#e5e7eb; }
.btn-ghost:hover { background:#f8fafc; }

/* ====== HERO LAYOUT (keeps CTAs in left column) ====== */
.hero .card{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:24px; align-items:start;
}
.hero .hero-text{ grid-column:1; display:flex; flex-direction:column; gap:12px; }
.hero .illus{ grid-column:2; align-self:center; }
.hero .illus img{ max-width:100%; height:auto; display:block; }

/* ====== CONTENT (middle section “vertical text” fix) ====== */
.container, .content-section, .copy, .panel, .card {
  writing-mode: horizontal-tb !important; /* belt & suspenders */
  white-space: normal !important;
}

/* ====== PRICING / PRO NORMALIZATION ====== */
/* Two equal cards, centered, consistent white backgrounds */
.pricing-grid{
  display:grid; gap:22px; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:start; max-width:1000px; margin:0 auto;
}
@media (max-width: 880px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.plan{
  background:#fff; color:#0f172a;
  border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.plan h3 a{ color:#1d4ed8; text-decoration:underline; }

/* Remove the old navy/gradient if still applied anywhere */
.plan.pro, .plan--pro{
  background:#fff !important; color:#0f172a !important;
  border-color:#e5e7eb !important; box-shadow:0 10px 24px rgba(0,0,0,.06) !important;
}

/* Image card on the left stays tidy */
.pricing-grid figure.sprinkle-figure{
  margin:0; align-self:start; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:10px;
}
.pricing-grid img.sprinkle{ border:none; }

/* ====== PAYPAL BLOCKS — neat & aligned with cards ====== */
#paypal-container-KAMEHA,
#paypal-container-KAMEHA-STD,
#paypal-container-KAMEHA-PRO,
#paypal-container-DONATE,
#paypal-container-LXABRF3MWNWJQ8{
  display:block; margin:12px 0 0; 
}
.paywrap{
  display:flex; justify-content:center; margin:26px 0 12px;
}

/* Uniform pricing grid */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:22px;
  max-width:1000px;
  margin:0 auto;
  align-items:start;
}
@media (max-width: 880px){
  .pricing-grid{ grid-template-columns:1fr; }
}

/* Card */
.plan{
  background:#fff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.plan-title{ margin:10px 0 8px; font-size:1.15rem; }
.plan-title a{ color:#1d4ed8; text-decoration:underline; }
.plan-list{ margin:0 0 12px 18px; line-height:1.7; }

/* Image at top of each card */
.plan-media{
  margin:0 0 10px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
}
.plan-media img{ display:block; width:100%; height:auto; border-radius:8px; }

/* PayPal container inside card */
.plan-pay{ margin-top:10px; }
#paypal-std, #paypal-pro{ display:block; }

/* ===== LEGAL PAGES ===== */
body.legal-page {
  background: #f9fafb;      /* light gray background */
  color: #1f2937;           /* slate text */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  line-height: 1.6;
}

body.legal-page header,
body.legal-page footer,
body.legal-page .hero,
body.legal-page .promo,
body.legal-page .illus,
body.legal-page .sprinkle-figure {
  display: none !important; /* hide flashy sections */
}

body.legal-page .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Headings */
body.legal-page h1, 
body.legal-page h2, 
body.legal-page h3 {
  color: #111827;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
  font-weight: 700;
}
body.legal-page h1 { font-size: 1.75rem; }
body.legal-page h2 { font-size: 1.4rem; }
body.legal-page h3 { font-size: 1.15rem; }

/* Paragraphs and lists */
body.legal-page p, 
body.legal-page li {
  color: #374151;
  margin-bottom: 1rem;
}
body.legal-page ul, 
body.legal-page ol {
  margin-left: 1.5rem;
}

/* Links (simple blue underline) */
body.legal-page a {
  color: #2563eb;
  text-decoration: underline;
}

/* Tables if any */
body.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
body.legal-page th, 
body.legal-page td {
  border: 1px solid #e5e7eb;
  padding: .5rem .75rem;
  text-align: left;
}
body.legal-page th {
  background: #f3f4f6;
  font-weight: 600;
}