/*
Theme Name: Abdullah Al Mubarak
Theme URI: https://abdullahalmubarak.online
Author: Abdullah Al Mubarak
Author URI: https://abdullahalmubarak.online
Description: الهوية الشخصية لعبدالله آل مبارك — تحوّل مُحوكَم، وأثر يُقاس. قالب كتلي (Block theme) يطبّق نظام الهوية: خط Almarai، الليلي والرملي والإشارة، وعلامة البلاطات الأربع.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: almubarak
Tags: block-patterns, full-site-editing, rtl-language-support, one-column, custom-logo, blog, portfolio
*/

/* =========================================================
   0. Tokens that theme.json cannot express
   (dark theme, component-level values, patterns)
   ========================================================= */
:root {
  --am-brand-on-midnight: #3fcfc1;
  --am-brand-on-midnight-strong: #7fe0d6;
  --am-muted-on-midnight: #a8b2c3;
  --am-focus-ring: 0 0 0 2px var(--wp--preset--color--surface), 0 0 0 4px var(--wp--preset--color--brand);
  --am-icon-filter: none;
  --am-dot-grid: url("assets/patterns/dot-grid.svg");
  --am-transform-grid: url("assets/patterns/transform-grid.svg");
  --am-line-on-midnight: #f1ede426;
  color-scheme: light;
}

/* Dark theme follows the system preference; light is the fallback.
   Midnight and on-midnight stay fixed in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body {
    --wp--preset--color--surface: #0b1a2e;
    --wp--preset--color--surface-raised: #122540;
    --wp--preset--color--sand: #3a3328;
    --wp--preset--color--line: #2a3b55;
    --wp--preset--color--line-strong: #6e8199;
    --wp--preset--color--ink: #f1ede4;
    --wp--preset--color--ink-muted: #a8b2c3;
    --wp--preset--color--brand: #3fcfc1;
    --wp--preset--color--brand-strong: #7fe0d6;
    --wp--preset--color--brand-soft: #0f3a3e;
    --wp--preset--color--on-brand: #0b1a2e;
    --wp--preset--shadow--sm: 0 1px 3px #000000a6;
    --wp--preset--shadow--lg: 0 12px 32px -4px #000000d9;
    --am-icon-filter: invert(1) hue-rotate(180deg) brightness(1.1);
    --am-dot-grid: url("assets/patterns/dot-grid-reverse.svg");
    --am-transform-grid: url("assets/patterns/transform-grid-reverse.svg");
    color-scheme: dark;
  }
}

/* =========================================================
   1. Base
   ========================================================= */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { text-align: start; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, .wp-block-button__link, .wp-block-navigation { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
p { margin-block: 0; }
::selection { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--ink); }
img { height: auto; max-width: 100%; }
figure { margin-inline: 0; }

/* Focus ring: 2px gap in page colour, then 2px brand — follows the radius */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.wp-block-button__link:focus-visible, .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--am-focus-ring);
  border-radius: var(--wp--custom--radius--sm);
}

/* Ink-muted helper */
.am-muted { color: var(--wp--preset--color--ink-muted); }

/* Latin text inside an Arabic document: isolate so punctuation sits right */
.am-ltr { direction: ltr; unicode-bidi: isolate; }
.am-ltr-block { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Overline label: الوسوم · LABELS */
.am-overline {
  font-size: var(--wp--preset--font-size--label);
  line-height: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--brand);
  margin-block-end: var(--wp--preset--spacing--3);
}

/* Start-aligned constrained groups: WP's justifyContent is physical (left/right); logical margins keep RTL correct */
.am-hero .alignwide > :where(:not(.alignfull)),
.wp-block-group.am-page-head > :where(:not(.alignfull)),
.wp-block-group.am-section-head > :where(:not(.alignfull)) { margin-inline-start: 0 !important; margin-inline-end: auto !important; }

/* Section rhythm */
.am-section { padding-block: var(--wp--preset--spacing--16); }
/* Inner groups use flow layout: grids take the full wide width, prose keeps the measure */
.am-inner > .am-overline, .am-inner > h2, .am-inner > .am-lead, .am-inner > .am-statement { max-width: var(--wp--custom--measure); }
.am-inner > .am-grid-pillars, .am-inner > .am-steps, .am-inner > .am-metrics, .am-inner > .am-frameworks { max-width: none; }
.am-section-head { margin-block-end: var(--wp--preset--spacing--8); max-width: var(--wp--custom--measure); }
.am-section-head h2 { margin-block: 0 var(--wp--preset--spacing--3); }
.am-section-head .am-lead { color: var(--wp--preset--color--ink-muted); }
.am-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.7; font-weight: 300; }

/* =========================================================
   2. Header on midnight
   ========================================================= */
