/* ===== HR Compliances Wiki — styles ===== */

.compliance-wiki, .compliance-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 160px !important;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1a1a1a;
    position: relative;
    z-index: 1;
}

/* The listing pages open on the site's sky band now (the .hs-hero section in
   compliance/index.php and act/index.php), and that band carries the clearance
   for the fixed navbar itself. Without this the 160px above would be reserved
   a second time and leave a screen of white between the band and the cards.

   The detail pages keep the 160px: they have no band over them, so the bar is
   still overlaying their first line. */

.compliance-wiki--hero {
    padding-top: 30px !important;
}

/* ---- breadcrumb on the article pages ----

   The same trail the glossary articles carry, in this module's own naming.
   Blue links, a grey chevron between them, and the current page in muted text
   rather than as a link.

   margin-bottom, not padding: the pills row follows it and sets its own top
   spacing, so this only has to open the gap under itself. */

.compliance-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.compliance-crumbs a {
    color: #2563eb;
    text-decoration: none;
}

.compliance-crumbs a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.compliance-crumbs a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

.compliance-crumbs__sep {
    color: #94a3b8;
}

.compliance-crumbs__current {
    color: #64748b;
}



/* ---- Hero ---- */
.compliance-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 8px;
}
.compliance-hero .subtitle {
    color: #6b6b6b;
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 0 32px;
}

/* ---- Search ---- */
/* ---- Search ----

   The glossary page's search bar, matched on 2026-09-04 so the two searches
   on the site are one control rather than two that happen to do the same
   thing. Every value here is that bar's: the 14px radius, the #e2e8f0 hairline
   over white, the focus ring, and the primary gradient on the button. It is
   restated rather than shared because this section loads only its own
   stylesheet, not css/style.css.

   The magnifier is on the left and the word is on the button, which is the
   other half of the match. Before this the magnifier WAS the button, so the
   row had a control that showed no label and a field with nowhere obvious to
   submit from. */

.compliance-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 8px 8px 8px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    max-width: 100%;
    margin-bottom: 28px;
    transition: border-color .2s, box-shadow .2s;
}

/* The whole bar takes the focus ring, not the field inside it: the field has
   no border of its own, so a ring drawn on it would float in the middle of
   the box. */
.compliance-search:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.compliance-search__field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.compliance-search__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #94a3b8;
}

.compliance-search input[type="search"],
.compliance-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    padding: 10px 4px;
    color: #0f172a;
}

/* Safari draws its own clear button and a slightly different box on
   type="search". Neither belongs inside a bar that is already one shape. */
.compliance-search input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
.compliance-search input[type="search"]::-webkit-search-decoration,
.compliance-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.compliance-search input::-moz-placeholder { color: #94a3b8; }
.compliance-search input::placeholder { color: #94a3b8; }

.compliance-search button {
    flex: 0 0 auto;
    background: linear-gradient(150deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
    color: #ffffff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: transform .15s, filter .2s, box-shadow .2s;
}
.compliance-search button:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

/* Stacked below 640, the same breakpoint and the same answer the glossary bar
   uses: side by side, the button leaves the field too narrow to read what has
   been typed into it. */
@media (max-width: 640px) {
    .compliance-search {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 10px;
    }
    .compliance-search button {
        width: 100%;
    }
}

/* ---- Filter pills ---- */
.compliance-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.filter-pill,
.compliance-filters a {
    border: 1px solid #e3e3e8;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.92rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-pill span {
    color: #9b9b9b;
    margin-left: 4px;
}
.filter-pill:hover, .compliance-filters a:hover {
    border-color: #2563EB;
    color: #2563EB;
}
.filter-pill.active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}
.filter-pill.active span {
    color: #e6d9ff;
}

/* Browse by Act now uses .filter-pill directly (boxed style, matches
   the top category pills) — no override needed here anymore. */

/* ---- Section headings ---- */
.section-heading {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 40px 0 24px;
}

/* ---- Card grid ---- */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .compliance-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .compliance-grid { grid-template-columns: 1fr; }
}

.compliance-card {
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
}
.compliance-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.compliance-card h3 {
    font-size: 1.1rem;
    margin: 0 0 10px;
    line-height: 1.35;
}
.compliance-card h3 a {
    color: #1a1a1a;
    text-decoration: none;
}
.compliance-card h3 a:hover { color: #2563EB; }
.compliance-card p {
    color: #6b6b6b;
    font-size: 0.92rem;
    line-height: 1.5;
    flex: 1;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.compliance-card .read-more {
    color: #2563EB;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 16px;
}
.compliance-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #9b9b9b;
    border-top: 1px solid #f0f0f4;
    padding-top: 14px;
}
.compliance-card .tag::before {
    content: "\1F3F7  ";
}

.no-results {
    color: #6b6b6b;
    padding: 40px 0;
}

/* ---- Pagination ---- */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
.load-more {
    border: 1px solid #2563EB;
    color: #2563EB;
    border-radius: 999px;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
}
.load-more:hover { background: #2563EB; color: #fff; }

/* ===== Detail page ===== */

.compliance-detail .pills {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}
.compliance-detail .pill {
    border: 1px solid #2563EB;
    color: #2563EB;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.compliance-detail h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 32px;
}

.detail-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 60px;
    border-top: 1px solid #ececf1;
    padding-top: 32px;
}
@media (max-width: 860px) {
    .detail-layout { grid-template-columns: 1fr; gap: 32px; }
}

.detail-main .intro {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 8px;
}
.detail-main h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 32px 0 14px;
}
.detail-main .section-body p,
.detail-main .section-body li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #333;
}
.detail-main .section-body ul {
    padding-left: 20px;
    margin: 10px 0;
}
.detail-main .section-body ul li {
    margin-bottom: 14px;
}
.detail-main .section-body ol {
    padding-left: 20px;
    margin: 10px 0;
}
.detail-main .section-body ol li {
    margin-bottom: 14px;
}
.detail-main .section-body ul ul {
    margin-top: 8px;
}
.reference-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.reference-links li { margin-bottom: 10px; }
.reference-links a {
    color: #2563EB;
    text-decoration: underline;
}
/* Reference whose URL isn't known yet: shown as plain text, so it never
   reads as a link the reader can click. */
