/*
Theme Name: AALawyer Landing
Theme URI: https://aalawyer.co
Author: Ahmad AlSulaili
Description: Landing-page theme generated from provided design snapshot.
Version: 1.2.9
Text Domain: aalawyer-landing
Requires at least: 5.8
Tested up to: 6.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: rtl-language-support, custom-background, custom-logo
*/

/*
  Theme overrides
  هدفها جعل عرض المقالات قريب من قالب Twenty Twenty: خط واضح، عرض مركزي،
  صورة مميزة أعلى المقال، وتنسيق نص مريح للقراءة.
*/

:root{
  --aal-primary: #0b1f3a; /* كحلي */
  --aal-secondary: #ffffff;
  --aal-text: #111827;
  --aal-muted: #6b7280;
  --aal-border: rgba(17,24,39,.12);
}

body{
  font-family: "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--aal-text);
  background: #fff;
  line-height: 1.85;
}

a{ color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover{ opacity: .85; }

/* Layout helpers */
.aal-container{
  width: min(58rem, calc(100% - 2rem));
  margin-inline: auto;
}

/* Better centering on mobile (avoid large side gaps) */
@media (max-width: 600px){
  .aal-container{
    width: 100%;
    padding-inline: .5rem;
  }
}

/* Mobile reading comfort: slightly smaller type + true edge-to-edge layout without side gaps */
@media (max-width: 600px){
  html, body{ overflow-x: hidden; }

  /* Slightly reduce overall type to fit better on small screens */
  body{ font-size: 15px; }

  /* Make list cards feel full-width without cramped edges */
  .aal-entry{ margin: .85rem 0; }

  /* Keep reading text comfortable (not too large on phones) */
  .entry-content,
  .content{ font-size: 1rem; }

  /* Reduce hero vertical space on mobile */
  .aal-hero-inner{ padding: 3.25rem 0 1.75rem; }
}

.aal-site-header{
  /* Always-visible header on mobile/desktop.
     Fixed positioning avoids iOS Safari sticky glitches where the header can scroll away.
     We also offset for the WP admin bar when logged in. */
  position: fixed !important;
  top: var(--aal-adminbar-h, 0px) !important;
  left: 0;
  right: 0;
  z-index: 9999;
  /* Force header navy even if snapshot CSS overrides it */
  background: #0b1f3a !important; /* كحلي */
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Body top padding is set dynamically via JS to match header height + admin bar.
   Fallback keeps content visible even before JS runs. */
body{ padding-top: 120px; }

.aal-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Slim header height so it doesn't push content down */
  padding: .55rem 0;
}

.aal-brand{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.aal-brand-text{ display: flex; flex-direction: column; }

.aal-brand-sep{
  width: 100%;
  max-width: 14rem;
  height: 1px;
  margin-top: .20rem;
  margin-bottom: .20rem;
  background: rgba(255,255,255,.20);
}

.aal-site-header .aal-brand img{
  /* Keep logo readable without making the header too tall */
  width: 60px !important;
  height: 60px !important;
  border-radius: .6rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.aal-brand-title{ font-weight: 800; color: #fff; }
.aal-brand-tag{ font-size: .78rem; color: rgba(255,255,255,.78); margin-top: .05rem; }

.aal-nav ul{ list-style: none; display: flex; gap: .9rem; padding: 0; margin: 0; flex-wrap: wrap; }
.aal-nav a{ font-weight: 800; font-size: .95rem; padding: .45rem .55rem; color: rgba(255,255,255,.92) !important; white-space: nowrap; border-radius: 999px; }
.aal-nav a:hover{ color: #fff; background: rgba(255,255,255,.08); }
.aal-nav a.is-active,
.aal-nav li.is-active > a{
  color: #fff !important;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Mobile header: keep things tidy and prevent the logo/menu from breaking the layout */
@media (max-width: 720px){
  .aal-header-inner{
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    padding: .45rem 0;
  }
  .aal-brand{
    width: 100%;
    justify-content: flex-start;
  }
  .aal-site-header .aal-brand img{ width: 54px !important; height: 54px !important; }
  .aal-brand-title{ font-size: 1.02rem; }
  .aal-brand-tag{ display: block; font-size: .80rem; line-height: 1.45; max-width: 30ch; }
  .aal-brand-sep{ max-width: 12.5rem; }

  /* Mobile: show a compact inline nav under the logo (no floating drawer). */
  .aal-nav{
    width: 100%;
    padding-top: .15rem;
  }
  .aal-nav ul{
    gap: .45rem;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .aal-nav ul::-webkit-scrollbar{ display: none; }
  .aal-nav a{
    font-size: .88rem;
    padding: .42rem .65rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
  }
  .aal-nav a:hover{ background: rgba(255,255,255,.12); }
  .aal-nav a.is-active,
  .aal-nav li.is-active > a{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.24);
  }
}


/* Hero (بدون صورة المدينة) */
.aal-hero{
  background: radial-gradient(1200px 500px at 80% -10%, rgba(11,31,58,.25), transparent 55%),
              linear-gradient(180deg, rgba(11,31,58,.08), transparent 55%);
  border-bottom: 1px solid var(--aal-border);
}

.aal-hero-inner{ padding: 4.5rem 0 2.5rem; }
.aal-hero h1{ font-size: clamp(2rem, 3vw + 1rem, 3.25rem); line-height: 1.2; margin: 0 0 .75rem; }
.aal-hero p{ margin: 0; color: var(--aal-muted); font-size: 1.05rem; max-width: 52ch; }

/* Post (Twenty Twenty-ish)
   Card-like background on list pages to visually separate posts */
.aal-entry{
  background: rgba(11,31,58,.03);
  border: 1px solid var(--aal-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  margin: 1.5rem 0;
}

/* Make embedded media responsive inside post cards */
.aal-entry img,
.aal-entry figure,
.aal-entry iframe,
.aal-entry embed,
.aal-entry object,
.aal-entry video{
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px){
  .aal-entry{
    padding: 1.25rem 1rem;
    margin: 1rem 0;
    border-radius: 14px;
  }
}

.aal-entry + .aal-entry{ border-top: 0; }

/* On single post pages, keep the reading layout clean (no card box) */
body.single .aal-entry,
body.page .aal-entry{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.aal-entry-header h1,
.aal-entry-header h2{
  margin: 0 0 .5rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 900;
}

/* Make post titles bold wherever they appear */
h1.entry-title, h2.entry-title, .entry-title a{
  font-weight: 900;
}

.aal-entry-meta{
  color: var(--aal-muted);
  font-size: .9rem;
}

/* Single post meta row (tags + author + date) */
.aal-entry-meta-top{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .65rem;
  color: var(--aal-muted);
  font-size: .92rem;
}

.aal-meta-tags{ display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.aal-meta-tags a{
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid rgba(17,24,39,.12);
  background: #f3f4f6;
  border-radius: 999px;
  color: #111827;
  text-decoration: none;
  font-size: .85rem;
  line-height: 1.2;
}
.aal-meta-tags a:hover{ background: #e5e7eb; }

.aal-meta-author{ font-weight: 700; }
.aal-meta-sep{ opacity: .65; }

/* Share buttons */
.aal-share{
  margin-top: 1.75rem;
  padding: 1rem;
  border: 1px solid var(--aal-border);
  border-radius: 14px;
  background: #fafafa;
}
.aal-share-title{
  margin: 0 0 .75rem;
  font-size: 1.0rem;
  font-weight: 800;
}
.aal-share-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.aal-share-btn{
  appearance: none;
  border: 1px solid var(--aal-border);
  background: #ffffff;
  color: #111827;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
}
.aal-share-btn:hover{ background: #f3f4f6; }

@media (max-width: 520px){
  .aal-share{ padding: .85rem; }
  .aal-share-btn{ flex: 1 1 auto; text-align: center; }
}

.aal-featured{
  margin: 1.25rem 0;
}

.aal-featured img{
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.entry-content,
.content{
  font-size: 1.05rem;
}

.entry-content > *{ margin-block: 1rem; }
.entry-content h2, .entry-content h3{ line-height: 1.3; margin-top: 2rem; }
.entry-content blockquote{
  border-inline-start: 4px solid var(--aal-primary);
  padding-inline-start: 1rem;
  color: #1f2937;
  margin-inline: 0;
}

.entry-content img{ max-width: 100%; height: auto; }

/* Wide/full alignments */
.entry-content .alignwide{ width: min(76rem, calc(100vw - 2rem)); margin-inline: calc(50% - min(38rem, (100vw - 2rem)/2)); }
.entry-content .alignfull{ width: 100vw; margin-inline: calc(50% - 50vw); }

/* Pagination */
.navigation.pagination{ margin: 2rem 0 4rem; }

/* Footer */
.aal-site-footer{
  border-top: 1px solid var(--aal-border);
  padding: 2rem 0;
  color: var(--aal-muted);
  font-size: .9rem;
}

/* WhatsApp floating button (أسفل يسار دائماً) */
.aal-whatsapp-float{
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 9999;
  text-decoration: none;
}
.aal-whatsapp-float:hover{ filter: brightness(.95); transform: translateY(-1px); }
.aal-whatsapp-float svg{ width: 28px; height: 28px; }


/* Safety: hide any leftover floating menu button from old versions (if cached/inserted by plugin). */
.aal-menu-toggle,
.aal-menu-fab,
.aal-fab-menu,
.menu-fab,
.floating-menu,
.floating-menu-button{
  display: none !important;
}

/* Menu is always visible: hide any hamburger/toggle UI that might come from cached markup or plugins. */
.aal-hamburger,
.aal-menu-btn,
.aal-mobile-toggle,
.menu-toggle,
button.menu-toggle,
.aal-site-header button[aria-controls],
.aal-site-header button[aria-label*="menu" i],
.aal-site-header button[aria-label*="القائمة" i]{
  /* We scope lightly but keep it strong for iOS cached HTML */
  display: none !important;
}