/* ============================================================
   Amr Mostafa — site chrome and shared styles.
   Page sections use generated.css (built from the design files).
   ============================================================ */

:root{
	--am-bg:#0b0a08; --am-bg-alt:#12100c; --am-card:#1a1610; --am-card-2:#1f1a13;
	--am-text:#f1ece2; --am-body:#d4ccbd; --am-muted:#b5ab98; --am-faint:#8c8270;
	--am-gold:#e6cf9c; --am-gold-hover:#f5e6c3; --am-gold-line:#8c7a55; --am-gold-line-2:#c9a96a;
	--am-label:oklch(0.78 0.09 80);
	--am-grad:linear-gradient(135deg,oklch(0.9 0.06 88),oklch(0.72 0.1 70));
	--am-on-gold:#17130d;
	--am-line:#2a251d; --am-line-2:#2f2920; --am-line-3:#3a3328; --am-line-4:#4a4235;
	--am-pad:clamp(18px,4vw,56px);
	--am-ease:cubic-bezier(.2,.7,.2,1);
	color-scheme:dark;
}

/* ---- design globals (from the design files' <style>) ---- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--am-bg);color:var(--am-text);font-family:"Readex Pro",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--am-gold);text-decoration:none}
a:hover{color:var(--am-gold-hover)}
*,*::before,*::after{box-sizing:border-box}
input,textarea,button,select{font-family:inherit}
img{max-width:100%}
img.am-pic{width:auto;height:auto}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary>span:last-child{transform:rotate(180deg)}
section[id]{scroll-margin-top:96px}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,3%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.am-icon{font-family:'Material Symbols Outlined';font-weight:300;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}

/* paragraphs/headings rendered from blocks carry their own margins in the design */
.am-main p,.am-main h1,.am-main h2,.am-main h3,.am-main blockquote,.am-main figure{margin:0}
.am-main ul,.am-main ol{margin:0}

/* accessibility */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;background:var(--am-gold);color:var(--am-on-gold);padding:10px 16px;z-index:100;inset-inline-start:10px;top:10px}
:focus-visible{outline:2px solid var(--am-gold);outline-offset:3px}

