/* ==========================================================================
   GFOW Labour Law — front-end (scoped to .gfow-ll)
   Bilingual AR (RTL) / EN (LTR). Logical properties used for direction safety.
   ========================================================================== */

.gfow-ll {
    --gf-green: #0a6b53;
    --gf-green-dark: #075341;
    --gf-green-700: #064a3a;
    /* Categories (topic chips + accordion headers) use the blue accent. */
    --gf-blue: #064c74;
    --gf-blue-dark: #04395a;
    --gf-gold: #b88a2e;
    --gf-ink: #1c2b27;
    --gf-muted: #5e706a;
    --gf-line: #e2e8e5;
    --gf-bg: #f5f8f6;
    --gf-card: #ffffff;
    --gf-radius: 12px;
    --gf-shadow: 0 1px 2px rgba(7, 83, 65, .06), 0 8px 24px rgba(7, 83, 65, .06);

    box-sizing: border-box;
    max-width: 1040px;
    margin-inline: auto;
    color: var(--gf-ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.7;
}
.gfow-ll[dir="rtl"] {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
.gfow-ll *,
.gfow-ll *::before,
.gfow-ll *::after { box-sizing: border-box; }

/* ---------- Direction ----------
   The dir attribute alone sets `direction`, but not `text-align`: an RTL theme
   (body/.rtl { text-align: right }) keeps bleeding right-alignment into the
   English view because text-align inherits straight through. Pin direction and
   re-assert logical `start` alignment on the text-bearing elements so English
   reads LTR/left no matter what the surrounding theme does. `unicode-bidi:
   isolate` stops our run from being reordered by the RTL page around it. */
.gfow-ll[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.gfow-ll[dir="rtl"] { direction: rtl; unicode-bidi: isolate; }

.gfow-ll[dir],
.gfow-ll[dir] p,
.gfow-ll[dir] li,
.gfow-ll[dir] span,
.gfow-ll[dir] div,
.gfow-ll[dir] section,
.gfow-ll[dir] article,
.gfow-ll[dir] nav,
.gfow-ll[dir] header,
.gfow-ll[dir] a,
.gfow-ll[dir] button,
.gfow-ll[dir] input,
.gfow-ll[dir] h1, .gfow-ll[dir] h2, .gfow-ll[dir] h3,
.gfow-ll[dir] h4, .gfow-ll[dir] h5, .gfow-ll[dir] h6,
.gfow-ll[dir] ul, .gfow-ll[dir] ol, .gfow-ll[dir] table {
    text-align: start;
}
/* Blocks that are deliberately centred, restated above the rule set. */
.gfow-ll[dir] .gfow-ll__empty { text-align: center; }

/* ---------- Toolbar ---------- */
.gfow-ll__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.gfow-ll__search {
    position: relative;
    flex: 1 1 360px;
    min-width: 260px;
}
.gfow-ll__search-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gf-green);
    pointer-events: none;
    display: inline-flex;
}
.gfow-ll__search input[type="search"] {
    width: 100%;
    padding: 13px 16px;
    padding-inline-start: 44px;
    border: 1.5px solid var(--gf-line);
    border-radius: 999px;
    font-size: 15px;
    background: var(--gf-card);
    color: var(--gf-ink);
    transition: border-color .15s, box-shadow .15s;
}
.gfow-ll__search input[type="search"]:focus {
    outline: none;
    border-color: var(--gf-green);
    box-shadow: 0 0 0 4px rgba(10, 107, 83, .12);
}

/* Autocomplete dropdown */
.gfow-ll__ac {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 8px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--gf-card);
    border: 1px solid var(--gf-line);
    border-radius: var(--gf-radius);
    box-shadow: var(--gf-shadow);
    max-height: 360px;
    overflow-y: auto;
}
.gfow-ll__ac li {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gfow-ll__ac li:hover,
.gfow-ll__ac li.is-active {
    background: var(--gf-bg);
}
.gfow-ll__ac .ac-title { font-weight: 600; color: var(--gf-green-dark); }
.gfow-ll__ac .ac-meta { font-size: 12.5px; color: var(--gf-muted); }
.gfow-ll__ac .ac-meta b { color: var(--gf-gold); font-weight: 600; }
.gfow-ll__ac mark { background: #fff1c2; color: inherit; padding: 0 1px; border-radius: 3px; }
.gfow-ll__ac .ac-empty { color: var(--gf-muted); cursor: default; }
.gfow-ll__ac .ac-empty:hover { background: transparent; }

.gfow-ll__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gfow-ll__toggle-all {
    background: transparent;
    border: 1.5px solid var(--gf-line);
    color: var(--gf-green-dark);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.gfow-ll__toggle-all:hover { background: var(--gf-bg); border-color: var(--gf-green); }
.gfow-ll__lang {
    background: var(--gf-green);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.gfow-ll__lang:hover { background: var(--gf-green-dark); }

/* ---------- Topic chips ---------- */
.gfow-ll__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gf-line);
}
.gfow-ll__chip {
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gf-muted);
    background: var(--gf-card);
    border: 1px solid var(--gf-line);
    padding: 7px 15px;
    border-radius: 999px;
    transition: all .15s;
}
.gfow-ll__chip:hover { color: var(--gf-blue-dark); border-color: var(--gf-blue); }
.gfow-ll__chip.is-active {
    background: var(--gf-blue);
    border-color: var(--gf-blue);
    color: #fff;
}

.gfow-ll__resultnote {
    margin: 0 0 18px;
    color: var(--gf-muted);
    font-size: 14px;
}
.gfow-ll__resultnote a {
    color: var(--gf-green);
    text-decoration: none;
    margin-inline-start: 6px;
    font-weight: 700;
}

/* ---------- Topic accordion ---------- */
.gfow-ll__topic {
    background: var(--gf-card);
    border: 1px solid var(--gf-line);
    border-radius: var(--gf-radius);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--gf-shadow);
}
.gfow-ll__topic-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: start;
    font: inherit;
    border-inline-start: 4px solid var(--gf-blue);
}
.gfow-ll__topic-head:hover { background: var(--gf-bg); }
.gfow-ll__topic-title {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: var(--gf-blue-dark);
}
.gfow-ll__count {
    font-size: 12.5px;
    color: var(--gf-muted);
    background: var(--gf-bg);
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.gfow-ll__caret {
    width: 11px; height: 11px;
    border-inline-end: 2px solid var(--gf-muted);
    border-bottom: 2px solid var(--gf-muted);
    transform: rotate(45deg);
    transition: transform .2s;
    flex: 0 0 auto;
}
.gfow-ll__topic.is-open .gfow-ll__caret { transform: rotate(-135deg); }

.gfow-ll__topic-body {
    display: none;
    padding: 4px 22px 8px;
}
.gfow-ll__topic.is-open .gfow-ll__topic-body { display: block; }
.gfow-ll__topic.is-hidden { display: none; }

/* ---------- Article ---------- */
.gfow-ll__article {
    padding: 18px 0;
    border-top: 1px solid var(--gf-line);
    scroll-margin-top: 90px; /* keep clear of sticky theme headers when scrolled to */
}
.gfow-ll__topic-body .gfow-ll__article:first-child { border-top: 0; }

/* Article a search result points to */
.gfow-ll__article.is-target {
    animation: gfow-ll-flash 2.4s ease;
    border-radius: 8px;
}
.gfow-ll__article.is-target .gfow-ll__article-title { color: var(--gf-green-dark); }
@keyframes gfow-ll-flash {
    0%, 30% { background: #fff6d8; }
    100%    { background: transparent; }
}
.gfow-ll__article-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 4px 0;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: start;
    color: inherit;
}
button.gfow-ll__article-head { cursor: pointer; }
button.gfow-ll__article-head:hover .gfow-ll__article-title { color: var(--gf-green-dark); }

/* ---------- Defensive: neutralise theme button chrome ----------
   Themes often style [type=button]/[type=submit] (e.g. a pink #c36 border and
   text). Those selectors tie with a single class, so the theme can win on load
   order and bleed a coloured border/text into our header buttons. Scoping under
   .gfow-ll raises specificity so our styling always wins. */
.gfow-ll button.gfow-ll__topic-head,
.gfow-ll button.gfow-ll__article-head {
    border: 0;
    background: transparent;
    color: var(--gf-ink);
    box-shadow: none;
    border-radius: 0;
    text-transform: none;
    letter-spacing: normal;
}
.gfow-ll button.gfow-ll__topic-head { border-inline-start: 4px solid var(--gf-blue); }
.gfow-ll button.gfow-ll__topic-head:hover { background: var(--gf-bg); }

.gfow-ll button.gfow-ll__toggle-all {
    border: 1.5px solid var(--gf-line);
    background: transparent;
    color: var(--gf-green-dark);
    box-shadow: none;
}
.gfow-ll button.gfow-ll__print {
    border: 1px solid var(--gf-line);
    background: #fff;
    color: var(--gf-green-dark);
    box-shadow: none;
}
.gfow-ll__num {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gf-green-dark);
    background: #eef4f1;
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.gfow-ll__article-title {
    flex: 1;
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--gf-ink);
    transition: color .15s;
}
/* Per-article expand caret */
.gfow-ll__article-caret {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-inline-end: 2px solid var(--gf-muted);
    border-bottom: 2px solid var(--gf-muted);
    transform: rotate(45deg);
    transition: transform .2s;
}
.gfow-ll__article.is-open .gfow-ll__article-caret { transform: rotate(-135deg); }

