/* Public landing page — GOV.UK start page.
   Chrome (masthead, footers, accessibility modes) comes from gov.css, which
   includes/gov_header.php links. */

.start-wrap { max-width: 720px; margin: 0 auto; }

.start-title {
    font-size: calc(34px * var(--gov-font-scale));
    line-height: 1.2;
    margin: 0 0 22px;
}

/* GOV.UK sets the opening sentence larger than body text — it is the one line
   that tells someone whether they are in the right place. */
.start-lead {
    font-size: calc(21px * var(--gov-font-scale));
    line-height: 1.5;
    margin: 0 0 18px;
}

.start-body {
    font-size: calc(17px * var(--gov-font-scale));
    line-height: 1.7;
    margin: 0 0 20px;
}

.start-h2 {
    font-size: calc(24px * var(--gov-font-scale));
    margin: 38px 0 14px;
}

/* "Inset text" — a bordered aside for something you must know before starting. */
.start-inset {
    border-left: 8px solid #b1b4b6;
    padding: 2px 0 2px 18px;
    margin: 26px 0;
}
.start-inset-title { font-size: calc(18px * var(--gov-font-scale)); margin: 0 0 6px; }
.start-inset p { font-size: calc(16px * var(--gov-font-scale)); line-height: 1.65; margin: 0; color: #383f45; }

/* ── Service list ──────────────────────────────────────────────────── */

.svc-list { list-style: none; margin: 0; padding: 0; }

.svc {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--gov-line);
}
.svc:first-child { border-top: 1px solid var(--gov-line); }


.svc-body { min-width: 0; }

.svc-title { font-size: calc(20px * var(--gov-font-scale)); margin: 0 0 6px; }
.svc-title a { color: var(--gov-blue); text-decoration: underline; }
.svc-title a:hover { color: #002a80; }

.svc-desc {
    font-size: calc(16px * var(--gov-font-scale));
    line-height: 1.6;
    margin: 0 0 8px;
}

.svc-need {
    font-size: calc(15px * var(--gov-font-scale));
    line-height: 1.6;
    color: #383f45;
    margin: 0 0 6px;
}

/* The published turnaround from the Citizen's Charter. Set apart so it reads
   as a service commitment rather than marketing copy. */
.svc-time {
    display: inline-block;
    font-size: calc(14px * var(--gov-font-scale));
    font-weight: 600;
    color: #14532d;
    background: #dcfce7;
    padding: 3px 10px;
    border-radius: 3px;
    margin: 0;
}

/* ── Secondary action ──────────────────────────────────────────────── */

.start-secondary {
    display: inline-block;
    padding: 11px 20px;
    font-size: calc(16px * var(--gov-font-scale));
    font-weight: 700;
    color: #0b0c0c;
    background: #f3f2f1;
    border: 2px solid transparent;
    border-bottom: 3px solid #929191;
    text-decoration: none;
}
.start-secondary:hover { background: #dbdad9; }
.start-secondary:focus { outline: 3px solid #ffdd00; }

.start-staff {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--gov-line);
    font-size: calc(15px * var(--gov-font-scale));
    color: var(--gov-muted);
}
.start-staff a { color: var(--gov-blue); }

@media (max-width: 560px) {
    .start-title { font-size: calc(26px * var(--gov-font-scale)); }
    .start-lead  { font-size: calc(18px * var(--gov-font-scale)); }
    .svc { gap: 12px; }
}

/* ── AVAILABILITY SIDEBAR ───────────────────────────────────────────────
   Lets someone see whether the office has room BEFORE answering six screens
   of questions. Finding out on the last step that nothing is free is the
   online version of the wasted journey this system exists to prevent.

   The wrapper widens only when there is room for a second column. Below that
   it is a single column and the availability sits AFTER the services, which
   is also its order in the markup: on a phone, choosing what you need comes
   before choosing when you can come. */
.start-cols { display: block; }

@media (min-width: 900px) {
    /* The page is 720px elsewhere; it widens here to carry the sidebar without
       squeezing the service list, which is the thing people came for. */
    .start-wrap { max-width: 1040px; }
    .start-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 32px;
        align-items: start;
    }
    /* Sticky so the availability stays visible while reading down a long
       service list — the comparison it exists to support. */
    .avail { position: sticky; top: 20px; }
}

.avail {
    border: 1px solid var(--gov-line);
    border-top: 5px solid var(--gov-blue);
    padding: 16px 18px 14px;
    margin: 0 0 26px;
    background: var(--gov-bg);
}
.avail-title {
    font-size: calc(18px * var(--gov-font-scale));
    font-weight: 700; margin: 0 0 12px; color: var(--gov-ink);
}

.avail-next {
    margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--gov-line);
    font-size: calc(16px * var(--gov-font-scale));
    line-height: 1.5; color: var(--gov-ink);
}
.avail-next-lbl {
    display: block; font-size: calc(13px * var(--gov-font-scale));
    color: var(--gov-muted); text-transform: uppercase; letter-spacing: .5px;
}
.avail-next-none { color: var(--gov-red); font-weight: 600; }

