/* ==========================================================================
   Group Hunt
   Mobile-first, 320px up. Layout uses logical properties (inline-start,
   margin-inline, padding-block) rather than left/right so the Arabic build
   mirrors correctly without a second stylesheet.
   ========================================================================== */

:root {
    --green:        #12855a;
    --green-dark:   #0e6a48;
    --green-soft:   #e7f5ee;
    --blue:         #1a6fb5;
    --blue-soft:    #e8f1f9;
    --ink:          #16241d;
    --ink-soft:     #5b6b63;
    --line:         #dde5e1;
    --bg:           #ffffff;
    --card:         #ffffff;
    --amber-soft:   #fdf3e2;
    --amber-line:   #e5b95f;
    --red:          #b3261e;
    --red-soft:     #fdecea;
    /* A faint fill for the few blocks that need to read as inset — the search
       field, the report form, the legal footnotes. On a white page background
       these would otherwise vanish into it, so they get their own token rather
       than borrowing --bg. */
    --tint:         #f4f7f5;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 1px 2px rgba(16, 40, 30, .06), 0 4px 14px rgba(16, 40, 30, .05);
    --wrap:         1140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* No horizontal scrollbar at any width: nothing in the layout is allowed
       to be wider than the viewport. */
    overflow-x: hidden;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 16px;
}

.muted { color: var(--ink-soft); font-size: .92rem; }
.dot   { color: var(--ink-soft); margin-inline: .35em; }

/* --- Focus and skip link ------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 8px;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; color: #fff; }

/*  Off-screen utilities use a clip rectangle, never `left: -9999px`.
    Under dir="rtl" a large negative left offset does not hide anything — it
    pushes the element thousands of pixels the *wrong* way and gives the page a
    horizontal scrollbar reaching out into empty space. */
.sr-only, .hp {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
    background: var(--card);
    border-block-end: 1px solid var(--line);
    padding-block: 12px 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.15rem;
    margin-inline-end: auto;
}
.brand__logo { height: 34px; width: auto; }
.brand__name { letter-spacing: -.02em; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.site-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 500;
}
.site-nav a:hover { background: var(--green-soft); color: var(--green-dark); }
.site-nav__cta {
    background: var(--green);
    color: #fff !important;
}
.site-nav__cta:hover { background: var(--green-dark); color: #fff !important; }

.langpick { position: relative; }
.langpick > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    font-weight: 600;
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick__list {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 30;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.langpick__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
}
.langpick__list a:hover { background: var(--green-soft); }
.langpick__list a[aria-current] { font-weight: 700; color: var(--green-dark); }

.searchbar { padding-block: 12px; }
.searchbar form { display: flex; gap: 8px; }
.searchbar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--tint);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--green);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.btn:hover { background: var(--green-dark); color: #fff; }
.btn--lg  { padding: 14px 26px; font-size: 1.05rem; }
.btn--sm  { padding: 8px 14px; font-size: .88rem; }
.btn--channel { background: var(--blue); }
.btn--channel:hover { background: #145a92; }
.btn--outline {
    background: transparent;
    color: var(--green-dark);
    border-color: var(--green);
}
.btn--outline:hover { background: var(--green-soft); color: var(--green-dark); }
.btn--ghost {
    background: transparent;
    color: var(--ink-soft);
    border-color: var(--line);
}
.btn--ghost:hover { background: var(--tint); color: var(--ink); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
    padding-block: 32px 24px;
    text-align: center;
}
.hero h1 { margin-bottom: .3em; }
.hero__sub {
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 60ch;
    margin-inline: auto;
}

/* --- Filters ------------------------------------------------------------- */

.filters {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    margin-block-end: 24px;
}
.filters__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.filters__actions { display: flex; gap: 8px; align-items: flex-end; }

.field { display: block; }
.field__label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-block-end: 4px;
}
.field__help {
    display: block;
    font-size: .82rem;
    color: var(--ink-soft);
    margin-block-start: 4px;
}
.field select,
.field input,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: var(--card);
    color: var(--ink);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr; }

