/* Data Science @ Lebanese University guide - bilingual EN/AR, scoped under .guide */

@import url('https://fonts.googleapis.com/css2?family=Candal&family=Crimson+Pro:ital,wght@0,300..700;1,300..600&family=Arapey:ital@0;1&family=Josefin+Slab:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* restore 16px root (platform uses 10px) so the guide's rem sizing is correct */
:root { font-size: 100%; }

.guide {
    /* ---- DataRoad palette (copied from the platform tokens) ---- */
    --ink: #111212;                 /* text-dark */
    --ink-soft: #45535c;            /* readable muted body */
    --paper: #fffffe;               /* bg */
    --paper-2: #c7eaf4;             /* primary-light - pale-blue bands */
    --sky: #89cfe8;                 /* primary - hero / sky bands */
    --sky-wave: #88cde6;            /* exact wave fill */
    --blue: #019ad9;               /* primary-saturated */
    --blue-deep: #0a6e9c;           /* darker blue for link text */
    --accent: #ff490a;              /* accent */
    --accent-light: #ff703e;        /* accent-light */
    --grey-blue: #649ab1;           /* muted labels / secondary */
    --course-bg: #e0f7ff;           /* very pale blue surface */
    --line: rgba(17, 18, 18, 0.10);
    --line-strong: rgba(17, 18, 18, 0.20);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.18);
    --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.10);

    --display: 'Candal', Georgia, serif;        /* titles */
    --ar-display: 'Cairo', sans-serif;           /* Arabic titles */
    --body: 'Crimson Pro', Georgia, serif;       /* body copy */
    --ar-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --secondary: 'Arapey', Georgia, serif;       /* buttons / nav */
    --eyebrow-font: 'Josefin Slab', Georgia, serif;

    position: relative;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }
.guide section[id] { scroll-margin-top: 96px; }
.guide *, .guide *::before, .guide *::after { box-sizing: border-box; }
.guide a { text-decoration: none; color: inherit; }
.guide ::selection { background: var(--sky); color: var(--ink); }
.guide[data-lang="ar"] { font-family: var(--ar-body); }

/* ---------- language visibility ---------- */
.guide[data-lang="en"] .l-ar { display: none !important; }
.guide[data-lang="ar"] .l-en { display: none !important; }
.guide[data-lang="ar"] { direction: rtl; }
.guide[data-lang="ar"] .display { font-family: var(--ar-display); }
.guide[data-lang="ar"] p,
.guide[data-lang="ar"] li { line-height: 1.95; }

/* ---------- guide desktop nav ---------- */
.guide-desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    direction: ltr;
    background: none;
    height: auto;
    padding: 0;
    margin: 0 0 clamp(20px, 4vw, 44px);
    position: relative;
    z-index: 3;
}
.guide-nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; margin-inline-start: -20px; }
.guide-nav-logo img {
    height: 50px;
    width: auto;
    display: block;
    filter: brightness(0);
    transition: filter 0.25s ease;
    transform: translateY(12%);
}

.guide-nav-logo:hover img { filter: none; }
.guide-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 44px);
    list-style: none;
    margin: 0;
    margin-inline-start: auto; 
    padding: 0;
}
.guide-nav-links a {
    font-family: var(--secondary);
    font-size: 19px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
    white-space: nowrap;
}
.guide-nav-links a:hover { color: var(--grey-blue); }
.guide-desktop-nav .lang-toggle { margin-inline-start: clamp(12px, 2vw, 26px); }

/* below 1000px the phone (hamburger) navbar takes over */
@media (max-width: 1000px) {
    .guide-desktop-nav { display: none; }
}

