/*
Theme Name: MyGuide AE
Theme URI: https://myguide.ae/
Description: MyGuide AE — the United Arab Emirates guide. Child theme of ListingPro: a full design system, a bilingual EN/AR shell, and rebuilt listing, archive and article templates.
Author: MyGuide AE
Template: listingpro
Version: 1.7.1
Text Domain: myguide
*/

/* =========================================================================
   MyGuide AE — design tokens
   Brand comes from the logo, which is also the UAE flag: green + red on white.
   Green is the primary and the rating colour. Red is the accent, used sparingly.
   ========================================================================= */
:root {
  /* brand */
  --mg-green-900: #02301B;
  --mg-green-800: #033D24;
  --mg-green-700: #04502E;
  --mg-green: #046A38;
  --mg-green-500: #0A7E45;
  --mg-green-400: #17A05C;
  --mg-green-100: #E4F0EA;
  --mg-green-50: #F2F8F5;

  --mg-red-800: #8E040D;
  --mg-red-700: #B00510;
  --mg-red: #E30613;
  --mg-red-100: #FCE6E8;
  --mg-red-50: #FEF4F5;

  /* neutrals — every one of these is contrast-checked against its pair */
  --mg-ink: #121417;
  --mg-ink-2: #292E34;
  --mg-ink-3: #4E555E;
  --mg-ink-4: #6B737D;
  --mg-line: #E1E5E9;
  --mg-line-2: #EDF0F2;
  --mg-bg: #FFFFFF;
  --mg-bg-2: #F7F8F9;
  --mg-bg-3: #F0F2F4;
  --mg-ink-inv: #FFFFFF;

  /* support */
  --mg-amber: #8A5A00;
  --mg-amber-100: #FDF2DC;
  --mg-sand: #FAF6EF;

  /* type */
  --mg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --mg-font-ar: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-base: clamp(16px, 0.95rem + 0.15vw, 17px);
  --fs-lg: clamp(18px, 1rem + 0.35vw, 20px);
  --fs-xl: clamp(21px, 1.1rem + 0.7vw, 26px);
  --fs-2xl: clamp(25px, 1.25rem + 1.35vw, 36px);
  --fs-3xl: clamp(30px, 1.4rem + 2.3vw, 50px);

  --lh-tight: 1.18;
  --lh-head: 1.26;
  --lh-body: 1.68;

  /* space — a 4px base scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px;

  /* shape */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(18,20,23,.05), 0 1px 3px rgba(18,20,23,.05);
  --sh-2: 0 2px 6px rgba(18,20,23,.06), 0 8px 20px rgba(18,20,23,.07);
  --sh-3: 0 8px 20px rgba(18,20,23,.10), 0 24px 48px rgba(18,20,23,.09);

  --mg-wrap: 1240px;
  --mg-wrap-narrow: 760px;
  --mg-header-h: 68px;

  --mg-ease: cubic-bezier(.22,.61,.36,1);
}

/* Arabic gets its own metrics. Arabic glyph boxes run ~1.9x the font size, so
   line-heights go up and headings get a touch more size, per house rules. */
html[lang^="ar"] {
  --mg-font: var(--mg-font-ar);
  --lh-tight: 1.42;
  --lh-head: 1.5;
  --lh-body: 1.95;
}

/* =========================================================================
   reset / base
   ========================================================================= */
.mg *, .mg *::before, .mg *::after { box-sizing: border-box; }

body.mg-body {
  font-family: var(--mg-font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--mg-ink-2);
  background: var(--mg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  margin: 0;
  overflow-x: hidden;
}

/* Latin digits everywhere, tabular, so prices and ratings line up in both
   languages. Arabic-Indic digits are never used for money on this site. */
.mg-num, .mg-rating-val, .mg-price, .mg-count, time, .mg-hours td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mg h1, .mg h2, .mg h3, .mg h4, .mg h5 {
  font-family: var(--mg-font);
  color: var(--mg-ink);
  font-weight: 800;
  letter-spacing: -0.021em;
  line-height: var(--lh-head);
  margin: 0 0 var(--s4);
}
html[lang^="ar"] .mg h1, html[lang^="ar"] .mg h2,
html[lang^="ar"] .mg h3, html[lang^="ar"] .mg h4 { letter-spacing: 0; font-weight: 700; }

.mg h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.mg h2 { font-size: var(--fs-2xl); }
.mg h3 { font-size: var(--fs-xl); }
.mg h4 { font-size: var(--fs-lg); }

.mg p { margin: 0 0 var(--s5); }
.mg a { color: var(--mg-green); text-decoration: none; }
.mg a:hover { color: var(--mg-green-700); text-decoration: underline; }
.mg img { max-width: 100%; height: auto; display: block; }

.mg :focus-visible {
  outline: 3px solid var(--mg-green-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.mg-wrap { width: 100%; max-width: var(--mg-wrap); margin-inline: auto; padding-inline: var(--s5); }
.mg-wrap--narrow { max-width: var(--mg-wrap-narrow); }

.mg-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mg-skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--s4);
  z-index: 200; background: var(--mg-green); color: #fff;
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r) var(--r); font-weight: 600;
}
.mg-skip:focus { inset-block-start: 0; color: #fff; }

/* =========================================================================
   buttons
   ========================================================================= */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mg-font); font-size: var(--fs-md); font-weight: 600;
  line-height: 1; padding: 13px var(--s6); border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .16s var(--mg-ease), border-color .16s var(--mg-ease),
              color .16s var(--mg-ease), transform .16s var(--mg-ease), box-shadow .16s var(--mg-ease);
  white-space: nowrap;
}
.mg-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mg-btn:active { transform: translateY(0); }

