/* ================================================================
   AL AZAZI — DESIGN SYSTEM v2 · "Refined Prestige"
   Rebuilt 2026-07-05. Lives in Customizer → Additional CSS.
   Fonts (@font-face IBM Plex Sans Arabic) live in global styles.
   AR: IBM Plex Sans Arabic · EN: Cormorant headings / Inter body
   ================================================================ */

:root {
  --azz-navy: #0A1929;
  --azz-navy-2: #12283F;
  --azz-ink: #1C2733;
  --azz-body-c: #3B4754;
  --azz-muted: #6B7684;
  --azz-gold: #C9A96E;
  --azz-gold-deep: #A98A50;
  --azz-line: #E6EAEF;
  --azz-bg-soft: #F7F8FA;
  --azz-font-ar: 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --azz-en-head: 'Cormorant', Georgia, 'Times New Roman', serif;
  --azz-en-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --azz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100vw; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*, *::before, *::after { box-sizing: border-box; }

/* ----------------------------------------------------------------
   1 · BASE TYPOGRAPHY
   ---------------------------------------------------------------- */
body { font-family: var(--azz-en-body); font-size: 16px; line-height: 1.75; color: var(--azz-body-c); }
h1, h2, h3, h4, h5, h6 { font-family: var(--azz-en-head); font-weight: 600; color: var(--azz-navy); letter-spacing: 0.005em; line-height: 1.25; }

html:lang(ar) body,
html:lang(ar) p, html:lang(ar) li, html:lang(ar) blockquote,
html:lang(ar) figcaption, html:lang(ar) cite, html:lang(ar) td, html:lang(ar) th,
html:lang(ar) input, html:lang(ar) textarea, html:lang(ar) button,
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3,
html:lang(ar) h4, html:lang(ar) h5, html:lang(ar) h6 {
  font-family: var(--azz-font-ar);
}
html:lang(ar) body { line-height: 2.05; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) h4 {
  font-weight: 700; letter-spacing: 0; line-height: 1.7;
}

a { transition: color 0.25s ease; }

/* Never justify text inside narrow columns (rivers of whitespace) */
main .wp-block-columns p:not(.azz-stat-num):not(.azz-stat-label) { text-align: start !important; }

/* ----------------------------------------------------------------
   2 · HEADER & NAVIGATION
   ---------------------------------------------------------------- */
header figure.wp-block-image { flex: 0 0 auto; margin: 0; }
header .wp-block-image img { height: auto; }
.wp-block-navigation a { position: relative; transition: color 0.3s ease; text-decoration: none; }
.wp-block-navigation a::after {
  content: ''; position: absolute; bottom: -4px; inset-inline-start: 0;
  width: 0; height: 1px; background: var(--azz-gold);
  transition: width 0.4s var(--azz-ease);
}
.wp-block-navigation a:hover::after { width: 100%; }
.wp-block-navigation a:hover { color: var(--azz-gold) !important; }
html:lang(ar) .wp-block-navigation { letter-spacing: 0 !important; font-size: 15px !important; }
header .wp-block-button .wp-block-button__link { white-space: nowrap !important; width: auto !important; }

/* ----------------------------------------------------------------
   3 · BUTTONS
   ---------------------------------------------------------------- */
.wp-block-button__link {
  transition: all 0.35s var(--azz-ease) !important;
  font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  padding: 13px 30px !important; border-radius: 2px !important;
}
html:lang(ar) .wp-block-button__link {
  font-family: var(--azz-font-ar) !important;
  font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(10,25,41,0.18); }
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--azz-gold) !important; color: #fff !important; border-color: var(--azz-gold) !important;
}

/* ----------------------------------------------------------------
   4 · PAGE HEROES (cover blocks)
   ---------------------------------------------------------------- */
.wp-block-cover h1 { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.3 !important; }
html:lang(ar) .wp-block-cover h1 { line-height: 1.65 !important; }
.wp-block-cover p { font-size: clamp(15px, 1.3vw, 17.5px); }
.wp-block-cover .wp-block-cover__inner-container { animation: azzFadeIn 1.1s ease both 0.2s; }

/* ----------------------------------------------------------------
   5 · SINGLE POST
   ---------------------------------------------------------------- */
body.single-post .wp-block-post-title {
  font-size: clamp(25px, 2.6vw, 31px); line-height: 1.4; font-weight: 600;
}
html:lang(ar) body.single-post .wp-block-post-title { line-height: 1.75; font-weight: 700; }
body.single-post .wp-block-post-title::after {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--azz-gold); margin: 22px auto 0;
}
.azz-postmeta { justify-content: center; font-size: 13px; color: var(--azz-muted); }
.azz-postmeta .wp-block-post-terms a {
  color: var(--azz-gold-deep); text-decoration: none; font-weight: 600; letter-spacing: 0.03em;
}
.azz-postmeta .wp-block-post-terms a:hover { color: var(--azz-navy); }