/* paint the phone-nav strip the hero colour so the pill floats on blue (like landing) */
#mobile-nav { background: #88cde6; }   /* --sky-wave (literal: #mobile-nav is outside .guide) */
/* our 16px root inflates the platform mobile-nav's rem-sized links; re-pin them */
#mobile-nav ul a { font-size: 27px; }                                /* = 3rem at the platform's 9px root */
@media (max-width: 760px) { #mobile-nav ul a { font-size: 24px; } }  /* = 3rem at the platform's 8px root */

/* ---------- language toggle ---------- */
/* desktop shows the toggle inside the nav; phone shows this one (the hamburger nav has no toggle) */
.hero-toolbar { display: none; }
@media (max-width: 1000px) {
    .hero-toolbar { display: flex; justify-content: flex-end; margin-top: -10px; margin-bottom: clamp(6px, 2vw, 16px); position: relative; z-index: 2; }
    .guide[data-lang="ar"] .hero-toolbar { justify-content: flex-start; }
}
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    padding-inline-start: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(6.6px);
            backdrop-filter: blur(6.6px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.lang-globe { color: var(--blue-deep); font-size: 14px; opacity: 0.75; margin-inline-end: 4px; }
.lang-toggle button {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 8px 17px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-deep);
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: var(--ar-display);
    letter-spacing: 0.03em;
}
.lang-toggle button[data-set-lang="en"] { padding-top: 10px; padding-bottom: 6px; }
.lang-toggle button.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(1, 154, 217, 0.35); }
.lang-toggle button:not(.active):hover { color: var(--accent); }

/* ---------- layout helpers ---------- */
.g-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px); }
.g-section { padding: clamp(60px, 8vw, 110px) 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--eyebrow-font);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 20px;
}
.guide[data-lang="ar"] .eyebrow { letter-spacing: 0.08em; }

.guide h2.display {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 24px;
    text-wrap: balance;
}
.guide[data-lang="ar"] h2.display { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.guide p { margin: 0 0 1.05em; color: var(--ink-soft); }
.guide p.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--ink); line-height: 1.6; }
.guide strong { color: var(--ink); font-weight: 600; }
.guide a.tlink { color: var(--blue-deep); font-weight: 600; border-bottom: 1px solid var(--sky); }
.guide a.tlink:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- HERO ---------- */
.g-hero { position: relative; background: var(--sky-wave); padding: clamp(22px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); overflow: hidden; }
.g-hero .dots { display: none; }       /* DataRoad hero is flat sky + glass, no dot grid */
.g-hero .g-wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: stretch; }

.guide h1.display {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin: 0 0 24px;
    text-align: start;
    text-wrap: balance;
}
.guide[data-lang="ar"] h1.display { font-family: var(--ar-display); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.guide h1.display em { font-style: normal; color: var(--accent); }   /* DataRoad accent-span emphasis */
.hero-lead { font-family: var(--body); font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); color: var(--ink); margin: 0 0 12px; max-width: 46ch; }
.guide[data-lang="ar"] .hero-lead { font-family: var(--ar-body); }
.hero-sub { font-family: var(--body); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink); max-width: 46ch; margin-bottom: 30px; }
.guide[data-lang="ar"] .hero-sub { font-family: var(--ar-body); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- buttons (DataRoad: Arapey, accent fill, scale + glow) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border-radius: 10px;
    font-family: var(--secondary);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    line-height: 1.1;
    white-space: nowrap;
}
.guide[data-lang="ar"] .btn { font-family: var(--ar-display); letter-spacing: 0; font-weight: 600; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 0 12px 0 var(--accent); }
.btn-ghost { background: transparent; color: var(--blue-deep); border-color: var(--blue); }
.btn-ghost:hover { transform: scale(1.05); background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- hero "at a glance" GLASS card ---------- */
.hero-card {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(6.6px);
            backdrop-filter: blur(6.6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 30px 32px;
    box-shadow: var(--shadow-glass);
    align-self: center;
}
.hero-card h3 { font-family: var(--eyebrow-font); font-size: 14px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--blue-deep); margin: 0 0 18px; font-weight: 600; }
.guide[data-lang="ar"] .hero-card h3 { font-family: var(--ar-display); letter-spacing: 0; }
.hero-card dl { margin: 0; display: grid; }
.hero-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.hero-card .row:first-child { border-top: 0; padding-top: 2px; }
.hero-card dt { font-family: var(--body); font-size: 16px; color: var(--ink-soft); }
.guide[data-lang="ar"] .hero-card dt { font-family: var(--ar-body); }
.hero-card dd { margin: 0; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--ink); text-align: end; }
.guide[data-lang="ar"] .hero-card dd { font-family: var(--ar-display); }
/* hero card as Table of Contents */
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { border-top: 1px solid var(--line); }
.toc-list li:first-child { border-top: 0; }
.toc-list a { display: flex; align-items: center; gap: 14px; padding: 11px 4px; font-family: var(--secondary); font-size: 17px; color: var(--ink); white-space: nowrap; transition: color 0.2s ease, padding 0.2s ease; }
.guide[data-lang="ar"] .toc-list a { font-family: var(--ar-body); }
.toc-list a:hover { color: var(--blue-deep); padding-inline-start: 12px; }
.toc-num { flex: 0 0 auto; font-family: var(--eyebrow-font); font-size: 13px; font-weight: 700; color: var(--blue); min-width: 22px; }
.toc-list a:hover .toc-num { color: var(--accent); }

