<style>
:root{--Primary-Charcoal:#172526;--bg-search:#F4F0E8;--Primary-Persimmon-Netural:#E75724;--Header-Glass:#FCF9F4CC;--header-bar-h:90px;--header-bar-h-sm:80px;color-scheme:light}


*,:before,:after{box-sizing:border-box}
html,body{background-color:#F9F8F7!important}
body{margin:0;font-family:"Somar Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;color:var(--Primary-Charcoal)}

/* Header: structure */
.site-header{padding:16px 0 0;width:100%;background:inherit}
.site-header .container{background:transparent}
.site-header__bar{position:fixed;top:0;inset-inline:0;z-index:1100;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;background:#FCF9F4F2;border-bottom:1px solid #E8E4DA;min-height:var(--header-bar-h-sm)}
.site-header__logo{display:inline-flex;justify-content:center;align-items:center;min-width:0}
.site-header__logo svg{display:block;width:180px;height:90px}
.site-header__logo img{width:250px;height:90px;object-fit:contain;display:block;margin:0 auto}

/* CTA button (desktop) */
.site-header__cta{border-radius:50px;background:var(--Primary-Persimmon-Netural);display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;border:1px solid transparent}

/* Toggle removed in new header */

/* Panel (nav + search) */
.site-header__panel{width:100%}

/* Offset content below fixed bar */
.site-header__panel{margin-top:calc(var(--header-bar-h-sm) + 20px)}
@media (min-width:992px){
  .site-header{padding:16px 0}
  .site-header__panel{margin-top:calc(var(--header-bar-h) + 15px)}
  .site-header__panel .container{display:block}
  .site-header__bar{min-height:var(--header-bar-h)}
}

/* Ensure header search and category chips are visible on mobile/tablet */
@media (max-width:991px){
  .site-header__panel{display:block!important}
  .site-header__panel .container{display:block!important}
  .header-search-box{display:flex!important}
  .category-scroll{display:flex!important}
}

/* Mobile sizing for logo/CTA/toggle to fit in one row */
@media (max-width:640px){
  .site-header{padding:12px 0 0}
  .site-header__bar{gap:8px}
  .site-header__logo svg{width:150px;height:auto}
  .site-header__cta{padding:6px 10px;font-size:12.5px}
}

/* Category drag bar (chips) */
.category-scroll{margin-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;direction:rtl;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.category-scroll::-webkit-scrollbar{height:6px}
.category-scroll::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}
.chip{display:flex;padding:8px;justify-content:flex-end;align-items:center;gap:4px;border-radius:10px;border:1px solid #E8E4DA;background:#F4F0E8;color:var(--Primary-Charcoal);text-decoration:none;white-space:nowrap;font-family:"Somar Sans",sans-serif;font-size:16px;font-style:normal;font-weight:400;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.chip.is-selected{border:1px solid var(--Primary-Charcoal,#172526);background:#F4F0E8}
@media (max-width:640px){
  .category-scroll{gap:6px}
  .chip{padding:7px}
}

/* Basic containers */
.container{width:100%;padding-right:200px;padding-left:50px;margin-right:auto;margin-left:auto}
@media (max-width:640px){
  .container{padding-right:12px;padding-left:12px}
}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}

/* Hide helpers */
@media (max-width:991px){.hide-on-mobile{display:none!important}.hide-on-desktop{display:block!important}}
@media (min-width:992px){.hide-on-desktop{display:none!important}.hide-on-mobile{display:block!important}}

/* Search (visual placeholder) */
.header-search-box{direction:rtl;width:100%;margin-top:18px;display:flex;justify-content:flex-end}
@media (max-width:640px){
  .header-search-box{margin-top:18px}
}
.search-pseudo{display:flex;flex-direction:row-reverse;padding:8.5px 12px;justify-content:flex-end;align-items:center;gap:4px;width:100%;max-width:none;box-sizing:border-box;border-radius:50px;background:#F4F0E8;border:1px solid #E8E4DA}
.search-pseudo__input{flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;outline:0;height:auto;direction:rtl;text-align:right;color:var(--Primary-Charcoal);font-family:"Somar Sans",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px}
.search-pseudo__input::placeholder{color:#C6C2B9}
.search-pseudo__input:focus{outline:none}
.search-pseudo__text{color:#C6C2B9;text-align:right;font-family:"Somar Sans",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px}
.search-pseudo__icon{display:inline-flex;width:16.759px;height:16.759px;flex-shrink:0}

/* Breadcrumb */
.trail{margin:7px 0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.trail,.trail-list,.trail-item,.trail-current{visibility:visible;opacity:1}
@media (max-width:991px){
  nav.trail{display:block!important}
  nav.trail .trail-list{display:flex!important}
  nav.trail .trail-current{display:block!important}
}
.trail-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.trail-item{display:inline-flex;align-items:center;min-width:0;white-space:normal;font-size:14px}
.trail-item a{text-decoration:none}
.trail-current{display:block;width:100%;margin-top:6px;font-weight:400;font-size:15px;text-align:right;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
@media (max-width:640px){.trail-item,.trail-item a{font-size:12px!important}.trail-current{font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.breadcrumb{border:1px solid #a8a39a;border-radius:12px;padding:8px 12px;background:#f4f0e8}
.breadcrumb--sticky{position:sticky;top:0;z-index:40;background:#f4f0e8}
.breadcrumb__list{padding:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.breadcrumb__item{display:inline-flex;align-items:center;white-space:nowrap;min-width:0;font-size:13px;font-weight:600}
@media (max-width:640px){.breadcrumb{border-radius:10px;padding:8px 10px}.breadcrumb__item{font-size:12.5px}}

/* Buttons moved to public/css/common.css */
/* Follow buttons moved to public/css/common.css */

/* Job card (minimal critical to avoid layout shift) */
.job-card{display:flex;flex-direction:column;gap:12px;width:100%;padding:12px;margin-block:12px;background-color:#fcf9f4;border-radius:16px;border:1px solid #e5e7eb;content-visibility:auto;contain-intrinsic-size:600px}
.job-card__media{width:100%;height:180px;border-radius:8px;background:#d3d3d3;overflow:hidden}
.job-card__media img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.job-card__header{display:grid;grid-template-columns:60px 1fr;column-gap:10px}
.job-card__logo{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0}
.job-card__title{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#0e121b;line-height:1.4;font-family:"Somar Sans","Graphik Arabic",sans-serif}
.job-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.job-card__meta-text{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;font-weight:600;white-space:nowrap}
.job-card__footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.job-card__status{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:6px;font-size:12px;color:#fff;font-weight:600}
.job-card__footer .job-card__status.is-live{background:#1fc16b}
.job-card__footer .job-card__status.is-important{background:#fb3748}
.job-card__footer .job-card__status.is-closing-soon{background:#ff9800}
.job-card__footer .job-card__status.is-soon{background:#fcf9f4;color:#172526}

/* Utilities */
.content-share-bottom{content-visibility:auto;contain-intrinsic-size:400px}
.dividers{margin:9px 0;border-top:1px solid #e5e7eb}
.diivider{--line:#e5e7eb;--text:#172526;display:flex;align-items:center;gap:12px;color:var(--text);font-size:14px;font-weight:400;line-height:1;text-align:center;margin:16px 0}
.diivider:before,.diivider:after{content:"";height:1px;background:var(--line);flex:1;opacity:.9;border-radius:1px}

/* Redesigned generic card for .item */
.item{
  display:block;
  width:100%;
  background:#FCF9F4;
  border:1px solid #E8E4DA;
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:#e5e7eb;
}
.item .title{margin:8px 0 0;font-weight:600;color:#172526;line-height:1.5}
.item .bottom{margin-top:10px}
@media (max-width:640px){
  .item{padding:12px;border-radius:12px}
}

/* Utility logo sizes */
.logo-50{width:50px;height:50px;object-fit:cover;display:inline-block}
.logo-100{width:100px;height:100px;object-fit:cover;display:inline-block}
.logo-200{width:200px;height:200px;object-fit:cover;display:block}

/* Compact modifier for job details cards */
.item--compact{padding:12px;border-radius:12px}

/* Fix media sizing in legacy content cards to avoid CLS
   Do not affect explicitly sized logos like .logo-50 */
.content-item-details .content-top-details img:not(.logo-50){
  display:block;
  width:min(200px,100%);
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  margin:0 auto;
  border-radius:8px
}

/* Force placeholder container to render immediately if present */
#placeholder{display:block!important;visibility:visible;opacity:1}

/* Breadcrumb (trail) */
.trail{margin:8px 0}
.trail-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0;margin:0}
.trail-item a{color:#172526;text-decoration:none}
.trail-item a:hover{text-decoration:underline}
.trail-item.trail-current{color:#6b7280;font-weight:600}
.trail-sep{color:#9ca3af}

/* Job details: primary section spacing */
.content-news-desc{margin-top:10px}

/* Job details: align H1 with card title */
.content-item .item .title,
.content-item h1.title,
.content-news .item .title,
.content-item .big-title{
  margin:8px 0 10px;
  color:#172526;
  font-family:"Somar Sans",sans-serif;
  font-weight:700;
  line-height:1.4;
  font-size:18px;
}
@media (min-width:768px){
  .content-item .item .title,
  .content-item h1.title,
  .content-news .item .title,
  .content-item .big-title{font-size:20px}
}

/* Center title in top news block */
.content-news.top-news .title{display:block;text-align:center}

/* Job details: content box formatting */
.content-item-details{direction:rtl;text-align:right}
.content-item-details p{margin:8px 0 12px;color:#172526;line-height:1.8}
.content-item-details h2{margin:14px 0 8px;font-size:1.125rem;line-height:1.4;color:#172526;font-weight:700}
@media (min-width:768px){
  .content-item-details h2{font-size:1.1875rem}
}
.content-item-details h3{margin:12px 0 6px;font-size:16px;line-height:1.4;color:#172526;font-weight:700}
.content-item-details h4{margin:10px 0 6px;font-size:15px;line-height:1.4;color:#172526;font-weight:700}
.content-item-details a{color:var(--Primary-Persimmon-Netural);text-decoration:underline;text-underline-offset:2px}
.content-item-details a:hover{filter:brightness(.9)}
.content-item-details ul,.content-item-details ol{margin:8px 0 12px;padding-inline-start:1.25rem}
.content-item-details li{margin:4px 0;line-height:1.8}
.content-item-details blockquote{margin:12px 0;padding:10px 12px;border-radius:10px;background:#FCF9F4;border:1px solid #E8E4DA;color:#172526}
.content-item-details img{max-width:100%;height:auto;border-radius:8px;display:block;margin:8px auto}
.content-item-details table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E8E4DA;border-radius:8px;overflow:hidden;display:block;max-width:100%}
.content-item-details thead th{background:#F4F0E8}
.content-item-details th,.content-item-details td{padding:10px;border:1px solid #E8E4DA;text-align:right;font-size:14px}
.content-item-details pre,.content-item-details code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;border:1px solid #e5e7eb;border-radius:8px}
.content-item-details pre{padding:10px;overflow:auto;margin:10px 0}
.content-item-details hr{border:0;border-top:1px solid #e5e7eb;margin:12px 0}
.content-item-details .note{padding:10px 12px;border-radius:10px;background:#eef8ff;border:1px solid #cfe7ff}
.content-item-details .warning{padding:10px 12px;border-radius:10px;background:#fff7ed;border:1px solid #ffead5}

/* Content Item block (col-12 content-item) */
.content-item{margin-block:12px}
.content-item a.top{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;text-decoration:none;color:inherit}
.content-item a.top .logo-50{border-radius:8px;flex:0 0 50px}
.content-item a.center{display:inline-flex;align-items:center;gap:6px;margin:4px 0;color:#6b7280;font-weight:600;font-size:13.5px;text-decoration:none}
.content-item a.center:hover{text-decoration:underline}
.content-item .content-category{display:inline-flex;align-items:center;gap:6px;height:30px;padding:4px 10px;border-radius:999px;border:1px solid #E8E4DA;background:#fff}
.content-item .content-category .category-text{font-size:13px;color:#172526;font-weight:600}
.content-item .content-category .fa-solid,.content-item .content-category .job-card__cat-icon{width:16px;height:16px;color:#9ca3af;flex:0 0 16px}
.content-item .content-category-second{margin-inline-start:8px}
.content-item .content-status .status{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:#FCF9F4;border:1px solid #E8E4DA;color:#172526}
@media (max-width:640px){
  .content-item a.top{gap:8px}
  .content-item a.center{font-size:13px}
}

/* Content-item: text and icons outside chips */
.content-item .category-text{display:inline-block;margin-inline-start:6px;font-size:13px;color:#172526;font-weight:600}
.content-item .job-card__cat-icon{width:16px;height:16px;flex:0 0 16px}
.content-item .fa,.content-item .fa-solid,.content-item .fa-regular,.content-item .fa-brands{
  font-size:14px;color:#9ca3af;vertical-align:middle
}
.content-item a:hover .fa,
.content-item a:hover .fa-solid,
.content-item a:hover .fa-regular,
.content-item a:hover .fa-brands{color:var(--Primary-Persimmon-Netural)}



/* Job page: hide application status inside top card only */
.content-news.top-news .content-status{display:none!important}

/* Filters (all_news) */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0}
.filter{display:flex;flex-direction:column;gap:6px}
.filter__label{font-size:13px;color:#172526;font-weight:600}
.filter__select{min-width:160px;padding:8px 10px;border:1px solid #E8E4DA;border-radius:10px;background:#FCF9F4;color:#172526}
@media (max-width:640px){
  .filters{gap:10px}
  .filter{flex:1 1 100%}
  .filter__select{width:100%}
}

/* moved repeated UI styles (follow buttons, actions, share) to common.css */
</style>