.wp-block-post-content h2 { font-size: 23px; margin-top: 2.3em; }
html:lang(ar) .wp-block-post-content h2 { font-size: 21.5px; }
.wp-block-post-content h2::after {
  content: ''; display: block; width: 40px; height: 2px;
  background: var(--azz-gold); margin-top: 12px;
}
.wp-block-post-content h3 { font-size: 19px; }
html:lang(ar) .wp-block-post-content h3 { font-size: 18px; }
.wp-block-post-content p, .wp-block-post-content li { font-size: 16.5px; }
html:lang(ar) .wp-block-post-content p, html:lang(ar) .wp-block-post-content li { font-size: 16px; line-height: 2.1; }
html:lang(ar) .wp-block-post-content > p { text-align: justify; }
.wp-block-post-content ul li::marker { color: var(--azz-gold); }
.wp-block-post-content a:not(.wp-element-button) { color: var(--azz-gold-deep); }
.wp-block-post-content a:not(.wp-element-button):hover { color: var(--azz-navy); }

.wp-block-quote { border-inline-start: 3px solid var(--azz-gold) !important; padding-inline-start: 28px !important; border-left: none; }
.wp-block-quote p { font-size: 19px !important; line-height: 1.9 !important; }

/* ----------------------------------------------------------------
   6 · BLOG ARCHIVE — card grid
   ---------------------------------------------------------------- */
.azz-archive-head { text-align: center; }
.azz-archive-kicker {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--azz-gold-deep); margin-bottom: 6px;
}
html:lang(ar) .azz-archive-kicker { letter-spacing: 0.08em; }
.azz-archive-title { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.azz-archive-sub { color: var(--azz-muted); font-size: 15.5px; max-width: 560px; margin: 14px auto 0; }

ul.azz-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  padding: 0; margin: 0; list-style: none;
}
ul.azz-cards > li {
  background: #fff;
  border: 1px solid var(--azz-line);
  border-top: 3px solid var(--azz-gold);
  padding: 28px 26px 24px;
  margin: 0 !important;
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--azz-ease), box-shadow 0.35s var(--azz-ease);
}
ul.azz-cards > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(10, 25, 41, 0.10);
}
.azz-cardmeta { font-size: 12px !important; color: var(--azz-muted); gap: 10px !important; align-items: center; }
.azz-cardmeta time { color: var(--azz-muted); }
.azz-cardmeta .wp-block-post-terms { font-size: 11.5px !important; }
.azz-cardmeta .wp-block-post-terms a {
  color: var(--azz-gold-deep); text-decoration: none; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
html:lang(ar) .azz-cardmeta .wp-block-post-terms a { letter-spacing: 0; }
ul.azz-cards .wp-block-post-title {
  font-size: 16px !important; line-height: 1.6 !important; font-weight: 600;
  margin: 12px 0 10px !important;
}
html:lang(ar) ul.azz-cards .wp-block-post-title { line-height: 1.95 !important; font-weight: 700; }
ul.azz-cards .wp-block-post-title a { color: var(--azz-navy); text-decoration: none; transition: color 0.25s ease; }
ul.azz-cards .wp-block-post-title a:hover { color: var(--azz-gold-deep); }
ul.azz-cards .wp-block-post-excerpt { flex-grow: 1; }
ul.azz-cards .wp-block-post-excerpt p {
  font-size: 13.5px !important; line-height: 1.85 !important; color: var(--azz-muted);
  margin: 0;
}
html:lang(ar) ul.azz-cards .wp-block-post-excerpt p { line-height: 2 !important; }
ul.azz-cards .wp-block-post-excerpt__more-text { display: none; }
.azz-readmore a, a.azz-readmore {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azz-gold-deep); text-decoration: none;
}
html:lang(ar) .azz-readmore a, html:lang(ar) a.azz-readmore { letter-spacing: 0.02em; font-size: 12.5px; }
.azz-readmore a:hover, a.azz-readmore:hover { color: var(--azz-navy); }
.azz-readmore { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--azz-line); }
.wp-block-read-more { display: block; }
.azz-metadot { color: var(--azz-muted); margin: 0 !important; }
.azz-cardmeta .wp-block-post-date { font-size: 12px; }

