/* Lawyers Portal Landing & Persona Selection - Design System */
/* Haboob I-001-027: this file used to @import the Google Fonts stylesheet, which is the second
   of the two external references the finding was about (the other was the <link> in
   _LawyersPortalLandingLayout.cshtml). Self-hosting rather than adding an integrity hash,
   because the Google Fonts CSS endpoint is content-negotiated: it returns different
   @font-face blocks per browser and changes whenever Google revises a font, so a pinned
   hash WOULD break the stylesheet silently, in a fallback font.

   The font files were already vendored at /shared/fonts/IBM_Plex_Sans_Arabic (with OFL.txt)
   and the authenticated area already declares the same faces against its own copy, so this
   is the existing pattern rather than a new one. font-display:swap preserves the behaviour
   the &display=swap parameter used to request.

   Cairo stays in the font-family stacks below but is no longer fetched: it only ever sat
   AFTER 'IBM Plex Sans Arabic', which now covers 100-700 locally, so it never rendered.
   Left in the stack because a user who happens to have it installed still gets it, at no
   cost and with no request. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/shared/fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --sba-green: #138656;
    --sba-green-hover: #0E6B44;
    --sba-blue: #004797;
    --sba-teal: #02C07C;
    --bg-light: #F8F9FA;
    --text-dark: #101828;
    --text-muted: #475467;
    --border-color: #EAECF0;
    /* LW-1822: persona-selection accent color. Overridden inline on a resolved tenant
       subdomain (Pages/Index.cshtml's script) so the tab/card accent follows the
       tenant's own brand color.
       LW-1914: the default moved from --sba-green (#138656) to the DGA design-system
       brand green #1B8354 (Button/button-background-primary-default, Icon/icon-primary),
       which is what the Figma frames specify. Deliberately scoped to THIS variable: it
       is read at exactly four places, all inside the persona block below, so the topbar,
       header and hero — which read --sba-green directly — are unaffected. */
    --tenant-primary-color: #1B8354;
}

* {
    box-sizing: border-box;
}

body.lawyers-home {
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    font-family: 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, sans-serif !important;
    color: var(--text-dark);
    direction: rtl;
    text-align: right;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top Utility Header Bar */
.sba-topbar {
    background-color: #0F172A;
    color: #94A3B8;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #1E293B;
}

.sba-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-info {
    display: flex;
    gap: 20px;
}

.topbar-info span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-lang {
    color: #E2E8F0;
    text-decoration: none;
    font-weight: 500;
}

.topbar-lang:hover {
    color: var(--sba-teal);
}

/* Main Navigation Header */
.sba-navbar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 76px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-logo {
    height: 48px;
    width: auto;
}

.navbar-menu {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--sba-green);
}

.btn-sba-primary {
    background-color: var(--sba-green) !important;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer;
}

.btn-sba-primary:hover {
    background-color: var(--sba-green-hover) !important;
    transform: translateY(-1px);
}

/* Main Landing Container (Centered vertically and horizontally) */
.landing-main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
    width: 100%;
    min-height: 100vh;
}

/* ──────────────────────────────────────────────────────────────────────────────
   LW-1914 — the persona-selection block below is transcribed from Figma
   (file hpPmxRmmeGfG7WjffPuvJv frame 6846-8179, mirrored by mUbhF6nPZklTHA0nk0JfSq
   frame 1682-9275), which renders the switcher and the cards as the DGA design
   system's "Content Switcher" and "Card" components.

   This page implemented NEITHER: the switcher was a #E2E8F0 pill track with 100px
   radius and 14px/700 labels, and the cards were 36px-padded soft cards with a
   1.5px border, a 52px icon circle, a 19px title and a 13.5px description.

   Retokenising them therefore changes the appearance of the TWO PRE-EXISTING TABS
   and the FOUR PRE-EXISTING CARDS as well as the new باحث/مختص قانوني ones. That is
   intentional: Figma's own frame renders all three segments in the new style, and
   mixing the two designs on a single screen is not a coherent reading of "pixel
   perfect". Token names are kept in the comments so a reviewer can re-check each
   value against the design rather than trusting this one.
   ────────────────────────────────────────────────────────────────────────────── */

