@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');:root{color-scheme:dark;--bg:#08121e;--surface:#101f2d;--panel:#14283b;--text:#f1f7fb;--mute:#adc0ce;--border:#2b4052;--gold:#d4b37b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 80% 55% at 65% -15%,#1a4157 0%,transparent 70%),var(--bg);color:var(--text);font-family:Inter,'IBM Plex Sans Arabic',sans-serif;line-height:1.8}body[dir=rtl]{font-family:'IBM Plex Sans Arabic',Inter,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.wrap{width:min(1100px,92%);margin:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:700}.monogram{border:1px solid var(--gold);color:var(--gold);width:42px;height:42px;display:grid;place-items:center;border-radius:12px;letter-spacing:-1px}.nav{display:flex;flex-wrap:wrap;align-items:center;gap:15px;font-size:.87rem;color:var(--mute)}.nav a:hover,.nav a[aria-current=page]{color:var(--gold)}.lang{border:1px solid var(--border);border-radius:30px;padding:5px 12px}.hero{display:grid;grid-template-columns:1fr 290px;gap:60px;align-items:center;padding:92px 0 70px}.eyebrow{color:var(--gold);font-size:.9rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.hero h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.25;margin:13px 0 20px;letter-spacing:-.045em}.lead{color:var(--mute);font-size:1.16rem;max-width:670px}.portrait{border:1px solid #365268;border-radius:29px;min-height:320px;aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#1c3b50,#0d1d2b);position:relative}.portrait .initials{font-size:6rem;font-weight:700;color:#d4b37b;opacity:.85}.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--gold);color:#08121e;font-weight:700;padding:11px 22px}.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}.section{padding:30px 0 65px}.section h2{font-size:1.8rem}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.panel{border:1px solid var(--border);background:linear-gradient(140deg,var(--surface),rgba(15,32,45,.75));border-radius:18px;padding:24px;min-height:130px}.panel strong{color:var(--gold)}.panel p{color:var(--mute);margin:8px 0 0}.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.social{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.social:hover{border-color:var(--gold)}.copy{color:var(--mute);max-width:750px;font-size:1.05rem}.foot{border-top:1px solid var(--border);padding:25px 0 50px;color:var(--mute);font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.note{font-size:.8rem;color:var(--mute)}@media(max-width:900px){.header{align-items:flex-start;flex-direction:column}.hero{grid-template-columns:1fr;gap:26px;padding:55px 0}.portrait{width:min(290px,90%);min-height:270px;grid-row:1}.grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{--gold:#6fbaff;--border:#254666}body{background:radial-gradient(ellipse 75% 55% at 75% -10%,#102f56 0%,transparent 74%),#06101b}.monogram{border-color:#6fbaff;color:#6fbaff}.eyebrow,.panel strong,.nav a:hover,.nav a[aria-current=page]{color:#75beff}.hero{grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:35px}.portrait{width:100%;aspect-ratio:4/5;min-height:350px;background:#081729;box-shadow:0 0 65px #1263bc35}.portrait img{object-fit:cover}.portrait .initials{display:none}.btn{background:#62b5ff}.btn:hover{filter:brightness(1.13)}.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.fact{padding:22px 16px;border:1px solid var(--border);border-radius:15px;background:#11243a}.fact b{display:block;font-size:1.8rem;color:#80c5ff;line-height:1.35}.fact span{color:var(--mute);font-size:.89rem}.timeline{display:grid;gap:13px}.timeline article{border-inline-start:3px solid #6ebaff;padding:12px 24px;background:#102136;border-radius:9px}.timeline h3{margin:0}.timeline small{color:#a6c4db}.timeline p{margin:5px 0;color:#c4d9e8}.chips{display:flex;flex-wrap:wrap;gap:10px}.chips span{border:1px solid #305273;background:#10253a;padding:7px 13px;border-radius:100px;font-size:.88rem}.section-title{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:20px}.portrait figcaption{display:none}.notice{border-inline-start:3px solid #6fbaff;padding:14px 18px;background:#11263c;color:#c4dcec;border-radius:8px}.footer-identity{font-weight:600;color:#fff}.social-preview{width:100%;max-width:380px;border-radius:16px;border:1px solid var(--border)}@media(max-width:900px){.hero{grid-template-columns:1fr}.portrait{width:min(440px,100%);min-height:auto}.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:520px){.facts{grid-template-columns:1fr}.hero{padding-top:28px}.header{padding-top:14px}.nav{gap:10px;font-size:.8rem}}