.am-header {
  background: var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--on-midnight);
  padding-block: var(--wp--preset--spacing--4);
}
.am-header .am-logo { display: inline-flex; align-items: center; line-height: 0; }
.am-header .am-logo img { height: 40px; width: auto; display: block; }
.am-header .wp-block-navigation { --wp--style--block-gap: var(--wp--preset--spacing--5); }
.am-header .wp-block-navigation a { color: var(--wp--preset--color--on-midnight); }
.am-header .wp-block-navigation a:hover { color: var(--am-brand-on-midnight); text-decoration: none; }
.am-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--midnight); color: var(--wp--preset--color--on-midnight); }
.am-header .wp-block-navigation__responsive-container-open,
.am-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--on-midnight); }
.am-header a:focus-visible, .am-header button:focus-visible { box-shadow: 0 0 0 2px var(--wp--preset--color--midnight), 0 0 0 4px var(--am-brand-on-midnight); }

/* =========================================================
   3. Hero (midnight, space-24, one primary button)
   ========================================================= */
.am-hero {
  background-color: var(--wp--preset--color--midnight);
  color: var(--wp--preset--color--on-midnight);
  padding-block: var(--wp--preset--spacing--24);
  position: relative;
  overflow: hidden;
  background-image: url("assets/patterns/transform-grid-reverse.svg");
  background-repeat: no-repeat;
  background-size: 400px 240px;
  background-position: left calc(100% + 24px);
}
@media (max-width: 700px) { .am-hero { background-size: 240px 144px; padding-block: var(--wp--preset--spacing--16); } }
.am-hero .am-overline { color: var(--am-brand-on-midnight); }
.am-hero h1 { color: var(--wp--preset--color--on-midnight); margin-block: 0; }
.am-hero .am-hero-en { color: var(--wp--preset--color--on-midnight); opacity: .72; font-size: var(--wp--preset--font-size--subheading); font-weight: 700; margin-block: var(--wp--preset--spacing--2) var(--wp--preset--spacing--6); }
.am-hero .am-hero-role { color: var(--wp--preset--color--on-midnight); font-weight: 700; font-size: var(--wp--preset--font-size--subheading); margin-block: 0 var(--wp--preset--spacing--3); }
.am-hero .am-tagline { color: var(--am-muted-on-midnight); max-width: var(--wp--custom--measure); margin-block: 0 var(--wp--preset--spacing--2); }
.am-hero .am-tagline-en { color: var(--am-muted-on-midnight); font-size: var(--wp--preset--font-size--small); margin-block: 0 var(--wp--preset--spacing--8); }
.am-hero .wp-block-buttons { gap: var(--wp--preset--spacing--3); }
.am-hero .wp-block-button__link {
  background: var(--am-brand-on-midnight); border-color: var(--am-brand-on-midnight); color: var(--wp--preset--color--midnight);
}
.am-hero .wp-block-button__link:hover { background: var(--am-brand-on-midnight-strong); border-color: var(--am-brand-on-midnight-strong); color: var(--wp--preset--color--midnight); }
.am-hero .is-style-outline .wp-block-button__link { background: transparent; border-color: var(--am-line-on-midnight); color: var(--wp--preset--color--on-midnight); }
.am-hero .is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--on-midnight); background: transparent; }
.am-hero a:focus-visible { box-shadow: 0 0 0 2px var(--wp--preset--color--midnight), 0 0 0 4px var(--am-brand-on-midnight); }

/* =========================================================
   4. Buttons: primary (brand) and quiet (outline)
   ========================================================= */
.wp-block-button__link { transition: background-color 150ms, border-color 150ms, color 150ms; }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background: var(--wp--preset--color--surface-raised);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line-strong);
  color: var(--wp--preset--color--ink);
  padding: 14px 20px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-raised); color: var(--wp--preset--color--ink); }

/* =========================================================
   5. Tags · الوسوم
   ========================================================= */
.am-tags { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); margin-block: 0; }
.am-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--wp--preset--spacing--2);
  border-radius: var(--wp--custom--radius--xs); font-size: var(--wp--preset--font-size--label); line-height: 16px; font-weight: 700;
  white-space: nowrap; background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink);
  border: var(--wp--custom--hairline) solid transparent;
}
.am-tag-brand { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); }
.am-tag-outline { background: transparent; color: var(--wp--preset--color--ink-muted); border-color: var(--wp--preset--color--line-strong); }

/* =========================================================
   6. Cards · البطاقات (pillars, posts)
   ========================================================= */
