/*
Theme Name: Al Reem Mall
Theme URI:  https://alreemmall.example.com
Author:     Al Reem Mall
Author URI: https://alreemmall.example.com
Description: Premium dark-green & gold theme for the Al Reem Mall online directory. Designed to work hand-in-hand with the "Al Reem Mall – Business Directory" plugin. Mobile, tablet and desktop ready.
Version:    1.0.0
License:    GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-reem-mall-theme
Tags: business, directory, mall, ecommerce, full-site-editing, responsive
*/

:root{
    --arm-green-950:#053024;
    --arm-green-900:#0f5132;
    --arm-green-800:#146c43;
    --arm-green-100:#d1fae5;
    --arm-gold:#fbbf24;
    --arm-gold-soft:rgba(251,191,36,.6);
    --arm-wa:#25D366;
    --arm-bg:#f9fafb;
    --arm-text:#0f172a;
    --arm-muted:#6b7280;
    --arm-border:#e5e7eb;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Kufi Arabic",sans-serif;
    color:var(--arm-text);
    background:var(--arm-bg);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    direction:rtl;
    text-align:right;
}
html[dir="ltr"] body{ direction:ltr; text-align:left; }
img{ max-width:100%; height:auto; }
a{ color:var(--arm-green-900); text-decoration:none; }
a:hover{ color:var(--arm-gold); }

/* Site header */
.arm-site-header{
    position:sticky; top:0; z-index:50;
    background:var(--arm-green-950);
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.arm-site-header .arm-wrap{
    max-width:1240px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; gap:14px;
}
.arm-site-title{
    display:flex; align-items:center; gap:10px;
    color:#fff; font-weight:800; font-size:18px;
    text-decoration:none;
}
.arm-site-title svg{ width:30px; height:30px; color:var(--arm-gold); }
.arm-site-title:hover{ color:var(--arm-gold); }

.arm-main-nav{ display:flex; align-items:center; gap:22px; }
.arm-main-nav a{
    color:var(--arm-green-100); font-size:14px; font-weight:500;
}
.arm-main-nav a:hover{ color:var(--arm-gold); }
.arm-cta-header{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--arm-gold-soft); color:var(--arm-gold);
    padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600;
}
.arm-cta-header:hover{ background:rgba(251,191,36,.1); color:var(--arm-gold); }

.arm-menu-toggle{
    display:none; background:transparent; border:0; color:#fff;
    width:38px; height:38px; cursor:pointer; padding:0;
}
.arm-menu-toggle svg{ width:24px; height:24px; }

/* Mobile nav */
@media (max-width: 900px){
    .arm-main-nav{
        display:none; position:absolute; top:100%; left:0; right:0;
        background:var(--arm-green-950); flex-direction:column; gap:0;
        padding:8px 16px 16px; border-top:1px solid rgba(255,255,255,.08);
    }
    .arm-main-nav.is-open{ display:flex; }
    .arm-main-nav a{
        padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06);
    }
    .arm-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    .arm-cta-header{ display:none; }
}

/* Site footer */
.arm-site-footer{
    background:var(--arm-green-950); color:var(--arm-green-100);
    padding:36px 16px 18px; margin-top:40px;
    border-top:2px solid var(--arm-gold);
}
.arm-site-footer .arm-wrap{ max-width:1240px; margin:0 auto; }
.arm-site-footer .arm-foot-grid{
    display:grid; grid-template-columns:1fr; gap:24px;
}
@media (min-width:768px){
    .arm-site-footer .arm-foot-grid{ grid-template-columns:2fr 1fr; }
}
.arm-foot-features{ display:flex; flex-wrap:wrap; gap:18px; }
.arm-foot-features .item{ display:flex; align-items:center; gap:10px; }
.arm-foot-features .ic{
    width:38px; height:38px; border-radius:50%;
    border:2px solid var(--arm-gold-soft); color:var(--arm-gold);
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.arm-foot-tagline{
    border:2px solid rgba(251,191,36,.4); border-radius:14px;
    padding:18px; display:flex; flex-direction:column; justify-content:center;
}
.arm-foot-tagline h3{ margin:0 0 4px; color:var(--arm-gold); font-size:22px; }
.arm-foot-bottom{
    margin-top:22px; padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
    color:#6ee7b7; font-size:13px;
}

/* Content (single posts / pages) */
.arm-content{ max-width:880px; margin:0 auto; padding:24px 16px 40px; }
.arm-content h1{ font-size:clamp(24px,3.5vw,36px); margin-bottom:14px; color:var(--arm-green-900); }
.arm-content h2{ font-size:clamp(20px,2.6vw,28px); color:var(--arm-green-900); margin-top:28px; }
.arm-content p{ margin:0 0 14px; }
.arm-content blockquote{
    border-left:4px solid var(--arm-gold);
    padding:6px 14px; background:#fffbeb; color:#78350f; border-radius:6px;
}

/* Floating WhatsApp concierge (visible on every page) */
.arm-concierge{
    position:fixed; right:14px; bottom:14px; z-index:60;
    background:var(--arm-wa); color:#fff;
    padding:12px 16px; border-radius:50px;
    box-shadow:0 10px 26px rgba(37,211,102,.45);
    display:inline-flex; align-items:center; gap:8px;
    font-weight:600; text-decoration:none;
}
.arm-concierge:hover{ color:#fff; background:#1ebe57; }
.arm-concierge svg{ width:22px; height:22px; }
@media (max-width:480px){ .arm-concierge span{ display:none; } .arm-concierge{ padding:14px; } }

/* Auth button in header */
.arm-header-auth{ display:flex; align-items:center; }
.arm-auth-btn{
    display:flex; align-items:center; gap:8px;
    color:#fff; font-size:13px; font-weight:600;
    padding:6px 12px; border-radius:6px;
    background:rgba(255,255,255,.1); transition:background .2s;
    text-decoration:none;
}
.arm-auth-btn:hover{ background:rgba(255,255,255,.2); color:var(--arm-gold); }
@media (max-width:600px){ .arm-auth-btn span{ display:none; } .arm-auth-btn{ padding:8px; } }