.mg-btn--primary { background: var(--mg-green); color: #fff; }
.mg-btn--primary:hover { background: var(--mg-green-700); color: #fff; box-shadow: var(--sh-2); }

.mg-btn--accent { background: var(--mg-red); color: #fff; }
.mg-btn--accent:hover { background: var(--mg-red-700); color: #fff; box-shadow: var(--sh-2); }

.mg-btn--ghost { background: #fff; color: var(--mg-ink); border-color: var(--mg-ink); }
.mg-btn--ghost:hover { background: var(--mg-ink); color: #fff; }

.mg-btn--quiet { background: #fff; color: var(--mg-ink-2); border-color: var(--mg-line); }
.mg-btn--quiet:hover { background: var(--mg-bg-2); color: var(--mg-ink); border-color: var(--mg-ink-4); }

.mg-btn--sm { font-size: var(--fs-sm); padding: 9px var(--s4); }
.mg-btn--lg { font-size: var(--fs-base); padding: 16px var(--s7); }
.mg-btn--block { width: 100%; }
.mg-btn svg { width: 18px; height: 18px; flex: none; }

/* =========================================================================
   chips, badges, ratings
   ========================================================================= */
.mg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  padding: 7px var(--s3); border-radius: var(--r-pill);
  background: var(--mg-bg-3); color: var(--mg-ink-2); border: 1px solid transparent;
}
.mg-chip--green { background: var(--mg-green-100); color: var(--mg-green-700); }
.mg-chip--red { background: var(--mg-red-100); color: var(--mg-red-800); }
.mg-chip--amber { background: var(--mg-amber-100); color: var(--mg-amber); }
.mg-chip--outline { background: #fff; border-color: var(--mg-line); color: var(--mg-ink-3); }

.mg-chip-link { transition: background .15s var(--mg-ease), color .15s var(--mg-ease); }
.mg-chip-link:hover { background: var(--mg-ink); color: #fff; text-decoration: none; }

/* rating bubbles — the familiar five-dot row, in brand green */
.mg-rating { display: inline-flex; align-items: center; gap: var(--s2); }
.mg-bubbles { display: inline-flex; gap: 2px; }
.mg-bubbles i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.6px solid var(--mg-green); background: transparent; display: block;
}
.mg-bubbles i.on { background: var(--mg-green); }
.mg-bubbles i.half { background: linear-gradient(90deg, var(--mg-green) 50%, transparent 50%); }
html[dir="rtl"] .mg-bubbles i.half { background: linear-gradient(270deg, var(--mg-green) 50%, transparent 50%); }
.mg-rating-val { font-weight: 700; color: var(--mg-ink); font-size: var(--fs-md); }
.mg-count { color: var(--mg-ink-3); font-size: var(--fs-sm); }

.mg-verdict { font-weight: 700; font-size: var(--fs-sm); }
.mg-verdict--yes { color: var(--mg-green-700); }
.mg-verdict--maybe { color: var(--mg-amber); }
.mg-verdict--free { color: var(--mg-green-700); }

/* =========================================================================
   header
   ========================================================================= */
.mg-header { position: sticky; top: 0; z-index: 120; background: #fff; }
.mg-topbar {
  background: var(--mg-green-900); color: #D9E5DE;
  font-size: var(--fs-xs); line-height: 1;
}
.mg-topbar .mg-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 34px; }
.mg-topbar a { color: #EAF2EE; }
.mg-topbar a:hover { color: #fff; }
.mg-topbar-note { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.mg-topbar-note span { display: inline-flex; align-items: center; gap: 6px; }

.mg-langs { display: inline-flex; align-items: center; gap: 2px; }
.mg-langs a {
  padding: 5px var(--s3); border-radius: var(--r-pill); font-weight: 600;
  border: 1px solid transparent;
}
.mg-langs a.on { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); color: #fff; }

.mg-bar {
  border-bottom: 1px solid var(--mg-line);
  background: #fff;
}
.mg-bar .mg-wrap {
  display: flex; align-items: center; gap: var(--s5); min-height: var(--mg-header-h);
}
.mg-logo { flex: none; display: flex; align-items: center; }
.mg-logo img { height: 34px; width: auto; }

.mg-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s4); }
.mg-nav > li { position: relative; list-style: none; }
.mg-nav > li > a, .mg-nav > li > button {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-md); font-weight: 600; color: var(--mg-ink);
  padding: 10px var(--s3); border-radius: var(--r); background: none; border: 0;
  cursor: pointer; font-family: var(--mg-font); line-height: 1.2;
}
.mg-nav > li > a:hover, .mg-nav > li > button:hover,
.mg-nav > li.open > button { background: var(--mg-bg-3); color: var(--mg-ink); text-decoration: none; }
.mg-nav .caret { width: 10px; height: 10px; transition: transform .18s var(--mg-ease); }
.mg-nav li.open .caret { transform: rotate(180deg); }

/* mega panel */
.mg-mega {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px);
  min-width: 640px; background: #fff; border: 1px solid var(--mg-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--mg-ease), transform .18s var(--mg-ease), visibility .18s;
  z-index: 130;
}
.mg-nav li.open > .mg-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mg-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s5) var(--s6); }
.mg-mega h5 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  color: var(--mg-ink-4); margin: 0 0 var(--s3); font-weight: 700;
}
html[lang^="ar"] .mg-mega h5 { text-transform: none; letter-spacing: 0; }
.mg-mega ul { list-style: none; margin: 0; padding: 0; }
.mg-mega li + li { margin-top: 2px; }
.mg-mega li a {
  display: block; padding: 5px 8px; margin-inline-start: -8px; border-radius: var(--r-sm);
  color: var(--mg-ink-2); font-size: var(--fs-md); font-weight: 500;
}
.mg-mega li a:hover { background: var(--mg-green-50); color: var(--mg-green-700); text-decoration: none; }
.mg-mega li a small { display: block; color: var(--mg-ink-4); font-size: var(--fs-xs); font-weight: 400; }
.mg-mega-foot {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--mg-line-2);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
}

.mg-bar-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); flex: none; }
.mg-iconbtn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--mg-ink-2);
}
.mg-iconbtn:hover { background: var(--mg-bg-3); color: var(--mg-ink); }
.mg-iconbtn svg { width: 21px; height: 21px; }

.mg-burger { display: none; }

/* header search */
.mg-hsearch { position: relative; flex: 1 1 260px; max-width: 340px; }
.mg-hsearch input {
  width: 100%; height: 42px; border-radius: var(--r-pill); border: 1.5px solid var(--mg-line);
  padding-inline: 42px var(--s4); font-family: var(--mg-font); font-size: var(--fs-md);
  color: var(--mg-ink); background: var(--mg-bg-2);
}
.mg-hsearch input::placeholder { color: var(--mg-ink-4); }
.mg-hsearch input:focus { background: #fff; border-color: var(--mg-ink); outline: none; box-shadow: var(--sh-1); }
.mg-hsearch svg {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--mg-ink-4); pointer-events: none;
}

/* mobile drawer */
.mg-drawer[hidden] { display: none !important; }
.mg-drawer {
  position: fixed; inset: 0; z-index: 200; background: #fff;
  transform: translateX(-100%); transition: transform .26s var(--mg-ease);
  display: flex; flex-direction: column; overflow-y: auto;
}
html[dir="rtl"] .mg-drawer { transform: translateX(100%); }
.mg-drawer.open { transform: translateX(0); }
.mg-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--mg-line); position: sticky; top: 0; background: #fff;
}
.mg-drawer-body { padding: var(--s5); }
.mg-drawer details { border-bottom: 1px solid var(--mg-line-2); }
.mg-drawer summary {
  list-style: none; cursor: pointer; padding: var(--s4) 0;
  font-weight: 700; font-size: var(--fs-lg); color: var(--mg-ink);
  display: flex; align-items: center; justify-content: space-between;
}
.mg-drawer summary::-webkit-details-marker { display: none; }
.mg-drawer summary::after { content: '+'; font-weight: 400; font-size: 22px; color: var(--mg-ink-4); }
.mg-drawer details[open] summary::after { content: '\2212'; }
.mg-drawer details ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.mg-drawer details li a { display: block; padding: 9px 0; color: var(--mg-ink-2); font-size: var(--fs-md); }