/* ── The month grid ──────────────────────────────────────────────────────
   Replaces a seven-row list. Deliberately a <table>: these are days in week
   columns, which is what a table is for, and it gives row and column headers
   to a screen reader for free. */

.avail-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 6px;
}
.avail-month { font-size: calc(16px * var(--gov-font-scale)); }
.avail-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 3px;
    font-size: 22px; line-height: 1; text-decoration: none;
    color: var(--gov-blue);
}
.avail-arrow:hover { background: #f3f2f1; }
/* Kept in place rather than removed, so the month name does not slide
   sideways when you reach either end of the window. */
.avail-arrow.is-off { color: var(--gov-line); cursor: default; }

/* Numbers stay plain and a single small mark sits under them, the way the
   staff calendar on events.php already works. The first version tinted the
   whole of all thirty-one cells, which turned a glance into a wall of colour:
   the eye had nothing quiet to rest on, so nothing stood out either. */
.avail-grid {
    width: 100%; table-layout: fixed;
    border-collapse: separate; border-spacing: 2px;
}
.avail-grid th {
    padding: 4px 0; text-align: center;
    font-size: calc(11px * var(--gov-font-scale));
    font-weight: 700; letter-spacing: .5px; color: var(--gov-muted);
}
.avd { padding: 0; text-align: center; }
.avd-n {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 32px; border-radius: 4px;
    font-size: calc(13px * var(--gov-font-scale));
    color: var(--gov-ink);
}

/* Three marks, three shapes — filled, hollow, dash. Colour repeats the shape
   rather than carrying it, because roughly one man in twelve cannot separate
   this green from this red, and the dash reads as "none left" on its own. */
.avd-open .avd-n::after,
.avd-limited .avd-n::after,
.avd-full .avd-n::after {
    content: ''; position: absolute; bottom: 4px;
    width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box;
}
.avd-open    .avd-n::after { background: #00703c; }
.avd-limited .avd-n::after { border: 2px solid #c56a00; }
.avd-full    .avd-n::after { height: 2px; border-radius: 0; background: var(--gov-red); }

/* Closed and too-soon look the same on purpose: both mean "not this day", and
   inventing a second grey for a distinction nobody acts on is noise. The
   tooltip and the hidden text still say which it is. */
.avd-closed .avd-n,
.avd-past   .avd-n { color: #b1b4b6; }

/* A ring, not a fill. Today cannot be booked — the office wants a day's
   notice — so filling it the way the staff calendar does would read as
   "available today" at exactly the moment it is not. */
.avd-today .avd-n {
    box-shadow: inset 0 0 0 2px var(--gov-blue);
    color: var(--gov-ink); font-weight: 700;
}

.avail-key {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    font-size: calc(13px * var(--gov-font-scale)); color: var(--gov-muted);
}
.avail-key li { display: flex; align-items: center; gap: 6px; }
.avail-key .k {
    width: 6px; height: 6px; border-radius: 50%; flex: none; box-sizing: border-box;
}
.k-open    { background: #00703c; }
.k-limited { border: 2px solid #c56a00; }
.k-full    { height: 2px; border-radius: 0; background: var(--gov-red); }
.avail-key .k-grey {
    width: auto; height: auto; border-radius: 0;
    color: #b1b4b6; font-weight: 700;
}

.avail-note {
    margin: 12px 0 0;
    font-size: calc(13px * var(--gov-font-scale));
    line-height: 1.5; color: var(--gov-muted);
}

/* Visually hidden, still announced — for the table caption. */
.start-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}