/* Rookoot "Ocean" look for the public pages (Earn & Jobs, Post a request,
   List your business, business profile, Privacy, Terms).
   White page, deep navy text, ocean blue accent.
   Loaded LAST on each page, so it only re-colours what the page already
   has. Look only: nothing here changes how a page works or what it says.
   The homepage has its own, fuller version in home-blue.css. */

:root {
  --navy: #0B1734;
  --navy2: #16285A;
  --brand: #1A3EBF;            /* white text on it: about 8:1 */
  --brand-dark: #122C8C;       /* blue text on white: about 11:1 */
  --brand-soft: #EAF0FF;
  --brand-grad: linear-gradient(100deg, #1A3EBF 0%, #3462E6 55%, #3462E6 100%);
  --teal: #0E9F9A; --teal-dark: #0B7F7B; --teal-soft: #E1F7F5;
  --sun: #FFB627; --sun-soft: #FFF5DC;

  /* Re-point every page's own colour names to the new palette. */
  --ink: var(--navy);
  --paper: #FFFFFF;
  --muted: #55607A;
  --line: #E7E9F0;
  --accent: var(--brand);
  --accent-dark: var(--brand-dark);
  --accent-soft: var(--brand-soft);
  --accent2: var(--teal);
  --accent2-dark: var(--teal-dark);
  --green: var(--teal-dark);
  --deep: var(--navy);
  --day-jade: var(--brand);
  --day-jade-2: var(--brand);
  --day-cream: #FFFFFF;
  --day-mint: #FFFFFF;
  --copper: var(--brand);
  --copper-light: #8FB0FF;
  --copper-dark: var(--brand-dark);
  --copper-grad: var(--brand-grad);
  --copper-text: var(--brand-grad);
  --jade: var(--navy);
  --jade2: var(--navy2);
  --jade-ink: #070F24;
  --gold: #C98400;
  --gold-light: #FFD27A;
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 12px 30px -18px rgba(11,23,52,0.3);
  --shadow-lg: 0 34px 70px -30px rgba(11,23,52,0.45);
}

body { background: #fff; color: var(--navy); font-family: var(--body); }

/* ---------- Lettering ---------- */
.hero h1, .h2, .logo, .panel h2, .tier h3, .biz-pop-name, .category-title, h1, h2 { font-family: var(--display); }
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--navy); }
.hero h1 em, .h2 em { font-style: normal; font-weight: 800; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.h2, .panel h2 { font-weight: 800; letter-spacing: -0.025em; }
.logo { font-weight: 800; letter-spacing: -0.6px; color: var(--navy); }
.logo em { color: var(--brand); }
.eyebrow { color: var(--brand-dark); }
.avatar { font-family: var(--display); font-weight: 800; }

/* ---------- Header ---------- */
header#siteHeader, header.top { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--line); color: var(--navy); }
header .btn-outline, header .btn-soft { border: 1.5px solid var(--navy); color: var(--navy); background: #fff; }
.lang-sw { border-color: var(--line); background: #fff; }
.lang-sw button { color: var(--muted); }
.lang-sw button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ---------- Buttons ---------- */
.btn-accent, .btn-white, .install-banner .install-btn {
  background: var(--brand); color: #fff;
  box-shadow: 0 14px 28px -14px rgba(26,62,191,0.75), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-accent:hover, .btn-white:hover { background: var(--brand-dark); filter: none; }
.btn-outline { border: 1.5px solid var(--navy); color: var(--navy); background: #fff; }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-soft { background: var(--brand-soft); color: var(--brand-dark); }
.btn-ghost { background: #fff; border: 1.5px solid var(--navy); color: var(--navy); }

/* ---------- Page hero (Earn & Jobs pages) ---------- */
.hero {
  color: var(--navy);
  background:
    radial-gradient(520px 340px at 100% 0%, rgba(52,98,230,0.20), transparent 65%),
    radial-gradient(460px 300px at 0% 10%, rgba(255,182,39,0.18), transparent 65%),
    #fff;
}
.hero::after { background-image: radial-gradient(rgba(11,23,52,0.07) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.hero p.sub { color: #46506B; }
.pill { background: #fff; border: 1px solid #CFDCFF; color: var(--brand-dark); box-shadow: 0 6px 16px -10px rgba(26,62,191,0.5); }

/* ---------- Tabs, chips, filters ---------- */
.tabs { background: #F1F2F6; }
.tabs button[aria-selected="true"] { color: var(--navy); box-shadow: 0 4px 12px -6px rgba(11,23,52,0.35); }
.chip { border-color: var(--line); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filters input, .filters select { border-color: var(--line); color: var(--navy); }
.filters input:focus, .filters select:focus { outline: 2px solid rgba(26,62,191,0.35); border-color: var(--brand); }

/* ---------- Cards ---------- */
.card, .panel { border-color: var(--line); }
.avatar { background: var(--brand-soft); color: var(--brand-dark); }
.tag { background: var(--brand-soft); color: var(--brand-dark); }
.tag.green { background: var(--teal-soft); color: var(--teal-dark); }
.tag.grey { background: #F1F2F6; color: var(--muted); }
.tag.gold { background: var(--sun-soft); color: #7A5200; }
.stars { color: #C98400; }
.empty { border-color: #CFDCFF; background: #fff; }
.empty a { color: var(--brand-dark); }
.booboot { background: linear-gradient(135deg, #0B1734, #16285A 55%, #1A3EBF); }
.note { background: var(--sun-soft); border-color: #FFE0A3; color: #6B4800; }

/* ---------- Forms ---------- */
.field input, .field select, .field textarea { border-color: #D9DCE6; color: var(--navy); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.checks label { border-color: var(--line); }
.checks input { accent-color: var(--brand); }
.checks label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.msg.ok { color: var(--teal-dark); }
input::placeholder, textarea::placeholder { color: #6B7390; opacity: 1; }

/* ---------- Pop-ups ---------- */
.sheet { background: rgba(11,23,52,0.55); }
.sheet-close { background: #F1F2F6; color: var(--navy); }

/* ---------- Footer ---------- */
footer.foot { border-color: var(--line); color: var(--muted); }
footer.foot a { color: var(--navy); }
footer.foot a:hover { color: var(--brand-dark); }

/* ---------- List your business / business profile ---------- */
.tier-btn { border-color: var(--line); }
.tier-btn.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 10px 22px -16px rgba(26,62,191,0.7); }
.tier-btn .tier-desc { color: var(--muted); }
.intro { color: #46506B; }

/* ---------- Privacy & Terms ---------- */
html[data-show] body > .top {
  background: radial-gradient(420px 220px at 100% 0%, rgba(52,98,230,0.4), transparent 65%), linear-gradient(160deg, #16285A, #0B1734);
}
.top .back { color: #8FB0FF; }
.lang button.on, html[data-show="en"] .lang [data-set="en"], html[data-show="bm"] .lang [data-set="bm"] { background: var(--brand); }
html[data-show] .card.intro { background: var(--brand-soft); }
html[data-show] p, html[data-show] li { color: #3A4565; }
html[data-show] .top { color: #fff; }
html[data-show] .top .sub { color: rgba(255,255,255,0.75); }