/* =========================================================================
   cards
   ========================================================================= */
.mg-grid { display: grid; gap: var(--s5); }
.mg-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mg-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mg-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mg-grid > br { display: none; }   /* wpautop guard — see house rules */

.mg-card {
  position: relative; background: #fff; border: 1px solid var(--mg-line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s var(--mg-ease), transform .2s var(--mg-ease), border-color .2s var(--mg-ease);
}
.mg-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--mg-line-2); }
.mg-card-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mg-bg-3); }
.mg-card-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--mg-ease); }
.mg-card:hover .mg-card-ph img { transform: scale(1.045); }
.mg-card-bd { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.mg-card-title { font-size: var(--fs-lg); font-weight: 700; color: var(--mg-ink); margin: 0; line-height: 1.32; }
.mg-card-meta { font-size: var(--fs-sm); color: var(--mg-ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg-card-desc { font-size: var(--fs-md); color: var(--mg-ink-3); margin: 0; line-height: 1.6; }
.mg-card-foot { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* the whole card is clickable, but the anchor only ever wraps inline content —
   an <a> around a <div> is what breaks under wpautop. */
.mg-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mg-card .mg-chip-link { position: relative; z-index: 2; }

.mg-flag {
  position: absolute; inset-block-start: var(--s3); inset-inline-start: var(--s3);
  z-index: 2; background: rgba(255,255,255,.96); color: var(--mg-ink);
  font-size: var(--fs-xs); font-weight: 700; padding: 6px var(--s3);
  border-radius: var(--r-pill); box-shadow: var(--sh-1);
}
.mg-save {
  position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s3);
  z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.94); color: var(--mg-ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-1);
}
.mg-save:hover { background: #fff; color: var(--mg-red); }
.mg-card .mg-save { z-index: 3; }
.mg-save[aria-pressed="true"] { color: var(--mg-red); }
.mg-save[aria-pressed="true"] svg { fill: var(--mg-red); }
.mg-save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* wide list row — used on archives */
.mg-row {
  position: relative; display: grid; grid-template-columns: 260px 1fr;
  gap: var(--s5); background: #fff; border: 1px solid var(--mg-line);
  border-radius: var(--r-lg); overflow: hidden; padding: var(--s4);
  transition: box-shadow .2s var(--mg-ease), border-color .2s var(--mg-ease);
}
.mg-row:hover { box-shadow: var(--sh-2); }
.mg-row-ph { aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; background: var(--mg-bg-3); position: relative; }
.mg-row-ph img { width: 100%; height: 100%; object-fit: cover; }
.mg-row-bd { display: flex; flex-direction: column; gap: var(--s2); padding-block: var(--s2); }

/* =========================================================================
   section rhythm
   ========================================================================= */
.mg-sec { padding-block: var(--s10); }
.mg-sec--tight { padding-block: var(--s8); }
.mg-sec--alt { background: var(--mg-bg-2); }
.mg-sec--sand { background: var(--mg-sand); }
.mg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap; }
.mg-head h2 { margin: 0 0 var(--s2); }
.mg-head p { margin: 0; color: var(--mg-ink-3); font-size: var(--fs-md); max-width: 62ch; }
.mg-head-link { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; }
.mg-eyebrow {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mg-green); margin: 0 0 var(--s2);
}
html[lang^="ar"] .mg-eyebrow { letter-spacing: 0; text-transform: none; }

/* =========================================================================
   listing page
   ========================================================================= */
.mg-crumbs { font-size: var(--fs-sm); color: var(--mg-ink-3); padding-block: var(--s4); }
.mg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mg-crumbs li::after { content: '/'; margin-inline-start: 6px; color: var(--mg-line); }
.mg-crumbs li:last-child::after { content: ''; }
.mg-crumbs a { color: var(--mg-ink-3); }
.mg-crumbs a:hover { color: var(--mg-green); }
.mg-crumbs [aria-current] { color: var(--mg-ink); font-weight: 600; }

.mg-lhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.mg-lhead h1 { margin: 0 0 var(--s3); }
.mg-lhead-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-md); color: var(--mg-ink-3); }
.mg-lhead-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mg-ink-4); }
.mg-lhead-acts { display: flex; gap: var(--s2); flex: none; }

/* gallery: one hero + a 2x2 of thumbs */
.mg-gal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21/9; position: relative; background: var(--mg-bg-3); }
.mg-gal a { display: block; overflow: hidden; background: var(--mg-bg-3); }
.mg-gal a:first-child { grid-row: span 2; }
.mg-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--mg-ease); }
.mg-gal a:hover img { transform: scale(1.04); }
.mg-gal--one { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16/7; }
.mg-gal--one a:first-child { grid-row: auto; }
.mg-gal-all {
  position: absolute; inset-block-end: var(--s4); inset-inline-end: var(--s4); z-index: 3;
  background: rgba(255,255,255,.96); color: var(--mg-ink); font-weight: 700; font-size: var(--fs-sm);
  padding: 9px var(--s4); border-radius: var(--r-pill); box-shadow: var(--sh-1);
}

.mg-split { display: grid; grid-template-columns: minmax(0,1fr) 344px; gap: var(--s9); align-items: start; }
.mg-rail { position: sticky; top: calc(var(--mg-header-h) + var(--s5)); display: flex; flex-direction: column; gap: var(--s5); }

.mg-panel { border: 1px solid var(--mg-line); border-radius: var(--r-lg); padding: var(--s6); background: #fff; }
.mg-panel--tint { background: var(--mg-green-50); border-color: var(--mg-green-100); }
.mg-panel h3 { font-size: var(--fs-lg); margin: 0 0 var(--s4); }

.mg-block { padding-block: var(--s7); border-top: 1px solid var(--mg-line-2); }
.mg-block:first-child { border-top: 0; padding-top: 0; }
.mg-block h2 { font-size: var(--fs-xl); margin-bottom: var(--s4); }

/* facts — the "what it costs / how long / when" strip */
.mg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--s4); }
.mg-fact { border: 1px solid var(--mg-line); border-radius: var(--r); padding: var(--s4) var(--s5); background: #fff; }
.mg-fact dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mg-ink-4); margin: 0 0 5px; }
html[lang^="ar"] .mg-fact dt { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.mg-fact dd { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--mg-ink); }

