/* ==========================================================================
   PermitDrill — FlexJobs structural system, ported from ElderGrade
   (/Users/junaidaslam/claude/eldergrade/public/theme-modern.css)

   The shape: a white brand bar over a solid deep nav bar, a two-column hero
   whose headline carries exactly one accent phrase, a five-column footer on
   light grey with a notes bar beneath it, and — the part that does most of the
   work — flat surfaces. 4px radius, hairline borders, no shadow except on card
   hover.

   Colour is confined to the token block so the palette can change without
   touching a rule. Roles, not names: --pd-deep is headlines and the nav bar,
   --pd-brand is links, --pd-accent is reserved for primary actions ONLY.
   Using the accent anywhere else is what makes a page look cheap.

   The palette is PermitDrill's own — a road-sign blue where ElderGrade uses its
   plum. Wearing ElderGrade's plum would make two unrelated sites look like one
   company.

   Everything is written with logical properties (inline-start, padding-inline,
   margin-block) rather than left/right, because this site publishes in Urdu and
   Arabic and the whole layout has to mirror without a second stylesheet.
   ========================================================================== */
:root {
    --pd-deep: #12344f;
    --pd-deep-2: #0c2439;
    --pd-brand: #1d6091;
    --pd-brand-dark: #154a70;
    --pd-tint: #f2f7fb;
    --pd-tint-2: #e7f0f7;
    --pd-accent: #e2611c;
    --pd-accent-hover: #f0752f;
    --pd-text: #23282d;
    --pd-muted: #5f6670;
    --pd-border: #d8dde2;
    --pd-section: #f7f9fb;
    --pd-footer: #f4f6f8;
    --pd-footer-notes: #eaeef2;
    --pd-shadow: 0 6px 18px rgba(18, 52, 79, .10);

    --radius: 4px;
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; min-width: 0; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    margin: 0;
    background: #fff;
    color: var(--pd-text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
}

main img, main svg, main iframe { max-width: 100%; }

h1, h2, h3 { letter-spacing: -.015em; }
h1 { font-weight: 600; color: var(--pd-deep); }
h2 { font-weight: 600; color: var(--pd-text); }

a { color: var(--pd-brand); font-weight: 500; }

.wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* ==========================================================================
   Header — white brand bar over a solid deep nav bar
   ========================================================================== */
.pd-header { background: #fff; border-block-end: 1px solid var(--pd-border); }

.pd-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 62px;
}

.pd-brand {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--pd-deep);
}

.pd-brand span { color: var(--pd-accent); }

.pd-tagline { display: none; font-size: 14px; color: var(--pd-muted); }
.pd-tagline b { color: var(--pd-deep); font-weight: 600; }
@media (min-width: 1120px) { .pd-tagline { display: block; } }

.pd-topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

.pd-nav { background: var(--pd-deep); }

.pd-nav-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 48px;
    overflow-x: auto;
}

.pd-nav a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    opacity: .92;
    white-space: nowrap;
}

.pd-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.pd-nav a.is-active {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--pd-accent);
}

/* ---------- Country switcher ---------- */
.switcher { position: relative; }

.switcher summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding-inline: 14px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-deep);
    background: var(--pd-tint);
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
}

.switcher summary::-webkit-details-marker { display: none; }
.switcher summary:hover { border-color: var(--pd-brand); }
.switcher__label { color: var(--pd-muted); font-weight: 400; }
.switcher__chevron { color: var(--pd-muted); flex: none; }
.switcher[open] .switcher__chevron:last-child { transform: rotate(180deg); }

.switcher__menu {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 30;
    min-width: 300px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    box-shadow: var(--pd-shadow);
}

.switcher__menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: var(--pd-text);
}

.switcher__menu a:hover { background: var(--pd-tint); }
.switcher__menu a.is-current { background: var(--pd-tint-2); font-weight: 600; }
.switcher__menu .name { white-space: nowrap; }

/* ==========================================================================
   Hero — two columns on white, one accent phrase in the headline
   ========================================================================== */
.pd-hero { padding-block: 52px 44px; border-block-end: 1px solid var(--pd-border); }

.pd-hero-inner { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
    .pd-hero-inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 56px;
        align-items: center;
    }
}

.pd-hero h1 {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.13;
    font-weight: 600;
    color: var(--pd-deep);
}

.pd-hero h1 em { font-style: normal; color: var(--pd-accent); }

.pd-hero .lead {
    margin-block: 18px 26px;
    max-width: 54ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--pd-muted);
}

.pd-hint { margin-block-start: 12px; font-size: 13.5px; color: var(--pd-muted); }

/* Hero side panel — the facts that make the claim concrete */
.pd-facts { display: grid; gap: 12px; }

.pd-fact-card {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
}

.pd-fact-card strong {
    display: block;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pd-deep);
}

.pd-fact-card span { font-size: 13.5px; color: var(--pd-muted); }

