/* PolicyEra theme - colours sampled from the policyera.com design.
   Loaded AFTER each page's own <style>, so change the palette here once and
   every page follows. Drop your real logo file in as logo.png (same folder)
   and it replaces the text wordmark automatically. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#252424; --paper:#f0fafd; --line:#d3e6ee; --muted:#5f6b70;
  --ok:#1f8a5b; --green-bg:#e8f6ef; --bad:#d93025;
  --sky:#39bceb; --sky-dark:#1fa1d1; --sky-deep:#0e7fa8;
  --coral:#ff7262; --navy:#080b15; --cta-bg:#fffaf9;
  /* names used by the existing page styles, now mapped to the new palette */
  --rust:#39bceb; --rust-dark:#1fa1d1; --accent:#39bceb; --accent-dark:#1fa1d1;
}
body{font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; background:var(--paper); color:var(--ink);}
h1,h2,h3,header h1{font-family:'Manrope', system-ui, Arial, sans-serif !important; letter-spacing:-.01em;}

/* header: white bar with the logo, like the website's nav */
header{background:#fff !important; border-bottom:1px solid var(--line) !important; box-shadow:0 1px 8px rgba(8,11,21,.04);}
header h1{color:var(--ink); font-weight:800;}
.logo-wrap{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px;}
header .logo-wrap{justify-content:flex-start;}
.logo-img{height:34px; width:auto; display:block;}
.wordmark{align-items:center; gap:8px; font-weight:800; font-size:21px; color:#0b2a4a; letter-spacing:.01em;}
.wordmark i{font-style:normal; font-weight:800; color:#0b2a4a;}
.tagline{font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--muted); text-transform:uppercase;}

/* cards, fields, buttons */
.card, .panel, .box .card{border:1px solid var(--line) !important; border-radius:16px; box-shadow:0 4px 18px rgba(57,188,235,.07);}
.card h2{color:var(--sky-deep); border-left:4px solid var(--coral); padding-left:10px; font-weight:800;}
.field input, .field select, .field textarea, input, select, textarea{border-radius:10px; border-color:var(--line);}
.field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus{outline:2px solid rgba(57,188,235,.45); border-color:var(--sky);}
button, .btn{border-radius:999px !important; font-family:inherit; font-weight:700; background:var(--sky); color:#fff;}
button:hover, .btn:hover{background:var(--sky-dark);}
button:disabled{background:#b7cdd6 !important;}
a{color:var(--sky-deep);}
.err, .msg.error{color:var(--bad);}
.msg.error{background:#fdecea !important; border-color:var(--bad) !important; border-radius:10px;}
.hint, .order-note{color:var(--muted);}

/* tabs / status pills (admin) */
.tab.active{color:var(--sky-deep); border-color:var(--sky);}