/* amenities */
.mg-amen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--s3) var(--s5); list-style: none; margin: 0; padding: 0; }
.mg-amen li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-md); color: var(--mg-ink-2); }
.mg-amen svg { width: 18px; height: 18px; color: var(--mg-green); flex: none; }

/* opening hours */
.mg-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.mg-hours th, .mg-hours td { text-align: start; padding: 9px 0; border-bottom: 1px solid var(--mg-line-2); }
.mg-hours th { font-weight: 500; color: var(--mg-ink-3); }
.mg-hours td { font-weight: 600; color: var(--mg-ink); text-align: end; }
.mg-hours tr.today th, .mg-hours tr.today td { color: var(--mg-green-700); font-weight: 700; }
.mg-open-now { font-weight: 700; color: var(--mg-green-700); }
.mg-closed-now { font-weight: 700; color: var(--mg-red-800); }

/* map */
.mg-map { aspect-ratio: 16/10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--mg-line); background: var(--mg-bg-3); }
.mg-map iframe, .mg-map img { width: 100%; height: 100%; border: 0; display: block; }

/* faq */
.mg-faq details { border: 1px solid var(--mg-line); border-radius: var(--r); margin-bottom: var(--s3); background: #fff; }
.mg-faq summary {
  cursor: pointer; list-style: none; padding: var(--s4) var(--s5);
  font-weight: 700; color: var(--mg-ink); font-size: var(--fs-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: '+'; color: var(--mg-ink-4); font-size: 20px; font-weight: 400; flex: none; }
.mg-faq details[open] summary::after { content: '\2212'; }
.mg-faq-a { padding: 0 var(--s5) var(--s5); color: var(--mg-ink-3); }
.mg-faq-a p:last-child { margin-bottom: 0; }

/* =========================================================================
   article
   ========================================================================= */
.mg-article { max-width: 720px; }
.mg-article p, .mg-article li { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--mg-ink-2); }
.mg-article h2 { font-size: var(--fs-2xl); margin-top: var(--s9); }
.mg-article h3 { font-size: var(--fs-xl); margin-top: var(--s7); }
.mg-article ul, .mg-article ol { padding-inline-start: var(--s6); margin-bottom: var(--s5); }
.mg-article li { margin-bottom: var(--s2); }
.mg-article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.mg-article img { border-radius: var(--r); margin-block: var(--s6); }
.mg-article blockquote {
  margin: var(--s6) 0; padding: var(--s5) var(--s6);
  border-inline-start: 4px solid var(--mg-green); background: var(--mg-green-50);
  border-radius: 0 var(--r) var(--r) 0; color: var(--mg-ink-2);
}
html[dir="rtl"] .mg-article blockquote { border-radius: var(--r) 0 0 var(--r); }
.mg-article table { width: 100%; border-collapse: collapse; margin-block: var(--s6); font-size: var(--fs-md); }
.mg-article th, .mg-article td { border: 1px solid var(--mg-line); padding: var(--s3) var(--s4); text-align: start; }
.mg-article th { background: var(--mg-bg-2); font-weight: 700; color: var(--mg-ink); }

.mg-byline { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--mg-ink-3); }
.mg-byline strong { color: var(--mg-ink); font-weight: 600; }
.mg-verified {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: var(--mg-green-700); background: var(--mg-green-50);
  padding: 5px var(--s3); border-radius: var(--r-pill); font-size: var(--fs-xs);
}

.mg-toc { border: 1px solid var(--mg-line); border-radius: var(--r-lg); padding: var(--s5) var(--s6); background: var(--mg-bg-2); margin-block: var(--s6); }
.mg-toc h4 { font-size: var(--fs-md); margin: 0 0 var(--s3); }
.mg-toc ol { margin: 0; padding-inline-start: var(--s5); }
.mg-toc li { margin-bottom: 6px; font-size: var(--fs-md); }

/* =========================================================================
   footer
   ========================================================================= */
.mg-footer { background: var(--mg-green-900); color: #C9D8D1; padding-block: var(--s10) var(--s7); margin-top: var(--s10); }
.mg-footer h4 { color: #fff; font-size: var(--fs-md); margin: 0 0 var(--s4); font-weight: 700; }
.mg-footer a { color: #C9D8D1; font-size: var(--fs-md); }
.mg-footer a:hover { color: #fff; }
.mg-footer ul { list-style: none; margin: 0; padding: 0; }
.mg-footer li { margin-bottom: 9px; }
.mg-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s7) var(--s6); }
.mg-footer-about p { font-size: var(--fs-md); color: #B7C9C1; max-width: 40ch; }
.mg-footer-bottom {
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: #A9BDB4;
}
.mg-footer-bottom a { font-size: var(--fs-sm); }

/* =========================================================================
   responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .mg-split { grid-template-columns: 1fr; gap: var(--s7); }
  .mg-rail { position: static; }
  .mg-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .mg-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 940px) {
  .mg-nav, .mg-hsearch { display: none; }
  .mg-burger { display: inline-flex; }
  .mg-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mg-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mg-gal { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16/9; }
  .mg-gal a:not(:first-child) { display: none; }
  .mg-gal a:first-child { grid-row: auto; }
}
@media (max-width: 720px) {
  :root { --mg-header-h: 60px; }
  .mg-sec { padding-block: var(--s8); }
  .mg-grid--4, .mg-grid--3, .mg-grid--2 { grid-template-columns: 1fr; }
  .mg-row { grid-template-columns: 1fr; }
  .mg-footer-grid { grid-template-columns: 1fr 1fr; }
  .mg-lhead-acts { width: 100%; }
  .mg-topbar-note span:not(:first-child) { display: none; }
}
@media (max-width: 460px) {
  .mg-footer-grid { grid-template-columns: 1fr; }
  .mg-wrap { padding-inline: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* print */
@media print {
  .mg-header, .mg-footer, .mg-rail, .mg-save, .mg-drawer { display: none !important; }
  .mg-split { grid-template-columns: 1fr; }
}

/* =========================================================================
   components for the hero, listing and archive templates
   ========================================================================= */

.mg-header.is-stuck .mg-bar { box-shadow: 0 1px 0 var(--mg-line), var(--sh-1); }

@media (max-width: 780px) { .mg-hide-sm { display: none !important; } }

/* photo fallback — a listing with no image gets a branded plate, never the
   parent theme PLACE HOLDER IMAGE bitmap */
.mg-ph-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mg-green-50) 0%, var(--mg-green-100) 100%);
  color: var(--mg-green-700);
}
.mg-ph-fallback span {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .85; padding: 0 var(--s4); text-align: center;
}
html[lang^="ar"] .mg-ph-fallback span { text-transform: none; letter-spacing: 0; }

