/* ═══════════════════════════════════════════
   MyCharityDB — base.css
   Reset · Variables · Typography · Utilities
═══════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, svg { display: block; max-width: 100%; }
input, select, button, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── VARIABLES ─── */
:root {
  --ink:          #1a1a1a;
  --ink-2:        #4a4a4a;
  --ink-3:        #909090;
  --green:        #048d9c;
  --green-dark:   #026878;
  --green-mid:    #0aa0b0;
  --green-light:  #e4f6f8;
  --green-rule:   #9fd8df;
  --grey:         #818385;
  --grey-dark:    #585a5c;
  --grey-light:   #f0f0f0;
  --grey-rule:    #c8c8c8;
  --amber:        #b8760a;
  --amber-light:  #fdf4e0;
  --amber-rule:   #e8d49a;
  --blue:         #1a4a7a;
  --blue-light:   #e8f0f9;
  --blue-rule:    #b8cfe8;
  --red:          #8a1c1c;
  --red-light:    #fdeaea;
  --rule:         #e2e2e2;
  --surface:      #f7f8f8;
  --white:        #ffffff;
  --serif:        'Lora', Georgia, serif;
  --sans:         'DM Sans', system-ui, sans-serif;
  --r:            6px;
  --r-lg:         12px;
  --r-xl:         18px;
  --shadow:       0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
}

/* ─── TYPOGRAPHY ─── */
body {
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.2; letter-spacing: -.3px; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
h3 { font-size: 1.125rem; font-weight: 600; }
p  { line-height: 1.75; }

em { font-style: italic; }
strong { font-weight: 500; }

/* ─── LAYOUT ─── */
.inner    { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
.inner-sm { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
section   { padding: 4rem 0; }

/* ─── SECTION HEADERS ─── */
.s-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.s-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  color: var(--ink);
  margin-bottom: .6rem;
  letter-spacing: -.25px;
}
.s-sub {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 2rem;
}
.s-sub.wide { max-width: 680px; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; }

.btn-primary  { background: var(--green); color: var(--white); }
.btn-primary:hover  { background: var(--green-mid); color: var(--white); }

.btn-outline  { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover  { background: var(--green-light); }

.btn-dark     { background: var(--ink); color: var(--white); }
.btn-dark:hover     { background: #2a2a2c; color: var(--white); }

.btn-white    { background: var(--white); color: var(--ink); }
.btn-white:hover    { background: var(--surface); color: var(--ink); }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }

/* ─── BADGES / TAGS ─── */
.tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  line-height: 1.6;
}
.tag-live       { background: var(--green-light); color: var(--green); }
.tag-new        { background: var(--amber-light);  color: var(--amber); }
.tag-soon       { background: var(--surface); color: var(--ink-3); border: 1px solid var(--rule); }
.tag-best       { background: var(--green); color: var(--white); }

/* ─── ALERT BARS ─── */
.bar {
  border-radius: var(--r);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.bar svg {
  width: 16px; height: 16px;
  flex-shrink: 0; margin-top: 2px;
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bar p { font-size: 13px; line-height: 1.6; }
.bar p strong { display: block; font-size: 13.5px; margin-bottom: 2px; }

.bar-green { background: var(--green-light); border: 1px solid var(--green-rule); }
.bar-green svg { stroke: var(--green); }
.bar-green p   { color: var(--green); }

.bar-amber { background: var(--amber-light); border: 1px solid var(--amber-rule); }
.bar-amber svg { stroke: var(--amber); }
.bar-amber p   { color: var(--amber); }

.bar-blue  { background: var(--blue-light);  border: 1px solid var(--blue-rule); }
.bar-blue svg  { stroke: var(--blue); }
.bar-blue p    { color: var(--blue); }

/* ─── ICON BADGES ─── */
.ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ico svg { width: 16px; height: 16px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-green { background: var(--green-light); }
.ico-green svg { stroke: var(--green); }
.ico-amber { background: var(--amber-light); }
.ico-amber svg { stroke: var(--amber); }
.ico-blue  { background: var(--blue-light); }
.ico-blue svg  { stroke: var(--blue); }

/* ─── SCREENSHOT PLACEHOLDERS ─── */
.screenshot {
  background: var(--surface);
  border: 2px dashed var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
  padding: 2rem;
}
.screenshot svg {
  width: 32px; height: 32px;
  stroke: var(--rule);
  fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.screenshot span { font-size: 12px; color: var(--ink-3); max-width: 200px; line-height: 1.5; }

/* App window chrome wrapper */
.app-window {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.app-window-bar {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.app-dot:nth-child(1) { background: #f87171; }
.app-dot:nth-child(2) { background: #fbbf24; }
.app-dot:nth-child(3) { background: #4ade80; }
.app-window-label {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-left: .5rem;
}

/* ─── DIVIDERS ─── */
.rule-top    { border-top:    1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.bg-white    { background: var(--white); }
.bg-surface  { background: var(--surface); }
.bg-dark     { background: var(--ink); }

/* ─── PAGE HERO ─── */
.page-hero {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 3rem 0 2.5rem;
}
.page-hero .breadcrumb {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.page-hero .breadcrumb a { color: var(--ink-3); }
.page-hero .breadcrumb a:hover { color: var(--green); text-decoration: none; }
.page-hero .breadcrumb span { margin: 0 .4rem; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  section { padding: 2.5rem 0; }
  .s-sub  { max-width: 100%; }
}