.am-card {
  background: var(--wp--preset--color--surface-raised);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--6);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3);
  min-width: 0; height: 100%; box-sizing: border-box;
  transition: box-shadow 150ms, border-color 150ms;
}
.am-card:hover { box-shadow: var(--wp--preset--shadow--lg); }
.am-card .am-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--3); margin: 0; }
.am-card .am-card-icon { width: 32px; height: 32px; display: block; filter: var(--am-icon-filter); }
.am-card .am-card-icon img { width: 32px; height: 32px; display: block; }
.am-card .am-phase { font-size: var(--wp--preset--font-size--phase); line-height: 28px; font-weight: 800; color: var(--wp--preset--color--brand); font-variant-numeric: tabular-nums; margin: 0; }
.am-card h3 { margin: 0; font-size: var(--wp--preset--font-size--subheading); line-height: 1.5; }
.am-card .am-card-en { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--caption); line-height: 18px; margin: 0; }
.am-card .am-card-body { color: var(--wp--preset--color--ink-muted); margin: 0; }
.am-card .am-card-foot { margin-top: auto; padding-top: var(--wp--preset--spacing--3); border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--line); }

/* Featured card: midnight in the light theme; surface-raised with a brand edge in the dark theme */
.am-card-midnight { background: var(--wp--preset--color--midnight); color: var(--wp--preset--color--on-midnight); border-color: transparent; }
.am-card-midnight h3 { color: var(--wp--preset--color--on-midnight); }
.am-card-midnight .am-card-body, .am-card-midnight .am-card-en { color: var(--wp--preset--color--on-midnight); opacity: .78; }
.am-card-midnight .am-phase { color: var(--am-brand-on-midnight); }
.am-card-midnight .am-card-foot { border-top-color: var(--am-line-on-midnight); }
.am-card-midnight .am-card-icon { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.am-card-midnight .am-tag { background: #f1ede41f; color: var(--wp--preset--color--on-midnight); }
.am-card-midnight .am-tag-brand { background: #3fcfc12b; color: var(--am-brand-on-midnight); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .am-card-midnight { background: var(--wp--preset--color--surface-raised); border-color: var(--wp--preset--color--brand); }
  :root:not([data-theme="light"]) .am-card-midnight .am-card-foot { border-top-color: var(--wp--preset--color--line); }
}

/* Pillar grid: 3 + 2, the featured card spans two columns */
.am-grid-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--5); margin: 0; }
.am-grid-pillars > .am-card-span2 { grid-column: span 2; }
@media (max-width: 900px) {
  .am-grid-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-grid-pillars > .am-card-span2 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .am-grid-pillars { grid-template-columns: minmax(0, 1fr); }
  .am-grid-pillars > .am-card-span2 { grid-column: auto; }
}

/* Post cards in query loops */
.am-post-card { gap: var(--wp--preset--spacing--2); }
.am-post-card .wp-block-post-title { margin: 0; font-size: var(--wp--preset--font-size--subheading); line-height: 1.5; font-weight: 700; }
.am-post-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.am-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--brand); text-decoration: none; }
.am-post-card .wp-block-post-excerpt__more-link { font-weight: 700; }
.am-post-card .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--sm); }

/* =========================================================
   7. Approach · المنهجية — four tiles from square to circle
   ========================================================= */
.am-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--5); margin: 0; }
@media (max-width: 900px) { .am-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .am-steps { grid-template-columns: minmax(0, 1fr); } }
.am-step { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); padding: var(--wp--preset--spacing--6); background: var(--wp--preset--color--surface-raised); border: var(--wp--custom--hairline) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); }
.am-step .am-tile { width: 48px; height: 48px; background: var(--wp--preset--color--ink); display: block; }
.am-step-1 .am-tile { border-radius: var(--wp--custom--radius--xs); }
.am-step-2 .am-tile { border-radius: var(--wp--custom--radius--xs); border-start-end-radius: var(--wp--custom--radius--lg); }
.am-step-3 .am-tile { border-radius: 24px var(--wp--custom--radius--xs) 24px var(--wp--custom--radius--xs); }
.am-step-4 .am-tile { border-radius: var(--wp--custom--radius--full); background: var(--wp--preset--color--brand); box-shadow: 0 0 0 4px var(--wp--preset--color--brand-soft); }
.am-step .am-phase { font-size: var(--wp--preset--font-size--phase); line-height: 28px; font-weight: 800; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; margin: 0; }
.am-step-4 .am-phase { color: var(--wp--preset--color--brand); }
.am-step h3 { margin: 0; font-size: var(--wp--preset--font-size--subheading); line-height: 1.5; }
.am-step p.am-step-note { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); line-height: 24px; margin: 0; }

/* =========================================================
   8. About · نبذة on sand
   ========================================================= */
