/* The Ramadan 2027 page (ramadan-2027.html), under Maghrib's sunset sky.
   The timetable uses the prayer-times pages' table (prayer-times.css). */

/* The countdown */
.rm-card { margin: 22px 0 10px; padding: 24px 22px; text-align: center; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; }
.doc .rm-count { margin: 0; font: 800 26px/1.2 var(--round); color: var(--ink); }
.rm-count b { display: block; font-size: 64px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.doc .rm-count-sub { margin: 8px auto 0; max-width: 32em; font-size: 15.5px; color: var(--ink-dim); }
.doc .rm-hijri { margin: 10px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* Key dates */
.rm-dates-wrap { overflow-x: auto; margin-top: 10px; }
table.rm-dates { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.rm-dates th, table.rm-dates td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rm-dates th { width: 42%; font-weight: 700; color: var(--ink-dim); }
table.rm-dates td { font-weight: 800; color: var(--ink); }
table.rm-dates td span { display: block; font-weight: 600; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 560px) { table.rm-dates th { width: 46%; } table.rm-dates { font-size: 14.5px; } }

/* The timetable's heading row: title, place, print */
.rm-tt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 32px; }
.doc .rm-tt-head h2 { margin: 0 auto 0 0; }
.rm-tt-head select, .rm-tt-head button { font: inherit; font-weight: 800; font-size: 14px; color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 12px; padding: 7px 12px; cursor: pointer; }
table.pt-month tr.maybe td { color: var(--ink-faint); }
.doc .rm-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-faint); }
@media (max-width: 560px) { table.pt-month .rm-len, table.pt-month .rm-len-h { display: none; } }
@media print { .rm-tt-head select, .rm-tt-head button { display: none !important; } }