/* Mall of Abayas Dubai - Store selector (mobile first, no JavaScript) */

:root {
  --bg: #14100d;
  --card: #1e1813;
  --card-line: #44372a;
  /* arch outline, used only as a mask so its own colours never reach the screen */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M50 1c0 4-4 6-9 8C18 17 1 31 1 56v85q0 8 8 8h82q8 0 8-8V56c0-25-17-39-40-47-5-2-9-4-9-8z'/%3E%3C/svg%3E");
  --arch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M50 1c0 4-4 6-9 8C18 17 1 31 1 56v85q0 8 8 8h82q8 0 8-8V56c0-25-17-39-40-47-5-2-9-4-9-8z' fill='none' stroke='%23000' stroke-opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  color-scheme: dark;
  --gold: #d4a85e;
  --cream: #f3e9d9;
  --muted: #a89c8c;
  --serif: Marcellus, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Jost, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body, h1, h2, p { margin: 0; }
img { display: block; }

/* oversized, barely visible emblems in the corners */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: max(130vw, 520px);
  max-width: 900px;
  aspect-ratio: 1;
  background: url(assets/images/emblem.png) center / contain no-repeat;
  opacity: .045;
  pointer-events: none;
}
body::before { top: 0; right: 0; transform: translate(42%, -18%); }
body::after { bottom: 0; left: 0; transform: translate(-42%, 30%); }

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 48px 18px 40px;
  text-align: center;
}

/* ---------- Brand ---------- */
.emblem { width: clamp(56px, 16vw, 84px); height: auto; margin: 0 auto; }

h1 {
  margin-top: 18px;
  font: 400 clamp(24px, 7.600vw, 46px)/1.15 var(--serif);
  letter-spacing: .2em;
  text-indent: .2em; /* balances the trailing letter-spacing so the line stays centred */
  text-transform: uppercase;
}
h1 span {
  display: block;
  margin-top: 16px;
  font: 400 clamp(10px, 2.800vw, 13px)/1 var(--sans);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--gold);
}
h1::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin: 18px auto 0;
  background: var(--gold);
}

.prompt {
  margin-top: 20px;
  font-size: clamp(10px, 2.800vw, 13px);
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Store cards ---------- */
.stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3.500vw, 32px);
  width: 100%;
  max-width: 680px;
  margin-top: clamp(30px, 8vw, 52px);
}

.store {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 19% 8px 24px;
  color: inherit;
  text-decoration: none;
  transition: transform .25s;
  -webkit-tap-highlight-color: transparent;
}

/* Pointed-arch card. The colours are plain CSS colours cut to shape with a mask
   (not painted inside an SVG image), because some browsers' forced dark mode
   inverts dark background images and turned the cards light grey. */
.store::before,
.store::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-line);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
  transition: filter .25s;
}
/* the fill sits 1px inside the outline colour; a thin inner line is punched out of it */
.store::after {
  inset: 1px;
  background: var(--card);
  -webkit-mask: var(--arch-line) center / calc(100% - 14px) calc(100% - 14px) no-repeat, var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch-line) center / calc(100% - 14px) calc(100% - 14px) no-repeat, var(--arch) center / 100% 100% no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.store img { width: 30%; max-width: 84px; height: auto; opacity: .38; }

.native {
  margin-top: clamp(40px, 22%, 76px);
  font-size: clamp(13px, 3.600vw, 17px);
  line-height: 1.4;
  color: var(--gold);
}

h2 {
  margin-top: 6px;
  font: 400 clamp(22px, 6.400vw, 34px)/1.1 var(--serif);
  letter-spacing: .08em;
  text-indent: .08em;
  text-transform: uppercase;
}

.note {
  margin-top: 10px;
  font-size: clamp(11px, 2.900vw, 14px);
  letter-spacing: .12em;
  color: var(--muted);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  width: calc(100% - 12px);
  max-width: 210px;
  min-height: 40px;
  margin-top: 16px;
  /* same colour as the fill, so normally invisible; if a browser's forced dark mode
     darkens the fill anyway, the gold outline keeps it looking like a button */
  border: 1px solid var(--gold);
  border-radius: 99px;
  background: var(--gold);
  color: #1a140f;
  font-size: clamp(10px, 2.700vw, 12px);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s;
}
.btn i { font-style: normal; letter-spacing: 0; transition: transform .25s; }

.store:hover { transform: translateY(-4px); }
.store:hover::before, .store:hover::after { filter: brightness(1.25); }
.store:hover .btn, .store:active .btn { background: #e6bf7a; border-color: #e6bf7a; }
.store:hover .btn i { transform: translateX(4px); }
.store:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }

/* ---------- Footer ---------- */
footer {
  margin-top: clamp(30px, 8vw, 52px);
  font-size: clamp(10px, 2.700vw, 12px);
  line-height: 2.2;
  letter-spacing: .26em;
  color: var(--muted);
}
footer p { text-transform: uppercase; }
footer a { color: var(--gold); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Some mobile browsers only skip their forced dark mode when a page has its own
   dark-theme rule, so this block is here on purpose even though it changes nothing. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  html { background: var(--bg); color: var(--cream); }
}

/* very narrow phones: keep the button label inside the pill */
@media (max-width: 359px) {
  .btn { letter-spacing: .14em; }
  .btn i { display: none; }
}

/* short desktop / landscape windows: tighten up so everything fits on one screen */
@media (min-width: 700px) and (max-height: 860px) {
  main { padding: 28px 18px 24px; }
  .stores { max-width: 70vh; margin-top: 32px; }
  footer { margin-top: 26px; }
}
@media (min-width: 700px) and (max-height: 700px) {
  main { padding: 20px 18px 16px; }
  .emblem { width: 56px; }
  h1 { margin-top: 12px; font-size: 34px; }
  .stores { max-width: 62vh; margin-top: 24px; }
  .native { margin-top: 26px; }
  footer { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .store, .store::before, .store::after, .btn, .btn i { transition: none; }
}