.am-about { background: var(--wp--preset--color--sand); padding-block: var(--wp--preset--spacing--16); }
.am-about .am-mark { width: 48px; height: 48px; display: block; margin-block-end: var(--wp--preset--spacing--6); }
.am-about .am-mark img { width: 48px; height: 48px; display: block; }
.am-about .am-bio-ar { font-size: var(--wp--preset--font-size--lead); line-height: 1.7; font-weight: 300; }
.am-about .am-bio-en { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); line-height: 24px; }
.am-about .am-statement { font-size: var(--wp--preset--font-size--body); line-height: 1.75; }
.am-about .am-frameworks { margin-block-start: var(--wp--preset--spacing--6); padding-block-start: var(--wp--preset--spacing--6); border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--line-strong); }
.am-about .am-frameworks-label { font-size: var(--wp--preset--font-size--label); line-height: 16px; font-weight: 700; color: var(--wp--preset--color--ink-muted); margin-block-end: var(--wp--preset--spacing--3); }

/* =========================================================
   9. Metric · المؤشرات (pattern, optional)
   ========================================================= */
.am-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wp--preset--spacing--5); margin: 0; }
.am-metric { background: var(--wp--preset--color--surface-raised); border: var(--wp--custom--hairline) solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1); }
.am-metric .am-metric-label { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--label); line-height: 16px; font-weight: 700; margin: 0; }
.am-metric .am-metric-value { font-size: var(--wp--preset--font-size--metric); line-height: 1.1; font-weight: 800; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; margin: 0; }
.am-metric .am-metric-value small { font-size: var(--wp--preset--font-size--body); font-weight: 400; color: var(--wp--preset--color--ink-muted); }
.am-metric .am-metric-foot { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); line-height: 24px; margin: 0; }
.am-metric .am-metric-delta { color: var(--wp--preset--color--brand); font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* =========================================================
   10. Contact · التواصل
   ========================================================= */
.am-contact { padding-block: var(--wp--preset--spacing--16); }
.am-contact .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--6); }

/* =========================================================
   11. Footer · التذييل with signature on a dot grid
   ========================================================= */
.am-footer { background-color: var(--wp--preset--color--surface); background-image: var(--am-dot-grid); background-repeat: repeat; border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--line); padding-block: var(--wp--preset--spacing--12); }
.am-sig { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--4); color: var(--wp--preset--color--ink); }
.am-sig img { width: 40px; height: 40px; display: block; }
.am-sig .am-sig-text { display: flex; flex-direction: column; min-width: 0; }
.am-sig .am-sig-ar { font-weight: 700; font-size: var(--wp--preset--font-size--body); line-height: 1.5; margin: 0; }
.am-sig .am-sig-en { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); line-height: 20px; margin: 0; }
.am-sig .am-sig-title { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--caption); line-height: 18px; margin-block-start: var(--wp--preset--spacing--1); margin: 0; }
.am-footer .wp-block-navigation a { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--small); }
.am-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }
.am-footer .am-copyright { color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--caption); line-height: 18px; margin: 0; }
.am-footer .am-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--wp--preset--spacing--6); }
.am-footer .am-footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--wp--preset--spacing--3); }
[dir="ltr"] .am-footer .am-footer-end { align-items: flex-start; }

/* =========================================================
   12. Article pages · المقالات والصفحات
   ========================================================= */
.am-page-head { padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--8); border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--line); margin-block-end: var(--wp--preset--spacing--8); }
.am-page-head .wp-block-post-title, .am-page-head .wp-block-query-title, .am-page-head h1 { margin: 0; }
.am-page-head .am-meta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--caption); margin-block-start: var(--wp--preset--spacing--3); }
.am-prose > * { max-width: var(--wp--custom--measure); }
.am-prose > .alignwide { max-width: var(--wp--custom--container); }
.am-prose > .alignfull { max-width: none; }
.am-prose h2 { margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--3); }
.am-prose h3 { margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--2); }
.am-prose figure.wp-block-table table { border-collapse: collapse; width: 100%; }
.am-prose .wp-block-table th { background: var(--wp--preset--color--sand); font-size: var(--wp--preset--font-size--label); line-height: 16px; font-weight: 700; text-align: start; padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); border: var(--wp--custom--hairline) solid var(--wp--preset--color--line); }
.am-prose .wp-block-table td { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); border: var(--wp--custom--hairline) solid var(--wp--preset--color--line); }
.wp-block-post-terms a { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--wp--preset--spacing--2); border-radius: var(--wp--custom--radius--xs); background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand); font-size: var(--wp--preset--font-size--label); font-weight: 700; text-decoration: none; }
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms a + a { margin-inline-start: var(--wp--preset--spacing--2); }
.am-main { padding-block-end: var(--wp--preset--spacing--16); }

/* Pagination */
.wp-block-query-pagination a { color: var(--wp--preset--color--ink); }
.wp-block-query-pagination a:hover { color: var(--wp--preset--color--brand); }
.wp-block-query-pagination-numbers .current { color: var(--wp--preset--color--brand); }

/* Disabled: 45 % opacity, never a new colour */
[disabled], .is-disabled { opacity: .45; cursor: default; }

/* Motion: colour transitions only */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }