/* One shared site masthead and breadcrumb component. */
#shared-topbar{background:#fff;border-bottom:1px solid #e3e6ea;padding-block:4px}
#shared-topbar>.container{min-height:36px;display:flex;justify-content:space-between;align-items:center}
#shared-topbar nav{display:flex;gap:4px;flex-wrap:nowrap}
#shared-topbar nav a{display:flex;align-items:center;min-height:32px;padding:4px 8px;color:#5c6673;font-size:13px;white-space:nowrap;border-radius:5px}
#shared-topbar nav a:hover,#shared-topbar nav a:focus-visible{color:#b8202d;background:#fff1f2}
#main-global-header{height:88px!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;border-bottom:1px solid #e3e6ea}
#main-global-header.h-header-sm{height:76px!important}
#main-global-header>.container{gap:20px;height:100%}
/* Decorative Palestinian keffiyeh, fading from the physical left edge. */
#main-global-header{isolation:isolate}
#main-global-header::before{content:"";position:absolute;inset-block:0;left:0;width:clamp(280px,36vw,560px);z-index:0;pointer-events:none;background-image:url('/refugees-preview/site/_assets/keffiyeh-palestinian.svg');background-size:112px 188px;background-position:left top;background-repeat:repeat-x;opacity:.22;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 12%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 12%,transparent 100%)}
#main-global-header>.container{position:relative;z-index:1}
@media(max-width:1023px){#main-global-header::before{width:min(48vw,320px);opacity:.17;background-size:102px 171px}}
@media(max-width:599px){#main-global-header::before{width:54vw;opacity:.15;background-size:96px 161px}}
#main-global-header .header-logo{height:52px!important;width:auto;flex-shrink:0}
#main-nav-menu{display:flex;align-items:center;gap:8px!important;height:100%;min-width:0}
#main-nav-menu .nav-menu-item{position:relative;display:flex;align-items:center;height:100%;align-self:stretch}
#main-nav-menu .nav-link{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px!important;font-size:15px!important;font-weight:600!important;line-height:1.6;white-space:nowrap;color:#20252b}
#main-nav-menu .nav-link[data-current-section=true]{color:#b8202d}
#main-nav-menu .nav-link[data-current-section=true]::after{opacity:1}
.header-menu-arrow{flex-shrink:0;transition:rotate .16s ease;color:#79818c}
#main-nav-menu .nav-menu-item:hover .header-menu-arrow,#main-nav-menu .nav-menu-item:focus-within .header-menu-arrow{rotate:180deg;color:#b8202d}
#main-nav-menu .shared-submenu{position:absolute;top:100%;inset-inline-start:0;width:270px;padding-top:6px;z-index:60;opacity:0;visibility:hidden;transform:none;transition:opacity .16s ease}
.shared-submenu-surface{background:#fff;border:1px solid #e3e6ea;border-radius:8px;padding:8px;box-shadow:0 8px 24px #20252b12;max-height:min(65vh,520px);overflow:auto;overscroll-behavior:contain}
.shared-submenu-surface a{display:flex;align-items:center;min-height:44px;padding:8px 12px;font-size:14px;line-height:1.6;color:#20252b;border-radius:5px}
.shared-submenu-surface a:hover,.shared-submenu-surface a:focus-visible{color:#b8202d;background:#fff1f2}
#main-nav-menu .nav-menu-item:hover>.shared-submenu,#main-nav-menu .nav-menu-item:focus-within>.shared-submenu{visibility:visible;opacity:1}
#main-nav-menu .nav-menu-item[data-submenu-closed=true]>.shared-submenu{visibility:hidden;opacity:0}
#mobile-drawer-body .shared-mobile-item{border-bottom:1px solid #e3e6ea;padding-block:4px}
.shared-mobile-row{display:flex;align-items:center;justify-content:space-between}
.shared-mobile-row>a{flex:1;display:flex;align-items:center;min-height:48px;padding:10px;font-size:16px;border-radius:6px}
.shared-mobile-row .mobile-submenu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #e3e6ea;border-radius:6px;background:#fff;color:#5c6673}
.shared-mobile-row .mobile-submenu-toggle[aria-expanded=true]{background:#fff1f2;color:#b8202d;border-color:#f0c0c5}
#mobile-drawer-body .mobile-submenu{padding:4px 12px;margin-bottom:8px;border-inline-start:2px solid #e3e6ea}
#mobile-drawer-body .mobile-submenu a{display:flex;align-items:center;min-height:44px;padding:8px;font-size:14px;border-radius:5px}
#mobile-drawer-body a[aria-current=page]{color:#b8202d;background:#fff1f2}
#special-coverage-bar .latest-news-strip{min-height:48px;gap:18px}
/* White framed breadcrumb with consistent typography, icon and hierarchy. */
main#page-content nav.shared-breadcrumb{display:block;width:100%;background:#fff!important;border:1px solid #e3e6ea!important;border-radius:8px!important;box-shadow:none!important;padding:10px 14px!important;margin:0 0 28px!important;color:#5c6673!important;backdrop-filter:none}
.shared-breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0;overflow:visible;white-space:normal}
.shared-breadcrumb li{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;line-height:1.7;font-size:14px}
main#page-content .shared-breadcrumb a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 8px;border-radius:5px;color:#5c6673!important;text-decoration:none}
main#page-content .shared-breadcrumb .crumb-home{background:#fff1f2;color:#b8202d!important;min-height:38px}
main#page-content .shared-breadcrumb a:hover,main#page-content .shared-breadcrumb a:focus-visible{background:#fff1f2;color:#b8202d!important}
main#page-content .shared-breadcrumb [aria-current=page]{font-weight:600;color:#b8202d!important;padding:4px 0;overflow-wrap:anywhere}
main#page-content .shared-breadcrumb svg{color:inherit!important;flex-shrink:0}
main#page-content .shared-breadcrumb .crumb-separator{color:#9199a3!important}
.shared-crumb-container{padding-top:24px}
@media(max-width:1199px){#main-global-header>.container{gap:12px}#main-nav-menu{gap:2px!important}#main-nav-menu .nav-link{font-size:14px!important;padding:8px 6px!important}#main-global-header .header-logo{height:48px!important}}
@media(max-width:1023px){#shared-topbar{display:none}#main-global-header{height:80px!important}#main-global-header.h-header-sm{height:72px!important}#main-global-header .header-logo{height:46px!important}#main-nav-menu{display:none!important}#mobile-menu-toggle{display:flex!important}#mobile-menu-drawer{display:flex}}
@media(min-width:1024px){#mobile-menu-toggle,#mobile-menu-drawer{display:none!important}}
@media(max-width:599px){#main-global-header{height:76px!important}#main-global-header .header-logo{height:44px!important}main#page-content nav.shared-breadcrumb{padding:8px 10px!important;margin-bottom:24px!important}.shared-breadcrumb ol{gap:4px 6px}.shared-breadcrumb li{gap:6px;font-size:13px}main#page-content .shared-breadcrumb a{min-height:36px;padding:4px 6px}.shared-crumb-container{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.header-menu-arrow,#main-nav-menu .shared-submenu{transition:none}}

/* Align every internal breadcrumb with the shared masthead content column. */
.template-root>.tpl-wrap{width:100%;max-width:1200px;padding-inline:clamp(16px,3vw,32px)}
main#page-content .page-header,.media-library-header{padding-top:24px!important}

/* Breadcrumb placement is independent of the page's content template. */
.shared-crumb-container{padding-top:24px;padding-bottom:28px}
main#page-content .shared-crumb-container nav.shared-breadcrumb{margin-bottom:0!important}
.template-root>.tpl-wrap,main#page-content .page-header,.media-library-header{padding-top:0!important}
@media(max-width:599px){.shared-crumb-container{padding-top:20px;padding-bottom:24px}}