/* ---- header ---- */
.am-sticky{position:sticky;top:0;z-index:40}
body.admin-bar .am-sticky{top:32px}
@media (max-width:782px){body.admin-bar .am-sticky{top:46px}}
@media (max-width:600px){body.admin-bar .am-sticky{top:0}}
.am-header{background:rgba(11,10,8,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--am-line);font-family:'Readex Pro',sans-serif;width:100%}
.am-header-in{max-width:1240px;margin:0 auto;padding:16px var(--am-pad);display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap}
.am-brand{display:flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;transition:filter .25s,transform .25s}
.am-brand:hover{filter:brightness(1.15);transform:translateY(-1px)}
.am-brand-ar{font-family:'Aref Ruqaa Ink',serif;font-weight:700;font-size:32px;line-height:1.25;white-space:nowrap;display:block;background:var(--am-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .06em}
.am-brand-en{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:10px;letter-spacing:.42em;color:var(--am-gold);margin-top:-4px;margin-inline-start:.42em;white-space:nowrap;direction:ltr}
.am-nav{display:flex;gap:22px;font-size:14px;font-weight:300;flex-wrap:wrap}
.am-nav-link{color:var(--am-muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.am-nav-link:hover{color:var(--am-text);border-bottom-color:var(--am-gold)}
.am-nav-link.is-current{color:var(--am-gold);border-bottom-color:var(--am-gold)}
.am-header-actions{display:flex;gap:12px;align-items:center}
.am-lang{text-decoration:none;border:1px solid var(--am-line-4);color:var(--am-gold);font-family:'JetBrains Mono',monospace;font-size:13px;padding:7px 12px;border-radius:99px;display:inline-block}
.am-lang:hover{background:var(--am-card-2)}
.am-cta{background:var(--am-grad);color:var(--am-on-gold);padding:9px 18px;font-size:14px;font-weight:600;text-decoration:none;transition:filter .2s,transform .2s}
.am-cta:hover{filter:brightness(1.12);transform:translateY(-1px);color:var(--am-on-gold)}
.am-social{display:flex;gap:8px;align-items:center}
.am-social a{width:32px;height:32px;border:1px solid var(--am-line-4);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--am-gold);transition:background .2s,border-color .2s,color .2s}
.am-social a:hover{background:var(--am-card-2);border-color:var(--am-gold-line-2);color:var(--am-gold-hover)}
.am-social svg{width:15px;height:15px;fill:currentColor;display:block}
.am-social-m{display:none}
.am-cta-short{display:none}
.am-menu-btn{display:none;width:42px;height:42px;border:1px solid var(--am-line-4);background:transparent;color:var(--am-gold);border-radius:50%;cursor:pointer;align-items:center;justify-content:center;padding:0}
.am-menu-btn .am-icon{font-size:22px}

/* phones: the menu folds behind a button */
@media (max-width:860px){
	.am-header-in{padding-block:12px;gap:12px}
	.am-brand-ar{font-size:27px}
	.am-menu-btn{display:inline-flex;order:3}
	.am-header-actions{order:2;margin-inline-start:auto;gap:8px}
	.am-cta{padding:8px 14px;font-size:13px}
	.am-nav{order:4;display:none;width:100%;flex-direction:column;gap:0;font-size:16px;padding:6px 0 4px;border-top:1px solid var(--am-line)}
	.am-nav-link{padding:13px 2px;border-bottom:1px solid var(--am-line)}
	.am-nav-link:last-child{border-bottom:0}
	.am-nav-link.is-current{border-bottom-color:var(--am-line)}
	.am-header.is-open .am-nav{display:flex}
	.am-social-d{display:none}
	.am-social-m{display:flex;padding:14px 2px 6px}
	.am-social-m a{width:40px;height:40px}
}
@media (max-width:420px){
	.am-header-in{gap:10px}
	.am-brand-ar{font-size:24px}
	.am-header-actions{gap:6px}
	.am-lang{padding:6px 10px;font-size:12px}
	.am-cta{padding:7px 11px;font-size:12px;white-space:nowrap}
	.am-cta-full{display:none}
	.am-cta-short{display:inline}
	.am-menu-btn{width:38px;height:38px}
}
@media (max-width:340px){
	.am-cta{display:none}
}

/* ---- footers ---- */
.am-footer{border-top:1px solid var(--am-line);background:var(--am-bg);font-family:'Readex Pro',sans-serif;width:100%}
.am-footer-in{max-width:1240px;margin:0 auto;padding:48px var(--am-pad) 32px;display:flex;flex-direction:column;gap:32px}
.am-footer-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.am-footer-id{display:flex;flex-direction:column;gap:8px;max-width:26em}
.am-footer-name{font-size:20px;font-weight:600;color:var(--am-text)}
.am-footer-role{font-size:14px;font-weight:300;line-height:1.8;color:var(--am-muted)}
.am-footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px;font-size:14px;font-weight:300}
.am-footer-link{color:var(--am-muted);text-decoration:none;transition:color .2s}
.am-footer-link:hover{color:var(--am-gold)}
.am-footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:300;color:var(--am-faint);border-top:1px solid var(--am-line);padding-top:22px}
.am-footer-bottom a{direction:ltr;color:var(--am-gold);text-decoration:none}
.am-footer-short{border-top:1px solid var(--am-line);padding:32px 0}
.am-footer-short-in{max-width:1240px;margin:0 auto;padding:0 var(--am-pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:300;color:var(--am-faint)}
.am-footer-short-in a{direction:ltr}

/* ---- motion helpers ---- */
.am-rise{animation:rise .9s var(--am-ease) both}
.zoom{cursor:zoom-in}
.zoom:focus-visible{outline:2px solid var(--am-gold);outline-offset:4px}

/* ---- lightbox ---- */
.am-lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,7,5,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);cursor:zoom-out}
.am-lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);filter:none !important}
.am-lightbox button{position:absolute;top:20px;inset-inline-end:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--am-line-4);background:var(--am-bg-alt);color:var(--am-text);font-size:22px;line-height:1;cursor:pointer}