/* --- Sections and grid --------------------------------------------------- */

.section { margin-block: 32px; }
.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 14px;
}
.section__head h2 { margin: 0; }

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card__media { flex: 0 0 auto; }
.card__media img,
.card__initial {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--green-soft);
}
.card__initial {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}
.card__initial--lg { width: 96px; height: 96px; font-size: 2.4rem; }

.card__body { min-width: 0; flex: 1 1 auto; }
.card__title { margin: 0 0 4px; font-size: 1.02rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--green-dark); text-decoration: underline; }
.card__meta {
    margin: 0 0 6px;
    font-size: .84rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.card__desc {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}
.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.card__stat { font-size: .82rem; color: var(--ink-soft); }

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge--group   { background: var(--green-soft); color: var(--green-dark); }
.badge--channel { background: var(--blue-soft);  color: var(--blue); }

/* --- Category tiles ------------------------------------------------------ */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.tile {
    display: block;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.tile:hover { border-color: var(--green); transform: translateY(-2px); color: var(--ink); }
.tile__name  { display: block; font-weight: 700; margin-block-end: 2px; }
.tile__count { display: block; font-size: .82rem; color: var(--ink-soft); }

/* --- Pagination ---------------------------------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin-block: 28px;
}
.pager__link {
    display: inline-block;
    min-width: 40px;
    padding: 9px 12px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
}
.pager__link:hover { border-color: var(--green); color: var(--green-dark); }
.pager__link.is-current {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 700;
}
.pager__gap { color: var(--ink-soft); padding-inline: 4px; }

/* --- Breadcrumbs, page heads -------------------------------------------- */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: .86rem;
    color: var(--ink-soft);
    padding-block: 16px 0;
}
.crumbs a { color: var(--ink-soft); }

.pagehead { padding-block: 16px 8px; }
.pagehead__intro { max-width: 70ch; color: var(--ink-soft); }

/* --- Alerts, notices, empty states -------------------------------------- */

.alert {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    margin-block: 16px;
}
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert ul { margin: .5em 0 0; padding-inline-start: 1.2em; }
.alert--ok    { background: var(--green-soft); border-color: #b7ddc8; }
.alert--error { background: var(--red-soft);   border-color: #f0b7b3; color: #7d1a15; }
.alert--info  { background: var(--blue-soft);  border-color: #bcd8ee; }

.notice {
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border-inline-start: 4px solid var(--amber-line);
    background: var(--amber-soft);
    font-size: .93rem;
    margin-block: 18px;
}
.notice--info {
    border-inline-start-color: var(--blue);
    background: var(--blue-soft);
}

.empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty--page { border-style: solid; padding-block: 60px; }

/* --- Listing detail ------------------------------------------------------ */

.listing {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 16px;
    margin-block: 12px 24px;
    box-shadow: var(--shadow);
}
.listing__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.listing__avatar img {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
}
.listing__intro { min-width: 0; flex: 1 1 240px; }
.listing__intro h1 { margin-block: 6px 4px; overflow-wrap: anywhere; }
.listing__cta { margin-block: 18px; }
.listing__cta .btn { width: 100%; }
.listing__section { margin-block-start: 28px; }
.listing__desc { overflow-wrap: anywhere; }

.facts {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
.facts th, .facts td {
    text-align: start;
    padding: 9px 10px;
    border-block-end: 1px solid var(--line);
    vertical-align: top;
}
.facts th { width: 38%; color: var(--ink-soft); font-weight: 600; }

.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}
.share__btn:hover { border-color: var(--green); color: var(--green-dark); }

.report > summary {
    cursor: pointer;
    padding: 10px 0;
    font-size: .92rem;
    color: var(--ink-soft);
}
.report__form {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--tint);
    display: grid;
    gap: 12px;
}

/* --- Forms and split layout --------------------------------------------- */

.layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-block: 20px 40px;
}
.form {
    display: grid;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 16px;
}
.sidebar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 16px;
    align-self: start;
}
.sidebar h2 { font-size: 1.05rem; }
.rules { padding-inline-start: 1.1em; margin-block: 0 1em; }
.rules li { margin-block-end: .55em; font-size: .92rem; }

/* --- Prose / legal ------------------------------------------------------- */

.prose {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 18px;
    margin-block: 16px 40px;
}
.prose h2 { margin-block-start: 1.6em; }
.prose h3 { margin-block-start: 1.3em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-block-end: .4em; }
.prose > *:first-child { margin-block-start: 0; }
.legal { max-width: 78ch; }
.legal .lede { font-size: 1.05rem; }
.legal__note {
    font-size: .88rem;
    color: var(--ink-soft);
    background: var(--tint);
    border-inline-start: 3px solid var(--line);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}
.prose table { display: block; overflow-x: auto; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    background: var(--card);
    border-block-start: 1px solid var(--line);
    padding-block: 32px 20px;
    margin-block-start: 40px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.site-footer__head { font-size: .95rem; margin-block-end: .6em; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-block-end: .4em; }
.site-footer__col a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.site-footer__col a:hover { color: var(--green-dark); text-decoration: underline; }
.site-footer__base {
    margin-block-start: 26px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--line);
}
.disclaimer { font-size: .84rem; color: var(--ink-soft); max-width: 80ch; }

/* --- Floating chat button ------------------------------------------------ */

.chatfab {
    position: fixed;
    inset-block-end: 18px;
    inset-inline-end: 18px;
    z-index: 40;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16, 40, 30, .25);
}
.chatfab:hover { background: var(--green-dark); color: #fff; }

/* --- Ad slots ------------------------------------------------------------ */

/* Only ever rendered when the admin has configured something. There is no
   empty-state styling here because there is no empty state. */
.adslot {
    margin-block: 20px;
    text-align: center;
    overflow: hidden;
}

/* --- Sponsor panel ------------------------------------------------------- */

.gate { background: var(--tint); }
.gate__wrap { padding-block: 48px; display: grid; place-items: center; min-height: 60vh; }

.sponsor-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 20px;
    max-width: 480px;
    width: 100%;
    text-align: center;
}
.sponsor-panel__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-block-end: .5em;
}
.sponsor-panel__title { font-size: 1.25rem; margin-block-end: .4em; }
.sponsor-panel__text { color: var(--ink-soft); font-size: .94rem; }
.sponsor-panel hr {
    border: 0;
    border-block-start: 1px solid var(--line);
    margin-block: 20px;
}
.sponsor-panel__continue .btn { width: 100%; }

