/* HR Laws Center design layer.
 *
 * The presentation layer for Components/Pages/HrLawsCenterPage.razor. Global
 * CSS, linked from App.razor — it was Blazor-scoped until the stylesheets were
 * consolidated under wwwroot/css. The same three rules the sibling sheets call
 * out apply:
 *
 * 1. Nothing confines these rules to this page any more, so every selector is
 *    ql- prefixed or a descendant of one. A bare element selector here would
 *    leak into the rest of the site the way the deleted css/site.css did.
 * 2. The doubled class in `.ql-prose.ql-prose h2` is deliberate, not a typo.
 *    Isolation used to rewrite these selectors as `.ql-prose[b-xxxxx] h2`, and
 *    the attribute was carrying real weight: the bundle's own .prose block is
 *    unlayered, and `.prose thead th` outspecifies a plain `.ql-prose th`.
 *    Repeating the class restores exactly the specificity the attribute gave.
 * 3. @keyframes carry the same ql- prefix the page's classes use, so they
 *    cannot collide with the compiled Tailwind bundle, with Home's qh-
 *    animations, pricing's qp-, the blog's qd-/qb- or the help centre's qc-.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. Against the unlayered .prose block the
 * doubled class wins on specificity, and this sheet is linked after the bundle,
 * so both tie-breaks still fall the same way. .prose stays on the element as
 * the base — this file only overrides on top of it.
 *
 * Palette is the logo ramp shared with the pricing, blog and help pages:
 * #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue), with #4f46e5 →
 * #7c3aed as the primary. No hue from outside that ramp appears on this page.
 *
 * Reading order the layout is built around: light hero → a sticky contents rail
 * on the left listing every law area that has content, beside a stack of area
 * cards → the "not legal advice" note closing the stack. Nothing about the
 * layout depends on how many areas the published version happens to carry: one
 * area and eight both read correctly.
 */

/* ── hero ───────────────────────────────────────────────────────────── */
/* clip rather than hidden, as on the cards below: this only has to keep the
   oversized aurora blobs inside the band, and clip cannot turn into a scroller. */
.ql-hero {
    position: relative;
    overflow: clip;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 46%, #f3f1fe 100%);
    padding: 68px 0 58px;
}

.ql-hero__aurora,
.ql-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ql-hero__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .72;
    animation: ql-drift 26s ease-in-out infinite;
}

.ql-hero__aurora i:nth-child(1) {
    width: 700px;
    height: 700px;
    top: -390px;
    right: -180px;
    background: radial-gradient(circle, rgba(129, 140, 248, .28), transparent 62%);
}

.ql-hero__aurora i:nth-child(2) {
    width: 540px;
    height: 540px;
    bottom: -300px;
    left: -190px;
    animation-delay: -9s;
    background: radial-gradient(circle, rgba(167, 139, 250, .26), transparent 62%);
}

.ql-hero__aurora i:nth-child(3) {
    width: 420px;
    height: 420px;
    top: 22%;
    left: 46%;
    animation-delay: -16s;
    background: radial-gradient(circle, rgba(162, 45, 234, .15), transparent 62%);
}

@keyframes ql-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-44px, 36px) scale(1.08); }
    66%      { transform: translate(36px, -26px) scale(.94); }
}

.ql-hero__grid {
    opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, rgba(79, 70, 229, .22) 1.1px, transparent 0);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 50% at 34% 6%, #000, transparent 72%);
    mask-image: radial-gradient(ellipse 62% 50% at 34% 6%, #000, transparent 72%);
}

.ql-hero__inner {
    position: relative;
    z-index: 5;
    max-width: 820px;
}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.ql-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #94a3b8;
}

.ql-crumbs a {
    color: #64748b;
    font-weight: 600;
    transition: color .2s;
}

.ql-crumbs a:hover { color: #4f46e5; }

.ql-crumbs__sep {
    color: #cbd5e1;
    user-select: none;
}

.ql-crumbs__now {
    font-weight: 700;
    color: #0f172a;
}

/* ── eyebrow ────────────────────────────────────────────────────────── */
.ql-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px 8px 9px;
    margin-bottom: 24px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(100deg, #4f46e5, #7c3aed 55%, #a855f7);
    box-shadow: 0 12px 30px -12px rgba(99, 102, 241, .85);
}

.ql-eyebrow__pip {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .22);
    animation: ql-pulse 2.8s ease-in-out infinite;
}

