/* Mob.Chat localized guides (/mk/vodici/, /si/vodici/); colours as landing.css */
:root {
  --guide-bg: #181a21;
  --guide-bg-soft: #21252f;
  --guide-card: #2b2f3c;
  --guide-text: #ffffff;
  --guide-muted: #d5d8e0;
  --guide-subtle: #aeb5c5;
  --guide-border: #3e4658;
  --guide-accent: #6890ee;
  --guide-accent-2: #5774b7;
}

* { box-sizing: border-box; }
body.guide-page {
  margin: 0;
  background: var(--guide-bg);
  color: var(--guide-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.guide-shell { width: min(calc(100% - 32px), 760px); margin-inline: auto; }
.guide-skip { position: absolute; left: -9999px; }
.guide-skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--guide-card); color: var(--guide-text); }

.guide-header { background: var(--guide-bg-soft); border-bottom: 1px solid var(--guide-border); }
.guide-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.guide-brand { color: var(--guide-text); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.guide-nav { display: flex; align-items: center; gap: 14px; }
.guide-nav a { color: var(--guide-muted); text-decoration: none; font-weight: 600; font-size: .95rem; }
.guide-nav a[aria-current="page"] { color: var(--guide-text); }

.guide-button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--guide-accent);
  color: #0d1220 !important;
  font-weight: 700;
  text-decoration: none;
}
.guide-button:hover, .guide-button:focus-visible { background: #8aa9f3; }

.guide-main { padding: 24px 0 48px; }
.guide-crumbs { font-size: .9rem; color: var(--guide-subtle); margin-bottom: 18px; }
.guide-crumbs a { color: var(--guide-subtle); }
.guide-article h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.2; margin: 0 0 14px; }
.guide-article h2 { font-size: 1.35rem; line-height: 1.3; margin: 34px 0 10px; }
.guide-article h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.guide-article p, .guide-article li { color: var(--guide-muted); }
.guide-article a { color: var(--guide-accent); }
.guide-lead { font-size: 1.12rem; color: var(--guide-text) !important; }
.guide-meta { font-size: .9rem; color: var(--guide-subtle) !important; }

.guide-cards { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.guide-cards a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--guide-border);
  border-radius: 12px;
  background: var(--guide-card);
  color: var(--guide-text);
  text-decoration: none;
}
.guide-cards a:hover, .guide-cards a:focus-visible { border-color: var(--guide-accent); }
.guide-cards strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.guide-cards span { display: block; color: var(--guide-subtle); font-size: .95rem; }

.guide-cta {
  margin: 36px 0 28px;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--guide-accent-2), var(--guide-card));
}
.guide-cta h2 { margin: 0 0 8px; font-size: 1.3rem; }
.guide-cta p { margin: 0 0 16px; color: var(--guide-text); }
.guide-related h2 { font-size: 1.2rem; }

.guide-footer { border-top: 1px solid var(--guide-border); padding: 20px 0 32px; font-size: .9rem; }
.guide-footer .guide-shell { display: flex; flex-wrap: wrap; gap: 18px; }
.guide-footer a { color: var(--guide-subtle); }

@media (max-width: 480px) {
  body.guide-page { font-size: 16px; }
  .guide-nav { gap: 10px; }
  .guide-nav .guide-button { padding: 8px 12px; font-size: .9rem; }
}