/* =====================================================================
   Page heroes «التنفيذي العالمي» (Phase 5). Ported from the temporary ALX HEADER block 28c/28d.
   - /pages/* hero (section.cart-banner.alx-hero, pages/other_pages.blade.php): breadcrumb, title, corporate CTAs
   - other top sections (site-top-banner, about-hero, os-hero): navy, faded grayscale image, gold accents
   The list-page heroes carry inline gradient styles, hence the !important on background.
   ===================================================================== */

/* ---------- /pages/* hero (also cart, blog post and text lesson banners use .cart-banner) ---------- */
section.cart-banner{background:#1B1A4A!important;background-image:none!important;padding:44px 0 40px!important;min-height:0!important;height:auto!important;text-align:right!important}
section.cart-banner .container,section.cart-banner .row{height:auto!important}
section.cart-banner .row{justify-content:flex-start!important;text-align:right!important}
section.cart-banner .row>[class*="col-"]{flex:0 0 100%!important;max-width:100%!important;text-align:right!important}
section.cart-banner h1{font-size:30px!important;line-height:1.6!important;color:#fff!important;margin:0!important;max-width:920px}
section.cart-banner h1::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:#C9A86A;margin:0 0 16px}

.alx-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#B9BADB;margin:0 0 14px;flex-wrap:wrap}
.alx-crumb a{color:#D9DAF0!important;text-decoration:none!important;min-height:24px;display:inline-flex;align-items:center}
.alx-crumb a:hover{color:#fff!important}
.alx-crumb [aria-current]{color:#fff}

.alx-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.alx-hero-cta a{height:48px;padding:0 26px;border-radius:6px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none!important}
.alx-hero-cta a.alx-gold{background:#C9A86A;color:#1B1A4A!important}
.alx-hero-cta a.alx-gold:hover{background:#D8BA80}
.alx-hero-cta a.alx-line{border:1.5px solid #4B4A8A;color:#fff!important}
.alx-hero-cta a.alx-line:hover{border-color:#fff}
.alx-hero :focus-visible{outline-color:#C9A86A}

@media (max-width:767px){
 section.cart-banner{padding:28px 0 26px!important}
 section.cart-banner h1{font-size:22px!important;line-height:1.7!important}
 section.cart-banner h1::before{margin-bottom:12px}
 .alx-hero-cta a{flex:1 1 auto;justify-content:center;height:46px;padding:0 16px}
}

/* ---------- Opening paragraph of the corporate landing pages (content ids from the page HTML) ---------- */
:is(#alfac-corp,#alfac-corp-adm,#alfac-corp-eng)>p:first-of-type{font-size:19px!important;line-height:2!important;color:#1C1B3F!important;font-weight:500;margin-bottom:28px!important}
@media (max-width:767px){:is(#alfac-corp,#alfac-corp-adm,#alfac-corp-eng)>p:first-of-type{font-size:17px!important;line-height:1.95!important}}

/* ---------- Other top sections: courses, categories, blog, about, organization services ---------- */
section.site-top-banner{background:#1B1A4A!important;background-image:none!important}
section.site-top-banner>img.img-cover{opacity:.2!important;filter:grayscale(1)!important}
section.site-top-banner.opacity-04::before,section.site-top-banner.opacity-04::after{background:transparent!important}
section.site-top-banner .btn-primary{background:#C9A86A!important;background-image:none!important;border:0!important;color:#1B1A4A!important;font-weight:700}
section.site-top-banner .btn-primary:hover{background:#D8BA80!important}
section.site-top-banner h1::before,section.about-hero h1::before,section.os-hero h1::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:#C9A86A;margin:0 auto 16px}
section.about-hero{background:#1B1A4A!important;background-image:none!important}
section.about-hero::before{opacity:.12!important}
section.about-hero .hero-subtitle{color:#D9DAF0!important}
section.os-hero{background:#1B1A4A!important;background-image:none!important}
/* phones: the hero keeps its fixed height (it hides the duplicate search box on purpose); less top padding so
   a two-line title is no longer cut off at the bottom (5px, also on production before) */
@media (max-width:767px){section.site-top-banner{padding-top:96px!important}}

/* ---------- Footer: the «…وفروعنا» column folds on phones (patch 12; includes/footer.blade.php) ---------- */
.alx-fold-head{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;width:100%;cursor:default}
@media (max-width:767px){
 .row>.alx-fold{flex:0 0 100%!important;max-width:100%!important}
 .alx-fold-head{cursor:pointer;display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 0}
 .alx-fold-head::after{content:"";width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);transition:transform .2s;margin-left:4px}
 .alx-fold.is-open .alx-fold-head::after{transform:rotate(135deg)}
 .alx-fold:not(.is-open) .alx-fold-list{display:none}
 .alx-fold .alx-fold-list{margin-top:8px!important}
}

/* ---------- Floating WhatsApp button on every page (patch 18l + CSS 27; includes/whatsapp_fab.blade.php) ---------- */
.alfac-contact-fab{position:fixed!important;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:2147483000;display:flex;align-items:center;gap:10px;direction:ltr;transform:translateZ(0);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s}
.alfac-contact-fab.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.alfac-contact-fab__btn{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,#2fe377 0%,#25d366 45%,#1ebe5b 100%);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.45),0 2px 6px rgba(0,0,0,.15);text-decoration:none;transition:transform .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.alfac-contact-fab__btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:alfacFabRing 2.4s ease-out infinite}
.alfac-contact-fab__btn:hover,.alfac-contact-fab__btn:focus-visible{color:#fff;text-decoration:none;transform:translateY(-3px) scale(1.06);box-shadow:0 10px 24px rgba(37,211,102,.55),0 3px 8px rgba(0,0,0,.18);outline:none}
.alfac-contact-fab__btn:active{transform:scale(.94)}
.alfac-contact-fab__btn svg{width:32px;height:32px;display:block;fill:currentColor}
.alfac-contact-fab__label{order:-1;background:#fff;color:#1f2937;font-size:14px;font-weight:600;padding:8px 14px;border-radius:20px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.alfac-contact-fab:hover .alfac-contact-fab__label,.alfac-contact-fab.show-label .alfac-contact-fab__label{opacity:1;transform:translateX(0)}
@keyframes alfacFabRing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.alfac-contact-fab__btn::before{animation:none}}
@media (max-width:768px){.alfac-contact-fab{right:calc(8px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}.alfac-contact-fab__btn{width:54px;height:54px}.alfac-contact-fab__btn svg{width:28px;height:28px}.alfac-contact-fab__label{font-size:13px;padding:6px 12px}}
/* صفحة الدورة على الجوال: الزر فوق شريط الشراء الثابت حتى لا يغطيه */
@media (max-width:991.98px){body.alfac-has-buybar .alfac-contact-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* the label shows once, 2s after load, for 3.5s (was done in JS by the patch) */
.alfac-contact-fab.alx-fab-intro .alfac-contact-fab__label{animation:alxFabLabel 5.5s ease 0s 1 both}
@keyframes alxFabLabel{0%,36%{opacity:0;transform:translateX(8px)}40%,96%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.alfac-contact-fab.alx-fab-intro .alfac-contact-fab__label{animation:none}}

/* ---------- Readability (patch «ALFAC readability» 1 and 4, 25 Oct): theme greys #818894/#64748b/#666 had ~3.5:1 contrast ---------- */
.post-show p, .post-show span { color: #334155; }
.text-gray { color: #475569 !important; }
.course-description, .course-description p { color: #334155; }
.af-card .af-card__meta-item, .af-card .af-card__meta-item span, .af-card .af-card__interest-btn { color: #475569 !important; }
.blog-grid-card .blog-grid-detail .blog-grid-desc, .stats-container .stats-item .stat-desc, .user-inline-avatar .user-name, .breadcrumb-item.active, .topics-post-card .topic-post-description { color: #475569; }
.service-card .service-description, .cert-card .cert-desc { color: #475569 !important; }
.os-feature p, .os-form__hint, .os-privacy { color: #475569 !important; }

/* ---------- Course page link boxes (online English landing, CMMP hub; course/tabs/information.blade.php) ---------- */
.alfac-online-link, .alfac-cmmp-link { background: #f1f5fb !important; border-color: #d6e2f3 !important; }
.alfac-online-link a, .alfac-cmmp-link a { color: #2E86C1 !important; }