/* pagination */
.wp-block-query-pagination { font-size: 14px; }
.wp-block-query-pagination a {
  color: var(--azz-navy); text-decoration: none; font-weight: 600;
  padding: 10px 22px; border: 1px solid var(--azz-line); border-radius: 2px;
  transition: all 0.3s ease;
}
.wp-block-query-pagination a:hover { border-color: var(--azz-gold); color: var(--azz-gold-deep); }

/* ----------------------------------------------------------------
   7 · FOOTER
   ---------------------------------------------------------------- */
footer.wp-block-template-part, .wp-block-template-part footer { border-top: none; }
footer .wp-block-column h3 { line-height: 1.5; }
/* keep phone numbers / emails / times reading correctly on RTL pages
   without flipping Arabic headings */
footer .wp-block-column p { unicode-bidi: plaintext; }
body.rtl footer .wp-block-column p { text-align: right !important; }
footer p.azz-footer-brand { font-family: var(--azz-en-head) !important; }
.azz-footer-brand { font-family: var(--azz-en-head); color: #fff; font-size: 19px; letter-spacing: 0.04em; }
main .wp-block-column > p[style*="font-size:36px" i] { text-align: center !important; }
main .wp-block-column > p[style*="font-size:36px" i] + p { text-align: center !important; }
main .wp-block-column > p[style*="font-size:38px" i] { text-align: center !important; unicode-bidi: plaintext; }
main .wp-block-column > p[style*="font-size:38px" i] + p { text-align: center !important; }

/* hide WP credit */
.powered-by-wordpress, .site-info,
a[href*="wordpress.com"]:not(.wp-block-navigation-item__content),
footer a[href*="wordpress.org"] { display: none !important; }

/* ----------------------------------------------------------------
   8 · MOTION (gentle)
   ---------------------------------------------------------------- */
@keyframes azzFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes azzFadeIn { from { opacity: 0; } to { opacity: 1; } }
main .wp-block-columns, main .wp-block-cover, main > .wp-block-group > .wp-block-group {
  animation: azzFadeUp 0.7s var(--azz-ease) both;
}
main .wp-block-column:nth-child(2) { animation: azzFadeUp 0.7s var(--azz-ease) 0.1s both; }
main .wp-block-column:nth-child(3) { animation: azzFadeUp 0.7s var(--azz-ease) 0.2s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------
   9 · RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  ul.azz-cards { grid-template-columns: repeat(2, 1fr); }
  .wp-block-cover .wp-block-cover__inner-container { padding-left: 30px; padding-right: 30px; }
}

@media (max-width: 782px) {
  header .wp-block-group { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
  header .wp-block-image img { width: 230px !important; }
  .wp-block-navigation, .wp-block-navigation__container {
    flex-wrap: wrap !important; justify-content: center !important; gap: 4px 12px !important;
  }
  ul.azz-cards { grid-template-columns: 1fr; gap: 18px; }
  h1, .wp-block-cover h1 { font-size: 27px !important; }
  h2 { font-size: 21px !important; }
  h3 { font-size: 17.5px !important; }
  p, li { font-size: 15px !important; }
  html:lang(ar) p, html:lang(ar) li { line-height: 1.95 !important; }
  .wp-block-cover { min-height: 52vh !important; padding: 44px 18px !important; }
  .wp-block-columns { flex-direction: column !important; gap: 16px !important; }
  .wp-block-column { flex-basis: 100% !important; width: 100% !important; min-width: 0 !important; }
  [style*="padding-top:100"], [style*="padding-top: 100"], [style*="padding-bottom:100"], [style*="padding-bottom: 100"] {
    padding-top: 44px !important; padding-bottom: 44px !important;
  }
  [style*="padding-left:6"], [style*="padding-left: 6"], [style*="padding-right:6"], [style*="padding-right: 6"],
  [style*="padding-left:40"], [style*="padding-left: 40"], [style*="padding-right:40"], [style*="padding-right: 40"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  .wp-block-buttons { flex-wrap: wrap !important; justify-content: center !important; }
  .wp-block-spacer { height: 28px !important; }
  .wp-block-table { overflow-x: auto !important; display: block !important; }
  footer .wp-block-columns { text-align: center !important; }
  body.single-post .wp-block-post-title { font-size: 22px !important; }
}

@media (max-width: 480px) {
  header .wp-block-image img { width: 190px !important; }
  .wp-block-cover { min-height: 44vh !important; }
  .wp-block-button .wp-block-button__link { display: block !important; text-align: center !important; width: 100% !important; }
}

@supports (-webkit-touch-callout: none) {
  .wp-block-cover.has-parallax, .wp-block-cover[style*="background-attachment"] { background-attachment: scroll !important; }
}