/* ==========================================================================
   Al Wusta Governorate Portal - permanent site theme layer (bss2020)
   --------------------------------------------------------------------------
   Purpose : Tajawal font (self-hosted, real 300/400/500/700/800 faces),
             RTL fixes that Bootstrap 4.5 / the bss2020 theme do not cover,
             and the look of the server-rendered navbar (highlight + active).
             Replaces the font / RTL / navbar parts of the admin
             "Custom CSS & JavaScript" box (css/user-custom.css).
   Loading : enqueued from application/views/themes/bss2020/config.php with
             add_css("css/alwusta-theme.css", 11) - i.e. AFTER
             css/user-custom.css (priority 10), so the admin box cannot
             override it.
   Rules   : do NOT edit theme/bss2020/css/style.css (it is regenerated from
             SCSS whenever theme colours are saved). Edit this file instead.
             Never use broad div/span/a/ul/li/i font selectors here - they
             break the icon fonts (Font Awesome, Ionicons, appsbd ".ap").
   ========================================================================== */


/* ==========================================================================
   1. Tajawal @font-face (no !important inside descriptors - it is invalid)
   ========================================================================== */
@font-face {
    font-family: "Tajawal";
    src: url("../font/Tajawal-Light.woff2") format("woff2"),
         url("../font/Tajawal-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tajawal";
    src: url("../font/Tajawal-Regular.woff2") format("woff2"),
         url("../font/Tajawal-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tajawal";
    src: url("../font/Tajawal-Medium.woff2") format("woff2"),
         url("../font/Tajawal-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tajawal";
    src: url("../font/Tajawal-Bold.woff2") format("woff2"),
         url("../font/Tajawal-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Tajawal";
    src: url("../font/Tajawal-ExtraBold.woff2") format("woff2"),
         url("../font/Tajawal-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. Font layer - precise selectors only
   --------------------------------------------------------------------------
   !important is used only where style.css declares its own font with
   !important (or a more specific non-important rule) on that element.
   Icon elements (.fa/.fas/.far/.fab, .ion*, .ap) are never matched: they are
   separate <i>/<span> elements with their own font-family.
   html{font-size:14px} from theme_rtl.css (the rem base) is NOT touched.
   ========================================================================== */

/* --- 2a. base + headings + paragraphs --- */
body,
h1, h2, h3, h4, h5, h6,
p {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}
h1 {
    font-weight: 700 !important;
}
h2, h3, h4 {
    font-weight: 500 !important;
}
h5, h6 {
    font-weight: 400;
}

/* --- 2b. form labels (beats style.css ".form-group > label" Poppins !important) --- */
label,
.control-label,
.form-group > label,
.form-group .control-label,
.app-lb-ajax-form h4 {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* --- 2c. form controls + buttons (no theme font of their own; declared so
       container rules such as ".app-panel-box.card .card-body" cannot leak) --- */
.form-control,
input,
select,
textarea,
button,
.btn,
.form-group-help-block,
.row-help-block,
.help-block {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* --- 2d. select2 --- */
.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap .select2-search--inline .select2-search__field,
.select2-dropdown,
.select2-results__option,
.select2-selection__choice {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* --- 2e. header / navbar --- */
header nav.navbar,
header nav.navbar .navbar-toggler,
header nav.navbar .navbar-brand,
header nav.navbar li a,
header nav.navbar .btn-login,
header nav.navbar .btn-register,
.dropdown-menu,
.dropdown-item {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* --- 2f. theme components that carry their own font --- */
.btn-theme-light,
.faq-section .faq-tab-container ul.nav li a,
.faq-section .faq-tab-container .tab-content,
.app-panel-box.card .card-body,
.app-panel-box.card .card-header .kn-details.post-details,
.app-panel-box.card .card-body .ctg-list li h5,
.kn-list > li .kn-title h3 > a,
section.home-header > div h1:first-child,
section.home-header > div > p,
section.home-header > div .header-src-box input,
section.home-header > div .header-src-box .src-container ul.kn-list li h3,
section.home-header > div .header-src-box .src-container ul.kn-list li h3 a,
.still-need-section p,
.feature-box-container .row .feature-box .f-title,
.feature-box-container .row .feature-box .f-content,
.article-container .article-box .art-list > ul > li,
.feedback-carousel .carousel .carousel-inner .carousel-item .feed-author .feed-autor-name,
footer .footer-mod .mod-title,
.mail-chimp-form > h1:first-child,
.mail-chimp-form > p,
.mail-chimp-form > div.subscribe-box input,
.card.ticket-reply .card-body .user-type,
.ticket-reply .card-body.admin-user .user-type {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}


/* ==========================================================================
   3. RTL fixes (only when the site runs RTL: <html dir="rtl">,
      set by main.php / page.php / login.php from is_rtl_client)
   ========================================================================== */

/* --- body text alignment (Bootstrap body{text-align:left}) --- */
html[dir="rtl"] body {
    text-align: right;
}

/* --- form controls (no !important so .text-center inputs keep centring) --- */
html[dir="rtl"] .form-control,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

/* --- labels: horizontal-form padding swap --- */
html[dir="rtl"] .form-horizontal .form-group .control-label {
    text-align: right !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
}

/* --- Select2 (plugins/select2 has no RTL build) --- */
html[dir="rtl"] .select2-container {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .select2-container .select2-selection__rendered {
    text-align: right !important;
    padding-right: 8px !important;
    padding-left: 20px !important;
}
html[dir="rtl"] .select2-container .select2-selection__arrow {
    left: 1px !important;
    right: auto !important;
}
html[dir="rtl"] .select2-dropdown {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .select2-results__option {
    text-align: right !important;
}

/* --- navbar + dropdown (Bootstrap is LTR-hardcoded here) --- */
html[dir="rtl"] .navbar-nav {
    padding-right: 0 !important;
}
html[dir="rtl"] .navbar .navbar-brand {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}
html[dir="rtl"] .navbar-collapse .col {
    text-align: center !important;
}
html[dir="rtl"] .header-btns {
    direction: ltr !important;
}
html[dir="rtl"] .dropdown-menu {
    text-align: right !important;
    right: 0 !important;
    left: auto !important;
}
html[dir="rtl"] .dropdown-menu li a,
html[dir="rtl"] .dropdown-menu .dropdown-item {
    text-align: right !important;
}
html[dir="rtl"] .dropdown-menu li a i,
html[dir="rtl"] .dropdown-menu .dropdown-item i {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* --- knowledge / category list --- */
html[dir="rtl"] .kn-list.ctg-list {
    padding-right: 0 !important;
    list-style: none !important;
}
html[dir="rtl"] .kn-list.ctg-list li {
    text-align: right !important;
}
html[dir="rtl"] .kn-list.ctg-list li h5 a i.fa-angle-double-right {
    margin-left: 5px !important;
    margin-right: 0 !important;
}
html[dir="rtl"] .kn-list.ctg-list li h5 .float-right {
    float: left !important;
}

/* --- file upload box (ticket form) --- */
html[dir="rtl"] .app-file-upload-container {
    text-align: right !important;
}
html[dir="rtl"] .app-file-upload-container .u-file-preview {
    text-align: left !important;
}
html[dir="rtl"] .app-file-upload-container .u-file-preview img,
html[dir="rtl"] .app-file-upload-container .u-file-preview i {
    float: left !important;
}
html[dir="rtl"] .app-file-upload-container .u-file-dtls dl dt {
    float: right !important;
    text-align: right !important;
}
html[dir="rtl"] .app-file-upload-container .u-file-dtls dl dd {
    margin-right: 100px !important;
    margin-left: 0 !important;
    text-align: right !important;
}

/* --- dl-horizontal (Bootstrap 3 class used by the views; no BS4 CSS) --- */
html[dir="rtl"] .dl-horizontal dt {
    float: right !important;
    text-align: right !important;
}
html[dir="rtl"] .dl-horizontal dd {
    margin-right: 180px !important;
    margin-left: 0 !important;
}

/* --- icon spacing inside buttons / links --- */
html[dir="rtl"] .add-cloner-button {
    direction: rtl !important;
}
html[dir="rtl"] .add-cloner-button i {
    margin-left: 4px !important;
    margin-right: 0 !important;
}
html[dir="rtl"] .card-footer .btn i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}
html[dir="rtl"] .nav-link i,
html[dir="rtl"] .btn i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* --- column padding helper used by ticket/knowledge views --- */
html[dir="rtl"] .md-p-l-0 {
    padding-left: 15px !important;
    padding-right: 0 !important;
}

/* --- footer --- */
html[dir="rtl"] footer .pl-3 {
    padding-right: 1rem !important;
    padding-left: 0 !important;
}
html[dir="rtl"] footer p {
    text-align: right !important;
}
html[dir="rtl"] .copy-right-container p {
    text-align: center !important;
}

/* --- Summernote editor --- */
html[dir="rtl"] .note-editor .note-editable {
    direction: rtl !important;
    text-align: right !important;
}
html[dir="rtl"] .note-editor .note-toolbar {
    direction: ltr !important;
}

/* --- placeholders (centred inputs keep their own alignment) --- */
html[dir="rtl"] input:not(.text-center)::placeholder,
html[dir="rtl"] textarea:not(.text-center)::placeholder {
    text-align: right !important;
}

/* --- native select arrow side / padding --- */
html[dir="rtl"] select.form-control {
    background-position: left 0.75rem center !important;
    padding-left: 1.75rem !important;
    padding-right: 0.75rem !important;
}


/* ==========================================================================
   4. Navbar look (server-rendered menu in modules/site-menu2.php)
   ========================================================================== */

/* --- item layout: start from the reading side, no wrapping --- */
#main-nav .navbar-nav {
    justify-content: flex-start !important;
    width: 100%;
}
#main-nav .navbar-nav .nav-item .nav-link {
    white-space: nowrap;
    padding-right: 15px !important;
    padding-left: 15px !important;
}
html[dir="rtl"] #main-nav .navbar-nav .nav-item .nav-link i {
    margin-left: 5px !important;
    margin-right: 0 !important;
}

/* --- active page: 2px underline --- */
.navbar .navbar-nav .nav-item.active > .nav-link {
    color: #34466c !important;
    border-bottom: 2px solid #34466c;
    border-radius: 0;
    font-weight: 500 !important;
}

/* --- highlighted item ("طلب خدمة جديدة") : white on navy pill --- */
.navbar .navbar-nav .nav-item > .nav-link.nav-link-highlight,
header nav.navbar li a.nav-link-highlight {
    color: #fff !important;
    background-color: #34466c !important;
    border-radius: 4px;
    padding: 6px 15px !important;
    transition: background-color 0.2s ease;
}
.navbar .navbar-nav .nav-item > .nav-link.nav-link-highlight:hover,
.navbar .navbar-nav .nav-item > .nav-link.nav-link-highlight:focus,
header nav.navbar li a.nav-link-highlight:hover {
    color: #fff !important;
    background-color: #1a2a4a !important;
}
.navbar .navbar-nav .nav-item > .nav-link.nav-link-highlight i {
    color: #fff !important;
}
/* highlighted item on its own page: darker pill, no underline */
.navbar .navbar-nav .nav-item.active > .nav-link.nav-link-highlight {
    color: #fff !important;
    background-color: #1a2a4a !important;
    border-bottom: none !important;
    border-radius: 4px;
}

/* --- hamburger button --- */
.navbar-toggler .fa-bars {
    font-size: 20px;
    color: #34466c;
}

/* --- mobile (collapsed menu) --- */
@media (max-width: 767.98px) {
    #main-nav .navbar-nav {
        padding-right: 0 !important;
    }
    html[dir="rtl"] #main-nav .navbar-nav {
        text-align: right !important;
    }
    #main-nav .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    #main-nav .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    #main-nav .navbar-nav .nav-item .nav-link {
        padding: 10px 15px !important;
        display: block;
    }
    #main-nav .navbar-collapse .header-btns {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    #main-nav .navbar-nav .nav-item > .nav-link.nav-link-highlight {
        margin: 5px 0;
        border-radius: 4px;
    }
    #main-nav .navbar-nav .nav-item.active > .nav-link {
        border-bottom: none;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    #main-nav .navbar-nav .nav-item.active > .nav-link.nav-link-highlight {
        background-color: #1a2a4a !important;
    }
}


/* ==========================================================================
   5. HOMEPAGE (deploy_v15)
   --------------------------------------------------------------------------
   Everything here is scoped to  body.site-index  - the class the bss2020
   template builds from "<controller>-<method>" (main.php -> getBodyClass()).
   The hero module (search_module) is SHARED with the Knowledge and Category
   pages, which render it as "knowledge-index" / "category-*"; scoping by the
   body class is what keeps those pages exactly as they are.

   This file is the LAST stylesheet on the page (priority 11, after
   theme/bss2020/css/style.css and theme_rtl.css at priority 2), so these
   rules win on cascade order as well as on specificity. Never move these
   into style.css - it is regenerated from SCSS whenever theme colours are
   saved in the admin panel (CLAUDE.md gotcha #30).

   Vendor values being overridden in the hero:
       min-height: 110vh; padding: 140px 0 389px;   -> 990px tall for 254px
       of content. That dead space is what this section removes.
   ========================================================================== */

:root {
    --alw-navy: #34466c;
    --alw-navy-deep: #1b2540;
    --alw-accent: #f39a4a;
    --alw-ink: #2b3a5c;
    --alw-muted: #6b7a90;
    --alw-line: #e9edf3;
    --alw-sec-y: 56px;          /* one vertical rhythm for every homepage band */
}

/* --- 5a. hero: full-bleed banner photo + navy scrim ---------------------- */

body.site-index section.home-header {
    min-height: 400px;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    /* The photo itself arrives as an inline background-image on the element
       (get_bg_image_link_2020 -> data/theme2020/bg.jpg), so it is NOT named
       here. This colour is the fallback that shows if the file is missing or
       still loading - the page then reads as a deliberate navy band rather
       than as a broken image. */
    background-color: var(--alw-navy-deep);
    /*
       The banner is named here, on the homepage only, and deliberately NOT
       installed as data/theme2020/bg.jpg.

       Why: get_bg_image_link_2020() is a THEME-WIDE lookup
       (bg.png -> bg.svg -> bg.jpg -> bg.jpeg) whose result is printed as an
       inline background-image on every hero rendered by search_module.php -
       which includes the Category page. That page draws DARK heading text and
       gets no scrim, so the photograph would sit behind unreadable text; and
       displacing bg.svg would silently swap the governorate's own uploaded
       background for the theme's stock one. Both were observed in rehearsal.

       Naming the file here instead leaves bg.svg, the lookup and every other
       hero page exactly as they are. "!important" beats the inline style the
       module writes on this element.

       To change the banner later: replace data/theme2020/banner.jpg on the
       server (same name, JPG). No deploy and no code change needed. Note this
       one file is NOT driven by the admin "Background Image" field, which still
       controls the other hero pages.
    */
    background-image: url("../data/theme2020/banner.jpg") !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* The scrim. A pseudo-element rather than an extra gradient layer in
   background-image, because the inline style on the element would overwrite
   the whole background-image property and take the gradient with it. */
body.site-index section.home-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(23, 33, 56, 0.80) 0%,
        rgba(23, 33, 56, 0.74) 55%,
        rgba(23, 33, 56, 0.80) 100%);
}

body.site-index section.home-header > .container,
body.site-index section.home-header > div {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: var(--alw-sec-y);
    padding-bottom: var(--alw-sec-y);
}

/* beats  html section.home-header > div h1:first-child  in theme_rtl.css */
body.site-index section.home-header > div h1:first-child {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.35;
    color: #ffffff;
    text-align: center;
    margin: 0 0 10px;
}

body.site-index section.home-header > div > p {
    font-family: "Tajawal", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 26px;
}

body.site-index section.home-header > div .header-src-box {
    margin: 0 auto;
    max-width: 660px;
    width: 100%;
}

body.site-index section.home-header > div .header-src-box input {
    height: 62px;
    border-radius: 10px;
    /* RTL: the button sits on the LEFT, so the long padding is on the left */
    padding: 0 22px 0 66px;
    font-family: "Tajawal", sans-serif;
    font-size: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
}

body.site-index section.home-header > div .header-src-box .header-src-icon {
    width: 44px;
    height: 44px;
    top: 9px;
    left: 9px;
    right: auto;
    border-radius: 8px;
    background: var(--alw-accent);
    background-color: var(--alw-accent);
    border-color: var(--alw-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.site-index section.home-header > div .header-src-box .header-src-icon:hover,
body.site-index section.home-header > div .header-src-box .header-src-icon:focus {
    background-color: #e5812c;
    border-color: #e5812c;
}

/* the icon glyph is absolutely positioned by the vendor; flex centres it here */
body.site-index section.home-header > div .header-src-box .header-src-icon i {
    position: static;
    transform: none;
    margin: 0;
    font-size: 17px;
    line-height: 1;
}

/* the live search results panel hangs off the box - keep it above the scrim */
body.site-index section.home-header > div .header-src-box .src-container {
    z-index: 95;
    text-align: right;
}

/* --- 5b. one vertical rhythm for the bands below the hero ---------------- */

body.site-index section.svc-cats {
    padding-top: calc(var(--alw-sec-y) - 10px);
    padding-bottom: calc(var(--alw-sec-y) - 10px);
}

/*
   The grid ships as CSS grid with a fixed 4 / 3 / 2 column count. There are
   currently 9 active services, so the last row holds a single card marooned
   against the edge with three empty cells beside it - the big white gap under
   the grid. Any service count that is not a multiple of the column count does
   the same, so this is not a one-off.

   Switching to flex-wrap on the homepage keeps the identical card width and
   gap, but centres whatever is left over on the final row. The card widths are
   the exact grid arithmetic: (100% - (cols-1) * gap) / cols. Positioning of
   .svc-pop is unaffected - it is absolute against .svc-item, which is a flex
   item here exactly as it was a grid item before.
*/
body.site-index .svc-cats .svc-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

body.site-index .svc-cats .svc-item {
    flex: 0 0 calc((100% - 3 * 22px) / 4);
    max-width: calc((100% - 3 * 22px) / 4);
}

@media (max-width: 991px) {
    body.site-index .svc-cats .svc-item {
        flex-basis: calc((100% - 2 * 16px) / 3);
        max-width: calc((100% - 2 * 16px) / 3);
    }
}

@media (max-width: 575px) {
    body.site-index .svc-cats .svc-item {
        flex-basis: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }
}

body.site-index .still-need-section {
    margin-top: 0;
    margin-bottom: var(--alw-sec-y);
}

body.site-index section.article-container.section-mt-h {
    margin-top: 0;
    padding-bottom: var(--alw-sec-y);
}

/* --- 5c. section headings ------------------------------------------------ */

body.site-index .alw-sec-title {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.5;
    color: var(--alw-ink);
    text-align: center;
    margin: 0 0 4px;
}

body.site-index .alw-sec-sub {
    font-family: "Tajawal", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--alw-muted);
    text-align: center;
    margin: 0 0 26px;
}

/* --- 5d. "request a service" call to action ------------------------------ */

/*
   The vendor pulls this box UP into the hero with margin-top:-100px, which was
   designed for the old 990px banner. With a 400px hero that drags it over the
   card grid, so the margin is reset in 5b above.

   No box-shadow here on purpose: .d-box-shadow (style.css:3227) declares
   "0 0 36px rgba(60,72,88,.1) !important", which no plain declaration can beat.
   Its soft shadow suits the card look, so it is left alone rather than answered
   with another !important.
*/
body.site-index .still-need-section {
    padding: 26px 34px;
    min-height: 0;
    border: 1px solid var(--alw-line);
    border-radius: 10px;
}

body.site-index .still-need-section h2 {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.5;
    color: var(--alw-ink);
    margin: 0;
}

body.site-index .still-need-section p {
    font-family: "Tajawal", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--alw-muted);
    margin: 0;
}

/* the vendor ships this button as a pale outline; make it the real action */
body.site-index .still-need-section .btn-theme {
    background-color: var(--alw-navy);
    border-color: var(--alw-navy);
    color: #ffffff;
    font-family: "Tajawal", sans-serif;
    font-weight: 500;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 6px;
}

body.site-index .still-need-section .btn-theme:hover,
body.site-index .still-need-section .btn-theme:focus {
    background-color: #2c3b5b;
    border-color: #2c3b5b;
    color: #ffffff;
}

/* --- 5e. knowledge lists as cards ---------------------------------------- */

body.site-index .alw-kn .article-box {
    background: #ffffff;
    border: 1px solid var(--alw-line);
    border-radius: 10px;
    padding: 4px 22px 10px;
    box-shadow: 0 4px 18px rgba(31, 42, 68, 0.05);
}

body.site-index .alw-kn .article-box .art-title {
    font-family: "Tajawal", sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.6;
    color: var(--alw-ink);
    padding: 16px 0 12px;
    margin: 0;
    border-bottom: 1px solid var(--alw-line);
}

body.site-index .alw-kn .article-box .art-list > ul > li {
    border-bottom: 1px solid #f2f5f9;
}

body.site-index .alw-kn .article-box .art-list > ul > li:last-child {
    border-bottom: none;
}

/* --- 5f. phone ----------------------------------------------------------- */

@media (max-width: 767.98px) {
    :root {
        --alw-sec-y: 30px;
    }
    body.site-index section.home-header {
        min-height: 300px;
        padding: 0;
    }
    body.site-index section.home-header > div h1:first-child {
        font-size: 24px;
        line-height: 1.4;
    }
    body.site-index section.home-header > div > p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    body.site-index section.home-header > div .header-src-box input {
        height: 52px;
        border-radius: 10px;
        padding: 0 18px 0 62px;
        font-size: 15px;
    }
    /* 44px minimum: the search button must stay a comfortable touch target */
    body.site-index section.home-header > div .header-src-box .header-src-icon {
        width: 44px;
        height: 44px;
        top: 4px;
        left: 4px;
        right: auto;
    }
    body.site-index section.home-header > div .header-src-box .header-src-icon i {
        font-size: 16px;
    }
    body.site-index .alw-sec-title {
        font-size: 20px;
    }
    body.site-index .alw-sec-sub {
        font-size: 14px;
        margin-bottom: 18px;
    }
    body.site-index .still-need-section {
        padding: 20px 18px;
    }
    body.site-index .still-need-section h2 {
        font-size: 20px;
    }
}

/* Respect the OS "reduce motion" setting for anything animated on the page. */
@media (prefers-reduced-motion: reduce) {
    body.site-index section.home-header,
    body.site-index section.home-header::before {
        transition: none;
    }
}

/* --- 5g. other hero pages: deliberately NOT touched ---------------------- */
/*
   There is no rule here on purpose.

   Because the banner is named directly in 5a rather than installed as
   data/theme2020/bg.*, the theme-wide background lookup is untouched, so the
   Category and Knowledge heroes keep rendering exactly what they render
   today (the governorate's own data/theme2020/bg.svg, and the theme's
   bg-4.svg respectively). Nothing needs to be corrected back.
*/