/* -------------------------------------------------------------- hero */
.mg-hero { position: relative; background: var(--mg-green-900); color: #fff; overflow: hidden; }
.mg-hero-bg { position: absolute; inset: 0; }
.mg-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.mg-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,48,27,.94) 0%, rgba(2,48,27,.74) 42%, rgba(2,48,27,.20) 100%);
}
.mg-hero-in { position: relative; z-index: 2; padding-block: var(--s11) var(--s10); max-width: 760px; }
.mg-hero h1 { color: #fff; margin-bottom: var(--s4); }
.mg-hero p.lede { font-size: var(--fs-lg); color: #DCEAE3; margin-bottom: var(--s7); max-width: 58ch; }

.mg-searchbar {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 0;
  background: #fff; border-radius: var(--r-pill); padding: 7px;
  box-shadow: var(--sh-3); max-width: 720px;
}
.mg-searchbar .f { padding: 8px var(--s5); border-inline-end: 1px solid var(--mg-line); min-width: 0; }
.mg-searchbar .f:last-of-type { border-inline-end: 0; }
.mg-searchbar label {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mg-ink-4); margin-bottom: 2px;
}
html[lang^="ar"] .mg-searchbar label { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.mg-searchbar input, .mg-searchbar select {
  width: 100%; border: 0; padding: 0; font-family: var(--mg-font);
  font-size: var(--fs-md); color: var(--mg-ink); background: none; outline: none;
}
.mg-searchbar input::placeholder { color: var(--mg-ink-4); }
.mg-searchbar .mg-btn { border-radius: var(--r-pill); }
@media (max-width: 720px) {
  .mg-searchbar { grid-template-columns: 1fr; border-radius: var(--r-lg); gap: 2px; }
  .mg-searchbar .f { border-inline-end: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-searchbar .mg-btn { width: 100%; margin-top: 6px; }
  .mg-hero-in { padding-block: var(--s8); }
  .mg-hero-shade { background: linear-gradient(180deg, rgba(2,48,27,.80) 0%, rgba(2,48,27,.94) 100%); }
}

.mg-quick { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); align-items: center; }
.mg-quick > span { font-size: var(--fs-sm); color: #B7CFC3; margin-inline-end: var(--s2); }
.mg-quick a {
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
  border: 1px solid rgba(255,255,255,.32); padding: 7px var(--s4);
  border-radius: var(--r-pill); background: rgba(255,255,255,.08);
}
.mg-quick a:hover { background: #fff; color: var(--mg-green-900); text-decoration: none; }

/* ------------------------------------------------------------ trust strip */
.mg-trust { background: var(--mg-green-50); border-block: 1px solid var(--mg-green-100); }
.mg-trust ul {
  list-style: none; margin: 0; padding: var(--s4) 0; display: flex;
  gap: var(--s7); flex-wrap: wrap; justify-content: center;
  font-size: var(--fs-sm); color: var(--mg-green-700);
}
.mg-trust li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mg-trust svg { width: 16px; height: 16px; flex: none; }

/* -------------------------------------------------------------- filters */
.mg-filters {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
  padding: var(--s4) 0; border-bottom: 1px solid var(--mg-line); margin-bottom: var(--s6);
}
.mg-filters select {
  font-family: var(--mg-font); font-size: var(--fs-md); font-weight: 600;
  color: var(--mg-ink); background: #fff; border: 1.5px solid var(--mg-line);
  border-radius: var(--r-pill); padding: 9px var(--s4); cursor: pointer;
}
.mg-filters select:hover { border-color: var(--mg-ink-4); }
.mg-filters .count { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--mg-ink-3); }

/* ------------------------------------------------------------ pagination */
.mg-pager { display: flex; gap: 6px; justify-content: center; margin-top: var(--s8); flex-wrap: wrap; }
.mg-pager .page-numbers {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--mg-line); color: var(--mg-ink-2);
  font-weight: 600; font-size: var(--fs-md); padding: 0 var(--s3);
}
.mg-pager .page-numbers:hover { border-color: var(--mg-ink); color: var(--mg-ink); text-decoration: none; }
.mg-pager .page-numbers.current { background: var(--mg-green); border-color: var(--mg-green); color: #fff; }

/* ----------------------------------------------------------- empty state */
.mg-empty {
  text-align: center; padding: var(--s10) var(--s5);
  border: 1px dashed var(--mg-line); border-radius: var(--r-lg); background: var(--mg-bg-2);
}
.mg-empty h3 { margin-bottom: var(--s3); }
.mg-empty p { color: var(--mg-ink-3); max-width: 46ch; margin-inline: auto; }

/* -------------------------------------------------------------- lightbox */
.mg-lightbox[hidden] { display: none !important; }
.mg-lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(10,12,14,.94);
  display: flex; align-items: center; justify-content: center; padding: var(--s6);
}
.mg-lightbox figure { margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; }
.mg-lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--r); }
.mg-lightbox figcaption { color: #C9D2DA; text-align: center; margin-top: var(--s4); font-size: var(--fs-sm); }
.mg-lightbox button {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}
.mg-lightbox button:hover { background: rgba(255,255,255,.24); }
.mg-lb-close { top: var(--s5); inset-inline-end: var(--s5); }
.mg-lb-prev { inset-inline-start: var(--s5); top: 50%; transform: translateY(-50%); }
.mg-lb-next { inset-inline-end: var(--s5); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .mg-lb-prev, .mg-lb-next { display: none; } }

/* ------------------------------------------------------------- rail card */
.mg-railcard { border: 1px solid var(--mg-line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-1); }
.mg-railcard-top { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--mg-line-2); }
.mg-railcard-top .mg-price { font-size: var(--fs-xl); font-weight: 800; color: var(--mg-ink); display: block; }
.mg-railcard-top .sub { font-size: var(--fs-sm); color: var(--mg-ink-3); }
.mg-railcard-body { padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.mg-railcard-body .mg-btn { width: 100%; }
.mg-contact-row { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--fs-md); color: var(--mg-ink-2); padding-block: 4px; }
.mg-contact-row svg { width: 18px; height: 18px; color: var(--mg-ink-4); flex: none; margin-top: 3px; }
.mg-contact-row a { word-break: break-word; }

/* --------------------------------------------------------------- notices */
.mg-note {
  font-size: var(--fs-sm); color: var(--mg-ink-3); background: var(--mg-bg-2);
  border: 1px solid var(--mg-line); border-radius: var(--r); padding: var(--s4) var(--s5);
}
.mg-note strong { color: var(--mg-ink-2); }
.mg-source-list { font-size: var(--fs-sm); color: var(--mg-ink-3); }
.mg-source-list a { color: var(--mg-ink-3); text-decoration: underline; }