/* ---- YouTube frames ---- */
.am-s109.am-short{aspect-ratio:9/16 !important}
.am-s107.am-shorts-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) !important;gap:32px 20px !important}
.am-short-title{font-size:15px !important;line-height:1.6 !important;font-weight:600 !important}
@media (max-width:600px){
	/* one reel per row, centred, narrow enough that a whole reel fits on screen */
	.am-s107.am-shorts-grid{grid-template-columns:minmax(0,340px) !important;justify-content:center !important;gap:40px !important}
	.am-short-card{gap:12px !important}
}
.am-yt{width:100%;height:100%;border:0;display:block}
.am-video{width:100%;aspect-ratio:16/9;background:var(--am-bg-alt);border:1px solid var(--am-line-2);overflow:hidden}

/* ---- article cards ([am_articles]) ---- */
.am-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.am-card-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 80% at 50% 0%,oklch(0.7 0.09 80 / .22),transparent 70%),repeating-linear-gradient(135deg,#1c1812 0 10px,#17140f 10px 20px)}
.am-card-ph .am-icon{font-size:40px;font-weight:200;color:var(--am-gold);opacity:.7}
.am-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.am-pager{grid-column:1/-1;display:flex;justify-content:center;gap:8px;margin-top:20px}
.am-pager .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--am-line-3);color:var(--am-muted);padding-inline:10px}
.am-pager .page-numbers.current{background:var(--am-grad);color:var(--am-on-gold);border-color:transparent}
.am-empty{grid-column:1/-1;color:var(--am-muted);font-weight:300}

/* ---- shared building blocks (default pages, articles, 404) ---- */
.am-wrap{max-width:1240px;margin:0 auto;padding:0 var(--am-pad)}
.am-gold-title{margin:0;font-weight:700;line-height:1.45;padding:.08em 0 .16em;background:var(--am-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.am-page-hero{background:radial-gradient(50% 70% at 30% 0%,oklch(0.7 0.09 80 / .3),transparent 70%),var(--am-bg);padding:clamp(56px,8vw,100px) 0 40px}
.am-page-hero .am-wrap{display:flex;flex-direction:column;gap:18px}
.am-page-hero h1{font-size:clamp(40px,6vw,72px)}
.am-post-hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.4;max-width:22em}
.am-page-lead{margin:0;font-size:18px;font-weight:300;line-height:1.85;color:var(--am-body);max-width:36em}
.am-page-body{padding:20px 0 clamp(64px,9vw,120px)}
.am-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--am-muted);align-self:flex-start}
.am-back:hover{color:var(--am-gold)}
.am-post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--am-faint);align-items:center}
.am-post-cat{color:var(--am-label);border:1px solid var(--am-line-4);border-radius:99px;padding:3px 12px}
.am-post-cover{margin:0 0 clamp(32px,5vw,56px);overflow:hidden;border:1px solid var(--am-line-2)}
.am-post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.am-more{padding:clamp(56px,8vw,100px) 0;background:var(--am-bg-alt);border-top:1px solid var(--am-line)}
.am-more-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.am-more-head h2{margin:0;font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.3}
.am-text-link{font-size:15px;border-bottom:1px solid var(--am-gold-line);padding-bottom:2px}
.am-book-band{padding:clamp(64px,9vw,110px) 0;text-align:center;background:radial-gradient(50% 70% at 50% 0%,oklch(0.7 0.09 80 / .3),transparent 70%),var(--am-bg)}
.am-book-band .am-wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.am-book-band h2{font-size:clamp(30px,4vw,50px);line-height:1.4}
.am-button{display:inline-flex;align-items:center;gap:10px;background:var(--am-grad);color:var(--am-on-gold);padding:16px 30px;font-weight:600;font-size:16px;transition:filter .2s,transform .2s,box-shadow .2s;text-decoration:none}
.am-button:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 12px 30px -10px oklch(0.72 0.1 70 / .6);color:var(--am-on-gold)}
.am-404{min-height:56vh}