.reference-nolink {
    color: #1a1a1a;
}

.detail-sidebar h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 14px;
}
.detail-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.detail-sidebar li {
    border: 1px solid #ececf1;
    padding: 0;
    margin-bottom: -1px;
}
.detail-sidebar li:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.detail-sidebar li:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0;
}
.detail-sidebar a {
    display: block;
    color: #2563EB;
    text-decoration: none;
    font-size: 0.92rem;
    padding: 14px 20px;
}
.detail-sidebar a:hover {
    background: #faf5ff;
    text-decoration: none;
}

/* ===== Act "Compliances" forms list (e.g. Apprentices Act page) ===== */

.forms-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.forms-list li {
    margin-bottom: 12px;
}
.forms-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 16px 20px;
    color: #2563EB;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.forms-list a:hover {
    background: #faf5ff;
    border-color: #2563EB;
}
.forms-list a svg {
    flex-shrink: 0;
    color: #2563EB;
}

/* ===== Applicability list on Act pages ===== */
.applicability-list {
    padding-left: 20px;
    margin: 10px 0;
}
.applicability-list li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 10px;
}

/* ===== Rich Applicability blocks & grouped References ===== */
.applicability-subheading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: #1a1a1a;
}
.applicability-body p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 8px;
}
.applicability-bullets {
    padding-left: 20px;
    margin: 8px 0 16px;
}
.applicability-bullets li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 6px;
}
.reference-group-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: #1a1a1a;
}
.reference-group-heading:first-of-type {
    margin-top: 8px;
}

.form-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563EB;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 999px;
    padding: 10px 20px;
    text-decoration: none;
    margin: 8px 0 24px;
    transition: background .15s, transform .15s;
}
.form-download-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
.form-download-btn--disabled {
    background: #e3e3e8;
    color: #9b9b9b;
    cursor: not-allowed;
}
.form-download-btn--disabled:hover {
    background: #e3e3e8;
    transform: none;
}

/* ===== State directory (e.g. Labour Welfare Fund Act) ===== */
.state-select-form {
    margin-bottom: 32px;
}
.state-select {
    border: 1px solid #e3e3e8;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: #333;
    min-width: 260px;
    background: #fff;
    cursor: pointer;
}
.state-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0 32px;
}
@media (max-width: 620px) {
    .state-grid { grid-template-columns: 1fr; }
}
.state-grid-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 14px 20px;
    color: #2563EB;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.state-grid-item:hover {
    background: #faf5ff;
    border-color: #2563EB;
}
.state-grid-item svg {
    flex-shrink: 0;
    color: #2563EB;
}

.state-not-applicable {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fdf3d9;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 16px 0 32px;
}
.state-not-applicable-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5a623;
}
.state-not-applicable strong {
    font-size: 0.98rem;
    color: #1a1a1a;
}

/* ===== Labour Welfare Fund state detail tables =====
   Border/radius/overflow live on the WRAPPER div, not the <table> itself —
   mixing border-radius + overflow:hidden directly on a table that also has
   border-collapse can make the outer border render inconsistently or
   disappear in some browsers. The table only carries cell-level borders. */