/* ---------- wave dividers ---------- */
.wave-divider { display: block; width: 100%; height: auto; margin: 0; pointer-events: none; }
.guide[data-lang="ar"] .wave-divider { transform: scaleX(-1); }

/* ---------- editorial two-column ---------- */
.editorial { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.editorial .col-head { position: sticky; top: 40px; }

/* ---------- SKY facts band ---------- */
.facts-band { background: var(--sky-wave); color: var(--ink); }
.facts-band .g-wrap { padding-top: clamp(46px, 6vw, 74px); padding-bottom: clamp(46px, 6vw, 74px); }
.facts-band .eyebrow { color: var(--accent); }
.facts-band .eyebrow::before { background: var(--accent); }
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.fact { padding: 8px 26px; border-left: 1px solid rgba(17, 18, 18, 0.16); }
.fact:first-child { border-left: 0; padding-left: 0; }
.guide[data-lang="ar"] .fact { border-left: 0; border-right: 1px solid rgba(17, 18, 18, 0.16); }
.guide[data-lang="ar"] .fact:first-child { border-right: 0; padding-right: 0; }
.fact .k { font-family: var(--eyebrow-font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-deep); margin-bottom: 10px; }
.guide[data-lang="ar"] .fact .k { font-family: var(--ar-display); letter-spacing: 0; }
.fact .v { font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.15; color: var(--ink); }
.guide[data-lang="ar"] .fact .v { font-family: var(--ar-display); }

/* ---------- branches / maps ---------- */
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.branch-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.branch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.branch-card .map { aspect-ratio: 16 / 10; border: 0; width: 100%; filter: saturate(1.05); border-bottom: 4px solid var(--blue); }
.branch-card:nth-child(2) .map { border-color: var(--accent); }
.branch-card .info { padding: 24px 26px; }
.branch-card .badge { display: inline-block; font-family: var(--eyebrow-font); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue-deep); margin-bottom: 10px; }
.guide[data-lang="ar"] .branch-card .badge { font-family: var(--ar-display); letter-spacing: 0; }
.branch-card:nth-child(2) .badge { color: var(--accent); }
.branch-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; margin: 0 0 8px; color: var(--ink); }
.guide[data-lang="ar"] .branch-card h3 { font-family: var(--ar-display); font-weight: 700; }
.branch-card .addr { color: var(--ink-soft); margin: 0 0 6px; }
.branch-card .phone { font-family: var(--secondary); font-size: 16px; color: var(--ink-soft); letter-spacing: 0.02em; }
.branch-card a.maplink { display: inline-block; margin-top: 12px; font-family: var(--secondary); font-weight: 700; font-size: 17px; color: var(--blue-deep); }
.guide[data-lang="ar"] .branch-card a.maplink { font-family: var(--ar-display); }
.branch-card a.maplink:hover { color: var(--accent); }