.pd-pill {
    display: inline-block;
    width: fit-content;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
}

.pd-pill-1 { background: var(--pd-tint); color: var(--pd-deep); border: 1px solid var(--pd-tint-2); }
.pd-pill-2 { background: var(--pd-deep); color: #fff; }

/* ==========================================================================
   Sections
   ========================================================================== */
.pd-section { padding-block: 44px; }
.pd-section--tint { background: var(--pd-section); border-block: 1px solid var(--pd-border); }

.pd-section__head { margin-block-end: 24px; }
.pd-section__head h2 { margin: 0 0 6px; font-size: 24px; }
.pd-section__head p { margin: 0; max-width: 68ch; color: var(--pd-muted); }

/* ==========================================================================
   Cards — flat, hairline, 4px. Shadow only on hover.
   ========================================================================== */
.card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
    position: relative;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    box-shadow: none;
}

.card:hover { border-color: var(--pd-brand); box-shadow: var(--pd-shadow); }

.card > a {
    display: block;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    font-weight: 400;
}

.card__icon { color: var(--pd-brand); margin-block-end: 12px; }

.card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pd-deep);
    margin-block-end: 4px;
}

.card__meta { font-size: 13.5px; color: var(--pd-muted); }

.code-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-block-end: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pd-deep);
    background: var(--pd-tint);
    border: 1px solid var(--pd-tint-2);
    border-radius: var(--radius);
}

/* ---------- Filter pills ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; padding: 0; list-style: none; }

.tag {
    height: 34px;
    padding-inline: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--pd-text);
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.tag:hover { border-color: var(--pd-brand); }
.tag.active { color: #fff; background: var(--pd-deep); border-color: var(--pd-deep); }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--pd-muted);
}

.badge--soft { background: var(--pd-tint); border-color: var(--pd-tint-2); color: var(--pd-deep); }
.badge--official { background: var(--pd-deep); border-color: var(--pd-deep); color: #fff; }
.badge--pending { background: #fff; border-color: var(--pd-border); }

.card .badge--pending { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }

/* ---------- Language chooser (step two) ---------- */
.chooser__heading { margin-block: 0 14px; font-size: 20px; }

.chooser {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.chooser__item {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    text-decoration: none;
    font-weight: 400;
    color: inherit;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
}

.chooser__item:hover { border-color: var(--pd-brand); box-shadow: var(--pd-shadow); }
.chooser__item.is-current { border-color: var(--pd-deep); background: var(--pd-tint); }
.chooser__native { font-size: 20px; font-weight: 600; color: var(--pd-deep); line-height: 1.2; }
.chooser__name { font-size: 13px; color: var(--pd-muted); }
.chooser__item .badge { margin-block-start: 6px; }

/* ---------- Breadcrumbs, facts, notices ---------- */
.crumbs { padding-block: 16px 0; font-size: 13.5px; }
.crumbs a { color: var(--pd-muted); font-weight: 400; text-decoration: none; }
.crumbs a:hover { color: var(--pd-brand); text-decoration: underline; }

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; }

.facts > div {
    min-width: 140px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
}

.facts dt { font-size: 13px; color: var(--pd-muted); }
.facts dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; color: var(--pd-deep); }

.notice {
    max-width: 78ch;
    margin: 0 0 28px;
    padding: 18px 20px;
    background: var(--pd-tint);
    border: 1px solid var(--pd-tint-2);
    border-inline-start: 3px solid var(--pd-accent);
    border-radius: var(--radius);
}

.notice__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--pd-deep); }
.notice p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pd-muted); }

/* ==========================================================================
   Footer — five columns on light grey, notes bar beneath
   ========================================================================== */
.pd-footer { margin-block-start: 64px; background: var(--pd-footer); color: var(--pd-text); }

.pd-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 44px 36px;
}

@media (min-width: 720px) { .pd-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pd-footer-main { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; } }

.pd-footer h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--pd-deep); }
.pd-footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd-footer li a { color: #1c2226; font-size: 14px; font-weight: 400; text-decoration: none; }
.pd-footer li a:hover { color: var(--pd-brand); text-decoration: underline; }
.pd-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.pd-footer-brand p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.6; }

.pd-footer-notes { background: var(--pd-footer-notes); padding-block: 22px 26px; }
.pd-footer-notes p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #444b52; }
.pd-footer-notes p:last-child { margin: 0; }

/* ==========================================================================
   Right-to-left
   The layout mirrors on its own because every rule above uses logical
   properties. Only genuinely directional things are corrected here.
   ========================================================================== */
[dir="rtl"] .pd-nav-inner,
[dir="rtl"] .pd-topbar { direction: rtl; }
[dir="rtl"] .switcher[open] .switcher__chevron:last-child { transform: rotate(180deg); }
[dir="rtl"] .code-mark,
[dir="rtl"] .badge { direction: ltr; }