/* --------------------------------------------------------------- tabs */
.mg-tabs { display: flex; gap: var(--s6); border-bottom: 1px solid var(--mg-line); margin-bottom: var(--s6); overflow-x: auto; }
.mg-tabs a {
  padding: var(--s4) 0; font-weight: 700; font-size: var(--fs-md); color: var(--mg-ink-3);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.mg-tabs a:hover { color: var(--mg-ink); text-decoration: none; }
.mg-tabs a.on { color: var(--mg-green-700); border-bottom-color: var(--mg-green); }

/* =========================================================================
   MG-FIX-SPECIFICITY
   `.mg a` is (0,1,1); every button variant was a bare class at (0,1,0), so an
   anchor styled as a button inherited the link colour and rendered green on
   green — invisible. Screenshots hid it because the buttons that were visible
   happened to be <button> elements. Naming the element restores the colour.
   ========================================================================= */
.mg a.mg-btn--primary,
.mg a.mg-btn--primary:hover,
.mg a.mg-btn--accent,
.mg a.mg-btn--accent:hover { color: #fff; }

.mg a.mg-btn--ghost { color: var(--mg-ink); }
.mg a.mg-btn--ghost:hover { color: #fff; }

.mg a.mg-btn--quiet { color: var(--mg-ink-2); }
.mg a.mg-btn--quiet:hover { color: var(--mg-ink); }

.mg a.mg-skip,
.mg a.mg-skip:focus { color: #fff; }

.mg a.mg-chip { color: var(--mg-ink-2); }
.mg a.mg-chip--green { color: var(--mg-green-700); }
.mg a.mg-chip-link:hover { color: #fff; }

.mg-sec a.mg-btn[style*="background:#fff"] { color: var(--mg-green-900) !important; }

/* =========================================================================
   MG-FIX-TAPTARGETS
   WCAG 2.2 asks for 24x24 CSS px. Stacked navigation links measured 19px tall
   on a phone, and the hero search controls only 19–21px.
   ========================================================================= */
@media (max-width: 767px) {
  .mg-footer li a,
  .mg-drawer details li a,
  .mg-mega li a,
  .mg-topbar a,
  .mg-langs a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  .mg-footer li { margin-bottom: 4px; }
  .mg-searchbar input,
  .mg-searchbar select { min-height: 26px; }
  .mg-searchbar .f { padding-block: 12px; }
  .mg-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
  .mg-quick a { min-height: 32px; display: inline-flex; align-items: center; }
}

/* =========================================================================
   MG-FIX-OUTLINE
   The mega panel used <h5> for its column labels, which put twelve headings
   ahead of the page <h1>. They are labels, not sections.
   ========================================================================= */
.mg-mega .mg-mega-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mg-ink-4);
  margin: 0 0 var(--s3);
  font-weight: 700;
}
html[lang^="ar"] .mg-mega .mg-mega-label { text-transform: none; letter-spacing: 0; }
.mg-mega .mg-mega-label a { color: inherit; }
.mg-mega .mg-mega-label a:hover { color: var(--mg-green-700); }

/* Footer column headings are h2 so the outline does not jump h2 -> h4, but they
   must not look like page headings. */
.mg-footer .mg-foot-h {
  color: #fff;
  font-size: var(--fs-md);
  margin: 0 0 var(--s4);
  font-weight: 700;
  letter-spacing: 0;
}

/* =========================================================================
   MG-FIX-TOPBAR
   The top bar and trust strip inherited #7f7f7f from the parent stack, giving
   3.64:1 on the dark green band. Set the colours on the elements themselves so
   nothing upstream can reach them.
   ========================================================================= */
.mg-topbar,
.mg-topbar .mg-topbar-note,
.mg-topbar .mg-topbar-note span,
.mg-topbar .mg-topbar-note svg { color: #CBDED4; }
.mg-topbar a, .mg-langs a { color: #EAF2EE; }
.mg-langs a.on { color: #fff; }

.mg-trust li, .mg-trust li svg { color: var(--mg-green-700); }

.mg-hero .lede, .mg-hero p.lede { color: #DCEAE3; }
.mg-quick > span { color: #C3D8CC; }

/* Visually-hidden labels are clipped to a single pixel and exist only for
   assistive tech; give them an inherited colour so automated contrast passes
   do not report them as failures. */
.mg-sr { color: inherit; }

/* =========================================================================
   MG-FIX-SPANS
   Something upstream sets a global span colour (#7f7f7f), which leaked into
   every unclassed <span> — card meta lines at 4.00:1 on white and the footer
   legal line at 3.64:1 on dark green. Unclassed spans should inherit; the ones
   that carry a class already set their own colour.
   ========================================================================= */
.mg span:not([class]) { color: inherit; }

.mg-card-meta, .mg-card-meta span { color: var(--mg-ink-3); }
.mg-footer-bottom, .mg-footer-bottom span { color: #B9CEC4; }
.mg-footer-bottom a { color: #DCE9E3; }

/* The legal line wraps to several links on a phone; give them a real target. */
@media (max-width: 767px) {
  .mg-footer-bottom a { display: inline-flex; align-items: center; min-height: 24px; }
  .mg-footer-bottom { gap: var(--s3); }
}

/* =========================================================================
   MG-FIX-TAPTARGETS-2
   The remaining sub-24px targets on a phone were the standalone links in the
   footer about-block. Inline links inside a paragraph of text are exempt from
   the WCAG 2.2 target-size rule and are deliberately left alone.
   ========================================================================= */
@media (max-width: 767px) {
  .mg-footer-about a,
  .mg-footer-about p a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  .mg-langs a { min-width: 32px; justify-content: center; }
}

/* ---- MG-IMAGE-CREDIT ---------------------------------------------------
   Attribution under a Commons photo. Small and quiet, but present: CC BY-SA
   is not satisfied by a credit that only exists in the media library. */
.mg .mg-credit,
.mg-credit {
	margin: 8px 0 0;
	font-size: var(--fs-sm);
	color: var(--mg-ink-4);
	line-height: 1.6;
}
.mg .mg-credit a,
.mg-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mg .mg-credit a:hover,
.mg-credit a:hover { color: var(--mg-ink-2); }

/* ---- MG-FIX-TAPTARGETS-3 ------------------------------------------------
   WCAG 2.2 target size, found only under a mobile user agent and only in
   Arabic: a short word like «دبي» is 16–18px wide where "Dubai" clears 24
   on its own, so the English pass reported clean. Padding grows the hit
   box; the negative margin keeps the text where it was drawn. */
.mg .mg-crumbs ol li a,
.mg nav ol li a {
	padding: 4px 6px;
	margin: -4px -6px;
}
.mg .mg-footer ul li a {
	padding: 4px 5px;
	margin: -4px -5px;
}
/* Inline links in a sentence: vertical padding only, so wrapping is unchanged. */
.mg .mg-credit a,
.mg .mg-source-list a,
.mg .mg-note a,
.mg .mg-article p a,
.mg .mg-article li a {
	padding-block: 5px;
}

/* ---- MG-FIX-TAPTARGETS-4 ------------------------------------------------
   The last small targets, all of them desktop-only: two inline links in the
   footer, the OpenStreetMap attribution, and the mega-menu labels — which
   measure 18px tall the moment the panel is hovered open. */
.mg .mg-footer-about p a,
.mg .mg-footer-bottom a {
	padding-block: 5px;
}
.mg .mg-mega-label a,
.mg .mg-mega-grid a {
	padding-block: 4px;
}

/* Hero search controls: the select rendered 21px tall, under the 24px floor. */
.mg .mg-hero select,
.mg .mg-hero input,
.mg .mg-search select,
.mg .mg-search input {
	min-height: 26px;
}

/* ---------------------------------------------------------------------------
 * 2026-09-05 — data pages for unreviewed places, and distance-based neighbours.
 * ------------------------------------------------------------------------ */

.mg-note--pending{
	background:var(--mg-soft,#F6F7F8);
	border:1px solid var(--mg-line,#E2E5E9);
	border-inline-start:4px solid #B8860B;
	border-radius:8px;
	padding:16px 20px;
}
.mg-note--pending p{margin:0 0 10px}
.mg-note--pending p:last-child{margin-bottom:0}

.mg-head-sub{
	margin:4px 0 0;
	font-size:var(--fs-sm,14px);
	color:var(--mg-ink-4,#697A70);
}

.mg-card--near{
	position:relative;
	background:#fff;
	border:1px solid var(--mg-line,#E2E5E9);
	border-radius:10px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
.mg-card--near .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--mg-soft,#F6F7F8)}
.mg-card--near .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mg-card--near .bd{padding:14px 16px}
.mg-card--near h3{margin:0 0 6px;font-size:16px;line-height:1.45}
.mg-card--near h3 a{color:inherit;text-decoration:none}
.mg-card--near h3 a:hover{text-decoration:underline}
.mg-card-meta{
	margin:0;
	font-size:13.5px;
	color:var(--mg-ink-4,#55595E);
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
}
.mg-dist{
	font-weight:600;
	color:#046A38;
	white-space:nowrap;
}

.mg-flag--pending{
	background:rgba(28,30,33,.72);
	color:#fff;
	font-weight:500;
	inset-inline-start:auto;
	inset-inline-end:12px;
}

/* ---------------------------------------------------------------------------
 * Category tiles for places we have no photograph of.
 *
 * 248 listings have no picture and no free source has one — a single grey tile
 * repeated down an archive reads as a broken page. These are tinted per
 * category so a grid looks deliberate, and they carry the category name rather
 * than pretending to be a photograph of the venue.
 * ------------------------------------------------------------------------ */

.mg-ph-fallback{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	min-height:150px;
	background:#EDF1EC;
	color:#2B4438;
	overflow:hidden;
}
.mg-ph-fallback::after{
	content:"";
	position:absolute;
	inset:0;
	background-image:
		repeating-linear-gradient(135deg, rgba(255,255,255,.30) 0 2px, transparent 2px 11px);
	opacity:.55;
}
.mg-ph-fallback span{
	position:relative;
	z-index:1;
	font-weight:600;
	font-size:15px;
	letter-spacing:.01em;
	text-align:center;
	padding:0 14px;
	opacity:.82;
}
.mg-ph--restaurants{background:#E7EFE7;color:#28503A}
.mg-ph--cafes{background:#F1EBE2;color:#5A4526}
.mg-ph--hotels{background:#E4EBF2;color:#254159}
.mg-ph--shopping{background:#F2E9EC;color:#5B2B38}
.mg-ph--attractions{background:#E6EEF0;color:#1F4750}
.mg-ph--activities{background:#EAF0E4;color:#3A4C24}
.mg-ph--beaches{background:#E2EFF1;color:#1D4E56}
.mg-ph--nightlife{background:#E9E6F0;color:#3A2F58}
.mg-ph--family-kids{background:#F3EDE1;color:#5B4520}
.mg-ph--spa-wellness{background:#E9F0EC;color:#2A5040}

.mg-sources{
	margin:40px 0 0;
	padding:22px 24px;
	background:var(--mg-soft,#F6F7F8);
	border:1px solid var(--mg-line,#E2E5E9);
	border-radius:10px;
}
.mg-sources h2{margin:0 0 6px;font-size:19px}
.mg-sources-note{margin:0 0 14px;font-size:14.5px;color:var(--mg-ink-4,#55595E);max-width:62ch}
.mg-sources ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.mg-sources li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:15px;line-height:1.6}
.mg-sources li a{color:#046A38;text-decoration:underline;text-underline-offset:3px}
.mg-src-host{font-size:12.5px;color:var(--mg-ink-4,#697A70);direction:ltr;unicode-bidi:isolate}

/* ---------------------------------------------------------------------------
 * The submission form. Replaces ListingPro's submit app — no TinyMCE, no
 * select2, no jQuery UI, no moment.js. Native controls throughout.
 * ------------------------------------------------------------------------ */

.mg-form{max-width:760px;margin:0 auto}
.mg-form fieldset{border:1px solid var(--mg-line,#E2E5E9);border-radius:10px;padding:20px 22px 8px;margin:0 0 22px}
.mg-form legend{font-family:inherit;font-weight:700;font-size:15px;padding:0 8px;color:var(--mg-ink,#1C1E21)}
.mg-f{margin:0 0 18px}
.mg-f label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--mg-ink-2,#3C4B43)}
.mg-f input[type=text],.mg-f input[type=tel],.mg-f input[type=url],.mg-f input[type=email],.mg-f select,.mg-f textarea{
	width:100%;padding:11px 13px;font:inherit;font-size:16px;color:var(--mg-ink,#1C1E21);
	background:#fff;border:1px solid var(--mg-line,#D9DEE3);border-radius:8px;min-height:44px;
}
.mg-f textarea{min-height:150px;line-height:1.7;resize:vertical}
.mg-f input:focus,.mg-f select:focus,.mg-f textarea:focus{outline:2px solid #046A38;outline-offset:1px;border-color:#046A38}
.mg-f input[type=file]{width:100%;font-size:15px;padding:10px 0}
.mg-f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}
.mg-f-hint{display:block;font-size:13.5px;line-height:1.6;color:var(--mg-ink-4,#5A6B61);margin-top:6px}
.mg-f-err{display:block;font-size:13.5px;font-weight:600;color:#B3141F;margin-top:6px}
.mg-f-alert{background:#FBE7E8;border:1px solid #F0C4C7;color:#8E1018;border-radius:8px;padding:12px 16px;font-weight:600;margin:0 0 20px}
.mg-f-check{margin:0 0 18px}
.mg-f-check label{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;cursor:pointer}
.mg-f-check input{margin-top:4px;width:18px;height:18px;flex:0 0 auto;accent-color:#046A38}
.mg-hours{display:grid;gap:8px;margin:0 0 18px}
.mg-hours-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mg-day{flex:0 0 96px;font-size:14.5px;color:var(--mg-ink-2,#3C4B43)}
.mg-hours input[type=time]{padding:8px 10px;font:inherit;font-size:15px;border:1px solid var(--mg-line,#D9DEE3);border-radius:8px;min-height:40px;background:#fff}
.mg-f-submit{margin:26px 0 0}
.mg-form .mg-btn{display:inline-block;background:#046A38;color:#fff;border:0;border-radius:8px;padding:14px 26px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;min-height:48px}
.mg-form .mg-btn:hover{background:#03562D}
.mg-form .mg-btn:focus-visible{outline:3px solid #0A8A4C;outline-offset:2px}
.mg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mg-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mg-sent{max-width:620px;margin:0 auto;text-align:center;padding:36px 24px;border:1px solid var(--mg-line,#E2E5E9);border-radius:12px;background:#F4F8F5}
.mg-sent h2{margin:0 0 12px}
.mg-sent p{margin:0 0 16px;line-height:1.8}
.mg-sent .mg-btn{display:inline-block;background:#046A38;color:#fff;border-radius:8px;padding:12px 22px;font-weight:700;text-decoration:none}
@media(max-width:600px){
	.mg-form fieldset{padding:16px 14px 4px}
	.mg-day{flex:0 0 78px;font-size:14px}
}

/* Topic-cluster links under each guide. */
.mg-related{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--mg-line,#E2E5E9)}
.mg-related h2{margin:0 0 16px;font-size:19px}
.mg-related ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mg-related li{margin:0}
.mg-related li a{display:block;padding:13px 14px;border-radius:8px;text-decoration:none;color:inherit;border:1px solid transparent}
.mg-related li a:hover{background:var(--mg-soft,#F6F7F8);border-color:var(--mg-line,#E2E5E9)}
.mg-rel-title{display:block;font-weight:600;font-size:16px;line-height:1.45;color:#046A38}
.mg-rel-sub{display:block;font-size:14px;line-height:1.6;color:var(--mg-ink-4,#5A6B61);margin-top:3px}

/* Corrections from readers, under every listing. */
.mg-report{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--mg-line,#E2E5E9)}
.mg-report details{border:1px solid var(--mg-line,#E2E5E9);border-radius:10px;background:var(--mg-soft,#F6F7F8)}
.mg-report summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;list-style:none;color:#046A38;min-height:44px;display:flex;align-items:center}
.mg-report summary::-webkit-details-marker{display:none}
.mg-report summary::after{content:"+";margin-inline-start:auto;font-size:20px;line-height:1;color:var(--mg-ink-4,#697A70)}
.mg-report details[open] summary::after{content:"\2013"}
.mg-report summary:focus-visible{outline:2px solid #046A38;outline-offset:-2px;border-radius:10px}
.mg-report-lede{margin:0 18px 14px;font-size:14.5px;line-height:1.7;color:var(--mg-ink-4,#5A6B61)}
.mg-report-form{padding:0 18px 18px}
.mg-report-form .mg-f{margin-bottom:14px}
.mg-report-form textarea{min-height:90px}
.mg-report .mg-f-alert{margin:0 18px 14px}
.mg-btn--sm{padding:11px 20px;font-size:15px;min-height:44px}
.mg-report-ok{background:var(--mg-soft,#F1F6F2);border:1px solid var(--mg-line,#E2E5E9);border-inline-start:4px solid #046A38;border-radius:8px;padding:14px 18px;margin:0;line-height:1.7;font-size:15px}

/* September 8 usability repairs. */
.mg-empty .mg-hsearch { display:block; }
.mg-card .mg-flag--pending { inset-block-start:auto; inset-block-end:12px; inset-inline-end:12px; max-width:calc(100% - 24px); }

/* =========================================================================
   MG-FIX-SEP09
   Measured 2026-09-09 across 237 URLs x 7 viewport widths.

   1) The Arabic mobile drawer never came on screen. `html[dir="rtl"]
      .mg-drawer` is (0,2,1) and beat `.mg-drawer.open` at (0,2,0), so the
      closed transform won even while the element carried .open. There was no
      navigation at all from the header on Arabic phones.
   2) The hero search field and its location select measured 26px tall. They
      are the site's primary call to action; 44px is the usable floor.
   3) The uppercase field labels were 10.5px, under the 12px legibility floor.
      (Arabic already overrode this to 12px, so it only showed in English.)
   4) Breadcrumbs, chips and the language switch sat at 24-30px.
   ========================================================================= */
html[dir="rtl"] .mg-drawer.open { transform: translateX(0); }

.mg-searchbar label { font-size: 12px; letter-spacing: .07em; }

@media (max-width: 767px) {
  .mg-searchbar input,
  .mg-searchbar select { min-height: 44px; }
  .mg-searchbar .f { padding-block: 4px; }

  .mg-langs a { min-height: 36px; padding-inline: 10px; }
  .mg-crumbs a,
  .mg-crumbs [aria-current] { min-height: 36px; display: inline-flex; align-items: center; }
  .mg-chip-link { min-height: 36px; }
  .mg-head-link { display: inline-flex; align-items: center; min-height: 36px; }
}

/* An earlier pass raised these to 26px through `.mg .mg-hero input` (0,2,1),
   which outranks the plain `.mg-searchbar input` selector above. 26px was the
   WCAG 2.2 floor of 24px, not a usable target: this is the site's primary
   call to action on a phone. Matching the specificity so the value applies. */
@media (max-width: 767px) {
  .mg .mg-hero input,
  .mg .mg-hero select,
  .mg .mg-search input,
  .mg .mg-search select { min-height: 44px; }
}

/* The remaining sub-32px targets on a phone: the listing's tap-to-call number
   (25px) and the footer attribution links (an earlier pass had set 24px). */
@media (max-width: 767px) {
  .mg-contact-row a,
  .mg-railcard-body a { min-height: 40px; display: inline-flex; align-items: center; }
  .mg-footer-bottom a,
  .mg-footer-about p a { min-height: 36px; display: inline-flex; align-items: center; }
}