.entry-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.entry-card{background:#11263b;border:1px solid #34526a;border-radius:14px;padding:20px}.entry-card img{width:100%;max-height:210px;object-fit:cover;border-radius:10px}.entry-card a{color:#8fd0ff}.article-cover{width:100%;max-height:470px;object-fit:cover;border-radius:16px;margin:20px 0}.entry-body{line-height:1.95}.contact-form{max-width:720px;display:grid;gap:15px}.contact-form label{display:grid;gap:7px}.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #48617d;background:#102235;color:#fff}.contact-form button{padding:12px 20px;background:#62b5ff;color:#041625;border:0;border-radius:9px;cursor:pointer}

/* Article images - Suhib Jarrah CMS */

/* Images inside article body */
.entry-body img,
.article-body img,
.article-content img,
.post-content img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 360px !important;
    height: auto !important;
    margin: 20px auto !important;
    object-fit: contain !important;
    border-radius: 12px;
}

/* Main article cover */
.entry-cover,
.entry-cover img,
.article-cover,
.article-cover img,
.post-cover,
.post-cover img {
    display: block;
    width: 100% !important;
    max-width: 520px !important;
    max-height: 320px !important;
    height: auto !important;
    margin: 20px auto !important;
    object-fit: contain !important;
    border-radius: 12px;
}

/* Mobile devices */
@media (max-width: 600px) {
    .entry-body img,
    .article-body img,
    .entry-cover,
    .entry-cover img {
        max-width: 100% !important;
        max-height: 260px !important;
    }
}

/* Fix article cover image size */

img.article-cover {
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: contain !important;
    margin: 20px auto !important;
    border-radius: 12px !important;
}

/* Images within article content */

.entry-body img {
    display: block !important;
    width: auto !important;
    max-width: min(100%, 420px) !important;
    max-height: 280px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 20px auto !important;
}

@media (max-width: 600px) {
    img.article-cover,
    .entry-body img {
        max-width: 100% !important;
        max-height: 220px !important;
    }
}

/* Article listing thumbnail size */

.entry-cards .entry-card img {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: 170px !important;
    max-height: 170px !important;
    object-fit: cover !important;
    margin: 15px auto !important;
    border-radius: 10px !important;
}

/* ========================================
   Suhib Jarrah - Mobile Layout Fix
   RTL + LTR
   ======================================== */

@media screen and (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .wrap {
        width: 92% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        min-width: 0 !important;
    }

    /* Fix hero grid */
    .hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 28px 0 40px !important;
    }

    .hero > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Center portrait container */
    .hero .portrait {
        position: relative !important;
        display: block !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5 !important;
        height: auto !important;
        margin-inline: auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    /* Keep image inside portrait */
    .hero .portrait img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        float: none !important;
    }

    /* Prevent headings from stretching page */
    .hero h1,
    .hero .lead,
    .hero p {
        max-width: 100% !important;
        overflow-wrap: break-word;
    }

    /* Header on mobile */
    .header {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .nav {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .brand {
        max-width: 100%;
        min-width: 0;
    }
}

@media screen and (max-width: 400px) {
    .hero .portrait {
        max-width: 320px !important;
    }
}

/* Final mobile portrait layout fix */

@media (max-width: 900px) {

    .wrap {
        width: 92% !important;
        max-width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 24px !important;
    }

    .hero > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hero .portrait {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: relative !important;
        display: block !important;
        width: min(100%, 360px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .hero .portrait img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        float: none !important;
    }
}