/* SANAD shell: the header and footer on every public page. Loaded by site_header.

   It runs on bare web.layout pages and inside website.layout, where Bootstrap and
   the theme style a, nav, img and body. So: nothing outside .sanad-shell-*, no :root,
   no tag selector. `all: initial` on the two roots drops whatever the page would pass
   down (and keeps direction, which `all` leaves alone), and each element sets what it
   needs. Selectors carry two classes to outrank page rules such as `.biz a`. */
.sanad-shell-header,
.sanad-shell-footer {
    all: initial;
    --sanad-shell-bg: #0c0c0d;
    --sanad-shell-line: #2e2e32;
    --sanad-shell-gold: #d4af37;
    --sanad-shell-gold-hi: #f0cf65;
    --sanad-shell-ink: #f4f1e8;
    --sanad-shell-muted: #a8a396;
    --sanad-shell-gutter: clamp(16px, 5vw, 72px);
    box-sizing: border-box;
    width: 100%;
    background: var(--sanad-shell-bg);
    color: var(--sanad-shell-ink);
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.sanad-shell-header *,
.sanad-shell-footer * { box-sizing: border-box; }
.sanad-shell-header ::selection,
.sanad-shell-footer ::selection { background: var(--sanad-shell-gold); color: var(--sanad-shell-bg); }

/* ---------- Links ---------- */
.sanad-shell-header .sanad-shell-link,
.sanad-shell-footer .sanad-shell-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: none;
    color: var(--sanad-shell-muted);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}
.sanad-shell-header .sanad-shell-link:hover,
.sanad-shell-footer .sanad-shell-link:hover { color: var(--sanad-shell-gold-hi); text-decoration: none; }
.sanad-shell-header .sanad-shell-link[aria-current] { color: var(--sanad-shell-gold); }
.sanad-shell-header a:focus-visible,
.sanad-shell-footer a:focus-visible {
    outline: 2px solid var(--sanad-shell-gold-hi);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Header ---------- */
.sanad-shell-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 clamp(.75rem, 3vw, 2rem);
    padding: 10px var(--sanad-shell-gutter);
    border-block-end: 1px solid var(--sanad-shell-line);
}
.sanad-shell-header .sanad-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    background: none;
    color: var(--sanad-shell-gold);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: color .2s;
}
.sanad-shell-header .sanad-shell-brand:hover { color: var(--sanad-shell-gold-hi); text-decoration: none; }
.sanad-shell-header .sanad-shell-mark {
    display: block;
    width: auto;
    max-width: none;
    height: 34px;
    margin: 0;
}
.sanad-shell-header .sanad-shell-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 clamp(.875rem, 3vw, 2rem);
    margin: 0;
    padding: 0;
    font-size: .9375rem;
}
.sanad-shell-header .sanad-shell-lang { color: var(--sanad-shell-gold); }

/* ---------- Footer ---------- */
.sanad-shell-footer {
    display: block;
    padding: .75rem var(--sanad-shell-gutter) 1.25rem;
    border-block-start: 1px solid var(--sanad-shell-line);
}
.sanad-shell-footer .sanad-shell-footnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.1rem, 3vw, 2.25rem);
    margin: 0;
    padding: 0;
}
.sanad-shell-footer .sanad-shell-footnav .sanad-shell-link { color: var(--sanad-shell-ink); }
.sanad-shell-footer .sanad-shell-footnav .sanad-shell-link:hover { color: var(--sanad-shell-gold-hi); }
.sanad-shell-footer .sanad-shell-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.5rem;
    margin-block-start: .5rem;
    padding-block-start: .5rem;
    border-block-start: 1px solid var(--sanad-shell-line);
    color: var(--sanad-shell-muted);
    font-size: .9rem;
}
.sanad-shell-footer .sanad-shell-powered { display: inline-flex; align-items: center; gap: .5rem; }
.sanad-shell-footer .sanad-shell-wevo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    background: none;
    color: var(--sanad-shell-ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s;
}
.sanad-shell-footer .sanad-shell-wevo:hover { color: var(--sanad-shell-gold-hi); text-decoration: none; }
.sanad-shell-footer .sanad-shell-wevo-logo {
    display: block;
    width: auto;
    max-width: none;
    height: 20px;
    margin: 0;
}

/* One row down to 360px in either language; the home hero sits right under it. */
@media (max-width: 420px) {
    .sanad-shell-header { column-gap: .5rem; }
    .sanad-shell-header .sanad-shell-brand { gap: .35rem; font-size: 1.25rem; }
    .sanad-shell-header .sanad-shell-mark { height: 30px; }
    .sanad-shell-header .sanad-shell-nav { column-gap: .7rem; font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sanad-shell-header .sanad-shell-link,
    .sanad-shell-footer .sanad-shell-link,
    .sanad-shell-header .sanad-shell-brand,
    .sanad-shell-footer .sanad-shell-wevo { transition: none; }
}

/* A statement prints from the portal: paper gets the document, not the site. */
@media print {
    .sanad-shell-header,
    .sanad-shell-footer { display: none; }
}