/* HSE-OS blog: brand layer on top of Ghost Source + the main site's stylesheet */
:root{--font-sans:Brand,BrandAr,system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--font-serif:var(--font-sans);--font-mono:ui-monospace,monospace;--gh-font-heading:var(--font-sans);--gh-font-body:var(--font-sans);--title-font:var(--font-sans);--body-font:var(--font-sans);--ghost-accent-color:#8A5C00;--background-color:#EEF2F1;--color-primary-text:#0C2A30;--color-secondary-text:#4A6064;--color-border:#D1DCDC;--color-darker-gray:#0C2A30}
body.bb{background:#EEF2F1;color:#0C2A30;font-family:var(--font-sans)}
.bb .gh-viewport{display:block;min-height:100vh}
.bb h1,.bb h2,.bb h3,.bb h4,.bb .is-title,.bb .is-body,.bb .gh-content{font-family:var(--font-sans)}
html[dir=rtl] .bb *{letter-spacing:0}
html[dir=rtl] .brand b,html[dir=rtl] .brand small{letter-spacing:2px}
.gh-footer,.bb footer.gh-card-meta{background:none;color:#4A6064}

/* header */
.bb .brand{position:relative}
.bb-badge{font-size:12px;font-weight:800;color:#8A5C00;background:#E3EDEF;border-radius:8px;padding:4px 8px;line-height:1}
.bb-back svg{flex-shrink:0}
.bb .top .wrap.bar{max-width:1360px}

/* forms */
.bb .bb-form{display:flex;flex-wrap:wrap;gap:8px;max-width:480px;margin:28px 0 0;padding:6px;background:#fff;border:1.5px solid #D1DCDC;border-radius:14px;position:relative;height:auto}
.bb .bb-form input.gh-form-input{flex:1 1 200px;min-width:0;height:48px;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#0C2A30;padding:0 12px;box-shadow:none}
html[dir=rtl] .bb .bb-form input:placeholder-shown{text-align:right}
.bb .bb-form .gh-button{position:static;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 24px;border:0;border-radius:10px;background:#8A5C00;color:#fff;font:inherit;font-weight:800;cursor:pointer;inset:auto}
.bb .bb-form .gh-button:hover{background:#0C2A30}
.bb .bb-form .gh-button>span:last-of-type,.bb .bb-form .gh-button svg{display:none}
.bb .bb-form.loading .gh-button svg{display:block}
.bb .bb-form.success .gh-button>span:first-of-type{display:none}
.bb .bb-form.success .gh-button>span:last-of-type{display:inline}
.bb .bb-form [data-members-error]{flex-basis:100%;margin:0;color:#B42318;font-size:14px}
.bb .bb-form [data-members-error]:empty{display:none}
.bb-band-wrap{margin-top:48px;margin-bottom:48px}
.bb-band h2{font-size:clamp(24px,3vw,32px)}
.bb-band .bb-form{margin:0;flex:1 1 320px;border-color:transparent}

/* feeds */
.bb .gh-container{padding-top:32px;padding-bottom:40px}
.bb .gh-outer{padding-left:20px;padding-right:20px}
.bb .gh-inner,.bb .gh-container-inner{max-width:1080px;margin-inline:auto}
.bb .gh-container-inner{display:block}
.bb .gh-container-title{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:#0C2A30;margin:0 0 24px;padding:0;border:0;text-transform:none;letter-spacing:0}
.bb .gh-main{padding:0;width:100%;min-width:0}
.bb .gh-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.bb .gh-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 12px 32px rgba(12,42,48,.07);border:0;padding:0;transition:transform .15s,box-shadow .15s}
.bb .gh-card::before,.bb .gh-card::after{display:none}
.bb .gh-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(12,42,48,.12)}
.bb .gh-card-link{display:flex;flex-direction:column;height:100%;gap:0;text-decoration:none;color:#0C2A30}
.bb .gh-card-link:hover{opacity:1}
.bb .gh-card-image{aspect-ratio:16/9;width:100%;margin:0}
.bb .gh-card-wrapper{padding:22px;display:flex;flex-direction:column;flex:1;text-align:start}
.bb .gh-card-tag{order:0;display:block;margin:0 0 8px;color:#8A5C00;font-size:13px;font-weight:800;text-transform:none;letter-spacing:0}
.bb .gh-card-title{font-size:20px;font-weight:800;line-height:1.3;color:#0C2A30;margin:0}
.bb .gh-card-excerpt{font-size:15px;color:#4A6064;margin-top:8px;line-height:1.7;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.bb .gh-card-meta{margin-top:auto;padding-top:14px;font-size:13px;color:#4A6064;gap:8px;display:flex;flex-wrap:wrap}
.bb .gh-more a{display:inline-flex;font-weight:700;color:#8A5C00}

/* tag + author headers */
.bb .gh-archive{display:block;padding:48px 0 8px;margin:0 auto;max-width:1080px;border:0}
.bb .gh-archive-inner{display:block;border:0;padding:0}
.bb .gh-archive .gh-article-title,.bb .gh-author-name{font-size:clamp(34px,5vw,54px);font-weight:800;color:#0C2A30;line-height:1.1;margin:0}
.bb .gh-archive .gh-article-title::after{content:"";display:block;width:96px;height:4px;border-radius:4px;background:#8A5C00;margin-top:20px}
.bb .gh-archive .gh-article-excerpt{color:#4A6064;font-size:18px;margin-top:16px;max-width:660px}
.bb .gh-archive .gh-feed{margin-top:0}
.bb .gh-author-image{border-radius:50%;overflow:hidden}
.bb .gh-author-meta,.bb .gh-author-bio{color:#4A6064}
.bb .gh-author-social a{color:#8A5C00}

/* article */
.bb .gh-article{padding-top:48px;background:none}
.bb .gh-canvas{display:block;max-width:760px;margin-inline:auto;padding-inline:20px}
.bb .gh-article-header{margin-bottom:28px;text-align:start}
.bb .gh-article-tag{color:#8A5C00;font-weight:800;font-size:14px;text-decoration:none;text-transform:none;letter-spacing:0}
.bb .gh-article .gh-article-title{font-size:clamp(32px,5vw,50px);font-weight:800;line-height:1.2;color:#0C2A30;margin:10px 0 0}
.bb .gh-article .gh-article-excerpt{font-size:20px;color:#4A6064;margin-top:16px}
.bb .gh-meta-share{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid #D1DCDC}
.bb .gh-article-meta{display:flex;gap:12px;align-items:center}
.bb .gh-article-author-name,.bb .gh-article-author-name a{font-size:15px;font-weight:700;color:#0C2A30;margin:0}
.bb .gh-article-meta-content{font-size:14px;color:#4A6064}
.bb .gh-button-share{background:#fff;color:#0C2A30;border:1px solid #D1DCDC;border-radius:10px;padding:8px 16px;font-weight:700;text-decoration:none}
.bb .gh-content{font-size:18px;line-height:1.9;color:#0C2A30}
.bb .gh-content>*{max-width:100%}
.bb .gh-content h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;color:#0C2A30;margin:1.6em 0 .5em;line-height:1.3}
.bb .gh-content h3{font-size:22px;font-weight:800;color:#0C2A30}
.bb .gh-content a{color:#8A5C00}
.bb .gh-content blockquote{margin:1.6em 0;padding:18px 22px;background:#E3EDEF;border:0;border-inline-start:4px solid #8A5C00;border-radius:0 14px 14px 0;font-weight:600;font-style:normal}
[dir=rtl] .bb .gh-content blockquote,.bb [dir=rtl] .gh-content blockquote{border-radius:14px 0 0 14px}
.bb .gh-content ul,.bb .gh-content ol{padding-inline-start:1.4em;padding-inline-end:0}
.bb .gh-content img{border-radius:14px}
.bb .bb-backlink{display:block;margin-top:36px;font-weight:800;color:#8A5C00;text-decoration:none}
.bb [dir=ltr] .bb-backlink::after{content:" \2192"}
.bb [dir=rtl] .bb-backlink::after{content:" \2190"}
html[dir=rtl] .gh-article[dir=rtl] .gh-article-title,.gh-article[dir=rtl] .gh-content{line-height:1.5}
.gh-article[dir=rtl] .gh-content{line-height:2}

/* 404 */
.bb-404{min-height:56vh}
.bb-404-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:640px){
  .bb .bb-form .gh-button{flex:1 1 100%}
  .bb .gh-article{padding-top:28px}
  .bb .gh-content{font-size:17px}
  .bb .gh-meta-share{flex-wrap:wrap}
}
@media print{.top,footer,.bb-band-wrap{display:none}}

/* fixes after visual review */
.bb .bb-form input.gh-form-input{position:static;width:auto;inset:auto;display:block}
.bb .hero h1{margin-top:22px}
.bb .gh-feed{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bb .gh-card{grid-column:auto!important;width:auto;max-width:none}
.bb .gh-card-link{display:flex!important}
.bb-nav-home{display:none}
@media (max-width:1240px){.bb-nav-home{display:block;font-weight:800!important;color:#8A5C00!important}}
@media (max-width:900px){.bb .gh-feed{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.bb .gh-feed{grid-template-columns:minmax(0,1fr)!important}.bb-badge{display:none}.bb .tools{gap:6px}}

.bb .nav a.bb-nav-home{display:none}
@media (max-width:1240px){.bb .nav a.bb-nav-home{display:block;font-weight:800;color:#8A5C00}}
.bb .hero .wrap{position:relative;z-index:1}
.bb .gh-main,.bb .gh-container,.bb .gh-container-inner{overflow:visible}
.bb .gh-feed{padding-bottom:36px}

.bb .btn{white-space:nowrap}
.bb-badge{display:none}
.bb .nav a{padding:10px 8px;font-size:14px}
@media (max-width:1400px){.bb .nav a{font-size:13px;padding:8px 6px}.bb .tools .btn.small{padding:10px 12px;font-size:14px}}

/* HSE-OS: look of the main site */
:root{--ghost-accent-color:#F0A500}
body.bb{-webkit-font-smoothing:antialiased}
.bb h1,.bb h2,.bb h3,.bb h4,.bb .is-title,.bb .brand b{font-family:Brand,BrandAr,system-ui,sans-serif}
html[lang=ar] body.bb{line-height:1.85}
.bb .top{background:rgba(6,28,33,.94);border-bottom:1px solid #24474E;color:#EEF2F1}
.bb .top .brand{color:#EEF2F1}.bb .brand b{letter-spacing:0;font-size:19px;font-weight:700;white-space:nowrap}html[dir=rtl] .brand b,html[dir=rtl] .brand small{letter-spacing:0}
.bb .brand small{letter-spacing:1.2px;font-size:10px;font-weight:500;color:#A9C0C2;white-space:nowrap}
html[dir=rtl] .bb .brand b{direction:ltr}
.bb .brand svg.mark{width:40px;height:40px}.bb-logo{height:38px;width:auto;display:block}
.bb .nav a{color:#A9C0C2}.bb .nav a:hover{background:rgba(255,255,255,.08);color:#EEF2F1}
.bb .nav a[aria-current=page]{background:none;color:#F0A500}
.bb .nav a.bb-nav-home{color:#F0A500}
html[data-lang=en] a[data-l=ar],html[data-lang=ar] a[data-l=en]{display:none!important}
.bb .lang{background:transparent;color:#EEF2F1;border:1px solid #24474E;border-radius:3px}.bb .lang:hover{border-color:#F0A500;color:#F0A500}
.bb .menu{background:#F0A500;color:#061C21;border-radius:3px}
.bb .btn,.bb .bb-form .gh-button{border-radius:3px}
.bb .btn.primary,.bb .bb-form .gh-button{background:#F0A500;color:#061C21;box-shadow:none}
.bb .btn.primary:hover,.bb .bb-form .gh-button:hover{background:#FEB439;color:#061C21}
.bb .bb-form{border-radius:6px}.bb .gh-card{border-radius:6px}.bb .band{border-radius:6px;background:#061C21}
.bb .hero.bb-hero,.bb .hero.bb-404{background:linear-gradient(180deg,#061C21 0%,#0C2A30 50%,#13373F 100%);color:#EEF2F1;padding:72px 0 64px}
.bb .hero h1{color:#EEF2F1}.bb .hero h1 span:not([data-l]){color:#F0A500}.bb .hero p.lead{color:#A9C0C2}
.bb .rule{background:#F0A500}.bb .pill{background:transparent;border-color:#F0A500;color:#F0A500;border-radius:3px}
.bb .btn.ghost{background:transparent;color:#EEF2F1;border-color:#A9C0C2}
.bb .hero .bb-form{background:#fff}
.bb footer:not(.gh-card-meta){background:#061C21;color:#A9C0C2}
.bb footer .bb-logo{height:32px}.bb footer li>span{display:inline-block;padding:4px 0;color:#A9C0C2}
.bb footer .bb-foot-tag{color:#A9C0C2;margin:14px 0 0;font-size:15px}
.bb .bb-social-hero{margin-top:20px}
@media (max-width:1240px){.bb .top .nav{background:none}}
@media (max-width:640px){.bb .hero.bb-hero,.bb .hero.bb-404{padding:44px 0 36px}.bb .brand b{font-size:16px}.bb .brand small{display:none}.bb-logo{height:32px}}