@media (max-width: 768px) {
    .pd-hero { padding-block: 32px 28px; }
    .facts > div { min-width: 120px; }
}

/* ==========================================================================
   Quiz runner
   ========================================================================== */
.quiz { max-width: 640px; margin: 0 0 32px; }

.quiz__start { padding: 28px; background: var(--pd-tint); border: 1px solid var(--pd-tint-2); border-radius: var(--radius); }

.quiz__progress { display: flex; align-items: center; gap: 12px; margin-block-end: 20px; }
.quiz__progress-bar { flex: 1; height: 6px; background: var(--pd-tint-2); border-radius: 999px; overflow: hidden; }
.quiz__progress-bar > div { height: 100%; background: var(--pd-brand); transition: width .2s ease; }
[data-quiz-progress-label] { font-size: 13px; color: var(--pd-muted); white-space: nowrap; }

.quiz__question {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    margin-block-end: 16px;
}

.quiz__sign { display: block; margin-block-end: 16px; }
.quiz__stem { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--pd-deep); line-height: 1.4; }

.quiz__answers { display: grid; gap: 8px; }

.quiz__answer {
    text-align: start;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--pd-text);
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.quiz__answer:hover:not(:disabled) { border-color: var(--pd-brand); background: var(--pd-tint); }
.quiz__answer:disabled { cursor: default; }
.quiz__answer.is-correct { border-color: #2e7d32; background: #eaf5ea; color: #1b5e20; font-weight: 600; }
.quiz__answer.is-wrong { border-color: var(--pd-accent); background: #fdeee7; color: #a3390f; }

.quiz__explanation {
    margin-block-start: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pd-muted);
    background: var(--pd-tint);
    border-inline-start: 3px solid var(--pd-brand);
    border-radius: var(--radius);
}

.quiz__nav { display: flex; justify-content: flex-end; }

.quiz__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px;
    margin-block-end: 24px;
    text-align: center;
    background: var(--pd-tint);
    border: 1px solid var(--pd-tint-2);
    border-radius: var(--radius);
}

.quiz__score strong { font-size: 40px; font-weight: 700; color: var(--pd-deep); }
.quiz__score span { font-size: 14px; color: var(--pd-muted); }

.quiz__review { display: grid; gap: 12px; margin-block-end: 20px; }

.quiz__review-item {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-inline-start: 4px solid var(--pd-border);
    border-radius: var(--radius);
}

.quiz__review-item.is-correct { border-inline-start-color: #2e7d32; }
.quiz__review-item.is-wrong { border-inline-start-color: var(--pd-accent); }
.quiz__review-item .quiz__stem { font-size: 15px; margin-bottom: 8px; }
.quiz__review-item .quiz__explanation { margin: 0; border: none; padding: 0; background: none; }

/* ==========================================================================
   Test page — two-column layout with sidebar, and ad slot spacing
   ========================================================================== */
.test-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (min-width: 960px) {
    .test-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

.test-sidebar { display: grid; gap: 20px; position: sticky; top: 20px; }

.sidebar-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
}

.sidebar-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--pd-deep); text-transform: uppercase; letter-spacing: .03em; }
.sidebar-card--trust p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--pd-muted); }

.facts--stacked { display: grid; gap: 12px; margin: 0; padding: 0; }
.facts--stacked > div { min-width: 0; padding: 0; border: 0; }
.facts--stacked dt { font-size: 12.5px; color: var(--pd-muted); }
.facts--stacked dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; color: var(--pd-deep); }

/*
 * A layout-spacing wrapper only — it never touches the ad snippet's own
 * markup, size or attributes (see App\Support\Ads and resources/views/
 * components/ad.blade.php). It is written server-side inside an
 * @if(Ads::willRender(...)) in every template that uses it, so an inactive
 * slot never renders an empty box.
 */
.ad-slot { margin-block: 28px; text-align: center; }
.ad-slot--sidebar { margin-block: 0; }

/* ==========================================================================
   Handbook PDF reader — no AdSense on this page by design (see guide.blade.php)
   ========================================================================== */
.handbook-reader {
    border: 1px solid var(--pd-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--pd-section);
}

.handbook-reader__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-block-end: 1px solid var(--pd-border);
    font-size: 14px;
    color: var(--pd-muted);
}

.handbook-reader__bar a { font-weight: 600; }

.handbook-reader iframe {
    display: block;
    width: 100%;
    height: 80vh;
    border: 0;
}

@media (max-width: 640px) {
    .handbook-reader iframe { height: 65vh; }
}

.handbook-open-btn {
    display: inline-block;
    margin-block-end: 20px;
    padding: 14px 24px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    background: var(--pd-accent);
    border-radius: var(--radius);
    text-decoration: none;
}

.handbook-open-btn:hover { background: var(--pd-accent-hover); }
.handbook-reader__note { margin: 10px 16px 14px; font-size: 12.5px; color: var(--pd-muted); }