.persona-selection-wrapper {
    /* Figma 6846:8180 — max-width 1280px. Was 680px, which cannot hold a two-card row
       of fixed-340px cards (2 x 340 + 32 = 712px). The cards row centres itself, so the
       wider wrapper does not spread the header text. */
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.sba-header-logo {
    /* Figma 6846:8182 — 175 x 51. object-fit keeps a tenant logo (swapped in at runtime by
       applyTenantBranding in Pages/Index.cshtml) inside that box without distorting it. */
    width: 175px;
    height: 51px;
    object-fit: contain;
    /* 16px = Figma 6846:8181's own gap, between the logo and the title. */
    margin: 0 auto 16px auto;
    display: block;
}

.persona-main-title {
    /* Figma 6846:8282 — 36px / 38px, IBM Plex Sans Arabic SemiBold, Neutral/800.
       Was 28px / 800 / #101828. */
    font-size: 36px;
    line-height: 38px;
    font-weight: 600;
    color: #071222;
    margin: 0 0 16px 0;
}

.persona-main-subtitle {
    /* Figma 6846:8283 — 18px / 24px Regular, Neutral/700. Was 14.5px / #475467.
       56px bottom margin = Figma 6846:8180's gap between the header block and the switcher. */
    font-size: 18px;
    line-height: 24px;
    color: #384250;
    margin: 0 0 56px 0;
}

/* ── DGA Content Switcher (Figma 6846:8285) ───────────────────────────────────
   Segmented control, not pills: 32px tall, 8px horizontal padding, 8px radius on
   the two OUTER corners only, #F3F4F6 inactive / #1B8354 active, 0.5px #D2D6DB
   dividers between segments, 16px/24px Regular labels.
   Docs: https://design.dga.gov.sa/guidelines/components/data-display/content-switcher */
.persona-tabs-switcher {
    display: inline-flex;
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    padding: 0;
    /* Figma 6846:8284's gap, between the switcher and the cards row. */
    margin-bottom: 24px;
}

.persona-tab-btn {
    /* LW-2024: was `height: 32px; padding: 0 8px`. The FIXED height is what made vertical padding a
       no-op, and 8px horizontal left the labels almost touching the segment dividers.
       24px line-height + 10px x2 = the 44px minimum touch target exactly, so min-height is a floor
       rather than a stretch.
       These values INTENTIONALLY EXCEED Figma 6846:8285, whose Button/buttons-sm-padding token is 8
       — the shipped values matched it, so this is a deliberate departure, not drift. Design has been
       asked to confirm or update the frame. The TYPE tokens below are unchanged. */
    min-height: 44px;
    padding: 10px 20px;             /* was Button/buttons-sm-padding (8) */
    border: none;
    background: #F3F4F6;            /* Button/button-background-neutral-default */
    color: #161616;                 /* Text/text-default */
    /* <button> is exempt from body's font-family inheritance in every browser's
       user-agent stylesheet — form controls get the OS UI font by default
       regardless of what the page sets, `!important` included. Without this these
       three tabs are the only text on the page NOT in IBM Plex Sans Arabic/Cairo. */
    font-family: inherit;
    font-size: 16px;                /* Size/Text/typo-size-text-md */
    line-height: 24px;              /* Line Height/Text/line-heights-text-md */
    font-weight: 400;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Outer corners only — Radius/radius-md 8px. Logical properties so the rounding follows
   the document's RTL direction without a second RTL-specific rule. */
.persona-tab-btn:first-child {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}

.persona-tab-btn:last-child {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

/* 0.5px dividers between segments (Border/border-neutral-primary), on the inline-start edge
   of every segment except the first — so exactly n-1 dividers render whatever the tab count. */
.persona-tab-btn + .persona-tab-btn {
    border-inline-start: 0.5px solid #D2D6DB;
}

.persona-tab-btn.active {
    background: var(--tenant-primary-color);
    color: #FFFFFF;                 /* Text/text-oncolor-primary */
    /* The pill design's green glow is not in the DGA spec. */
    box-shadow: none;
}

/* The active segment carries no border in the design — drop the divider on either side of it. */
.persona-tab-btn.active,
.persona-tab-btn.active + .persona-tab-btn {
    border-inline-start-color: transparent;
}

/* LW-2024: headroom guard for narrow viewports. MEASURED at a 375px viewport: with the widened
   desktop values the switcher renders 340px against .persona-selection-wrapper's 343px of content
   width — so it does NOT overflow today, but it clears by 3px, and any longer label, a larger
   user font-size or a narrower device eats that immediately. .persona-tabs-switcher is a no-wrap
   inline-flex and must stay that way: letting a segmented control wrap breaks both the
   outer-corner-only rounding and the n-1 divider rule. So trim the horizontal padding back here
   rather than allowing a second row, while keeping the vertical increase the ticket reported
   (40px still clears the touch-target floor). */
@media (max-width: 480px) {
    .persona-tab-btn {
        min-height: 40px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ── DGA Card (Figma 6846:8286 / component 3337:2898) ─────────────────────────
   A centred row of fixed-340px cards, which is also what lets a single-card pane (the
   researcher tab) render at the same width as a card in a two-card pane instead of
   stretching to half the wrapper. Was a 1fr-1fr grid with a 20px gap.
   Docs: https://design.dga.gov.sa/guidelines/components/content-display/card */
.persona-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;           /* Figma: cards are h-full within the row */
    gap: 32px;
    width: 100%;
}

.persona-card {
    width: 340px;
    max-width: 100%;                /* so a card still fits a 375px viewport */
    background: #FFFFFF;            /* Background/background-white */
    border: 1px solid #E5E7EB;      /* Border/border-neutral-secondary — was 1.5px #EAECF0 */
    border-radius: 16px;            /* Radius/radius-lg */
    padding: 16px;                  /* Global/spacing-xl — was 36px 24px */
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover is NOT in the design — every frame is a default state only. Kept (retoned to the new
   accent) because these cards are links on an anonymous entry page, and removing every hover
   cue would be a usability regression rather than fidelity. */
.persona-card:hover {
    border-color: var(--tenant-primary-color);
    box-shadow: 0px 8px 24px rgba(27, 131, 84, 0.08);
    transform: translateY(-2px);
}

.persona-icon-circle {
    width: 48px;                    /* Figma: 48 x 48 — was 52 */
    height: 48px;
    border-radius: 50%;             /* Radius/radius-full */
    background: #F3FCF6;            /* Icon/background-brand-light — was #ECFDF5 */
    color: var(--tenant-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Figma puts 24px (Card/card-lg-gap) between the icon and the content block. Applied as a
       margin rather than the card's flex `gap` so the title->description spacing can stay 8px
       without wrapping the title and description in an extra element — which would mean editing
       the four pre-existing cards' markup, and Story 22's regression check requires those two
       panes to come out of this change untouched. Same pixels either way. */
    margin-bottom: 24px;
}

.persona-icon-circle svg {
    /* The four pre-existing cards' hand-written, stroke-based glyphs. */
    width: 28px;                    /* Figma: 28 x 28 — was 26 */
    height: 28px;
    stroke: var(--tenant-primary-color);
}

.persona-icon-circle img {
    /* The committed DGA "user-group" export on the researcher card. Fill-based and already
       carrying the design's own colours, so it takes no stroke/fill override here. Its viewBox
       is 27.42 x 20.42, and the asset's root has no preserveAspectRatio="none", so it letterboxes
       at its natural aspect inside this square box exactly as Figma places it. */
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.persona-card-title {
    font-size: 18px;                /* Size/Text/typo-size-text-Ig — was 19px */
    line-height: 28px;              /* Line Height/Text/line-heights-text-Ig */
    font-weight: 700;
    color: #1F2A37;                 /* Text/text-display — was #101828 */
    /* Figma 30195:10413's gap between the title and the description. */
    margin: 0 0 8px 0;
    width: 100%;
}

.persona-card-desc {
    font-size: 16px;                /* Size/Text/typo-size-text-md — was 13.5px */
    line-height: 24px;              /* was 1.55 */
    font-weight: 400;
    color: #1F2A37;                 /* was #475467 */
    margin: 0;
    width: 100%;
}

/* Alert Modal Card Design (Centered in Screen & Text Centered) */
.modal-alert-card {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    padding: 40px 32px;
    max-width: 540px;
    width: 100%;
    box-shadow: 0px 12px 32px rgba(16, 24, 40, 0.08);
    position: relative;
    text-align: center;
    margin: auto;
}

.modal-alert-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FEF2F2;
    color: #D92D20;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.modal-alert-icon-circle svg {
    width: 28px;
    height: 28px;
    stroke: #D92D20;
}

.modal-alert-icon-circle.warning {
    background: #FEF8EE;
    color: #DC6803;
}

.modal-alert-icon-circle.warning svg {
    stroke: #DC6803;
}

.modal-alert-title {
    font-size: 22px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 12px 0;
    text-align: center;
}

.modal-alert-desc {
    font-size: 15px;
    color: #475467;
    line-height: 1.65;
    margin: 0;
    text-align: center;
}

.modal-alert-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.modal-alert-btn-primary {
    background-color: #198754;
    color: #FFFFFF !important;
    border: 1px solid #198754;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.modal-alert-btn-primary:hover {
    background-color: #146c43;
    border-color: #146c43;
}

.modal-alert-btn-primary svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
}

.modal-alert-btn-secondary {
    background-color: #FFFFFF;
    color: #344054 !important;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.modal-alert-btn-secondary:hover {
    background-color: #F9FAFB;
    border-color: #D0D5DD;
}

/* Footer Section */
.sba-footer {
    background: #0F172A;
    color: #94A3B8;
    padding: 48px 0 24px 0;
    border-top: 1px solid #1E293B;
    margin-top: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}

.footer-brand {
    color: #F8FAFC;
}

.footer-logo {
    height: 44px;
    margin-bottom: 16px;
}

.footer-text {
    font-size: 14px;
    line-height: 1.7;
    max-width: 380px;
}

.footer-title {
    font-size: 16px;
    font-weight: 700;
    color: #F8FAFC;
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--sba-teal);
}

.footer-bottom {
    border-top: 1px solid #1E293B;
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #64748B;
}