.rk-wrapper { max-width: 720px; margin: 24px auto 0; padding: 0 20px 56px; }

/* White text on the bare hero gradient measured 2.5–3.6:1 on its amber / lavender part (WCAG needs
   4.5:1, 3:1 for the 28px time), so a 30% dark tint sits over the same gradient: ≥ 5.0:1 for the text,
   ≥ 3.7:1 for the time on its badge (2026-10-18). */
.rk-hero {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--hero-gradient); color: white; text-align: center;
    border-radius: 22px; padding: 32px 24px; margin-bottom: 20px;
}
.rk-hero h1 { font-size: 26px; font-weight: 900; margin-bottom: 6px; }
.rk-hero .rk-date { font-size: 14px; color: #fff; margin-bottom: 18px; }
.rk-time-badge {
    display: inline-block; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
    border-radius: 14px; padding: 14px 28px; font-size: 28px; font-weight: 900; letter-spacing: 0.02em;
}
.rk-time-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-top: 8px; }

.rk-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.rk-card {
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.rk-card .rk-card-icon { font-size: 22px; margin-bottom: 6px; }
.rk-card .rk-card-label { font-size: 12px; color: var(--text-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.rk-card .rk-card-value { font-size: 18px; font-weight: 800; color: var(--text-900); }

.rk-nav-links { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 10px; }
.rk-nav-links a {
    flex: 1; text-align: center; padding: 12px; border-radius: 12px;
    border: 1.5px solid var(--border); color: var(--brand); text-decoration: none; font-weight: 700; font-size: 14px;
}
.rk-nav-links a:hover { background: var(--accent-bg); }

.rk-info-card {
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.rk-info-card h2, .rk-info-card h3 { font-size: 16px; font-weight: 800; color: var(--brand); margin-bottom: 10px; }
.rk-info-card p { font-size: 14px; color: var(--text-600); line-height: 1.8; margin-bottom: 8px; }
.rk-info-card p:last-child { margin-bottom: 0; }

.rk-tools-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rk-tools-links a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
    border: 1.5px solid var(--border); border-radius: 12px; color: #334155;
    text-decoration: none; font-weight: 700; font-size: 13px;
}
.rk-tools-links a:hover { border-color: var(--accent-border); background: var(--accent-bg); }

/* Evergreen city page: every other city's Rahu Kaal page, like the Choghadiya / Hora city chips. */
.rk-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-cities a { font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; color: var(--brand); text-decoration: none; }
.rk-cities a.on { background: var(--brand); color: white; }

.rk-not-found { text-align: center; padding: 60px 20px; }
.rk-not-found .icon { font-size: 48px; margin-bottom: 16px; }
.rk-not-found p { color: var(--text-600); font-size: 15px; margin-bottom: 24px; }

.rk-footer-links { text-align: center; margin-top: 8px; font-size: 14px; }
.rk-footer-links a { color: var(--brand); font-weight: 700; text-decoration: none; }