.ql-eyebrow__pip svg { width: 12px; height: 12px; }

@keyframes ql-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .38); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.ql-hero__title {
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.08;
    letter-spacing: -.035em;
    font-weight: 800;
    color: #0b1020;
    margin: 0 0 20px;
}

.ql-accent {
    background: linear-gradient(96deg, #4f46e5 0%, #7c3aed 46%, #a22dea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ql-hero__lede {
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height: 1.7;
    color: #64748b;
    max-width: 680px;
    margin: 0;
}

/* ── body layout ────────────────────────────────────────────────────── */
.ql-main {
    position: relative;
    padding: 58px 0 92px;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}

.ql-layout {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    align-items: start;
    gap: 44px;
}

/* ── contents rail ──────────────────────────────────────────────────── */
.ql-rail {
    position: sticky;
    top: 96px;
    min-width: 0;
}

/* A sticky box taller than the space it is pinned into cannot be scrolled to:
   the tabs past the bottom edge stay off screen however far the page scrolls.
   Eight law areas plus the version line is roughly 480px, and 96px of that
   space is already spent on the offset, so anything under ~700px of viewport —
   a laptop at 125% display scaling, a landscape phone, a zoomed window — loses
   the last tabs. Below that height the rail simply scrolls with the page, which
   costs the pin and keeps every tab reachable. Capping it with a max-height and
   a nested scrollbar was the alternative; this page is meant to scroll as one
   surface, so it does not get a second scrolling box. */
@media (max-height: 700px) {
    .ql-rail { position: static; }
}

/* clip rather than hidden for the same reason as .ql-area — here it is only
   keeping the gradient bar inside the rounded top corners. */
.ql-toc {
    position: relative;
    overflow: clip;
    padding: 20px 16px 16px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #eae9f6;
    box-shadow: 0 30px 66px -46px rgba(79, 70, 229, .6);
}

.ql-toc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
}

/* The published version is the rail's only piece of metadata, so it reads as a
   status line rather than a heading — a live dot, then the label. */
.ql-toc__ver {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 0 8px 14px;
    border-bottom: 1px solid #f1eefb;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #6d28d9;
}

.ql-toc__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: linear-gradient(135deg, #7b5ee5, #a22dea);
    box-shadow: 0 0 0 3px rgba(162, 45, 234, .14);
}

.ql-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

/* A <button> rather than a link, because selecting an area swaps the panel in
   place instead of navigating — hence the appearance reset before the shared
   row styling. */
.ql-toc__link {
    appearance: none;
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.35;
    color: #475569;
    transition: color .2s, background .25s;
}

.ql-toc__link:hover {
    color: #4f46e5;
    background: #f6f4ff;
}

.ql-toc__link:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

/* The selected tab carries the rail's only persistent state, so it reads as
   filled rather than merely tinted — hover can then stay a light wash without
   the two states competing. */
.ql-toc__link.is-active {
    color: #4f46e5;
    background: #f1edff;
    box-shadow: inset 0 0 0 1px #ded9fa;
}

.ql-toc__link.is-active .ql-toc__ic {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: transparent;
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .95);
}

.ql-toc__link.is-active .ql-toc__chev {
    opacity: 1;
    transform: translateX(0);
}

.ql-toc__ic {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #7c3aed;
    background: linear-gradient(135deg, #f5f2ff, #ece7fe);
    border: 1px solid #e9e3fc;
    transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}

.ql-toc__ic svg { width: 15px; height: 15px; }

.ql-toc__link:hover .ql-toc__ic {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: transparent;
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .95);
}

.ql-toc__name {
    min-width: 0;
    flex: 1 1 auto;
}

.ql-toc__chev {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #c4b5fd;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s, transform .25s;
}

.ql-toc__chev svg { width: 13px; height: 13px; }

.ql-toc__link:hover .ql-toc__chev {
    opacity: 1;
    transform: translateX(0);
}

/* ── area cards ─────────────────────────────────────────────────────── */
/* minmax(0, 1fr) rather than a bare 1fr: the Labour law area's stored HTML is a
   three-column grid of PDF links whose filenames are long and unbreakable, and
   a grid track's default min-width of auto would let that push the column — and
   the page — wider than the viewport. The card's own overflow:hidden then keeps
   the stored markup's scroll containers doing the scrolling. */
.ql-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}

.ql-area,
.ql-prose { min-width: 0; }

