/* ============================================================
   Help & Info — AdiSom
   Builds on theme tokens from frest/assets/css/style.css
   (--saffron-gold, --ocean-blue, --warm-sand, --evening-slate).

   Category colours follow public-signage convention and appear only
   on pictogram tiles, so the colour always means "which kind of service".
   ============================================================ */

.hi-page {
    --hi-health: #c2412d;
    --hi-money: #2f7d5b;
    --hi-comfort: #2c6e9b;
    --hi-travel: #5b5f7a;
    --hi-line: rgba(4, 4, 6, 0.09);
    --hi-radius: 14px;
    /* Clears the fixed aarti tracker + navbar */
    --hi-sticky-top: 100px;
    --tone: var(--ocean-blue);

    background: var(--warm-sand);
    color: var(--ocean-blue);
}

[data-group="health"] { --tone: var(--hi-health); }
[data-group="money"] { --tone: var(--hi-money); }
[data-group="comfort"] { --tone: var(--hi-comfort); }
[data-group="travel"] { --tone: var(--hi-travel); }

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

.hi-head {
    padding: 140px 0 28px;
}

.hi-breadcrumb {
    font-size: 0.875rem;
    font-weight: 500;
}

.hi-breadcrumb a {
    color: var(--evening-slate);
    text-decoration: none;
}

.hi-breadcrumb a:hover {
    color: var(--ocean-blue);
    text-decoration: underline;
}

.hi-breadcrumb .breadcrumb-item.active {
    color: var(--ocean-blue);
}

.hi-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.hi-lead {
    max-width: 56ch;
    color: var(--evening-slate);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ---- Emergency numbers ------------------------------------- */

.hi-sos-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hi-health);
    margin-bottom: 0.625rem;
}

.hi-sos-title i {
    margin-right: 0.35rem;
}

.hi-sos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.hi-sos-btn {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.75rem 1rem;
    border-radius: var(--hi-radius);
    background: #fff;
    border: 1.5px solid rgba(194, 65, 45, 0.28);
    color: var(--ocean-blue);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hi-sos-btn:hover {
    border-color: var(--hi-health);
    color: var(--ocean-blue);
}

.hi-sos-btn:active {
    background: rgba(194, 65, 45, 0.06);
}

.hi-sos-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hi-health);
    font-variant-numeric: tabular-nums;
}

.hi-sos-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--evening-slate);
}

/* ---- Pictogram tile (the page's signature element) -------- */

.hi-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--tone);
    color: #fff;
    font-size: 1.1rem;
}

.hi-tile--sm {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0.8rem;
}

.hi-tile--all {
    background: var(--ocean-blue);
}

.hi-tile--fill {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 1.6rem;
}

/* ---- Layout ------------------------------------------------- */

.hi-body {
    padding-bottom: 64px;
}

.hi-layout {
    display: block;
}

/* ---- Category rail ----------------------------------------- */

/* Mobile: one sticky row of chips that scrolls sideways. */
.hi-rail {
    position: sticky;
    top: var(--hi-sticky-top);
    z-index: 5;
    margin: 0 -12px 8px;
    padding: 10px 0;
    background: var(--warm-sand);
    border-bottom: 1px solid var(--hi-line);
}

.hi-rail-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hi-rail-scroll::-webkit-scrollbar {
    display: none;
}

/* Groups only exist to label the desktop sidebar. */
.hi-rail-group {
    display: contents;
}

.hi-rail-group-label {
    display: none;
}

.hi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--hi-line);
    background: #fff;
    color: var(--ocean-blue);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hi-chip:hover {
    border-color: rgba(4, 4, 6, 0.25);
}

.hi-chip[aria-pressed="true"] {
    background: var(--ocean-blue);
    border-color: var(--ocean-blue);
    color: #fff;
}

.hi-chip-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--evening-slate);
    font-variant-numeric: tabular-nums;
}

.hi-chip[aria-pressed="true"] .hi-chip-count {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Category sections ------------------------------------- */

.hi-cat {
    padding-top: 24px;
    scroll-margin-top: calc(var(--hi-sticky-top) + 72px);
}

.hi-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.hi-cat-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.hi-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--hi-line);
    border-radius: var(--hi-radius);
    overflow: hidden;
}

.hi-empty {
    margin: 0;
    padding: 16px;
    max-width: 60ch;
    background: #fff;
    border: 1px dashed rgba(4, 4, 6, 0.18);
    border-radius: var(--hi-radius);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--evening-slate);
}

/* ---- Place row ---------------------------------------------- */

.hi-place + .hi-place {
    border-top: 1px solid var(--hi-line);
}

.hi-place-row {
    padding: 12px;
}

.hi-place-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
}

.hi-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

.hi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hi-place-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.hi-place-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.hi-place-area {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--evening-slate);
}

