/* ==========================================================================
   Trekking Peaks Permit — the one permit page that is really a dataset.
   Thirty-odd peaks, each priced by season and by climber, so the page is
   built for looking things up: search, filters, a two-level table and a
   detail drawer. Colours, type and spacing come from the site's own tokens;
   nothing here is a framework component.
   ========================================================================== */

.permit-page {
    /* Both are measured by the script; these are sensible starting values so
       nothing jumps before it runs. The site's own header is sticky, so
       everything else on this page stacks below it. */
    --site-head-h: 70px;
    --pp-nav-h: 58px;
    --pp-stick: calc(var(--site-head-h) + var(--pp-nav-h));
    --pp-line: #e4eae4;
    --pp-tint: #f7faf7;
    --pp-muted: #5b6b5e;
    --spring: #3f8f4a;
    --autumn: #c07b1e;
    --winter: #4a7290;
    --summer: #a9682c;
    background: var(--snow-2, #f4f7f4);
}

/* ---------- Hero ---------- */
/* The same banner as every other page on the site: the photograph, the green
   wash over it, the trail and the title. It had a drawn ridge along the foot
   and the figures tucked up into it; both were doing the page no favours. */
.permit-hero {
    position: relative;
    padding-block: clamp(4.5rem, 11vw, 8rem) clamp(3.5rem, 8vw, 6rem);
    background-size: cover;
    background-position: center 40%;
    color: var(--snow);
    overflow: clip;
}

.permit-hero .shell {
    position: relative;
    z-index: 1;
}

.permit-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .9rem;
    font-family: var(--ff-mono);
    font-size: .74rem;
    letter-spacing: .02em;
    color: #cfdce7;
}

.permit-crumbs a { color: #cfdce7; text-decoration: none; }

.permit-crumbs a:hover { color: var(--marigold); }
.permit-crumbs .sep { opacity: .45; }
.permit-crumbs .is-current { color: var(--marigold); }

.permit-eyebrow {
    display: inline-flex;
    margin-top: .4rem;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--marigold);
    margin-bottom: .5rem;
}

.permit-hero h1 {
    font-family: var(--ff-display);
    font-weight: 660;
    font-size: clamp(2rem, 4.6vw, 3rem);
    line-height: 1.05;
    margin: 0 0 .7rem;
    max-width: 18ch;
}

.permit-hero p {
    max-width: 56ch;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #dbe6dd;
}

/* ---------- Statistics ---------- */
.permit-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Two figures fill the row as readily as three: not every permit has a
   season to count. */
@media (min-width: 720px) {
    .permit-stats { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.permit-stat {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.3rem;
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 30, 12, .05);
}

.permit-stat i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--pp-tint);
    color: var(--ink);
    font-size: 1.05rem;
}

.permit-stat b {
    display: block;
    font-family: var(--ff-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    letter-spacing: -.01em;
}

.permit-stat span {
    display: block;
    margin-top: .3rem;
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pp-muted);
}

/* ---------- Sticky section nav ---------- */
.permit-nav {
    position: sticky;
    top: var(--site-head-h);
    z-index: 30;
    margin-top: clamp(2rem, 4vw, 3rem);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-block: 1px solid var(--pp-line);
}

.permit-nav ul {
    display: flex;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.permit-nav ul::-webkit-scrollbar { display: none; }

.permit-nav a {
    display: block;
    padding: 1.05rem .95rem;
    white-space: nowrap;
    font-size: .92rem;
    color: var(--pp-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.permit-nav a:hover { color: var(--text); }

.permit-nav a.is-current {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--marigold);
}

/* ---------- Sections ---------- */
.permit-block {
    padding-block: clamp(2.6rem, 5vw, 4rem);
    /* Anchors clear the sticky bar when jumped to. */
    scroll-margin-top: calc(var(--pp-stick) + 12px);
}

.permit-block + .permit-block { border-top: 1px solid var(--pp-line); }

.permit-block-head { margin-bottom: 1.6rem; }

.permit-block-head h2 {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .4rem;
}

.permit-block-head p {
    margin: 0;
    max-width: 62ch;
    color: var(--pp-muted);
    line-height: 1.65;
}

/* ---------- Toolbar ---------- */
.permit-toolbar {
    display: grid;
    gap: .7rem;
    grid-template-columns: 1fr;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
}

@media (min-width: 860px) {
    .permit-toolbar {
        grid-auto-flow: column;
        grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(130px, 1fr)) auto;
        align-items: center;
    }
}

.permit-search {
    position: relative;
    display: block;
}

.permit-search i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pp-muted);
    font-size: .9rem;
    pointer-events: none;
}

