html {
  scroll-behavior: smooth;
}

:root {
  scroll-padding-top: 60px; 
}

:root{--Primary-Charcoal:#172526;--bg-search:#F4F0E8;--Primary-Persimmon-Netural:#E75724;--Header-Glass:#FCF9F4CC;--header-bar-h:60px;--header-bar-h-sm:50px;color-scheme:light}


/* Make any embedded media responsive to container width */
img,video,iframe{max-width:100%;height:auto}
.content-item-details iframe,.content-item-details video{display:block;width:100%;height:auto}


/* Reserve main content area to reduce CLS from late-loading UI */
main#wrapper{display:block;min-height:calc(100vh - var(--header-bar-h-sm) - 20px)}
@media (min-width:992px){
  main#wrapper{min-height:calc(100vh - var(--header-bar-h) - 20px)}
}

/* 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 var(--Primary-Persimmon-Netural);box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* Toggle removed in new header */

/* Panel (nav + search) */
.site-header__panel{width:100%}
/* Ensure the header panel, search box, and category chips stay visible
   even after late-loading CSS from app/common overrides. */
header.site-header .site-header__panel,
header.site-header .site-header__panel .container{display:block!important}
header.site-header .header-search-box{display:flex!important}
header.site-header .category-scroll{display:flex!important}

/* Safeguard: force primary panel visibility (some late CSS may toggle) */
#primaryPanel{display:block!important;opacity:1!important;visibility:visible!important}
#primaryPanel .header-search-box{display:flex!important;opacity:1!important;visibility:visible!important}
#primaryPanel .category-scroll{display:flex!important;opacity:1!important;visibility:visible!important}

/* Offset content below fixed bar */
.site-header__panel{margin-top:calc(var(--header-bar-h-sm) + 36px);margin-bottom:12px}
@media (min-width:992px){
  .site-header{padding:16px 0}
  .site-header__panel{margin-top:calc(var(--header-bar-h) + 20px)}
  .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}
}
@media (max-width:640px){
  /* Reserve enough space for search + chips to prevent collapse */
  #primaryPanel{min-height:148px}
}

/* 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:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (max-width:640px){
  .container{padding-right:12px;padding-left:12px}
}

/* Minimal grid fallback to prevent reflow before Bootstrap arrives */
.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
[class^="col-"],[class*=" col-"]{position:relative;width:100%;padding-right:15px;padding-left:15px}
.col-12{flex:0 0 100%;max-width:100%}
.col-lg-12{flex:0 0 100%;max-width:100%}
@media (min-width:992px){
  .col-lg-3{flex:0 0 25%;max-width:25%}
  .col-lg-9{flex:0 0 75%;max-width:75%}
}
/* Ensure header containers are not squeezed off-screen by late CSS */
header.site-header .container{padding-right:15px!important;padding-left:15px!important}

/* Remove legacy spacer bar used by old header */
.bar-mobile{display:none!important}
@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}
.trail-sep{color:#9ca3af}
@media (max-width:640px){.breadcrumb{border-radius:10px;padding:8px 10px}.breadcrumb__item{font-size:12.5px}}

/* Buttons moved to public/css/common.css */
/* Ensure clickable and above any overlapping content */
.content-footer-icons,.follow-buttons-vertical,.follow-buttons-vertical .follow-btn{position:relative;z-index:2;pointer-events:auto}

/* Job card (minimal critical to avoid layout shift) */
/* Job card atoms moved to public/css/common.css */

/* Utilities */
.content-share-bottom{content-visibility:auto;contain-intrinsic-size:400px}
/* Dividers moved to public/css/common.css */

/* 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 base sizes unified in public/css/common.css via aspect-ratio */

/* 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}

/* 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 image + title in top news block (mobile only) */
@media (max-width:991px){
  .content-news.top-news,
  .content-news.top-news .row,
  .content-news.top-news .item{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}
@media (max-width:991px){
  .content-news.top-news a.top{
  display:block!important;
  text-align:center;
  height:200px;
  }
}
@media (max-width:991px){
  .content-news.top-news .logo-200{
  display:block;
  margin:0 auto;
  width:200px !important;
  height:200px !important;
  object-fit:cover;
  }
}
.content-news.top-news .title{display:block;text-align:center}
/* H1 title styling override (requested weight and size) */
.content-news.top-news h1.title{
  color: var(--text-strong-950, #0E121B);
  text-align: center;
  font-family: "Somar Sans";
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* Job details: content box formatting */
.content-item-details{direction:rtl;text-align:right}
.content-item-details, .content-item-details *{word-break:break-word; overflow-wrap:anywhere}
.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)}

/* Time icon (fa-clock) should be orange regardless of generic .blue-color */
.fa-solid.fa-clock.blue-color{ color:#ff9800 !important }



/* 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 */