/* Makkah and Madinah family (prefix mk): the drawn maps, place cards, holy-place pages and the Umrah checklist. */

/* ---------- Map tool */
.mk{gap:1rem;scroll-margin-top:5rem}
.mk_bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
.mk_days{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.mk_days .tool_side_t{margin-inline-end:.25rem}
.mk_days button{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.75rem;padding:0 .7rem;border:0;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:500 .9375rem/1 var(--font);color:var(--text);cursor:pointer}
.mk_days button:hover{background:var(--gold-tint);box-shadow:inset 0 0 0 1px rgba(180,138,44,.45)}
.mk_days button[aria-pressed="true"]{background:var(--gold-soft);color:var(--lapis-deep);box-shadow:none}
.mk .tool_ab button{height:2.75rem}
.mk_ws{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}
@media (min-width:62rem){.mk_ws{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}.mk_panel{position:sticky;top:5.5rem}}
.mk_main{min-width:0}
.mk_frame{border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.mk_svg{display:block;width:100%;height:auto;max-height:80vh;font-family:var(--font);-webkit-tap-highlight-color:transparent}

/* drawing */
.mk_bld{fill:var(--surface);stroke:#C9CEDB;stroke-width:2}
.mk_ext{fill:none;stroke:#C9CEDB;stroke-width:1.5;stroke-dasharray:6 5}
.mk_plaza{fill:#FBFBFD;stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 5}
.mk_old{fill:#EEF0F6;stroke:#C9CEDB;stroke-width:1.5}
.mk_masa{fill:var(--gold-tint);stroke:var(--gold);stroke-width:1.5}
.mk_mataf{fill:#fff;stroke:#C9CEDB;stroke-width:2}
.mk_kaaba{fill:#161A2B;stroke:var(--gold);stroke-width:2}
.mk_door{stroke:var(--gold-soft);stroke-width:3;stroke-linecap:round}
.mk_maqam{fill:var(--gold)}
.mk_hijr{fill:none;stroke:#565B6E;stroke-width:2}
.mk_tawaf{fill:none;stroke:var(--lapis-hi);stroke-width:2.5;stroke-dasharray:7 5}
.mk_arrowhead{fill:var(--lapis-hi)}
.mk_rawdah{fill:#CFE8D5;stroke:#2F7A45;stroke-width:1.5}
.mk_hujrah{fill:#E7E9F0;stroke:#565B6E;stroke-width:1.5}
.mk_greendome{fill:#2F8A4E;stroke:#1E5E34;stroke-width:1.5}
.mk_qibla{stroke:var(--gold);stroke-width:4}
.mk_area{font-size:13px;fill:var(--muted);letter-spacing:.01em}
.mk_region{fill:var(--lapis-tint);stroke:var(--lapis-hi);stroke-width:1.5;stroke-dasharray:5 4}
.mk_region.is-arafat{fill:var(--gold-tint);stroke:var(--gold)}
.mk_city{fill:#F1F2F6;stroke:#D5D9E3;stroke-width:1.5}
.mk_mount{fill:#EADFCB;stroke:#B9A57D;stroke-width:1.5}
.mk_road{fill:none;stroke:#D5D9E3;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mk_route{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .2s,stroke-width .2s}
.mk_route.is-night{stroke-dasharray:2 7}
.mk_route.is-tawaf{stroke:var(--lapis-hi);stroke-dasharray:8 6}
.mk_north path{fill:var(--lapis)}
.mk_north text,.mk_scale text{font-size:12px;font-weight:600;fill:var(--muted)}
.mk_scale path{stroke:var(--muted);stroke-width:2;fill:none}

/* pins */
.mk_pin{cursor:pointer;outline:none}
.mk_hit{fill:transparent}
.mk_mark{transition:transform .15s var(--ease)}
.mk_dot{fill:var(--lapis);stroke:#fff;stroke-width:2.5}
.mk_num{font-size:11px;font-weight:700;fill:#fff;pointer-events:none}
.mk_lab{font-size:13.5px;font-weight:600;fill:var(--text);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.mk_pin:hover .mk_dot{fill:var(--lapis-deep)}
.mk_pin:focus-visible .mk_hit{stroke:var(--lapis);stroke-width:3;fill:rgba(29,58,138,.08)}
.mk_pin.is-on .mk_dot{fill:var(--gold);stroke:var(--lapis-deep)}
.mk_pin.is-on .mk_num{fill:var(--lapis-deep)}
.mk_pin.is-on .mk_lab{fill:var(--lapis-deep)}
.mk_pin.is-dim{opacity:.32}
[data-day-mode] .mk_route{opacity:.12}
[data-day-mode] .mk_route.is-on{opacity:1;stroke-width:6}

/* chips (big tap targets under the map) */
.mk_chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.75rem}
.mk_chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.35rem .9rem .35rem .4rem;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:500 .9063rem/1.2 var(--font);color:var(--text);text-decoration:none}
.mk_chip b{display:inline-grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--lapis);color:#fff;font-size:.8125rem}
.mk_chip:hover{background:var(--lapis-tint)}
.mk_chip.is-on{background:var(--lapis);color:#fff;box-shadow:none}
.mk_chip.is-on b{background:var(--gold-soft);color:var(--lapis-deep)}
.mk_chip.is-dim{opacity:.45}

/* panel */
.mk_panel{position:relative;display:grid;gap:.75rem;padding:1.25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);outline:none;scroll-margin-top:5rem}
.mk_panel.is-open{box-shadow:inset 0 0 0 1px rgba(29,58,138,.35),inset 4px 0 0 var(--gold)}
.mk_panel_in{display:grid;gap:.65rem;font-size:.9688rem;line-height:1.6}
.mk_panel_in p{margin:0}
.mk_close{justify-self:start}

/* place cards (list under the map, and copied into the panel) */
.mk_list_h{margin-block:2rem .9rem;font:600 1.125rem/1.3 var(--display)}
.mk_list_h:first-of-type{margin-block-start:0}
.mk_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.mk_card{display:grid;gap:.6rem;align-content:start;padding:1.15rem 1.2rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;line-height:1.6;scroll-margin-top:6rem}
.mk_card p{margin:0}
.mk_card:target{box-shadow:inset 0 0 0 2px var(--gold)}
.mk_card_h,.mk_panel_in .mk_card_h{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0;font:600 1.0625rem/1.3 var(--display);color:var(--text)}
.mk_n{display:inline-grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--lapis);color:#fff;font:700 .8125rem/1 var(--font)}
.mk_n.is-day{width:auto;min-width:1.75rem;padding:0 .4rem;border-radius:999px;background:var(--gold-soft);color:var(--lapis-deep)}
.mk_ar{margin-inline-start:auto;font:400 1.3rem/1.4 var(--arabic);color:var(--lapis)}
.mk_tag{font:500 .8438rem/1.4 var(--font);color:var(--gold-ink)}
.mk_dist{font-size:.8438rem;color:var(--faint)}
.mk_note{padding-inline-start:.75rem;border-inline-start:2px solid var(--gold-soft);font-size:.875rem;color:var(--muted)}
.mk_more a{font-weight:500}

/* phones: the map keeps a readable size and the frame scrolls sideways; the chips carry the names too */
.mk_hint{display:none;margin:.5rem 0 0;font-size:.8125rem;color:var(--faint)}
@media (max-width:40rem){
  .mk_frame{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .mk_svg{width:36rem;max-width:none;max-height:none}
  .mk_svg[data-view="hajj"]{width:46rem}
  .mk_mark{transform:scale(1.3)}
  .mk_hint{display:block}
  .mk_days .tool_side_t{flex-basis:100%}
  .mk_panel{padding:1rem}
}

/* ---------- Holy place pages */
.mk_facts{margin-block:0 1rem;padding:1rem 1.1rem;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.mk_maplink{margin-block:0 1.75rem}
.mk_maplink .btn svg{width:1.1rem;height:1.1rem}
.prose .mk_maplink a.btn{text-decoration:none}

/* ---------- Umrah checklist */
.mk_ck_bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem}
.mk_ck_bar .tool_side_t{margin:0 0 .5rem}
.mk_switch{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 1rem;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;cursor:pointer}
.mk_switch input{width:1.125rem;height:1.125rem;accent-color:var(--lapis)}
.mk_switch:has(:checked){background:var(--gold-tint);box-shadow:inset 0 0 0 1px rgba(180,138,44,.5)}
.mk_ck_btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-inline-start:auto}
.mk_ck_sum b{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.mk_bar_track{height:6px;border-radius:999px;background:var(--raised);overflow:hidden}
.mk_bar_track i{display:block;height:100%;width:0;background:var(--brand-gradient);transition:width .25s var(--ease)}
.mk_ck_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1.5rem 1.25rem;align-items:start}
.mk_cks{display:grid;gap:.6rem}
.mk_cks_h{display:flex;justify-content:space-between;gap:1rem;margin:0;font:600 1.0625rem/1.3 var(--display)}
.mk_cks_n{font:500 .875rem/1.3 var(--font);color:var(--faint)}
.mk_cks[data-who="hajj"] .mk_cks_h{color:var(--gold-ink)}
@media (max-width:40rem){.mk_ck_btns{margin-inline-start:0}}
@media print{
  body:has([data-mk-check]) .section:not(:has([data-mk-check])),body:has([data-mk-check]) .page_head .lede,
  .mk_ck_bar,.mk_ck_sum,.mk_ck_grid .mk_cks_n{display:none!important}
  .mk_ck_grid{display:block;columns:2;column-gap:1.5rem}
  .mk_cks{break-inside:avoid;margin-block-end:.9rem}
  .mk_cks_h{font-size:11pt;margin-block-end:.3rem}
  .mk_ck .ck{gap:0}
  .mk_ck .ck label{padding:.12rem 0;box-shadow:none;background:none;font-size:9.5pt;line-height:1.35}
  .mk_ck .ck label:has(:checked) span{text-decoration:none;color:#000}
  .page_head{padding-block:0 .5rem!important}
  .page_head .h1{font-size:18pt}
  body:has([data-mk-map]) .mk_bar,body:has([data-mk-map]) .mk_chips,body:has([data-mk-map]) .mk_panel{display:none!important}
}
.mk_card a,.mk_panel_in a{color:var(--lapis);text-decoration:underline;text-decoration-color:rgba(29,58,138,.35);text-underline-offset:3px}
.mk_card a:hover,.mk_panel_in a:hover{text-decoration-color:var(--lapis)}