.hi-place-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--evening-slate);
}

.hi-open {
    color: var(--hi-money);
    font-weight: 600;
}

.hi-open::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

/* Temporarily unusable place: a warning pill replaces the hours, and the
   thumbnail fades so the row reads as "not now" before anything is read. */
.hi-closed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff1d6;
    color: #8a4b00;
    font-weight: 600;
}

.hi-facts dd.hi-closed {
    justify-self: start;
}

.hi-place.is-closed .hi-thumb {
    filter: grayscale(1);
    opacity: 0.55;
}

.hi-place.is-closed .hi-place-name {
    color: var(--evening-slate);
}

.hi-dist {
    color: var(--ocean-blue);
    font-weight: 600;
}

.hi-chevron {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--evening-slate);
    transition: transform 0.2s ease;
}

.hi-place.is-open .hi-chevron {
    transform: rotate(180deg);
}

.hi-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-left: 84px; /* lines up under the text, past the thumbnail */
}

.hi-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--hi-line);
    background: #fff;
    color: var(--ocean-blue);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.hi-action:hover {
    border-color: rgba(4, 4, 6, 0.3);
    color: var(--ocean-blue);
}

.hi-action--primary {
    background: var(--saffron-gold);
    border-color: var(--saffron-gold);
    color: var(--ocean-blue);
}

.hi-action--primary:hover {
    background: #f39200;
    border-color: #f39200;
}

/* ---- Expanded detail ---------------------------------------
   Collapsed rows keep their links out of the tab order through
   visibility, and the 0fr → 1fr row animates the height. */

.hi-detail {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}

.hi-place.is-open .hi-detail {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.25s ease, visibility 0s;
}

.hi-detail-inner {
    overflow: hidden;
    min-height: 0;
}

.hi-detail-body {
    padding: 0 12px 16px;
}

.hi-facts {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--warm-sand);
    font-size: 0.875rem;
}

.hi-facts > div {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
}

.hi-facts dt {
    font-weight: 500;
    color: var(--evening-slate);
}

.hi-facts dd {
    margin: 0;
    font-weight: 500;
}

.hi-facts a {
    color: var(--ocean-blue);
    font-weight: 600;
}

.hi-note {
    max-width: 65ch;
    margin: 0 0 12px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--evening-slate);
}

.hi-media {
    display: grid;
    gap: 8px;
}

.hi-photo,
.hi-map {
    width: 100%;
    height: 220px;
    border: 0;
    border-radius: 10px;
    background: var(--warm-sand);
}

.hi-photo {
    object-fit: cover;
}

.hi-footnote {
    margin: 32px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--evening-slate);
}

.hi-footnote a {
    color: var(--ocean-blue);
    font-weight: 600;
}

/* ---- Focus ------------------------------------------------- */

.hi-page a:focus-visible,
.hi-page button:focus-visible {
    outline: 3px solid var(--saffron-gold);
    outline-offset: 2px;
}

/* ---- Tablet and up ----------------------------------------- */

@media (min-width: 576px) {
    .hi-sos-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hi-media--pair {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .hi-thumb {
        width: 88px;
        height: 88px;
    }

    .hi-actions {
        padding-left: 100px;
    }

    .hi-photo,
    .hi-map {
        height: 260px;
    }
}

/* ---- Desktop: rail becomes a sticky sidebar ---------------- */

@media (min-width: 992px) {
    .hi-page {
        --hi-sticky-top: 116px;
    }

    .hi-head {
        padding: 160px 0 36px;
    }

    .hi-title {
        font-size: 2.75rem;
    }

    .hi-layout {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    .hi-rail {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        max-height: calc(100vh - var(--hi-sticky-top) - 16px);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .hi-rail-scroll {
        flex-direction: column;
        gap: 2px;
        overflow: visible;
        padding: 12px 0;
    }

    .hi-rail-group {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hi-rail-group-label {
        display: block;
        margin: 16px 0 4px 10px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--evening-slate);
    }

    .hi-chip {
        width: 100%;
        border-color: transparent;
        background: transparent;
        border-radius: 10px;
    }

    .hi-chip:hover {
        border-color: transparent;
        background: rgba(4, 4, 6, 0.05);
    }

    .hi-chip-count {
        margin-left: auto;
    }

    .hi-place-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
    }

    .hi-place-toggle {
        flex: 1;
        align-items: center;
    }

    .hi-chevron {
        margin-top: 0;
    }

    .hi-actions {
        margin-top: 0;
        padding-left: 0;
        flex-shrink: 0;
    }

    .hi-detail-body {
        padding: 0 16px 20px 120px;
    }
}

/* ---- Reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hi-detail,
    .hi-place.is-open .hi-detail,
    .hi-chevron,
    .hi-chip,
    .hi-sos-btn {
        transition: none;
    }
}