/* ---- long-form text (articles and default pages) ---- */
.am-prose{max-width:46em;font-size:18px;font-weight:300;line-height:1.95;color:var(--am-body)}
.am-prose > * + *{margin-top:1.1em !important}
.am-prose h2{font-size:clamp(24px,2.8vw,32px);font-weight:600;line-height:1.45;color:var(--am-text);margin-top:1.8em !important}
.am-prose h3{font-size:21px;font-weight:600;line-height:1.5;color:var(--am-text);margin-top:1.6em !important}
.am-prose h4{font-size:18px;font-weight:600;color:var(--am-gold)}
.am-prose strong,.am-prose b{font-weight:600;color:var(--am-text)}
.am-prose a{color:var(--am-gold);border-bottom:1px solid var(--am-gold-line)}
.am-prose a:hover{color:var(--am-gold-hover);border-bottom-color:var(--am-gold)}
.am-prose a.am-btn,.am-prose a.am-button{border-bottom:0;line-height:1.4}
.am-prose .wp-block-buttons{margin-block:1.8em !important}
.am-prose ul,.am-prose ol{padding-inline-start:1.3em}
.am-prose li + li{margin-top:.4em}
.am-prose li::marker{color:var(--am-gold)}
.am-prose blockquote{margin-inline:0;padding:.2em 1.2em;border-inline-start:2px solid var(--am-gold);font-size:clamp(19px,2vw,23px);color:var(--am-text)}
.am-prose blockquote p{margin:0}
.am-prose blockquote cite{display:block;margin-top:.6em;font-size:14px;font-style:normal;color:var(--am-faint)}
.am-prose figure{margin-inline:0}
.am-prose img{height:auto;display:block}
.am-prose figcaption{font-size:14px;color:var(--am-faint);margin-top:8px;text-align:center}
.am-prose hr{border:0;border-top:1px solid var(--am-line-3);margin-block:2em}
.am-prose table{width:100%;border-collapse:collapse;font-size:16px}
.am-prose th,.am-prose td{border:1px solid var(--am-line-3);padding:10px 12px;text-align:start}
.am-prose th{color:var(--am-text);font-weight:600;background:var(--am-bg-alt)}
.am-prose .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;background:var(--am-grad);color:var(--am-on-gold);padding:14px 28px;font-weight:600;border-radius:0;border:0}
.am-prose .wp-block-embed{margin-inline:0}

/* blocks added later inside design pages, outside any section */
.am-main > p,.am-main > h2,.am-main > h3,.am-main > ul,.am-main > ol,.am-main > .wp-block-image,.am-main > .wp-block-buttons,.am-main > .wp-block-quote{max-width:1240px;margin:24px auto !important;padding-inline:var(--am-pad)}
.wp-block-buttons:not([class*="am-"]){display:flex;flex-wrap:wrap;gap:12px}

/* ---- phone layout fixes for design sections (the design files had desktop-only rules).
   "main" raises specificity above generated.css, which loads after this file. ---- */
@media (max-width:860px){
	/* experience: the title/photo column stops following the scroll once the columns stack */
	main .am-s82{position:static !important;top:auto !important}
}
@media (max-width:760px){
	/* services rows: icon | title, description under the title */
	main .am-s75{grid-template-columns:52px minmax(0,1fr) !important;gap:8px 16px !important;padding:22px 4px !important;align-items:start !important}
	main .am-s75 > :first-child{grid-row:span 2}
	main .am-s75 > :nth-child(3){grid-column:2}
	main .am-s75 .am-s77{width:44px !important;height:44px !important;font-size:22px !important}
	main .am-s75 .am-s78{font-size:18px !important;line-height:1.5 !important}
	/* company-logo strip: label on its own line, logos in a 3×2 grid */
	main .am-s35{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:20px 14px !important;align-items:center !important;justify-items:center !important}
	main .am-s35 > .am-s36{grid-column:1/-1;justify-self:start;max-width:none !important}
}

/* ---- article cards: a single card keeps its card width; cover images keep their own shape ---- */
main .am-s98,main .am-s240{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) !important}
.am-card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.am-s117:has(> .am-card-img){aspect-ratio:40/21 !important}
.am-post-cover{aspect-ratio:40/21}