/*
Theme Name: Office 40 - مكتب أربعين
Theme URI: https://rqm40.sa
Description: Child theme of Twenty Twenty-Five for مؤسسة مكتب الرقم أربعين للعقارات. Brand identity, light/dark modes, property listings, and ready-made block patterns. Arabic / RTL.
Author: Office 40
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.6
Tested up to: 6.8
Text Domain: office40
*/

/* ============================================================
   1. BRAND TOKENS + LIGHT / DARK MODE  (light is default)
   ============================================================
   PALETTE: Cream & Grey + Gold Highlights
   Primary ........... #363636  (refined charcoal)
   Primary deep ...... #1E1E1E  (soft black)
   Accent ............ #B8963E  (rich gold)
   Accent soft ....... #D4BF7E  (champagne)
   Surface tint ...... #F0EDE6  (warm pearl)
   Page bg ........... #F9F8F5  (cream white)
   Ink ............... #252525  (near black)
   Muted ............. #9A958E  (warm grey)
   ============================================================ */
:root{
  --o40-emerald:#363636;
  --o40-emerald-deep:#1E1E1E;
  --o40-gold:#B8963E;
  --o40-gold-soft:#D4BF7E;
  --o40-sand:#F0EDE6;
  --o40-ink:#252525;
  --o40-stone:#9A958E;

  --o40-bg:#F9F8F5;
  --o40-surface:#FFFFFF;
  --o40-surface-2:#EDEBE5;
  --o40-text:#252525;
  --o40-text-soft:#9A958E;
  --o40-border:#DDD9D1;
  --o40-accent-text:#363636;
  --o40-shadow:18px 30px rgba(37,37,37,.08);
}

[data-theme="dark"]{
  --o40-bg:#111111;
  --o40-surface:#1A1A1A;
  --o40-surface-2:#151515;
  --o40-text:#E8E5DF;
  --o40-text-soft:#A09B94;
  --o40-border:#2E2C28;
  --o40-accent-text:#D4BF7E;
  --o40-shadow:18px 34px rgba(0,0,0,.55);
}

body,
.wp-site-blocks{ background-color:var(--o40-bg); color:var(--o40-text); }

body{ font-family:"Tajawal", system-ui, sans-serif; }
h1,h2,h3,.office40-card__title{ font-family:"El Messiri", serif; }

[data-theme="dark"] .has-emerald-color{ color:var(--o40-accent-text) !important; }
.office40-card__title a,
.office40-card__price,
.office40-meta li strong{ color:var(--o40-accent-text); }

/* ============================================================
   2. SECTION SHELLS + BACKGROUND VARIETY
   ============================================================ */
