/*
Theme Name:   Al-Fahal Law — Divi Child
Theme URI:    https://alfahal-law.com/
Description:  Brand, RTL and performance layer for the Al-Fahal Law rebuild. Green #1C5A29 / brown #ad7326.
Author:       Al-Fahal Law
Template:     Divi
Version:      1.0.0
Text Domain:  alfahal
*/

/* =========================================================================
   Brand tokens — change here, everything follows
   ========================================================================= */
:root{
  --af-green:#1C5A29;
  --af-green-900:#123A1B;
  --af-green-700:#164A22;
  --af-leaf:#2F8A44;
  --af-brown:#ad7326;
  --af-brown-400:#c9913f;
  --af-sand:#f7f4ee;
  --af-sand-200:#e9e3d8;
  --af-ink:#16241a;
  --af-ink-60:#4d5b50;
  --af-line:rgba(28,90,41,.14);
}

/* =========================================================================
   Typography
   ========================================================================= */
body, .et_pb_module{ -webkit-font-smoothing:antialiased; }

html[lang^="ar"] body,
body.af-rtl{
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size:18px;
  line-height:1.95;
}
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, body.af-rtl h1, body.af-rtl h2, body.af-rtl h3, body.af-rtl h4{
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
  letter-spacing:0;
  line-height:1.4;
}
html[lang^="en"] h1, html[lang^="en"] h2, html[lang^="en"] h3{
  font-family:"Playfair Display", Georgia, serif;
  letter-spacing:-.015em;
}

/* =========================================================================
   RTL — Divi ships an rtl.css but misses these
   ========================================================================= */
body.rtl .et_pb_row{ direction:rtl; }
body.rtl .et_pb_blurb_content{ text-align:right; }
body.rtl .et_pb_main_blurb_image{ margin-right:0; }
body.rtl .et_pb_contact_form_label{ text-align:right; }
body.rtl .et_pb_contact_field input,
body.rtl .et_pb_contact_field textarea{ text-align:right; direction:rtl; }
body.rtl .et_pb_contact_field input[type="tel"],
body.rtl .et_pb_contact_field input[type="email"]{ text-align:left; direction:ltr; }
body.rtl .et_pb_toggle_title:before{ right:auto; left:0; }
body.rtl .et_pb_toggle_title{ padding-right:0; padding-left:38px; }
body.rtl .et_pb_number_counter{ border-left:0; border-right:2px solid var(--af-brown); padding:0 24px 0 0; }
body.rtl .et_pb_team_member_image{ float:none; }
body.rtl ul, body.rtl ol{ padding-right:0; }
body.rtl .et-menu li li{ padding-right:20px; padding-left:0; }
body.rtl .et_pb_menu__logo-wrap{ margin-left:30px; margin-right:0; }

/* keep Latin fragments (phone numbers, emails) reading left-to-right inside RTL */
body.rtl [dir="ltr"]{ direction:ltr; display:inline-block; unicode-bidi:embed; }

/* =========================================================================
   Header
   ========================================================================= */
.af-topbar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.72);
}
.af-topbar a{ color:rgba(255,255,255,.72); }
.af-topbar a:hover{ color:#fff; }
.af-topbar .af-lang{ margin-inline-start:auto; display:inline-flex;
  border:1px solid rgba(255,255,255,.18); border-radius:4px; overflow:hidden; }
.af-topbar .af-lang a{ padding:3px 11px; font-weight:600; font-size:12px; }
.af-topbar .af-lang a.is-active{ background:var(--af-brown); color:#fff; }
@media (max-width:768px){ .af-topbar .af-hours{ display:none; } }

/* Sticky header. Done in CSS rather than Divi's sticky option so it behaves
   identically in RTL and does not depend on builder-version-specific attrs. */
.af-header{ position:sticky; top:0; z-index:9999; }
body.admin-bar .af-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .af-header{ top:46px; } }
.af-header{ box-shadow:0 8px 24px -16px rgba(18,58,27,.5); }
.af-header .et_pb_menu .et-menu > li > a{ padding:12px 16px; border-radius:4px; }
.af-header .et_pb_menu .et-menu > li > a:hover{ background:rgba(255,255,255,.08); }

/* =========================================================================
   Hero chips / department pills
   ========================================================================= */
.af-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:56px;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.16); }
.af-chip{ display:inline-flex; padding:9px 18px; font-size:14px; border-radius:100px;
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.86); transition:.2s; }
.af-chip:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.42); color:#fff; }

.af-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.af-pill{ padding:10px 18px; border:1px solid var(--af-line); border-radius:100px;
  font-size:15px; color:var(--af-ink-60); background:#fff; transition:.2s; }
.af-pill:hover{ background:var(--af-green); border-color:var(--af-green); color:#fff; }

/* =========================================================================
   Checklists
   ========================================================================= */
ul.af-checks{ list-style:none !important; padding:0 !important; margin:0 0 1em; }
ul.af-checks li{
  position:relative; padding-inline-start:34px; margin-bottom:12px;
  color:var(--af-ink-60); line-height:1.8;
}
ul.af-checks li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em;
  width:19px; height:19px; border-radius:50%; background:var(--af-leaf);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}

/* =========================================================================
   Quote / cite
   ========================================================================= */
blockquote{ border:0 !important; padding:0 !important; margin:0 0 20px !important; font-style:normal; }
.af-cite{ font-size:15px; color:rgba(255,255,255,.65) !important; margin:0 !important; }
.af-cite strong{ color:#fff; display:block; }

/* =========================================================================
   Contact info list + map
   ========================================================================= */
ul.af-info{ list-style:none !important; padding:0 !important; }
ul.af-info li{ padding-block:18px; border-bottom:1px solid var(--af-line); line-height:1.7; }
ul.af-info li:last-child{ border-bottom:0; }
ul.af-info strong{ color:var(--af-green); font-size:14px; letter-spacing:.02em; }

.af-map{ border-radius:10px; overflow:hidden; border:1px solid var(--af-line); }
.af-map iframe{ display:block; width:100%; height:380px; border:0; }

/* =========================================================================
   Floating WhatsApp
   ========================================================================= */
.af-wa-wrap .et_pb_row{ padding:0 !important; }
.af-wa{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:99999;
  width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 32px -12px rgba(0,0,0,.45);
  transition:transform .2s;
}
.af-wa:hover{ transform:scale(1.07); color:#fff; }

/* =========================================================================
   Cards + misc polish
   ========================================================================= */
.et_pb_blurb{ transition:transform .25s, box-shadow .25s; height:100%; }
.et_pb_blurb:hover{ transform:translateY(-4px); box-shadow:0 12px 32px -12px rgba(18,58,27,.22); }
.et_pb_team_member_image img{ border-radius:10px; width:100%; }
.et_pb_post .entry-title a{ color:var(--af-green); }
.et_pb_post .entry-title a:hover{ color:var(--af-brown); }
.et_pb_accordion .et_pb_toggle{ padding:0; }

a{ transition:color .2s; }
.et_pb_button{ transition:transform .2s, background-color .2s; }
.et_pb_button:hover{ transform:translateY(-2px); }
.et_pb_button:after{ display:none !important; }

/* focus visibility — Divi strips it by default */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--af-leaf); outline-offset:3px;
}

/* skip link */
.af-skip{ position:absolute; inset-inline-start:-9999px; }
.af-skip:focus{ inset-inline-start:12px; top:12px; z-index:200000; background:#fff;
  color:var(--af-green); padding:12px 20px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
@media print{
  .af-header, .af-topbar-section, .af-wa, .af-footer, .af-cta{ display:none !important; }
}