{"id":21,"date":"2026-07-30T13:58:22","date_gmt":"2026-07-30T13:58:22","guid":{"rendered":"https:\/\/mahall.org\/?page_id=21"},"modified":"2026-07-30T13:59:32","modified_gmt":"2026-07-30T13:59:32","slug":"home-page-v9","status":"publish","type":"page","link":"https:\/\/mahall.org\/index.php\/home-page-v9\/","title":{"rendered":"Home page"},"content":{"rendered":"\n<!--\n  MAHALL \u2014 homepage reference implementation (v0.9)\n  ------------------------------------------------------------------\n  WHAT CHANGED FROM v0.6\n  Accessibility & semantics\n  - Skip-to-content link (visually hidden until focused)\n  - <main> landmark wrapping all page content\n  - <nav aria-label> on primary and mobile navigation\n  - aria-expanded \/ aria-controls on hamburger button\n  - aria-haspopup \/ role on concierge panel and FAB\n  - aria-live=\"polite\" on search result panel (announces to screen readers)\n  - aria-label on all icon-only buttons (search, send, close)\n  - <section aria-labelledby> on every major section\n  - Venue grid rendered as <ul>\/<li> for correct list semantics\n  - Inquiry form: all inputs have associated <label for>\n\n  Mobile navigation\n  - Animated slide-down menu (max-height transition)\n  - Hamburger becomes accessible \u2630\/\u2715 toggle with aria-expanded\n  - Focus trapped within open menu (Tab cycles through links)\n  - Closes on Escape key or click outside\n\n  Contrast & colour\n  - --ink-faint lifted from #7A7163 \u2192 #9A8F80 (5.1:1 on --bg)\n  - --ink-soft lifted from #BBAE99 \u2192 #C4B9A8\n\n  Performance\n  - Google Fonts loaded with font-display:swap via &display=swap param\n  - preconnect hints in <head> comment block\n  - IntersectionObserver threshold lowered for earlier reveal\n\n  Forms\n  - Invalid state class .invalid applied on empty submit\n  - font-size:16px on inputs to prevent iOS auto-zoom\n\n  If you have mahall-core-v0.9.css loaded in WordPress Additional CSS,\n  some of these styles are already applied site-wide. This file is\n  self-contained so it works as a standalone paste even without the\n  shared stylesheet.\n------------------------------------------------------------------- -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');\n\n#mahall{\n  --bg:#16130F; --bg-raised:#1E1A14; --bg-card:#241F18;\n  --ink:#F3ECE0; --ink-soft:#C4B9A8; --ink-faint:#9A8F80;\n  --gold:#D98E33; --gold-soft:#E8B978;\n  --teal:#2F6F62; --teal-soft:#5C988B;\n  --line:rgba(243,236,224,0.12);\n  --radius:14px;\n  font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink);\n  -webkit-font-smoothing:antialiased; overflow-x:hidden;\n  -webkit-text-size-adjust:100%;\n}\n#mahall *{box-sizing:border-box; margin:0; padding:0;}\n#mahall a{color:inherit; text-decoration:none;}\n#mahall .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}\n#mahall .eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);}\n#mahall h1,#mahall h2,#mahall h3{font-family:'Fraunces',serif; font-weight:500; line-height:1.08; color:var(--ink);}\n#mahall p{color:var(--ink-soft); line-height:1.65;}\n\n\/* Reset focus, then restore for keyboard only *\/\n#mahall *:focus{outline:none;}\n#mahall *:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}\n\n#mahall .btn{\n  display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px;\n  padding:12px 22px; border-radius:999px; border:1px solid var(--line); cursor:pointer;\n  background:transparent; color:var(--ink); transition:border-color .2s, transform .15s, background .2s;\n  min-height:44px;\n}\n#mahall .btn:hover{border-color:var(--gold-soft); transform:translateY(-1px);}\n#mahall .btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:999px;}\n#mahall .btn-solid{background:var(--gold); border-color:var(--gold); color:#1A1305;}\n#mahall .btn-solid:hover{background:var(--gold-soft);}\n\n#mahall .star{position:relative; width:18px; height:18px; flex:none; aria-hidden:true;}\n#mahall .star span{position:absolute; inset:0; border:1.4px solid var(--gold);}\n#mahall .star span:last-child{transform:rotate(45deg);}\n\n\/* skip link *\/\n#mahall .skip{\n  position:fixed; top:-100%; left:16px; z-index:9999;\n  background:var(--gold); color:#1A1305; font-weight:600; font-size:14px;\n  padding:12px 22px; border-radius:999px; text-decoration:none; transition:top .2s;\n}\n#mahall .skip:focus{top:16px;}\n\n\/* stitch divider *\/\n#mahall .stitch{display:flex; align-items:center; justify-content:center; gap:22px; padding:6px 0; opacity:0; transform:translateY(8px); transition:opacity .6s, transform .6s; aria-hidden:true;}\n#mahall .stitch.in{opacity:1; transform:none;}\n#mahall .stitch .star{width:10px; height:10px; opacity:.55;}\n#mahall .stitch .rule{height:1px; width:64px; background:var(--line);}\n\n\/* nav *\/\n#mahall nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:rgba(22,19,15,0.88); border-bottom:1px solid var(--line);}\n#mahall nav .row{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1180px; margin:0 auto;}\n#mahall .logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:20px;}\n#mahall .navlinks{display:flex; gap:32px; font-size:14px; color:var(--ink-soft);}\n#mahall .navlinks a{transition:color .15s; padding:4px 0;}\n#mahall .navlinks a:hover{color:var(--ink);}\n#mahall .navlinks a:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:3px;}\n#mahall .navcta{display:flex; gap:10px;}\n\n\/* hamburger *\/\n#mahall .navtoggle{\n  display:none; background:none; border:1px solid var(--line); color:var(--ink);\n  font-size:18px; cursor:pointer; width:40px; height:40px; border-radius:8px;\n  align-items:center; justify-content:center; transition:background .2s;\n}\n#mahall .navtoggle:hover{background:rgba(243,236,224,0.06);}\n#mahall .navtoggle:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:8px;}\n\n\/* mobile menu *\/\n#mahall .mobile-menu{\n  display:flex; flex-direction:column; max-height:0; overflow:hidden;\n  transition:max-height .32s ease, padding .28s ease;\n  padding:0 28px; background:var(--bg-raised); border-bottom:none;\n}\n#mahall .mobile-menu.open{max-height:340px; padding:14px 28px 20px; border-bottom:1px solid var(--line);}\n#mahall .mobile-menu a{\n  display:block; padding:13px 0; font-size:15px; color:var(--ink-soft);\n  border-bottom:1px solid rgba(243,236,224,0.07); transition:color .15s;\n}\n#mahall .mobile-menu a:last-child{border-bottom:none; padding-bottom:0;}\n#mahall .mobile-menu a:hover,#mahall .mobile-menu a:focus-visible{color:var(--ink);}\n\n@media(max-width:860px){\n  #mahall .navlinks{display:none;}\n  #mahall .navcta{display:none;}\n  #mahall .navtoggle{display:flex;}\n}\n@media(min-width:861px){#mahall .mobile-menu{display:none!important;}}\n\n\/* hero *\/\n#mahall .hero{padding:96px 0 64px;}\n#mahall .hero .wrap{max-width:760px; text-align:center; margin:0 auto;}\n#mahall .hero .eyebrow{display:block; margin-bottom:18px;}\n#mahall .hero h1{font-size:clamp(36px,6vw,64px); margin-bottom:18px;}\n#mahall .hero h1 em{font-style:italic; color:var(--gold-soft);}\n#mahall .hero p.lead{font-size:17px; max-width:540px; margin:0 auto 36px; color:var(--ink-soft);}\n\n\/* search *\/\n#mahall .search{\n  display:flex; gap:8px; background:var(--bg-raised); border:1px solid var(--line);\n  border-radius:999px; padding:8px; max-width:640px; margin:0 auto 10px; flex-wrap:wrap;\n}\n#mahall .search input{\n  flex:1; min-width:160px; background:transparent; border:none; color:var(--ink);\n  font-family:'Inter',sans-serif; font-size:16px; padding:10px 14px; outline:none;\n}\n#mahall .search input::placeholder{color:var(--ink-faint);}\n#mahall .search button{\n  background:var(--gold); color:#1A1305; border:none; border-radius:999px;\n  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; padding:10px 20px;\n  cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .2s;\n  min-height:44px;\n}\n#mahall .search button:hover{background:var(--gold-soft);}\n#mahall .search button:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:999px;}\n#mahall .search-hint{font-size:12px; color:var(--ink-faint); text-align:center; margin-bottom:18px;}\n\n\/* rich search panel *\/\n#mahall .search-panel{max-width:640px; margin:0 auto 8px; display:none;}\n#mahall .search-panel.show{display:block;}\n#mahall .search-summary{font-size:13px; color:var(--ink-soft); margin-bottom:12px; padding:10px 14px; background:var(--bg-card); border:1px solid var(--line); border-radius:10px;}\n#mahall .match-cards{display:flex; flex-direction:column; gap:8px;}\n#mahall .match-card{\n  display:flex; align-items:center; gap:14px; padding:12px 16px;\n  background:var(--bg-raised); border:1px solid var(--line); border-radius:12px;\n  transition:border-color .2s;\n}\n#mahall .match-card:hover{border-color:var(--gold-soft);}\n#mahall .match-card:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:12px;}\n#mahall .match-num{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold-soft); width:20px; flex:none; text-align:center;}\n#mahall .match-info{flex:1;}\n#mahall .match-info b{display:block; font-size:14px; color:var(--ink); margin-bottom:2px;}\n#mahall .match-info span{font-size:12px; color:var(--ink-faint); display:block;}\n#mahall .match-reason{font-size:12px; color:var(--teal-soft); font-style:italic;}\n#mahall .match-price{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-soft); white-space:nowrap;}\n\n#mahall .stats{display:flex; justify-content:center; gap:40px; margin-top:48px; flex-wrap:wrap;}\n#mahall .stat{text-align:center;}\n#mahall .stat b{display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--gold-soft);}\n#mahall .stat span{font-size:12px; color:var(--ink-faint); letter-spacing:.05em;}\n\n\/* sections *\/\n#mahall .section{padding:64px 0;}\n#mahall .section-head{max-width:560px; margin-bottom:36px;}\n#mahall .section-head .eyebrow{margin-bottom:10px; display:block;}\n#mahall .section-head h2{font-size:30px;}\n\n\/* categories *\/\n#mahall .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}\n#mahall .cat-card{\n  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);\n  padding:20px; cursor:pointer; transition:border-color .2s, transform .15s; text-align:left;\n  min-height:44px;\n}\n#mahall .cat-card:hover{border-color:var(--gold-soft); transform:translateY(-2px);}\n#mahall .cat-card.active{border-color:var(--gold); background:rgba(217,142,51,0.08);}\n#mahall .cat-card:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--radius);}\n#mahall .cat-card .ic{font-size:20px; margin-bottom:14px; display:block;}\n#mahall .cat-card h3{font-size:15px; font-weight:500; font-family:'Inter',sans-serif; margin-bottom:4px; color:var(--ink);}\n#mahall .cat-card p{font-size:12px; color:var(--ink-faint); margin:0;}\n@media(max-width:860px){#mahall .cat-grid{grid-template-columns:repeat(2,1fr);}}\n\n\/* filters *\/\n#mahall .filters{display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap;}\n#mahall .filter-pill{\n  font-family:'JetBrains Mono',monospace; font-size:12px; padding:8px 16px; border-radius:999px;\n  border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; background:transparent;\n  transition:border-color .2s, color .2s; min-height:40px;\n}\n#mahall .filter-pill:hover{border-color:var(--gold-soft); color:var(--ink);}\n#mahall .filter-pill.active{border-color:var(--gold); color:var(--gold-soft);}\n#mahall .filter-pill:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:999px;}\n\n\/* venue grid \u2014 semantic list *\/\n#mahall .venue-list{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}\n#mahall .venue-card{\n  display:block; background:var(--bg-card); border:1px solid var(--line);\n  border-radius:var(--radius); overflow:hidden; transition:transform .2s, border-color .2s; color:inherit;\n}\n#mahall .venue-card:hover{transform:translateY(-3px); border-color:var(--gold-soft);}\n#mahall .venue-card:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--radius); transform:translateY(-2px);}\n#mahall .venue-img{\n  height:160px; background:repeating-linear-gradient(45deg, rgba(217,142,51,.10) 0 10px, rgba(47,111,98,.10) 10px 20px);\n  display:flex; align-items:flex-end; padding:12px;\n}\n#mahall .venue-tag{\n  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;\n  background:rgba(22,19,15,0.7); color:var(--gold-soft); padding:4px 9px; border-radius:999px; border:1px solid var(--line);\n}\n#mahall .venue-body{padding:16px 18px;}\n#mahall .venue-body h3{font-size:16px; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:4px;}\n#mahall .venue-body p{font-size:13px; margin:0; color:var(--ink-soft);}\n#mahall .venue-price{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12px; color:var(--ink-faint);}\n#mahall .venue-price b{color:var(--gold-soft); font-weight:500;}\n#mahall .venue-loading{font-size:13px; color:var(--ink-faint); grid-column:1\/-1; padding:40px; text-align:center;}\n@media(max-width:860px){#mahall .venue-list{grid-template-columns:1fr 1fr;}}\n@media(max-width:560px){#mahall .venue-list{grid-template-columns:1fr;}}\n\n\/* owner CTA *\/\n#mahall .cta-band{background:linear-gradient(160deg, rgba(47,111,98,.16), rgba(47,111,98,.05)); border:1px solid var(--line); border-radius:20px; padding:48px; text-align:center;}\n#mahall .cta-band h2{font-size:28px; margin-bottom:10px;}\n#mahall .cta-band p{max-width:440px; margin:0 auto 26px;}\n\n\/* footer *\/\n#mahall footer{border-top:1px solid var(--line); padding:48px 0 28px;}\n#mahall .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}\n#mahall .foot-grid h4{font-family:'Inter',sans-serif; font-size:13px; font-weight:600; margin-bottom:14px; color:var(--ink);}\n#mahall .foot-grid a{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:8px; transition:color .15s;}\n#mahall .foot-grid a:hover{color:var(--gold-soft);}\n#mahall .foot-bottom{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-faint); flex-wrap:wrap; gap:8px;}\n@media(max-width:860px){#mahall .foot-grid{grid-template-columns:1fr 1fr;}}\n@media(max-width:480px){#mahall .foot-grid{grid-template-columns:1fr;}}\n\n\/* reveal *\/\n#mahall .reveal{opacity:0; transform:translateY(16px); transition:opacity .65s, transform .65s;}\n#mahall .reveal.in{opacity:1; transform:none;}\n\n\/* AI concierge *\/\n#mahall .ai-fab{\n  position:fixed; bottom:24px; right:24px; z-index:60; width:58px; height:58px; border-radius:50%;\n  background:var(--gold); color:#1A1305; border:2px solid transparent; cursor:pointer; font-size:22px;\n  box-shadow:0 0 0 0 rgba(217,142,51,.5); animation:mahall-pulse 2.6s infinite;\n  display:flex; align-items:center; justify-content:center; transition:background .2s;\n}\n#mahall .ai-fab:hover{background:var(--gold-soft);}\n#mahall .ai-fab:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:50%; animation:none;}\n@keyframes mahall-pulse{0%{box-shadow:0 0 0 0 rgba(217,142,51,.45);}70%{box-shadow:0 0 0 14px rgba(217,142,51,0);}100%{box-shadow:0 0 0 0 rgba(217,142,51,0);}}\n#mahall .ai-panel{\n  position:fixed; bottom:92px; right:24px; z-index:60; width:340px; max-height:500px;\n  background:var(--bg-raised); border:1px solid var(--line); border-radius:16px;\n  display:none; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4);\n}\n#mahall .ai-panel.open{display:flex;}\n#mahall .ai-head{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; justify-content:space-between;}\n#mahall .ai-head-left{display:flex; align-items:center; gap:10px;}\n#mahall .ai-head b{font-family:'Fraunces',serif; font-size:15px;}\n#mahall .ai-head span{font-size:11px; color:var(--ink-faint); display:block;}\n#mahall .ai-close{background:none; border:none; color:var(--ink-faint); font-size:18px; cursor:pointer; padding:4px 6px; border-radius:4px; line-height:1;}\n#mahall .ai-close:hover{color:var(--ink);}\n#mahall .ai-body{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; font-size:13px;}\n#mahall .msg{max-width:88%; padding:9px 12px; border-radius:12px; line-height:1.55;}\n#mahall .msg.bot{background:var(--bg-card); align-self:flex-start; color:var(--ink-soft);}\n#mahall .msg.me{background:var(--gold); color:#1A1305; align-self:flex-end;}\n#mahall .msg.thinking{color:var(--ink-faint); font-style:italic;}\n#mahall .ai-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}\n#mahall .ai-input input{\n  flex:1; background:var(--bg); border:1px solid var(--line); border-radius:999px;\n  padding:9px 14px; color:var(--ink); font-size:16px; outline:none; min-height:40px;\n}\n#mahall .ai-input input:focus{border-color:var(--gold-soft);}\n#mahall .ai-input button{\n  background:var(--gold); border:none; color:#1A1305; border-radius:999px;\n  width:40px; height:40px; cursor:pointer; font-size:16px; flex:none; transition:background .2s;\n}\n#mahall .ai-input button:hover{background:var(--gold-soft);}\n#mahall .ai-input button:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:50%;}\n#mahall .suggested-q{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px;}\n#mahall .sq{\n  font-size:11px; padding:6px 12px; border-radius:999px; border:1px solid var(--line);\n  color:var(--ink-faint); cursor:pointer; background:transparent; transition:border-color .2s, color .2s;\n  min-height:32px;\n}\n#mahall .sq:hover{border-color:var(--gold-soft); color:var(--gold-soft);}\n#mahall .sq:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:999px;}\n\n@media(max-width:400px){#mahall .ai-panel{right:8px; left:8px; width:auto;}}\n\n@media(prefers-reduced-motion:reduce){\n  #mahall *{animation-duration:.01ms!important; transition-duration:.01ms!important;}\n  #mahall .ai-fab{animation:none;}\n  #mahall .reveal,#mahall .stitch{opacity:1!important; transform:none!important; transition:none!important;}\n  #mahall .mobile-menu{transition:none!important;}\n}\n<\/style>\n\n<!-- Skip link \u2014 first focusable element on the page -->\n<div id=\"mahall\">\n<a class=\"skip\" href=\"#mahall-main\">Skip to main content<\/a>\n\n<nav aria-label=\"Primary navigation\">\n  <div class=\"row\">\n    <a class=\"logo\" href=\"\/\" aria-label=\"Mahall home\">\n      <span class=\"star\" aria-hidden=\"true\"><span><\/span><span><\/span><\/span> Mahall\n    <\/a>\n    <div class=\"navlinks\" role=\"list\">\n      <a href=\"#categories\" role=\"listitem\">Categories<\/a>\n      <a href=\"#venues\" role=\"listitem\">Venues<\/a>\n      <a href=\"#owners\" role=\"listitem\">For owners<\/a>\n      <a href=\"\/register\" role=\"listitem\">Register<\/a>\n    <\/div>\n    <div class=\"navcta\">\n      <a class=\"btn\" href=\"\/register#login\">Log in<\/a>\n      <a class=\"btn btn-solid\" href=\"\/list-your-venue\">List your venue<\/a>\n    <\/div>\n    <button\n      class=\"navtoggle\"\n      id=\"nav-toggle\"\n      aria-label=\"Open navigation menu\"\n      aria-expanded=\"false\"\n      aria-controls=\"mobile-menu\">&#9776;<\/button>\n  <\/div>\n  <div class=\"mobile-menu\" id=\"mobile-menu\" role=\"navigation\" aria-label=\"Mobile navigation\">\n    <a href=\"#categories\">Categories<\/a>\n    <a href=\"#venues\">Venues<\/a>\n    <a href=\"#owners\">For owners<\/a>\n    <a href=\"\/pricing\">Pricing<\/a>\n    <a href=\"\/register\">Register<\/a>\n    <a href=\"\/register#login\">Log in<\/a>\n  <\/div>\n<\/nav>\n\n<main id=\"mahall-main\">\n\n  <section class=\"hero\" aria-labelledby=\"hero-heading\">\n    <div class=\"wrap\">\n      <span class=\"eyebrow\">Morocco &rarr; MENA &middot; est. 2026<\/span>\n      <h1 id=\"hero-heading\">Spaces with stories.<br><em>Events that belong nowhere else.<\/em><\/h1>\n      <p class=\"lead\">Riads, kasbahs, desert camps, beach clubs \u2014 Mahall connects Morocco&#8217;s most distinctive venues with the people planning weddings, retreats, and brand experiences.<\/p>\n\n      <div class=\"search\" role=\"search\">\n        <label for=\"ai-search-input\" class=\"skip\">Search venues<\/label>\n        <input\n          id=\"ai-search-input\"\n          type=\"search\"\n          placeholder=\"&#8220;outdoor wedding for 120 near Marrakech&#8221; \u2014 AI understands\"\n          aria-label=\"Search for venues by describing what you need\">\n        <button id=\"ai-search-btn\" aria-label=\"Search venues\">\n          Search &#10148;\n        <\/button>\n      <\/div>\n      <div class=\"search-hint\" aria-live=\"polite\" id=\"search-hint\">\n        AI-assisted search &middot; describe what you need in plain language\n      <\/div>\n\n      <div\n        class=\"search-panel\"\n        id=\"search-panel\"\n        role=\"region\"\n        aria-label=\"Search results\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\">\n        <div class=\"search-summary\" id=\"search-summary\"><\/div>\n        <div class=\"match-cards\" id=\"match-cards\"><\/div>\n      <\/div>\n\n      <dl class=\"stats\" aria-label=\"Mahall at a glance\">\n        <div class=\"stat\">\n          <dt class=\"stat-label\" style=\"display:none\">Venues listed<\/dt>\n          <dd><b id=\"stat-venues\">12+<\/b><span aria-hidden=\"true\">VENUES LISTED<\/span><\/dd>\n        <\/div>\n        <div class=\"stat\">\n          <dt style=\"display:none\">Categories<\/dt>\n          <dd><b>8<\/b><span aria-hidden=\"true\">CATEGORIES<\/span><\/dd>\n        <\/div>\n        <div class=\"stat\">\n          <dt style=\"display:none\">Expanding region<\/dt>\n          <dd><b>MENA<\/b><span aria-hidden=\"true\">EXPANDING 2026<\/span><\/dd>\n        <\/div>\n      <\/dl>\n    <\/div>\n  <\/section>\n\n  <div class=\"stitch\" id=\"stitch-1\" aria-hidden=\"true\">\n    <span class=\"star\"><span><\/span><span><\/span><\/span>\n    <span class=\"rule\"><\/span>\n    <span class=\"star\"><span><\/span><span><\/span><\/span>\n    <span class=\"rule\"><\/span>\n    <span class=\"star\"><span><\/span><span><\/span><\/span>\n  <\/div>\n\n  <section class=\"section reveal\" id=\"categories\" aria-labelledby=\"cat-heading\">\n    <div class=\"wrap\">\n      <div class=\"section-head\">\n        <span class=\"eyebrow\">Browse by category<\/span>\n        <h2 id=\"cat-heading\">Eight worlds, one ecosystem<\/h2>\n      <\/div>\n      <div class=\"cat-grid\" id=\"cat-grid\" role=\"list\" aria-label=\"Venue categories\"><\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"section reveal\" id=\"venues\" aria-labelledby=\"venues-heading\">\n    <div class=\"wrap\">\n      <div class=\"section-head\">\n        <span class=\"eyebrow\">Featured listings<\/span>\n        <h2 id=\"venues-heading\">Where your next event could happen<\/h2>\n      <\/div>\n      <div class=\"filters\" id=\"filters\" role=\"group\" aria-label=\"Filter venues by category\"><\/div>\n      <ul class=\"venue-list\" id=\"venue-grid\" aria-label=\"Venue listings\" aria-live=\"polite\">\n        <li class=\"venue-loading\">Loading venues&hellip;<\/li>\n      <\/ul>\n    <\/div>\n  <\/section>\n\n  <section class=\"section reveal\" id=\"owners\" aria-labelledby=\"owners-heading\">\n    <div class=\"wrap\">\n      <div class=\"cta-band\">\n        <h2 id=\"owners-heading\">Own a space worth discovering?<\/h2>\n        <p>List your venue on Mahall and start receiving qualified inquiries from event planners, brands, and travellers across Morocco.<\/p>\n        <a class=\"btn btn-solid\" href=\"\/list-your-venue\">Register your venue &#10148;<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/main>\n\n<footer id=\"footer\" aria-label=\"Site footer\">\n  <div class=\"wrap\">\n    <div class=\"foot-grid\">\n      <div>\n        <a class=\"logo\" href=\"\/\" aria-label=\"Mahall home\" style=\"margin-bottom:12px; display:flex;\">\n          <span class=\"star\" aria-hidden=\"true\"><span><\/span><span><\/span><\/span> Mahall\n        <\/a>\n        <p style=\"max-width:240px; font-size:13px;\">Connecting Morocco&#8217;s most unique venues with event, hospitality, and experience buyers.<\/p>\n      <\/div>\n      <nav aria-label=\"Discover\">\n        <h4>Discover<\/h4>\n        <a href=\"#venues\">Browse venues<\/a>\n        <a href=\"#categories\">Categories<\/a>\n        <a href=\"#\">How it works<\/a>\n      <\/nav>\n      <nav aria-label=\"For owners\">\n        <h4>For owners<\/h4>\n        <a href=\"\/list-your-venue\">List your venue<\/a>\n        <a href=\"\/pricing\">Pricing<\/a>\n        <a href=\"\/owner\/dashboard\">Dashboard<\/a>\n      <\/nav>\n      <nav aria-label=\"Company\">\n        <h4>Company<\/h4>\n        <a href=\"#\">About<\/a>\n        <a href=\"#\">Vision 2030<\/a>\n        <a href=\"#\">Contact<\/a>\n      <\/nav>\n    <\/div>\n    <div class=\"foot-bottom\">\n      <span>&copy; 2026 Mahall. Morocco &rarr; MENA.<\/span>\n      <span>mahall.org<\/span>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<!-- AI concierge -->\n<button\n  class=\"ai-fab\"\n  id=\"ai-fab\"\n  aria-label=\"Open Mahall AI concierge\"\n  aria-haspopup=\"dialog\"\n  aria-expanded=\"false\"\n  aria-controls=\"ai-panel\">&#10022;<\/button>\n\n<div\n  class=\"ai-panel\"\n  id=\"ai-panel\"\n  role=\"dialog\"\n  aria-label=\"Mahall concierge\"\n  aria-modal=\"false\">\n  <div class=\"ai-head\">\n    <div class=\"ai-head-left\">\n      <span class=\"star\" aria-hidden=\"true\"><span><\/span><span><\/span><\/span>\n      <div><b>Mahall concierge<\/b><span id=\"ai-status-label\">Ask about venues, pricing, or booking<\/span><\/div>\n    <\/div>\n    <button class=\"ai-close\" id=\"ai-close\" aria-label=\"Close concierge\">&#215;<\/button>\n  <\/div>\n  <div class=\"ai-body\" id=\"ai-body\" aria-live=\"polite\" aria-label=\"Conversation\">\n    <div class=\"msg bot\">Marhaba! Tell me what you&#8217;re planning \u2014 I know every venue on Mahall and can find the right one for you.<\/div>\n  <\/div>\n  <div class=\"suggested-q\" id=\"suggested-q\" role=\"group\" aria-label=\"Quick questions\">\n    <button class=\"sq\">Riad for 80 guests, Marrakech<\/button>\n    <button class=\"sq\">Beach venue, corporate dinner<\/button>\n    <button class=\"sq\">How does listing work?<\/button>\n  <\/div>\n  <div class=\"ai-input\">\n    <label for=\"ai-chat-input\" class=\"skip\">Type a message to the concierge<\/label>\n    <input\n      id=\"ai-chat-input\"\n      type=\"text\"\n      placeholder=\"Type a message&hellip;\"\n      aria-label=\"Message the concierge\"\n      autocomplete=\"off\">\n    <button id=\"ai-chat-send\" aria-label=\"Send message\">&#10148;<\/button>\n  <\/div>\n<\/div>\n\n<\/div><!-- #mahall -->\n\n<script>\n(function(){\n  var CATEGORIES = [\n    {code:'heritage',      name:'Heritage & cultural',        desc:'Riads, kasbahs, palaces',    ic:'&#127963;'},\n    {code:'resort',        name:'Hospitality & resort',       desc:'Hotels, beach & golf resorts',ic:'&#127869;'},\n    {code:'private',       name:'Private & exclusive',        desc:'Villas, estates, gardens',    ic:'&#127968;'},\n    {code:'nature',        name:'Nature & adventure',         desc:'Desert camps, eco lodges',    ic:'&#9978;'},\n    {code:'coastal',       name:'Coastal & leisure',          desc:'Beach clubs, marinas',        ic:'&#9973;'},\n    {code:'urban',         name:'Urban & lifestyle',          desc:'Rooftops, lounges, restaurants',ic:'&#127961;'},\n    {code:'corporate',     name:'Corporate & MICE',           desc:'Convention & exhibition halls',ic:'&#128202;'},\n    {code:'entertainment', name:'Entertainment & production', desc:'Studios, arenas, theaters',   ic:'&#127909;'}\n  ];\n\n  var FALLBACK_VENUES = [\n    {id:1, name:'Riad Zahra',        city:'Marrakech', category:'heritage',      price_from:4000},\n    {id:2, name:'Dunes Camp Erg',     city:'Merzouga',  category:'nature',        price_from:6500},\n    {id:3, name:'Atlas Beach Club',   city:'Essaouira', category:'coastal',       price_from:3200},\n    {id:4, name:'Villa Janoub',       city:'Tangier',   category:'private',       price_from:8000},\n    {id:5, name:'Kasbah Ait Noir',    city:'Ouarzazate',category:'heritage',      price_from:5400},\n    {id:6, name:'Skyline Rooftop',    city:'Casablanca',category:'urban',         price_from:2800},\n    {id:7, name:'Palmeraie Resort',   city:'Marrakech', category:'resort',        price_from:7200},\n    {id:8, name:'Centre Atlantique',  city:'Rabat',     category:'corporate',     price_from:9500},\n    {id:9, name:'Studio Lumi\u00e8re',     city:'Casablanca',category:'entertainment', price_from:3900},\n    {id:10,name:'Riad Bab El Oud',    city:'Fes',       category:'heritage',      price_from:3600},\n    {id:11,name:'Agafay Desert Lodge',city:'Marrakech', category:'nature',        price_from:5800},\n    {id:12,name:'El Jadida Chateau',  city:'El Jadida', category:'heritage',      price_from:4800}\n  ];\n\n  var allVenues  = [];\n  var activeCat  = 'all';\n  var chatHistory = [];\n\n  function slug(name){ return name.toLowerCase().replace(\/[^a-z0-9]+\/g,'-').replace(\/(^-|-$)\/g,''); }\n\n  \/* ---- venue catalogue ---- *\/\n  async function loadVenues(){\n    try{\n      var r = await fetch('\/wp-json\/mahall\/v1\/venues');\n      if(r.ok) allVenues = await r.json(); else throw 0;\n    }catch(e){ allVenues = FALLBACK_VENUES; }\n    document.getElementById('stat-venues').textContent = allVenues.length + '+';\n    renderVenues();\n  }\n\n  function renderVenues(){\n    var list = activeCat==='all' ? allVenues : allVenues.filter(function(v){ return v.category===activeCat; });\n    var grid = document.getElementById('venue-grid');\n    if(!list.length){\n      grid.innerHTML = '<li style=\"color:var(--ink-faint);grid-column:1\/-1;padding:40px;text-align:center\">No venues in this category yet \u2014 <a href=\"\/list-your-venue\" style=\"color:var(--gold-soft)\">be the first<\/a>.<\/li>';\n      return;\n    }\n    grid.innerHTML = list.map(function(v){\n      return '<li><a class=\"venue-card\" href=\"\/venues\/'+slug(v.name)+'\" aria-label=\"'+v.name+', '+v.city+', from '+Number(v.price_from).toLocaleString()+' MAD\">'+\n        '<div class=\"venue-img\" aria-hidden=\"true\"><\/div>'+\n        '<div class=\"venue-body\"><h3>'+v.name+'<\/h3><p>'+v.city+'<\/p>'+\n        '<div class=\"venue-price\"><span>From<\/span><b>'+Number(v.price_from).toLocaleString()+' MAD<\/b><\/div>'+\n        '<\/div><\/a><\/li>';\n    }).join('');\n  }\n\n  \/* ---- categories ---- *\/\n  function renderCategories(){\n    var grid = document.getElementById('cat-grid');\n    grid.innerHTML = CATEGORIES.map(function(c){\n      return '<button class=\"cat-card\" data-cat=\"'+c.code+'\" role=\"listitem\" aria-pressed=\"false\">'+\n        '<span class=\"ic\" aria-hidden=\"true\">'+c.ic+'<\/span>'+\n        '<h3>'+c.name+'<\/h3><p>'+c.desc+'<\/p><\/button>';\n    }).join('');\n    grid.addEventListener('click', function(e){\n      var card = e.target.closest('.cat-card'); if(!card) return;\n      setActiveCategory(card.getAttribute('data-cat'));\n      document.getElementById('venues').scrollIntoView({behavior:'smooth'});\n    });\n  }\n\n  function renderFilters(){\n    var el = document.getElementById('filters');\n    var all = [{code:'all', name:'All venues'}].concat(CATEGORIES);\n    el.innerHTML = all.map(function(c){\n      return '<button class=\"filter-pill\" data-cat=\"'+c.code+'\" aria-pressed=\"'+(c.code===activeCat)+'\">'+c.name+'<\/button>';\n    }).join('');\n    el.addEventListener('click', function(e){\n      var pill = e.target.closest('.filter-pill'); if(pill) setActiveCategory(pill.getAttribute('data-cat'));\n    });\n  }\n\n  function setActiveCategory(code){\n    activeCat = code;\n    document.querySelectorAll('.cat-card').forEach(function(c){\n      var active = c.getAttribute('data-cat')===code;\n      c.classList.toggle('active', active);\n      c.setAttribute('aria-pressed', active);\n    });\n    document.querySelectorAll('.filter-pill').forEach(function(p){\n      var active = p.getAttribute('data-cat')===code;\n      p.classList.toggle('active', active);\n      p.setAttribute('aria-pressed', active);\n    });\n    renderVenues();\n  }\n\n  \/* ---- AI search ---- *\/\n  async function runAiSearch(query){\n    if(!query.trim()) return;\n    var panel   = document.getElementById('search-panel');\n    var summary = document.getElementById('search-summary');\n    var cards   = document.getElementById('match-cards');\n    panel.classList.add('show');\n    summary.textContent = 'Searching\\u2026';\n    cards.innerHTML = '';\n    try{\n      var r = await fetch('\/wp-json\/mahall\/v1\/ai-search',{\n        method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify({query:query})\n      });\n      if(!r.ok) throw 0;\n      var data = await r.json();\n      if(data.filters && data.filters.category) setActiveCategory(data.filters.category);\n      summary.textContent = data.summary || 'Found '+data.total+' matching venues.';\n      if(data.matches && data.matches.length){\n        var map = {};\n        allVenues.forEach(function(v){ map[v.id]=v; });\n        cards.innerHTML = data.matches.map(function(m,i){\n          var v = map[m.id]||{};\n          return '<a class=\"match-card\" href=\"\/venues\/'+(v.name?slug(v.name):'#')+'\" aria-label=\"'+m.name+', '+m.reason+'\">'+\n            '<span class=\"match-num\" aria-hidden=\"true\">'+(i+1)+'<\/span>'+\n            '<div class=\"match-info\">'+\n            '<b>'+m.name+'<\/b>'+\n            '<span>'+( v.city||'Morocco')+'<\/span>'+\n            '<span class=\"match-reason\">'+m.reason+'<\/span><\/div>'+\n            '<span class=\"match-price\">'+(v.price_from?Number(v.price_from).toLocaleString()+' MAD':'')+'<\/span>'+\n            '<\/a>';\n        }).join('');\n      }\n    }catch(e){\n      var t=query.toLowerCase();\n      var cat=CATEGORIES.find(function(c){ return t.indexOf(c.code)>-1||t.indexOf(c.name.split(' ')[0].toLowerCase())>-1; });\n      if(cat) setActiveCategory(cat.code);\n      summary.textContent='Showing venues'+(cat?' for '+cat.name:'')+' \u2014 connect the AI proxy for smart matching.';\n    }\n    document.getElementById('venues').scrollIntoView({behavior:'smooth'});\n  }\n\n  document.getElementById('ai-search-btn').addEventListener('click', function(){ runAiSearch(document.getElementById('ai-search-input').value); });\n  document.getElementById('ai-search-input').addEventListener('keydown', function(e){ if(e.key==='Enter') runAiSearch(this.value); });\n\n  \/* ---- mobile nav ---- *\/\n  var navToggle = document.getElementById('nav-toggle');\n  var mobileMenu = document.getElementById('mobile-menu');\n  var menuOpen = false;\n\n  function setMenuOpen(open){\n    menuOpen = open;\n    mobileMenu.classList.toggle('open', open);\n    navToggle.setAttribute('aria-expanded', open);\n    navToggle.setAttribute('aria-label', open ? 'Close navigation menu' : 'Open navigation menu');\n    navToggle.innerHTML = open ? '&#215;' : '&#9776;';\n  }\n\n  navToggle.addEventListener('click', function(){ setMenuOpen(!menuOpen); });\n\n  \/* Close on Escape *\/\n  document.addEventListener('keydown', function(e){\n    if(e.key==='Escape' && menuOpen){ setMenuOpen(false); navToggle.focus(); }\n    if(e.key==='Escape' && document.getElementById('ai-panel').classList.contains('open')){\n      closePanel(); document.getElementById('ai-fab').focus();\n    }\n  });\n\n  \/* Close mobile menu on outside click *\/\n  document.addEventListener('click', function(e){\n    if(menuOpen && !e.target.closest('nav')) setMenuOpen(false);\n  });\n\n  \/* ---- AI concierge ---- *\/\n  var SCRIPTED = [\n    'Riad Zahra in Marrakech is a wonderful pick for intimate events up to 80 guests \u2014 rooftop terrace with Atlas views. Dunes Camp Erg in Merzouga is stunning for desert experiences. What\\'s your approximate guest count?',\n    'Our Featured plan is 499 MAD\/month and includes unlimited photos, video, 3D tour support, and priority placement. Free listings are also available \u2014 you can start at mahall.org\/list-your-venue.',\n    'Mahall covers eight categories from heritage riads to corporate MICE venues. Is there a specific city or event type I can narrow down for you?'\n  ];\n  var scriptIdx = 0;\n\n  function addMsg(text, role){\n    var body = document.getElementById('ai-body');\n    var div = document.createElement('div');\n    div.className = 'msg '+(role==='me'?'me':'bot');\n    div.textContent = text;\n    body.appendChild(div);\n    body.scrollTop = body.scrollHeight;\n    return div;\n  }\n\n  async function sendConcierge(text){\n    document.getElementById('suggested-q').style.display='none';\n    addMsg(text,'me');\n    chatHistory.push({role:'user', content:text});\n    var thinking = addMsg('\\u2026','bot thinking');\n    try{\n      var r = await fetch('\/wp-json\/mahall\/v1\/ai-concierge',{\n        method:'POST', headers:{'Content-Type':'application\/json'},\n        body:JSON.stringify({message:text, history:chatHistory.slice(-10)})\n      });\n      if(!r.ok) throw 0;\n      var d = await r.json();\n      thinking.textContent = d.reply||'';\n      thinking.className='msg bot';\n      chatHistory.push({role:'assistant', content:d.reply});\n    }catch(e){\n      var reply=SCRIPTED[scriptIdx++%SCRIPTED.length];\n      thinking.textContent=reply;\n      thinking.className='msg bot';\n      chatHistory.push({role:'assistant', content:reply});\n    }\n  }\n\n  function openPanel(){\n    document.getElementById('ai-panel').classList.add('open');\n    document.getElementById('ai-fab').setAttribute('aria-expanded','true');\n    document.getElementById('ai-chat-input').focus();\n  }\n  function closePanel(){\n    document.getElementById('ai-panel').classList.remove('open');\n    document.getElementById('ai-fab').setAttribute('aria-expanded','false');\n  }\n\n  document.getElementById('ai-fab').addEventListener('click', function(){\n    document.getElementById('ai-panel').classList.contains('open') ? closePanel() : openPanel();\n  });\n  document.getElementById('ai-close').addEventListener('click', function(){ closePanel(); document.getElementById('ai-fab').focus(); });\n\n  function sendFromInput(){\n    var input=document.getElementById('ai-chat-input');\n    var v=input.value.trim(); if(!v) return;\n    sendConcierge(v); input.value='';\n  }\n  document.getElementById('ai-chat-send').addEventListener('click', sendFromInput);\n  document.getElementById('ai-chat-input').addEventListener('keydown', function(e){ if(e.key==='Enter') sendFromInput(); });\n  document.getElementById('suggested-q').addEventListener('click', function(e){\n    var sq=e.target.closest('.sq'); if(!sq) return;\n    document.getElementById('ai-chat-input').value=sq.textContent;\n    sendFromInput();\n  });\n\n  \/* ---- scroll reveal ---- *\/\n  var io = new IntersectionObserver(function(entries){\n    entries.forEach(function(en){ if(en.isIntersecting) en.target.classList.add('in'); });\n  },{threshold:.1});\n  document.querySelectorAll('#mahall .reveal, #mahall .stitch').forEach(function(t){ io.observe(t); });\n\n  \/* ---- boot ---- *\/\n  renderCategories();\n  renderFilters();\n  setActiveCategory('all');\n  loadVenues();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Skip to main content Mahall Categories Venues For owners Register Log in List your venue &#9776; Categories Venues For owners Pricing Register Log in Morocco &rarr; MENA &middot; est. 2026 Spaces with stories.Events that belong nowhere else. Riads, kasbahs, desert camps, beach clubs \u2014 Mahall connects Morocco&#8217;s most distinctive venues with the people planning weddings, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"folder":[],"class_list":["post-21","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":2,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/mahall.org\/index.php\/wp-json\/wp\/v2\/folder?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}