.office40-sec{ padding-block:68px; padding-inline:24px; }
.office40-bg-cream{ background:var(--o40-bg); color:var(--o40-text); }
.office40-bg-sand{ background:var(--o40-surface-2); color:var(--o40-text); }
.office40-bg-emerald{ background:var(--o40-emerald); color:#E8E5DF; }
.office40-bg-deep{ background:var(--o40-emerald-deep); color:#E8E5DF; }

.office40-inner{ max-width:1100px; margin-inline:auto; }

.office40-eyebrow{
  text-align:center; color:var(--o40-gold);
  font-family:"Inter", sans-serif; font-weight:700;
  letter-spacing:4px; font-size:12px; margin:0 0 6px;
}
.office40-sec > h2,
.office40-sec .office40-h2{ text-align:center; margin-block:0 8px; font-size:30px; }
.office40-lead{
  text-align:center; max-width:680px; margin:0 auto 36px;
  color:var(--o40-text-soft); font-size:16px; line-height:1.9;
}
.office40-rule{ width:54px; height:3px; background:var(--o40-gold); border:0; border-radius:2px; margin:14px auto 28px; }

/* ============================================================
   3. HERO  (charcoal gradient + gold rings)
   ============================================================ */
.office40-hero{ position:relative; overflow:hidden; text-align:start; }
.office40-hero.has-background{
  background-image:linear-gradient(155deg, #363636 0%, #1E1E1E 100%) !important;
}
.office40-hero::before,
.office40-hero::after{
  content:""; position:absolute; border:1.5px solid rgba(184,150,62,.18);
  border-radius:50%; pointer-events:none;
}
.office40-hero::before{ inset-inline-start:-90px; inset-block-start:-90px; width:300px; height:300px; }
.office40-hero::after{ inset-inline-start:20px; inset-block-start:40px; width:180px; height:180px; opacity:.6; }
.office40-hero > *{ position:relative; }

/* ============================================================
   4. STATS  (floating card)
   ============================================================ */
.office40-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  text-align:center; background:var(--o40-emerald-deep);
  padding:30px 26px; max-width:1040px; margin:-48px auto 0;
  border-radius:18px; position:relative; z-index:3;
  box-shadow:0 var(--o40-shadow); border:1px solid rgba(184,150,62,.14);
}
.office40-stats .num{ font-family:"Inter", sans-serif; font-weight:800; font-size:32px; color:var(--o40-gold); }
.office40-stats .lbl{ font-size:13px; color:var(--o40-gold-soft); margin-top:2px; }
@media (max-width:781px){ .office40-stats{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   5. ICON TILES  (services + why-us)
   ============================================================ */
.office40-cardgrid{ max-width:1100px; margin-inline:auto; }

.office40-tile{
  background:var(--o40-surface); border:1px solid var(--o40-border);
  border-radius:18px; padding:28px 22px; text-align:center; height:100%;
  position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.office40-tile::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--o40-gold); transform:scaleX(0); transform-origin:center;
  transition:transform .35s ease;
}
.office40-tile:hover{ transform:translateY(-7px); box-shadow:0 var(--o40-shadow); border-color:transparent; }
.office40-tile:hover::before{ transform:scaleX(1); }
.office40-tile p{ color:var(--o40-text-soft); font-size:14.5px; line-height:1.8; margin:6px 0 0; }

.office40-ic{
  width:56px; height:56px; border-radius:50%; background:var(--o40-surface-2);
  display:grid; place-items:center; margin:0 auto 16px;
  transition:background .3s ease; border:1px solid var(--o40-border);
}
.office40-tile:hover .office40-ic{ background:var(--o40-emerald); border-color:var(--o40-emerald); }
.office40-ic::before{
  content:""; width:27px; height:27px; background:var(--o40-gold);
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
.ic-shield{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic-pin{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ic-chart{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 17v-4M12 17V8M16 17v-6'/%3E%3C/svg%3E"); }
.ic-headset{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1'/%3E%3Cpath d='M19 19a4 4 0 01-4 3h-2'/%3E%3C/svg%3E"); }
.ic-tag{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l9-9 9 9-9 9z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.4'/%3E%3C/svg%3E"); }
.ic-key{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Cpath d='M11 11l9 9M17 17l2-2M15 19l2-2'/%3E%3C/svg%3E"); }
.ic-map{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.ic-mega{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v3l5 1 3 5h2V5h-2L8 10 3 11z'/%3E%3Cpath d='M16 9a4 4 0 010 7'/%3E%3C/svg%3E"); }
.ic-doc{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h5'/%3E%3C/svg%3E"); }
.ic-building{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V5l7-2 7 2v16'/%3E%3Cpath d='M3 21h18M9 9h2M13 9h2M9 13h2M13 13h2M9 17h2M13 17h2'/%3E%3C/svg%3E"); }

/* ============================================================
   6. PROCESS STEPS  (on soft black)
   ============================================================ */
.office40-step{ text-align:center; padding:8px 14px; }
.office40-step .no{
  width:54px; height:54px; border-radius:50%; margin:0 auto 14px;
  display:grid; place-items:center; font-family:"Inter", sans-serif; font-weight:800;
  font-size:20px; color:var(--o40-emerald-deep); background:var(--o40-gold);
}
.office40-step h3{ color:#E8E5DF; font-size:18px; margin:0 0 6px; }
.office40-step p{ color:var(--o40-gold-soft); font-size:14px; line-height:1.8; margin:0; }

/* ============================================================
   7. TESTIMONIALS
   ============================================================ */
.office40-quote{
  background:var(--o40-surface); border:1px solid var(--o40-border);
  border-radius:18px; padding:28px 24px; position:relative; height:100%;
  box-shadow:0 8px 20px rgba(37,37,37,.05);
}
.office40-quote::before{
  content:"\201D"; font-family:"El Messiri", serif; color:var(--o40-gold);
  font-size:64px; line-height:1; position:absolute; inset-block-start:6px; inset-inline-start:20px; opacity:.4;
}
.office40-quote p{ color:var(--o40-text); font-size:15px; line-height:1.9; margin:18px 0 14px; }
.office40-quote .who{ color:var(--o40-gold); font-weight:700; font-size:14px; }

/* ============================================================
   8. ABOUT highlight card
   ============================================================ */
.office40-highlight{
  background:var(--o40-emerald); color:#E8E5DF;
  border-radius:18px; padding:30px 26px;
}
.office40-highlight h3{ color:var(--o40-gold); margin:0 0 14px; font-size:20px; }
.office40-highlight ul{ list-style:none; margin:0; padding:0; }
.office40-highlight li{ padding:9px 0; border-bottom:1px solid rgba(184,150,62,.18); }
.office40-highlight li:last-child{ border-bottom:0; }

/* ============================================================
   9. PROPERTY LISTINGS
   ============================================================ */
.office40-listings{ max-width:1100px; margin-inline:auto; }
.office40-filterbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; margin-bottom:1.5rem;
}
.office40-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.office40-filter{
  border:1px solid var(--o40-border); background:var(--o40-surface); color:var(--o40-accent-text);
  border-radius:999px; padding:8px 18px; font-family:inherit; font-size:14px; cursor:pointer;
  transition:all .25s ease;
}
.office40-filter:hover{ border-color:var(--o40-gold); }
.office40-filter.is-active{ background:var(--o40-emerald); color:#E8E5DF; border-color:var(--o40-emerald); }
.office40-city{
  border:1px solid var(--o40-border); background:var(--o40-surface); color:var(--o40-text);
  border-radius:10px; padding:9px 14px; font-family:inherit; font-size:14px;
}
.office40-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
.office40-card{
  background:var(--o40-surface); border:1px solid var(--o40-border); border-radius:18px;
  overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, opacity .35s ease;
}
.office40-card:hover{ transform:translateY(-7px); box-shadow:0 var(--o40-shadow); }
.office40-card.is-hidden{ display:none; }
.office40-card__media{ display:block; position:relative; aspect-ratio:3 / 2; background:var(--o40-surface-2); overflow:hidden; }
.office40-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.office40-card:hover .office40-card__media img{ transform:scale(1.05); }
.office40-card__placeholder{ position:absolute; inset:0; background:linear-gradient(155deg,#363636,#1E1E1E); }
.office40-card__tag{
  position:absolute; inset-inline-start:14px; inset-block-start:14px;
  background:var(--o40-gold); color:#fff; font-size:12px; font-weight:700;
  padding:5px 13px; border-radius:999px;
}
.office40-card__body{ padding:18px; }
.office40-card__title{ font-size:18px; margin:0 0 6px; line-height:1.3; }
.office40-card__title a{ text-decoration:none; }
.office40-card__loc,.office40-card__area{ color:var(--o40-text-soft); font-size:14px; margin:2px 0; }
.office40-card__foot{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--o40-border); margin-top:14px; padding-top:14px;
}
.office40-card__price{ font-weight:700; font-family:"Inter", sans-serif; }
.office40-card__price small{ color:var(--o40-text-soft); font-weight:400; }
.office40-card__link{ color:var(--o40-gold); font-weight:700; font-size:14px; text-decoration:none; }
.office40-empty{ color:var(--o40-text-soft); grid-column:1 / -1; text-align:center; padding:30px; }

.office40-meta{
  list-style:none; padding:0; margin:1.25rem 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px;
}
.office40-meta li{ background:var(--o40-surface-2); border-radius:12px; padding:14px; display:flex; flex-direction:column; }
.office40-meta li span{ color:var(--o40-text-soft); font-size:13px; }
.office40-meta li strong{ font-size:16px; }

/* ============================================================
   10. BRANCHES
   ============================================================ */
.office40-branch{
  width:100%; max-width:440px; margin-inline:auto;
  background:var(--o40-surface); border:1px solid var(--o40-border);
  border-radius:18px; overflow:hidden; box-shadow:0 8px 20px rgba(37,37,37,.05);
}
.office40-branch.is-layout-constrained > *,
.office40-branch > *{ max-width:none !important; margin-inline:0 !important; }
.office40-branch__head{ position:relative; height:104px; background:var(--o40-emerald); }
.office40-branch__head::after{
  content:""; position:absolute; top:50%; left:50%;
  width:24px; height:24px; background:var(--o40-gold);
  border-radius:50% 50% 50% 0; transform:translate(-50%,-60%) rotate(-45deg);
  box-shadow:inset 0 0 0 6px var(--o40-emerald-deep);
}
.office40-branch__body{ padding:20px 22px; }
.office40-branch__body p{ margin:4px 0; color:var(--o40-text); }

/* ============================================================
   11. CONTACT
   ============================================================ */
.office40-contact{ text-align:center; }
.office40-contactline{ color:var(--o40-gold-soft) !important; }

/* ============================================================
   12. BUTTONS
   ============================================================ */
.wp-block-button.office40-btn .wp-block-button__link{ transition:transform .2s ease, background-color .25s ease; }
.wp-block-button.office40-btn .wp-block-button__link:hover{ transform:translateY(-2px); }

/* ============================================================
   13. HEADER + FOOTER
   ============================================================ */
.office40-header{
  background:var(--o40-bg); border-bottom:1px solid var(--o40-border);
  position:sticky; top:0; z-index:50;
}
.office40-header .wp-block-site-title{ margin:0; }
.office40-header .wp-block-site-title a{
  font-family:"El Messiri", serif; font-weight:700; font-size:20px;
  color:var(--o40-accent-text); text-decoration:none;
}
.office40-header .wp-block-navigation a{ color:var(--o40-text); }
.office40-header .wp-block-navigation a:hover{ color:var(--o40-gold); }
.office40-header .wp-block-site-logo img{ border-radius:10px; }

.office40-footer .wp-block-site-title{ margin:0 0 8px; }
.office40-footer .wp-block-site-title a{
  font-family:"El Messiri", serif; font-weight:700; font-size:22px;
  color:#E8E5DF; text-decoration:none;
}

/* ============================================================
   14. DARK / LIGHT TOGGLE
   ============================================================ */
.office40-toggle{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--o40-border); background:var(--o40-surface); color:var(--o40-text);
  border-radius:999px; padding:7px 14px; font-family:inherit; font-size:13px; cursor:pointer;
  transition:border-color .25s ease;
}
.office40-toggle:hover{ border-color:var(--o40-gold); }

/* ============================================================
   15. SCROLL REVEAL
   ============================================================ */
.office40-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.office40-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .office40-reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width:781px){
  .office40-sec{ padding-block:48px; }
  .office40-header{ flex-wrap:wrap; gap:10px; }
}