.lwf-table-wrap {
    border: 1px solid #ececf1;
    border-radius: 12px;
    overflow: hidden;
    margin: 8px 0 28px;
}
.lwf-details-table,
.lwf-contribution-table {
    width: 100%;
    border-collapse: collapse;
}
.lwf-details-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #ececf1;
    border-right: 1px solid #ececf1;
    font-size: 0.95rem;
    color: #1a1a1a;
}
.lwf-details-table tr:last-child td {
    border-bottom: none;
}
.lwf-details-table td:last-child {
    border-right: none;
}
.lwf-details-label {
    color: #6b6b6b;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    width: 40%;
}

.lwf-contribution-table th,
.lwf-contribution-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #d8d8de;
    border-right: 1px solid #d8d8de;
    text-align: left;
    font-size: 0.95rem;
    background: #fff;
}
.lwf-contribution-table th:last-child,
.lwf-contribution-table td:last-child {
    border-right: none;
}
.lwf-contribution-table thead th {
    background: #fff;
    font-weight: 700;
    color: #1a1a1a;
}
.lwf-contribution-table thead th:first-child {
    background: #fff;
}
.lwf-contribution-table tbody th {
    font-weight: 700;
    color: #1a1a1a;
    background: #fff;
}
.lwf-contribution-table tr:last-child th,
.lwf-contribution-table tr:last-child td {
    border-bottom: none;
}

.lwf-rules-list {
    padding-left: 20px;
    margin: 8px 0 28px;
}
.lwf-rules-list li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 10px;
}

.lwf-last-updated {
    font-size: 0.85rem;
    color: #9b9b9b;
    margin-top: 4px;
}

.detail-divider {
    border: none;
    border-top: 1px solid #ececf1;
    margin: 0 0 28px;
}

.calendar-promo {
    border: 1px solid #ececf1;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
    background: #faf8fc;
}
.calendar-promo h3 {
    margin: 0 0 8px;
}
.calendar-promo p {
    font-size: 0.9rem;
    color: #6b6b6b;
    line-height: 1.5;
    margin: 0 0 14px;
}
.calendar-promo-btn {
    display: inline-block;
    background: #2563EB;
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 999px;
    padding: 10px 20px;
    text-decoration: none;
}
.calendar-promo-btn:hover {
    background: #7326e8;
}

.section-link-heading {
    margin: 32px 0 14px;
}
.section-link-heading a {
    color: #2563EB;
    font-weight: 400;
    font-size: 0.98rem;
    text-decoration: underline;
}
.section-link-heading a:hover {
    color: #7326e8;
}

/* ===== Generic data tables inside section-body content =====
   For multi-column tables (3+ columns) that don't fit the simple
   details_table/contribution_table array formats — e.g. Karnataka's
   Tax Schedule and Compliance Matrix. Just use a plain <table> in the
   HTML and it picks up this styling automatically, no inline CSS needed. */
.detail-main .section-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 20px;
}
.detail-main .section-body table th,
.detail-main .section-body table td {
    border: 1px solid #d8d8de;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.5;
    vertical-align: top;
}
.detail-main .section-body table thead th {
    background: #fff;
    font-weight: 700;
    color: #1a1a1a;
}
.detail-main .section-body .table-scroll {
    overflow-x: auto;
}
.detail-main .section-body .table-scroll table {
    min-width: 600px;
}
/* ===== Plain grid variant of the contribution table =====
   Shape only, same fonts as the rounded version above: square corners and a
   border on all four sides of every cell plus the table's outer edge. The
   :last-child selectors are not redundant - the rounded-card rules above
   strip border-bottom from the last row and border-right from the last
   column, and they out-specify a plain `th, td` selector. */
.lwf-table-wrap--plain {
    border: none;
    border-radius: 0;
    overflow: visible;
    overflow-x: auto;
}
.lwf-table-wrap--plain .lwf-contribution-table {
    border: 1px solid #d8d8de;
    min-width: 460px;
}
.lwf-table-wrap--plain .lwf-contribution-table th,
.lwf-table-wrap--plain .lwf-contribution-table td,
.lwf-table-wrap--plain .lwf-contribution-table tr:last-child th,
.lwf-table-wrap--plain .lwf-contribution-table tr:last-child td,
.lwf-table-wrap--plain .lwf-contribution-table th:last-child,
.lwf-table-wrap--plain .lwf-contribution-table td:last-child {
    border: 1px solid #d8d8de;
    vertical-align: top;
}