/* WHR Outreach — boje i delovi landing stranice WHR instance (APP_PROFIL=whr).
   Učitava se POSLE landing.css; Centar-ova stranica ga ne koristi. Boje = WHR sajt. */

:root {
  --ink: #0e223f;
  --ink-soft: #3f5373;
  --ink-mute: #7c8ba5;
  --brand: #1e6fd9;
  --brand-2: #114b9c;
  --brand-3: #3b8ef0;
  --brand-ink: #081d3c;
  --accent: #3b8ef0;
  --mint: #1f9d6b;
  --bg-soft: #f3f7fd;
  --bg-tint: #e6effc;
  --line: #e1e8f4;
  --line-strong: #cdd9ec;
  --shadow: 0 8px 24px -10px rgba(30, 111, 217, .28);
  --grad-brand: linear-gradient(135deg, #3b8ef0 0%, #114b9c 100%);
  --grad-logo: linear-gradient(135deg, #081d3c 0%, #163a6e 100%);
  --grad-text: linear-gradient(100deg, #1e6fd9 10%, #3b8ef0 90%);
}

::selection { background: rgba(30, 111, 217, .18); }
.logo-mark { box-shadow: 0 5px 14px -3px rgba(8, 29, 60, .5); }
.logo-mark svg, .am-side .am-logo svg { width: 24px; height: 24px; }
.btn-primary { box-shadow: 0 10px 26px -10px rgba(30, 111, 217, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(30, 111, 217, .6), inset 0 1px 0 rgba(255, 255, 255, .18); }

.hero::before {
  background:
    radial-gradient(1000px 520px at 78% -14%, rgba(59, 142, 240, .18), transparent 60%),
    radial-gradient(940px 520px at 8% -4%, rgba(30, 111, 217, .15), transparent 56%),
    radial-gradient(700px 460px at 55% 118%, rgba(31, 157, 107, .1), transparent 62%);
}
.hero::after {
  background-image:
    linear-gradient(rgba(30, 111, 217, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 111, 217, .05) 1px, transparent 1px);
}
.hero-visual::before {
  background: radial-gradient(closest-side, rgba(30, 111, 217, .2), rgba(59, 142, 240, .1) 55%, transparent 75%);
}
.am-head .badge { border-color: #cfe0f8; }
.am-stat.s1 .ic { background: linear-gradient(135deg, #114b9c, #3b8ef0); }
.am-stat.s2 .ic { background: linear-gradient(135deg, #1f9d6b, #7fdc9e); }
.mock-card .pill { background: #e3f6ec; color: var(--mint); }
.mock-card .pill.warn { background: #fdeef2; color: var(--danger); }
.sec-head .kicker { border-color: #cfe0f8; }

/* Kartice: plava / tamnoplava / zelena (kao WHR sajt); crvena samo za zaštite */
.feat.c1, .aud-card.a1 { --fc: #1e6fd9; --fc2: #3b8ef0; --ac: #1e6fd9; --ac2: #3b8ef0; }
.feat.c2, .aud-card.a2 { --fc: #081d3c; --fc2: #1e6fd9; --ac: #081d3c; --ac2: #1e6fd9; }
.feat.c3, .aud-card.a3 { --fc: #1f9d6b; --fc2: #7fdc9e; --ac: #1f9d6b; --ac2: #7fdc9e; }
.feat.c4 { --fc: #114b9c; --fc2: #7fb8ff; }
.feat.c5 { --fc: #0e7a55; --fc2: #34c38f; }
.feat.c6 { --fc: #be123c; --fc2: #fb7185; }
.qa[open] { box-shadow: 0 10px 30px -18px rgba(30, 111, 217, .35); }

.cta {
  background:
    radial-gradient(720px 420px at 82% -20%, rgba(59, 142, 240, .3), transparent 60%),
    radial-gradient(700px 460px at 8% 115%, rgba(31, 157, 107, .22), transparent 60%),
    linear-gradient(150deg, #081d3c 0%, #0f2f5c 55%, #081d3c 100%);
}
.cta p { color: #b7c7e3; }

/* Traka na vrhu — za nemačke primaoce koji otvore adresu iz mejla */
.notice-de { background: #081d3c; color: #d9e7fb; font-size: 13.5px; text-align: center; padding: 9px 16px; line-height: 1.45; }
.notice-de a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.notice-de a:hover { color: #7fb8ff; }

/* Pravila (zakon i zaštite) */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.rule { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; display: flex; gap: 14px; }
.rule .ri { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #e3f6ec; color: var(--mint); }
.rule h3 { font-size: 16.5px; margin-bottom: 5px; }
.rule p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.rule .law { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--brand-2);
  background: var(--bg-tint); border: 1px solid #cfe0f8; border-radius: 8px; padding: 2px 9px; }

/* Für Einrichtungen — nemački deo za ustanove */
.einr { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px 34px 30px; box-shadow: var(--shadow-sm); }
.einr .kicker { display: inline-flex; align-items: center; color: var(--brand-2); font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; background: var(--bg-tint); border: 1px solid #cfe0f8;
  padding: 5px 14px; border-radius: 999px; }
.einr h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 12px; }
.einr p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
.einr ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.einr li { display: flex; gap: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.einr li svg { flex: none; margin-top: 3px; color: var(--mint); }
.einr-links { display: grid; gap: 10px; }
.einr-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 15px; background: var(--bg-soft); }
.einr-links a:hover { border-color: var(--brand); color: var(--brand-2); text-decoration: none; }
.einr-links .mail { word-break: break-all; }
.einr-links small { display: block; font-weight: 500; color: var(--ink-mute); font-size: 12.5px; }

@media (max-width: 900px) {
  .einr { grid-template-columns: 1fr; padding: 26px 20px; }
}