/* overflow:clip, not hidden. Both clip the decorative circle below identically,
   but `hidden` is a scroll container: any stored markup that overflowed it would
   be reachable only by a nested scrollbar the card never shows, and the panel
   would trap the wheel instead of scrolling the page. `clip` cannot scroll, so
   the page is always the thing that scrolls. Height stays auto in both cases —
   the panel grows to whatever the selected area needs, and the two declarations
   below say so outright so no later rule can cap it. */
.ql-area {
    position: relative;
    overflow: clip;
    height: auto;
    max-height: none;
    padding: 26px 30px 30px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid #eae9f6;
    box-shadow: 0 24px 54px -40px rgba(15, 23, 42, .5);
    /* Clears the site header when the rail's anchor links land here. */
    scroll-margin-top: 108px;
    transition: border-color .3s, box-shadow .3s;
}

/* Bleeds out of the card's top-right corner, clipped by the overflow above. */
.ql-area::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -230px;
    right: -130px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(162, 45, 234, .13), transparent 66%);
}

.ql-area:hover {
    border-color: #ded9fa;
    box-shadow: 0 34px 70px -42px rgba(79, 70, 229, .5);
}

/* The panel is the selected tab's counterpart, so it carries the same lifted
   treatment the rail's active row does. */
.ql-area[role="tabpanel"] {
    border-color: #cfc7f7;
    box-shadow: 0 34px 70px -42px rgba(79, 70, 229, .55);
}

/* The panel takes tabindex="0" so a tab press moves from the rail into the
   summary, but it is a container, not a control — no focus ring on click. */
.ql-area:focus { outline: none; }

.ql-area:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}

.ql-area__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1eefb;
    transition: border-color .3s;
}

.ql-area__ic {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 14px 30px -14px rgba(79, 70, 229, .95);
}

.ql-area__ic svg { width: 21px; height: 21px; }

.ql-area__title {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #0b1020;
    margin: 0;
    min-width: 0;
}

/* ── stored law HTML ────────────────────────────────────────────────── */
.ql-prose {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    max-width: none;
    font-size: 15px;
    color: #64748b;
}

.ql-prose.ql-prose p {
    margin: 0 0 1.3em;
    line-height: 1.85;
    color: #64748b;
}

.ql-prose.ql-prose p:last-child { margin-bottom: 0; }

/* The bundle's .prose gives every heading the same weight and a 2–2.5em top
   margin; inside a card that already carries its own H2 the stored headings
   have to sit a step below it. */
.ql-prose.ql-prose h2 {
    font-size: 1.18em;
    line-height: 1.35;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #0b1020;
    margin: 1.7em 0 .65em;
}

.ql-prose.ql-prose h3 {
    font-size: 1.06em;
    line-height: 1.4;
    letter-spacing: -.015em;
    font-weight: 750;
    color: #0b1020;
    margin: 1.5em 0 .5em;
}

.ql-prose.ql-prose h4 {
    font-size: 1em;
    font-weight: 700;
    color: #1e293b;
    margin: 1.35em 0 .45em;
}

/* A stored H1 would otherwise outrank the card's own heading. */
.ql-prose.ql-prose h1 {
    font-size: 1.3em;
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 800;
    color: #0b1020;
    border-bottom: 0;
    margin: 1.7em 0 .65em;
}

.ql-prose.ql-prose h1:first-child,
.ql-prose.ql-prose h2:first-child,
.ql-prose.ql-prose h3:first-child,
.ql-prose.ql-prose h4:first-child { margin-top: 0; }

.ql-prose.ql-prose a {
    color: #5b21b6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, .35);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color .2s, text-decoration-color .2s;
}

.ql-prose.ql-prose a:hover {
    color: #4f46e5;
    text-decoration-color: #4f46e5;
}