.permit-search input,
.permit-toolbar select {
    width: 100%;
    padding: .62rem .9rem;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 9px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.permit-search input { padding-left: 2.3rem; }

.permit-search input:focus,
.permit-toolbar select:focus {
    outline: 0;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(2, 137, 41, .12);
}

.permit-toolbar select {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6b5e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 11px;
}

.permit-print {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1rem;
    font: inherit;
    font-size: .88rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}

.permit-print:hover { border-color: var(--marigold); color: var(--ink); }

/* ---------- Table ---------- */
/* No overflow here: a scroll container of its own would make the sticky
   header stick to the top of *this* box rather than to the page, which pins
   it over the first row instead of under the section nav. The stacked card
   layout takes over before the table runs out of room. */
.permit-datatable-wrap {
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 0 0 14px 14px;
}

.permit-datatable {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

/* Both header rows stay in view under the section nav. They cannot share one
   offset — that would stack the season row on top of the grouped heading — so
   the second row is pushed down by the height of the first, which the script
   measures and writes into --pp-head-h. */
.permit-datatable thead th {
    position: sticky;
    top: var(--pp-stick);
    z-index: 5;
    background: var(--ink);
    color: var(--snow);
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    padding: .7rem 1rem;
    white-space: nowrap;
}

.permit-datatable thead tr:first-child th { padding-top: .85rem; }

.permit-datatable thead tr:last-child th {
    top: calc(var(--pp-stick) + var(--pp-head-h, 36px));
}

/* A cell spanning both rows sticks with the first, and its text sits at the
   top of the block rather than floating in the middle of two rows. */
.permit-datatable thead th[rowspan] { vertical-align: bottom; }

/* The grouped heading is the point of the two-level head, so it is centred
   over its four columns and separated from them by a hairline. */
.permit-span-head {
    text-align: center !important;
    letter-spacing: .1em;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.permit-datatable .season { text-align: right; }

.permit-datatable .season span {
    display: inline-block;
    padding-top: 3px;
    border-top: 2px solid currentColor;
}

.permit-datatable .season small {
    display: block;
    font-size: .6rem;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .8;
}

.season--spring span { color: #8fd39a; }
.season--autumn span { color: #f0c070; }
.season--winter span { color: #9fc6e0; }
.season--summer span { color: #f2b57e; }

.permit-datatable tbody th,
.permit-datatable tbody td {
    padding: .85rem 1rem;
    border-top: 1px solid var(--pp-line);
    vertical-align: middle;
    text-align: left;
}

.permit-datatable tbody tr:hover { background: var(--pp-tint); }

.permit-row-name {
    padding: 0;
    font: inherit;
    font-family: var(--ff-display);
    font-size: .98rem;
    font-weight: 700;
    color: var(--text);
    background: none;
    border: 0;
    border-bottom: 1px dotted var(--line-light);
    text-align: left;
    cursor: pointer;
}

.permit-row-name:hover { color: var(--ink); border-bottom-color: var(--ink); }

.permit-row-name:focus-visible {
    outline: 2px solid var(--marigold);
    outline-offset: 3px;
}

.permit-row-sub {
    color: var(--pp-muted);
    font-size: .92rem;
}

.permit-row-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--stone-d);
    font-size: .92rem;
    white-space: nowrap;
}

.permit-cell-fee {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.permit-cell-fee.is-none { color: var(--pp-muted); font-weight: 400; }

/* Added by the script for the stacked layout; a wide table has no column
   for it. */
.permit-row-open-cell { display: none; }

.permit-row-open,
.permit-row-meta { display: none; }

.permit-empty {
    margin: 0;
    padding: 2.2rem 1rem;
    text-align: center;
    color: var(--pp-muted);
}

.permit-count {
    margin: .7rem 0 0;
    font-family: var(--ff-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pp-muted);
}

/* ---------- Free peaks / prose blocks ---------- */
.permit-block-card {
    background: #fff;
    border: 1px solid var(--pp-line);
    border-radius: 14px;
    padding: clamp(1.2rem, 3vw, 1.8rem);
}

.permit-block-card + .permit-block-card { margin-top: 1.1rem; }

.permit-block-card h3 {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .8rem;
}

.permit-callout {
    display: flex;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    background: #fffaf0;
    border: 1px solid #f0dcb4;
    border-left: 3px solid var(--marigold);
    border-radius: 14px;
    color: #4a3b1c;
}

.permit-callout i { font-size: 1.15rem; color: var(--marigold-d, #b06c12); }
.permit-callout h3 { margin: 0 0 .5rem; font-family: var(--ff-display); font-size: 1.02rem; color: #3d3116; }
.permit-callout p { margin: 0 0 .6rem; line-height: 1.65; font-size: .95rem; }
.permit-callout p:last-child { margin-bottom: 0; }

/* ---------- Detail drawer ---------- */
/* Above the site header, which is sticky at 1030 — otherwise it paints over
   the drawer's own title. */
.permit-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(6, 22, 12, .45);
    opacity: 0;
    transition: opacity .25s var(--ease);
}

.permit-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(420px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -18px 0 46px rgba(0, 20, 8, .18);
    transform: translateX(100%);
    transition: transform .28s var(--ease);
}

.permit-drawer-backdrop[hidden],
.permit-drawer[hidden] { display: none; }

.permit-drawer.is-open { transform: none; }
.permit-drawer-backdrop.is-open { opacity: 1; }

.permit-drawer-head {
    padding: 1.5rem 1.6rem 1.3rem;
    background: var(--ink);
    color: var(--snow);
}

.permit-drawer-head .legend {
    font-family: var(--ff-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--marigold);
}

.permit-drawer-head h2 {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: .4rem 0 .5rem;
    line-height: 1.15;
}

.permit-drawer-head p {
    margin: 0;
    font-size: .92rem;
    color: #cfe0d3;
}

.permit-drawer-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--snow);
    cursor: pointer;
}

.permit-drawer-close:hover { background: rgba(255, 255, 255, .26); }

.permit-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.6rem;
}

.permit-drawer-body h3 {
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--marigold-d, #b06c12);
    margin: 0 0 .8rem;
}

.permit-drawer-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

.permit-drawer-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--pp-line);
}

.permit-drawer-list li:last-child { border-bottom: 0; }

.permit-drawer-list dt,
.permit-drawer-list .season-name {
    color: var(--pp-muted);
    font-size: .93rem;
}

.permit-drawer-list .amount {
    font-family: var(--ff-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.permit-drawer-foot {
    padding: 1.1rem 1.6rem 1.5rem;
    border-top: 1px solid var(--pp-line);
}

/* ---------- Mobile: rows become cards ---------- */
@media (max-width: 780px) {
    .permit-datatable-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .permit-datatable {
        min-width: 0;
        display: block;
    }

    .permit-datatable thead { display: none; }
    .permit-datatable tbody { display: block; }

    .permit-datatable tbody tr {
        display: block;
        margin-bottom: .9rem;
        padding: 1rem 1.1rem;
        background: #fff;
        border: 1px solid var(--pp-line);
        border-radius: 14px;
    }

    .permit-datatable tbody tr:hover { background: #fff; }

    .permit-datatable tbody th,
    .permit-datatable tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .35rem 0;
        border: 0;
    }

    /* Name, then range and height under it, then one line per season. */
    .permit-datatable tbody th[scope="row"] {
        display: block;
        padding-bottom: .1rem;
    }

    .permit-row-name { font-size: 1.06rem; border-bottom: 0; }

    .permit-row-meta {
        display: block;
        margin-top: .15rem;
        color: var(--pp-muted);
        font-size: .86rem;
    }

    .permit-row-sub,
    .permit-row-num { display: none !important; }

    .permit-cell-fee::before {
        content: attr(data-label);
        font-family: var(--ff-mono);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--pp-muted);
        font-weight: 400;
    }

    .permit-cell-fee { padding: .3rem 0; }

    .permit-row-open-cell {
        display: block;
        padding-top: .6rem !important;
        border-top: 1px solid var(--pp-line) !important;
        margin-top: .5rem;
    }

    .permit-row-open {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        font-family: var(--ff-mono);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink);
        cursor: pointer;
    }

    .permit-toolbar {
        border-radius: 14px;
        border-bottom: 1px solid var(--pp-line);
        margin-bottom: 1rem;
    }
}

/* ---------- Print ---------- */
@media print {
    .permit-hero,
    .permit-nav,
    .permit-toolbar,
    .permit-stats,
    .permit-drawer,
    .permit-drawer-backdrop,
    header,
    footer,
    .tims-apply-section { display: none !important; }

    .permit-datatable-wrap { border: 0; overflow: visible; }
    .permit-datatable { min-width: 0; }

    .permit-datatable thead th {
        position: static;
        background: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #000;
    }

    .permit-datatable tbody tr[hidden] { display: none; }
    .permit-block { padding-block: 0 1.5rem; }
}

/* ---------- Shared across every permit ----------
   The design above began as the trekking-peaks page; these are the pieces the
   other permits need, where their data is shaped differently. */

/* What holds for a whole table — "Nepali climber" — said once above it. */
.permit-caption {
    margin: .9rem 0 -.3rem;
    font-family: var(--ff-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--marigold-d, #b06c12);
}

/* Some tables carry a remark per row: a condition, a concession, an address.
   It is prose, so it wraps, and it is quieter than the figures. */
.permit-row-note {
    color: var(--pp-muted);
    font-size: .88rem;
    line-height: 1.5;
    min-width: 18ch;
}

/* The name is what the table is looked up by, so it keeps a readable share
   of the width rather than whatever the figures leave over. */
.permit-datatable .col-note { width: 20%; }
.permit-datatable .col-name { width: 22%; min-width: 16ch; }

/* A fee cell holding a condition rather than an amount is a sentence. */
.permit-cell-fee.is-text {
    white-space: normal;
    text-align: left;
    font-weight: 400;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--pp-muted);
    min-width: 16ch;
}

.permit-drawer-note {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--pp-line);
    color: var(--pp-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.permit-drawer-note[hidden] { display: none; }

/* Sections that are not a table keep their own partial, which draws its own
   card; the block around it adds only the spacing. */
.permit-block > .permit-section {
    margin-bottom: 0;
}

.permit-lede {
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pp-muted);
    max-width: 70ch;
}

@media (max-width: 780px) {
    .permit-row-note { display: none !important; }
}