/* ---------- curriculum timeline ---------- */
.timeline { margin-top: 50px; position: relative; }
.timeline::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 14px; width: 2px; background: linear-gradient(var(--blue), var(--sky)); }
.guide[data-lang="ar"] .timeline::before { left: auto; right: 14px; }
.sem { position: relative; padding-left: 56px; margin-bottom: 38px; }
.guide[data-lang="ar"] .sem { padding-left: 0; padding-right: 56px; }
.sem::before { content: ''; position: absolute; left: 6px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); }
.guide[data-lang="ar"] .sem::before { left: auto; right: 6px; }
.sem h3 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-deep); margin: 0 0 16px; }
.guide[data-lang="ar"] .sem h3 { font-family: var(--ar-display); font-weight: 700; letter-spacing: 0; }
.sem .courses { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-block; padding: 9px 18px; border-radius: 999px; font-family: var(--secondary); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; transition: transform 0.18s ease, background 0.18s, color 0.18s; }
.guide[data-lang="ar"] .pill { font-family: var(--ar-body); }
.pill.live { background: var(--course-bg); color: var(--blue-deep); border: 1px solid var(--sky); }
.pill.live:hover { background: var(--blue); color: #fff; transform: translateY(-2px); border-color: var(--blue); }
.pill.soon { background: transparent; color: var(--grey-blue); border: 1px dashed var(--line-strong); }

/* ---------- apply steps ---------- */
.steps { counter-reset: step; margin-top: 44px; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 84px 1fr; gap: 24px; align-items: start; padding: 30px 0; border-top: 1px solid var(--line); }
.step .num { counter-increment: step; font-family: var(--display); font-weight: 400; font-size: 2.9rem; line-height: 1; color: rgba(255, 73, 10, 0.35); }
.step .num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 14px; color: var(--ink); }
.guide[data-lang="ar"] .step h3 { font-family: var(--ar-display); font-weight: 700; }
.step ul, .doc-card ul { list-style: none; margin: 10px 0 0; padding: 0; }
.step li, .doc-card li { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; color: var(--ink-soft); }
.step li::before, .doc-card li::before {
    content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 11px; border-radius: 50%;
    background: var(--blue);
}
.step .exam-list { list-style: none; padding: 0; margin: 10px 0 0; }

.doc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
/* pull the doc cards out of the numbered-step indent so they align with the callout */
@media (min-width: 561px) {
    .doc-cards { margin-inline-start: calc(-84px - 24px); width: calc(100% + 84px + 24px); }
}
.doc-card { background: var(--course-bg); border-radius: 15px; padding: 22px 24px; border: 1px solid var(--line); }
.doc-card h4 { font-family: var(--display); margin: 0 0 8px; font-size: 1.1rem; color: var(--ink); font-weight: 400; }
.guide[data-lang="ar"] .doc-card h4 { font-family: var(--ar-display); font-weight: 700; }
.callout { margin-top: 30px; padding: 20px 24px; background: var(--course-bg); border-left: 4px solid var(--blue); border-radius: 0 15px 15px 0; font-family: var(--body); font-size: 16px; color: var(--ink-soft); }
.guide[data-lang="ar"] .callout { font-family: var(--ar-body); border-left: 0; border-right: 4px solid var(--blue); border-radius: 15px 0 0 15px; }

/* ---------- careers tags ---------- */
.tag-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tag { padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: 12px; font-family: var(--secondary); font-size: 17px; font-weight: 600; background: #fff; color: var(--ink); transition: 0.2s; }
.guide[data-lang="ar"] .tag { font-family: var(--ar-body); }
.tag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------- right-for-me checklist (PNG checks) ---------- */
.check-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; max-width: 760px; }
.check-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.check-list li::before { content: ''; flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; background: url('../images/check_mark_blue.png') center / contain no-repeat; }

/* ---------- DataRoad-helps cards ---------- */
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
.help-card { display: flex; align-items: center; gap: 20px; padding: 24px 26px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); transition: transform 0.22s ease, box-shadow 0.22s ease; }
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hc-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; transition: transform 0.22s ease; }
.help-card:hover .hc-icon { transform: scale(1.07) rotate(-3deg); }
.hc-body { flex: 1 1 auto; }
.hc-body h4 { margin: 0 0 3px; font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.guide[data-lang="ar"] .hc-body h4 { font-family: var(--ar-display); font-weight: 700; }
.hc-body p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.hc-arrow { flex: 0 0 auto; color: var(--grey-blue); font-size: 15px; transition: transform 0.22s ease, color 0.22s ease; }
.help-card:hover .hc-arrow { color: var(--accent); transform: translateX(4px); }
.guide[data-lang="ar"] .hc-arrow { transform: scaleX(-1); }
.guide[data-lang="ar"] .help-card:hover .hc-arrow { transform: scaleX(-1) translateX(4px); }
/* per-card brand-tinted chip */
.help-card:nth-child(1) .hc-icon { background: var(--course-bg); color: var(--blue); }
.help-card:nth-child(2) .hc-icon { background: rgba(255, 73, 10, 0.12); color: var(--accent); }
.help-card:nth-child(3) .hc-icon { background: var(--paper-2); color: var(--blue-deep); }
.help-card:nth-child(4) .hc-icon { background: rgba(100, 154, 177, 0.16); color: var(--grey-blue); }

/* ---------- FAQ ---------- */
.faq { margin-top: 38px; max-width: 880px; }
.faq details { border-top: 1px solid var(--line); padding: 6px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: var(--ink); position: relative; }
.guide[data-lang="ar"] .faq summary { padding: 20px 0 20px 44px; font-family: var(--ar-display); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--body); font-size: 30px; color: var(--accent); transition: transform 0.25s; line-height: 1; }
.guide[data-lang="ar"] .faq summary::after { right: auto; left: 4px; }
.faq details[open] summary::after { content: '\2013'; }
.faq .ans { padding: 0 0 22px; color: var(--ink-soft); animation: faqIn 0.3s ease; }
.guide[data-lang="ar"] .faq .ans { font-family: var(--ar-body); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- final: more info / get in touch ---------- */
.final-cta { background: var(--sky-wave); text-align: center; }
.final-cta .eyebrow { display: inline-flex; justify-content: center; margin-bottom: 16px; }
.final-cta .display { color: var(--ink); }
.final-cta p { color: var(--ink); opacity: 0.85; max-width: 56ch; margin-left: auto; margin-right: auto; font-size: 1.1rem; }
.info-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.info-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-md); font-family: var(--secondary); font-size: 18px; font-weight: 600; color: var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.info-chip i { color: var(--blue); font-size: 18px; }
.info-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.info-chip:hover i { color: var(--accent); }