/* Overlay used by the browser-side counting mode. */
.sponsor-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(16, 36, 29, .55);
}
.sponsor-overlay__close {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.sponsor-overlay .sponsor-panel { position: relative; }

/* --- Breakpoints --------------------------------------------------------- */

@media (min-width: 560px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .field-row { grid-template-columns: repeat(3, 1fr); }
    .listing { padding: 26px 24px; }
    .listing__cta .btn { width: auto; min-width: 260px; }
    .prose { padding: 32px 28px; }
    .form, .sidebar { padding: 24px; }
}

@media (min-width: 800px) {
    /* Two controls now — category and sort — so they share the row and the
       actions column collapses to nothing when there is nothing to clear. */
    .filters__row { grid-template-columns: 1fr 1fr auto; align-items: end; }
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
    .layout-split { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
}

@media (min-width: 1000px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .filters__row { grid-template-columns: minmax(0, 320px) minmax(0, 320px) auto; }
}

/* --- Colour scheme -------------------------------------------------------
   The site is white, for everybody. There is deliberately no
   `prefers-color-scheme: dark` block: a dark override would repaint the
   background for every visitor whose device is set to dark mode, which is most
   phones in the evening, and the page would not be white for them.

   Telling the browser we are light-only also stops it auto-darkening form
   controls and scrollbars, which is what leaves a "white" page with grey
   dropdowns. */
:root { color-scheme: light; }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .site-header, .site-footer, .chatfab, .filters, .pager, .adslot, .share { display: none; }
    body { background: #fff; }
    .listing, .prose { border: 0; box-shadow: none; }
}