/* ============================================================
   JIJ CMS glue styles — inner pages, dynamic forms, listings
   Complements the jij-web template (main-ar.css / main-en.css)
   ============================================================ */

:root {
    --jij-primary: #232D6A;
    --jij-gold: #B4975A;
    --jij-bg: #F0EEE9;
}

/* ---------- inner page body content ---------- */
.content-inner { padding: 20px 0 50px; }

.cms-body { font-size: 16px; line-height: 1.9; color: #333; }
.cms-body h1, .cms-body h2, .cms-body h3, .cms-body h4 { color: var(--jij-primary); line-height: 1.5; }
.cms-body img { max-width: 100%; height: auto; }
.cms-body table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.cms-body table td, .cms-body table th { border: 1px solid #ddd; padding: 10px 14px; }
.cms-body table th { background: var(--jij-bg); color: var(--jij-primary); }
.cms-body ul, .cms-body ol { padding-inline-start: 25px; margin: 12px 0; }
.cms-body blockquote { border-inline-start: 4px solid var(--jij-gold); background: var(--jij-bg); margin: 20px 0; padding: 15px 20px; }
.cms-body a { color: var(--jij-primary); text-decoration: underline; }

.page-cover { margin: 0 0 25px; }
.page-cover img { width: 100%; border-radius: 4px; }

/* ---------- article tools (share / print / resize) ---------- */
.page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 15px; }
.page-tools .share-article { display: flex; align-items: center; gap: 10px; }
.page-tools .share-text { color: var(--jij-primary); font-weight: bold; font-size: 14px; }
.page-tools .share-article a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jij-primary); color: #fff; transition: .2s; }
.page-tools .share-article a:hover { background: var(--jij-gold); }
.page-tools .share-article .x-logo { width: 15px; height: 15px; fill: #fff; }
.page-tools__right { display: flex; align-items: center; gap: 12px; }
.page-tools .print-btn { color: var(--jij-primary); font-size: 18px; }
.page-tools .resizable-icon a { cursor: pointer; color: var(--jij-primary); padding: 0 3px; }
.page-meta { display: flex; flex-wrap: wrap; gap: 18px; color: #888; font-size: 13px; margin-bottom: 20px; }
.page-meta .date { color: var(--jij-gold); }
.page-meta i { margin-inline-end: 5px; }
@media print {
    .site-header, .top, .menu, .vertical-text, .footer, .copyright, .page-tools, #scroll, .related-pages, #delayedPopup, #bkgOverlay { display: none !important; }
}

.content-inner .date { color: var(--jij-gold); font-size: 14px; margin-bottom: 15px; }

/* ---------- video embed ---------- */
.cms-video { position: relative; padding-top: 56.25%; margin: 30px 0; }
.cms-video iframe, .cms-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- gallery ---------- */
.cms-gallery { margin-top: 25px; }
.cms-gallery img { width: 100%; margin-bottom: 20px; border-radius: 4px; }

/* ---------- attachments ---------- */
.cms-attachments { margin-top: 30px; }
.cms-attachments ul { list-style: none; padding: 0; }
.cms-attachments li { padding: 8px 0; border-bottom: 1px dashed #ddd; }
.cms-attachments a { color: var(--jij-primary); }
.cms-attachments i { margin-inline-end: 8px; color: var(--jij-gold); }

/* ---------- FAQ ---------- */
.cms-faq__item { border: 1px solid #e2e0da; border-radius: 4px; margin-bottom: 12px; background: #fff; }
.cms-faq__item summary { cursor: pointer; padding: 14px 18px; font-weight: bold; color: var(--jij-primary); outline: none; }
.cms-faq__item[open] summary { border-bottom: 1px solid #e2e0da; background: var(--jij-bg); }
.cms-faq__a { padding: 14px 18px; }

/* ---------- category listing ---------- */
.category-desc { margin-bottom: 30px; }
.category-list .sub-news { margin-bottom: 12px; }
.category-list__excerpt { font-size: 13px; color: #777; margin-top: 6px; }
.category-cards .frame { margin-bottom: 25px; }
.related-pages { padding-bottom: 40px; }
.related-pages .title { margin-bottom: 20px; }

/* ---------- dynamic form (shared partial) — matches jij.gov.jo native form ---------- */
.jij-form .form-group { margin-bottom: 16px; }
.jij-form .required { font-size: 11px; color: #ab201f; margin-top: 3px; }
.jij-form .jij-field-label { display: block; font-weight: bold; color: var(--jij-primary); margin-bottom: 6px; font-size: 14px; }
.jij-form .jij-field-help { display: block; color: #999; font-size: 12px; margin-top: 4px; }
.jij-form .jij-choices { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 6px 0; }
.jij-form .jij-choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; cursor: pointer; }
.jij-form .jij-choice input { width: auto; margin: 0; }
.jij-form .jij-form-submit { margin-top: 10px; min-width: 160px; text-align: center; }

/* mobile prefix + number inline (both are .form-control) */
.phone-input-group { display: flex; gap: 8px; }
.phone-input-group .phone-prefix { flex: 0 0 90px; width: 90px; }
.phone-input-group .phone-number { flex: 1 1 auto; }

.form-note { padding: 12px 18px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.form-note.success { background: #e6f4e9; color: #1d6d33; border: 1px solid #b8dfc2; }
.form-note.error { background: #fbeaea; color: #a33030; border: 1px solid #efc4c4; }

/* ---------- contact page ---------- */
.contact-page-info div { padding: 10px 0; border-bottom: 1px dashed #ddd; color: #444; }
.contact-page-info i { color: var(--jij-gold); margin-inline-end: 10px; width: 18px; text-align: center; }
.contact-page-info a { color: var(--jij-primary); }

/* ---------- careers (list + details reuse) ---------- */
.section { padding: 30px 0 50px; }
.section .container.center, .center { text-align: center; }
.lead { font-size: 17px; color: #555; }
.mx-auto { margin-inline: auto; }
.list-row { display: grid; background: #fff; border: 1px solid #e2e0da; border-radius: 4px; padding: 18px; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #777; font-size: 13px; margin-bottom: 8px; }
.blog-meta b { color: var(--jij-gold); }
a.btn.btn--primary {
    display: inline-block; padding: 10px 26px; background: var(--jij-primary); color: #fff;
    border: 1px solid var(--jij-primary); border-radius: 3px; transition: .3s; text-decoration: none;
}
a.btn.btn--primary:hover { background: #fff; color: var(--jij-primary); }
a.btn.btn--primary i { display: none; }

/* ---------- error page ---------- */
.accent { color: var(--jij-primary); }

/* ---------- home tweaks ---------- */
.marquee-content-items a { color: inherit; }
.news-tickers .marquee li { direction: inherit; }

/* ---------- footer contact block ---------- */
.footer .vcard i { margin-inline-end: 8px; }

/* ---------- site search (toggle icon + full-screen overlay + results) ---------- */
.site-search-toggle {
    float: inline-end;
    width: 46px; height: 46px; margin: 6px 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.15); color: #fff; border-radius: 4px; font-size: 18px;
    transition: .2s;
}
.site-search-toggle:hover { background: var(--jij-primary); color: #fff; }

.site-search-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(20,24,55,.92);
    display: none; align-items: center; justify-content: center;
}
.site-search-overlay.is-open { display: flex; }
.site-search-close {
    position: absolute; top: 24px; inset-inline-end: 32px;
    background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer;
}
.site-search-close:hover { color: var(--jij-gold); }
.site-search-box { width: 90%; max-width: 760px; text-align: center; }
.site-search-input {
    width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.5);
    color: #fff; font-size: clamp(1.6rem, 5vw, 3rem); padding: 14px 6px; text-align: center; outline: none;
}
.site-search-input::placeholder { color: rgba(255,255,255,.55); }
.site-search-hint { color: rgba(255,255,255,.7); margin-top: 16px; font-size: 14px; }

/* search results page */
.search-results__title { color: var(--jij-primary); font-size: 24px; margin: 0 0 14px; }
.search-results__count { color: #666; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.search-results__empty { color: #999; padding: 20px 0; }
.search-result { padding: 16px 0; border-bottom: 1px dashed #ddd; }
.search-result__title { margin: 0 0 6px; font-size: 19px; }
.search-result__title a { color: var(--jij-primary); }
.search-result__title a:hover { color: var(--jij-gold); }
.search-result__date { color: var(--jij-gold); font-size: 13px; margin-bottom: 8px; }
.search-result__excerpt { color: #555; line-height: 1.9; margin: 0; }

/* ---------- mobile collapsible menu (#menu + #jij-mnav checkbox toggle) ----------
   responsive-ar.css only sets #menu{display:block} on mobile but ships no collapse
   logic, so the list stayed permanently open. This provides the hamburger toggle. */
@media (max-width: 991px) {
    /* hide the desktop mega-menu, show only the mobile menu */
    .header-menu { display: none !important; }

    #menu { display: block; position: relative; padding: 8px 0; }
    #menu #jij-mnav { position: absolute; opacity: 0; pointer-events: none; }
    #menu > label {
        display: flex; align-items: center; gap: 10px; cursor: pointer;
        background: var(--jij-primary); color: #fff; padding: 12px 16px;
        border-radius: 4px; font-size: 16px; font-weight: bold; margin: 0;
    }
    #menu > label span { font-weight: bold; }
    /* closed by default; opens only when the hamburger checkbox is checked.
       !important overrides the template's inverted (open-by-default) rule. */
    #menu > ul {
        list-style: none; margin: 0; padding: 0; background: #fff;
        display: none !important;
    }
    #menu #jij-mnav:checked ~ ul { display: block !important; border: 1px solid #eee; border-top: 0; }
    #menu > ul > li { border-bottom: 1px solid #f0efec; }
    #menu > ul li a { display: block; padding: 11px 18px; color: var(--jij-primary); text-decoration: none; }
    #menu > ul li a:hover { background: var(--jij-bg); }
    /* submenu accordion: hidden until its parent <li> gets .open (toggled by JS).
       !important isolates it from the main-menu :checked toggle. */
    #menu ul.menus { list-style: none; margin: 0; padding: 0; background: #faf9f6; display: none !important; }
    #menu > ul > li.open > ul.menus { display: block !important; }
    #menu ul.menus li a { padding-inline-start: 34px; font-size: 13px; color: #555; }
    /* +/- toggle indicator on parents that have a submenu (font-independent, always renders) */
    #menu a.prett { position: relative; padding-inline-end: 44px; }
    #menu a.prett::after {
        content: "+";
        position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%);
        width: 22px; height: 22px; line-height: 20px; text-align: center;
        font-size: 18px; font-weight: 700; color: #fff; background: var(--jij-gold);
        border-radius: 4px;
    }
    #menu > ul > li.open > a.prett::after { content: "\2212"; background: var(--jij-primary); }
}

/* ---------- vertical social rail — match jij.gov.jo (icon + label, blue side strip) ---------- */
.vertical-text {
    width: 75px;
    height: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    padding: 16px 0;
    left: 0;
    right: auto;
    background-color: #232d6a;
}
.vertical-text ul { margin: 0; padding: 0; list-style: none; }
.vertical-text ul li { display: block; margin: 14px 0; text-align: center; padding: 0; }
.vertical-text ul li a { color: #fff; font-size: 11px; line-height: 1.3; display: block; word-break: break-word; }
.vertical-text ul li a i { display: block; font-size: 18px; margin-bottom: 5px; }
.vertical-text ul li a .x-logo { display: block; width: 18px; height: 18px; margin: 0 auto 5px; fill: currentColor; }
.vertical-text ul li a:hover { color: #bd9806; }
/* On tablets/phones the fixed rail would overlap content — hide it there
   (the same links live in the top bar and footer). */
@media (max-width: 991px) {
    .vertical-text { display: none !important; }
}

/* ============================================================
   Category display themes (mirror legacy jij.gov.jo)
   ============================================================ */

/* NEWS theme */
.news-row { margin-bottom: 10px; align-items: center; display: flex; flex-wrap: wrap; }
.news-row .news-img { border-radius: 4px; }
.content-inner .section-news { padding: 10px 20px; }
.content-inner .section-news .title-news { font-size: 20px; font-weight: bold; color: var(--jij-primary); margin-bottom: 12px; line-height: 1.6; }
.content-inner .section-news .date-news { color: var(--jij-gold); font-size: 14px; margin-bottom: 12px; }
.content-inner .section-news .btn-more { margin-top: 12px; }
.content-inner hr { border-top: 1px solid #e2e0da; margin: 18px 0; }

/* GRID themes (component1/component2 supply the hover effect; spacing only here) */
.content-inner .grid, .content-inner .grid2 { margin: 10px 0 30px; text-align: center; }

/* PDF theme */
.pdf-list { list-style: none; padding: 0; margin: 10px 0; }
.pdf-list li { border-bottom: 1px dashed #ddd; }
.pdf-list li a { display: flex; align-items: center; gap: 12px; padding: 14px 8px; color: #333; text-decoration: none; transition: .2s; }
.pdf-list li a:hover { background: var(--jij-bg); color: var(--jij-primary); }
.pdf-list li i { color: #c0392b; font-size: 22px; }
.pdf-list .pdf-date { margin-inline-start: auto; color: #999; font-size: 13px; }

/* LIST 1 — media list */
.list1-row { margin-bottom: 10px; }
.list1-title { font-size: 19px; margin: 0 0 8px; }
.list1-title a { color: var(--jij-primary); }
.list1-row img { border-radius: 4px; margin-bottom: 10px; }

/* LIST 2 — compact chevron list */
.list2 { list-style: none; padding: 0; margin: 10px 0; }
.list2 li { display: flex; align-items: center; padding: 12px 6px; border-bottom: 1px dashed #ddd; }
.list2 li a { color: var(--jij-primary); text-decoration: none; }
.list2 li i { color: var(--jij-gold); margin-inline-end: 8px; }
.list2 .pdf-date { margin-inline-start: auto; color: #999; font-size: 13px; }

/* VIDEO theme */
.video-grid { margin-top: 10px; }
.video-item { margin-bottom: 25px; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: 6px; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-item .video-title { margin-top: 10px; font-weight: bold; color: var(--jij-primary); }

/* FAQ list reuse */
.faq-list { margin: 10px 0; }

/* ---------- tenders / procurement data table ---------- */
.tenders-table { margin: 10px 0 30px; }
.tenders-table table { width: 100%; border-collapse: collapse; }
.tenders-table thead th { background: var(--jij-primary); color: #fff; padding: 12px 14px; font-size: 14px; text-align: inherit; }
.tenders-table tbody td { padding: 11px 14px; border-bottom: 1px solid #eee; font-size: 14px; color: #333; vertical-align: middle; }
.tenders-table tbody tr:nth-child(even) { background: #faf9f6; }
.tenders-table tbody tr:hover { background: var(--jij-bg); }
.tenders-table .btn-header { padding: 5px 16px; font-size: 13px; margin: 0; }
.tenders-table tbody tr:only-child td { }
.tenders-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 20px; }
.tenders-filter .form-control { width: auto; min-width: 180px; }
.tenders-filter .btn-header { margin: 0; }
.tenders-archive-link { margin-inline-start: auto; }
.tenders-docs a { display: inline-block; margin: 0 4px; color: var(--jij-primary); font-size: 17px; }
.tenders-docs a:hover { color: var(--jij-gold); }
.tender-detail th { width: 220px; background: var(--jij-bg); color: var(--jij-primary); }
.tender-detail th, .tender-detail td { padding: 12px 14px; border: 1px solid #eee; }
@media (max-width: 767px) {
    .tenders-table thead { display: none; }
    .tenders-table tbody td { display: flex; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid #eee; }
    .tenders-table tbody td::before { content: attr(data-label); font-weight: bold; color: var(--jij-primary); }
    .tenders-table tbody tr { display: block; border: 1px solid #e2e0da; border-radius: 6px; margin-bottom: 12px; padding: 4px 0; }
}

/* ---------- HTML sitemap ---------- */
.sitemap { padding: 10px 0 30px; }
.sitemap-col { margin-bottom: 25px; }
.sitemap-cat { font-size: 18px; color: var(--jij-primary); border-bottom: 2px solid var(--jij-gold); padding-bottom: 8px; margin-bottom: 12px; }
.sitemap-cat a { color: var(--jij-primary); }
.sitemap ul { list-style: none; padding: 0; margin: 0; }
.sitemap ul li { padding: 5px 0; }
.sitemap ul li a { color: #444; text-decoration: none; }
.sitemap ul li a:hover { color: var(--jij-gold); }
.sitemap ul li i { color: var(--jij-gold); font-size: 11px; margin-inline-end: 6px; }
.sitemap-inline { display: flex; flex-wrap: wrap; gap: 8px 30px; }

/* ---------- survey popup results ---------- */
.poll-msg { padding: 8px 12px; border-radius: 4px; margin: 8px 0; font-size: 13px; }
.poll-msg.success { background: #e6f4e9; color: #1d6d33; }
.poll-msg.error { background: #fbeaea; color: #a33030; }
.poll-results { margin: 10px 0; }
.poll-result { margin-bottom: 10px; }
.poll-result__label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: #fff; }
.poll-bar { background: rgba(255,255,255,.25); border-radius: 10px; height: 10px; overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: var(--jij-gold, #B4975A); border-radius: 10px; }
.poll-total { font-size: 12px; color: #eee; margin-top: 8px; text-align: center; }