/* ---------- scroll reveal (transform-only so content stays visible if motion is frozen) ---------- */
.guide.js-ready .reveal { transform: translateY(26px); transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.guide.js-ready .reveal.in { transform: none; }
.guide.js-ready .anim { transform: translateY(22px); animation: rise 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
.guide.js-ready .anim.d1 { animation-delay: 0.05s; }
.guide.js-ready .anim.d2 { animation-delay: 0.16s; }
.guide.js-ready .anim.d3 { animation-delay: 0.28s; }
.guide.js-ready .anim.d4 { animation-delay: 0.40s; }
@keyframes rise { to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .guide.js-ready .reveal, .guide.js-ready .anim { transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-card { order: 2; }
    .editorial { grid-template-columns: 1fr; }
    .editorial .col-head { position: static; }
    .facts-row { grid-template-columns: 1fr 1fr; gap: 20px 1px; }
    .fact { border-left: 0 !important; border-right: 0 !important; padding: 6px 0; }
    .doc-cards { grid-template-columns: 1fr; }
    /* location cards and DataRoad-helps links stay two-per-row, just tighter */
    .branches { gap: 16px; }
    .help-grid { gap: 16px; }
}
@media (max-width: 560px) {
    .guide { font-size: 16px; }
    .facts-row { grid-template-columns: 1fr 1fr; }
    .step { grid-template-columns: 1fr; gap: 8px; }
    .step .num { font-size: 2.4rem; }
    .check-list li { font-size: 1.1rem; }

    /* smaller language picker on phones */
    .hero-toolbar .lang-toggle { padding: 3px; padding-inline-start: 9px; gap: 2px; }
    .hero-toolbar .lang-toggle button { padding: 5px 11px; font-size: 12px; }
    .hero-toolbar .lang-toggle button[data-set-lang="en"] { padding-top: 6px; padding-bottom: 4px; }
    .hero-toolbar .lang-globe { font-size: 12px; margin-inline-end: 2px; }

    /* location cards: two per row, compact */
    .branches { gap: 10px; }
    /* square map reads cleaner than the tall portrait in a narrow card */
    .branch-card .map { aspect-ratio: 1 / 1; border-bottom-width: 3px; }
    .branch-card .info { padding: 12px 13px; }
    .branch-card .badge { font-size: 10px; letter-spacing: 0.12em; margin-bottom: 5px; }
    .branch-card h3 { font-size: 0.82rem; line-height: 1.2; white-space: nowrap; margin-bottom: 5px; }
    .branch-card .addr { font-size: 13px; line-height: 1.4; }
    .branch-card .phone { font-size: 13px; }
    .branch-card a.maplink { font-size: 14px; margin-top: 9px; }

    /* DataRoad-helps links: two per row, icon stacked above text, no arrow */
    .help-grid { gap: 10px; }
    .help-card { flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px 15px; }
    .hc-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 17px; }
    .hc-body h4 { font-size: 1.02rem; }
    .hc-body p { font-size: 13px; line-height: 1.45; }
    .help-card .hc-arrow { display: none; }
}