.ql-prose.ql-prose strong { color: #1e293b; font-weight: 700; }

.ql-prose.ql-prose ul,
.ql-prose.ql-prose ol {
    margin: 0 0 1.3em;
    padding-left: 1.3em;
}

.ql-prose.ql-prose li {
    margin: .4em 0;
    line-height: 1.8;
    padding-left: .2em;
}

.ql-prose.ql-prose li::marker {
    color: #7c3aed;
    font-weight: 700;
}

/* Statute extracts are the one thing a law summary quotes verbatim, so the
   plate is set apart rather than run in as italics. */
.ql-prose.ql-prose blockquote {
    position: relative;
    margin: 1.7em 0;
    padding: 18px 22px;
    border: 0;
    border-left: 3px solid #a78bfa;
    border-radius: 0 14px 14px 0;
    background: #faf8ff;
    font-style: normal;
    color: #475569;
}

.ql-prose.ql-prose blockquote p:last-child { margin-bottom: 0; }

.ql-prose.ql-prose hr {
    margin: 2.2em 0;
    border: 0;
    height: 1px;
    background: #f1eefb;
}

.ql-prose.ql-prose code {
    color: #6d28d9;
    background: #f4f0ff;
    border: 1px solid rgba(124, 58, 237, .16);
    border-radius: 6px;
    font-size: .87em;
}

.ql-prose.ql-prose pre { border-radius: 12px; }

.ql-prose.ql-prose pre code {
    background: transparent;
    border: 0;
    color: inherit;
}

/* Contribution rates and tax bands arrive as tables authored at full width, and
   a stored table is easily wider than the card — so the table scrolls, not the
   page. */
.ql-prose.ql-prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 1.7em 0;
    border-radius: 14px;
    border: 1px solid #eeecf9;
    font-size: .9em;
}

.ql-prose.ql-prose thead {
    background: #faf8ff;
    border-bottom: 1px solid #eeecf9;
}

.ql-prose.ql-prose th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #4c1d95;
    white-space: nowrap;
}

.ql-prose.ql-prose td {
    padding: 12px 16px;
    color: #64748b;
    border-bottom: 1px solid #f6f5fc;
}

.ql-prose.ql-prose tbody tr:last-child td { border-bottom: 0; }

.ql-prose.ql-prose img {
    border-radius: 14px;
    margin: 1.7em 0;
    max-width: 100%;
    height: auto;
}

/* ── disclaimer ─────────────────────────────────────────────────────── */
.ql-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    border-radius: 18px;
    background: #faf8ff;
    border: 1px dashed #ddd9f2;
    font-size: 13.5px;
    line-height: 1.7;
    color: #64748b;
}

.ql-note__ic {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #7c3aed;
    background: #f2ecff;
}

.ql-note__ic svg { width: 16px; height: 16px; }

/* ── empty state ────────────────────────────────────────────────────── */
.ql-empty {
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 32px;
    text-align: center;
    border-radius: 26px;
    background: #fff;
    border: 1px dashed #ddd9f2;
    box-shadow: 0 28px 60px -46px rgba(79, 70, 229, .55);
}

.ql-empty__ic {
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #7c3aed;
    background: #f6f1ff;
}

.ql-empty__ic svg { width: 25px; height: 25px; }

.ql-empty__txt {
    font-size: 14.5px;
    line-height: 1.75;
    color: #64748b;
    margin: 0 0 26px;
}

.ql-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 20px 40px -20px rgba(79, 70, 229, .95);
    transition: transform .25s, box-shadow .25s, filter .25s;
}

.ql-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 28px 52px -22px rgba(79, 70, 229, 1);
}

.ql-cta svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform .25s;
}

.ql-cta:hover svg { transform: translateX(3px); }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .ql-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
    .ql-area { padding: 24px 24px 26px; }
}

@media (max-width: 1024px) {
    /* The rail moves above the areas, so it stops being sticky — a full-width
       index that tracks the viewport covers the summary behind it. The list
       reflows into chips so it stays one or two rows rather than eight. */
    .ql-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .ql-rail { position: static; }

    .ql-toc__list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ql-toc__link {
        border: 1px solid #eeecf9;
        background: #fdfcff;
    }

    .ql-toc__chev { display: none; }
}

@media (max-width: 760px) {
    .ql-hero { padding: 52px 0 44px; }
    .ql-main { padding: 44px 0 62px; }

    .ql-area { padding: 22px 20px 24px; border-radius: 22px; }
    .ql-area__title { font-size: 19.5px; }

    .ql-empty { padding: 44px 22px; }
    .ql-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ql-hero__aurora i,
    .ql-eyebrow__pip { animation: none !important; }

    .ql-area,
    .ql-toc__ic,
    .ql-toc__chev,
    .ql-cta,
    .ql-cta svg {
        transition: none;
    }

    .ql-cta:hover,
    .ql-cta:hover svg,
    .ql-toc__link:hover .ql-toc__chev {
        transform: none;
    }
}