/* Collapsible article panel */
.gfow-ll__article-panel {
    display: none;
    padding-top: 10px;
}
.gfow-ll__article.is-open .gfow-ll__article-panel { display: block; }
/* The single-article view shows its content without a toggle. */
.gfow-ll__article--full .gfow-ll__article-panel { display: block; }
.gfow-ll__article-body {
    color: #3a4a45;
    font-size: 15px;
}
.gfow-ll__article-body p { margin: 0 0 .7em; }

/* Action row beneath an article */
.gfow-ll__article-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.gfow-ll__pdf,
.gfow-ll__print {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--gf-line);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.gfow-ll__pdf {
    background: #eef4f1;
    color: var(--gf-green-dark) !important;
    text-decoration: none;
}
.gfow-ll__pdf:hover { background: #e3ece8; border-color: var(--gf-green); }

.gfow-ll__print {
    background: #fff;
    color: var(--gf-green-dark);
    cursor: pointer;
}
.gfow-ll__print:hover { background: var(--gf-bg); border-color: var(--gf-green); }

/* ---------- Single view ---------- */
.gfow-ll__crumb { font-size: 13.5px; margin-bottom: 16px; }
.gfow-ll__crumb a { color: var(--gf-green); text-decoration: none; }
.gfow-ll__crumb span { color: var(--gf-muted); margin-inline: 6px; }
.gfow-ll__article--full {
    background: var(--gf-card);
    border: 1px solid var(--gf-line);
    border-radius: var(--gf-radius);
    padding: 28px 30px;
    box-shadow: var(--gf-shadow);
}
.gfow-ll__article--full .gfow-ll__article-title { font-size: 22px; }

.gfow-ll__empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--gf-muted);
    background: var(--gf-card);
    border: 1px dashed var(--gf-line);
    border-radius: var(--gf-radius);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .gfow-ll__bar { flex-direction: column; align-items: stretch; }
    .gfow-ll__actions { justify-content: space-between; }
    .gfow-ll__topic-head { padding: 15px 16px; }
    .gfow-ll__topic-body { padding-inline: 16px; }
    .gfow-ll__article-title { font-size: 15.5px; }
}