/* ==========================================================================
   IsItOpn?  —  public styles

   Mobile-first, no framework. Light and dark are both first-class.

   Colour contrast: every text colour below clears WCAG AA (4.5:1) against its
   own background, and the status dots clear 3:1 as non-text indicators. The
   dots are decorative regardless — the sentence next to them states the status
   in words, so nothing here depends on being able to tell green from red.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --page:        #d9dce1;
    --surface:     #ffffff;
    --surface-alt: #f4f6f8;
    --ink:         #1a1c1f;
    --ink-muted:   #5a6169;   /* 4.9:1 on white */
    --rule:        #d6dae0;

    --link:        #0b5fa5;   /* 6.4:1 on white */
    --link-hover:  #073f6f;

    --open:        #1b7f3b;   /* 5.1:1 on white */
    --closing:     #a85b00;   /* 5.0:1 on white */
    --closed:      #c02718;   /* 5.6:1 on white */

    --notice-bg:   #fff5e0;
    --notice-ink:  #6b4400;
    --ok-bg:       #e6f4ea;
    --ok-ink:      #14612f;
    --err-bg:      #fdeceb;
    --err-ink:     #96170c;

    --focus:       #0b5fa5;
    --radius:      6px;
    --tap:         44px;      /* minimum comfortable touch target */
}

/* A mouse can hit a much smaller control than a fingertip, and every pixel the
   header does not spend is another place in the list. Touch keeps its 44px. */
@media (pointer: fine) {
    :root { --tap: 34px; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page:        #0b0d10;
        --surface:     #16191d;
        --surface-alt: #1e2228;
        --ink:         #e9ebee;
        --ink-muted:   #a3acb6;   /* 7.2:1 on --surface */
        --rule:        #2b3037;

        --link:        #7fb8f0;   /* 7.6:1 on --surface */
        --link-hover:  #a9d0f7;

        --open:        #4cc46b;
        --closing:     #e5a33d;
        --closed:      #ff8074;

        --notice-bg:   #2b2415;
        --notice-ink:  #f0cd8a;
        --ok-bg:       #16281c;
        --ok-ink:      #8fdba6;
        --err-bg:      #2c1918;
        --err-ink:     #ffa79c;

        --focus:       #7fb8f0;
    }
}

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

body {
    margin: 0;
    padding: 0;
    background-color: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 0.6em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

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

.muted { color: var(--ink-muted); }
.small { font-size: 0.85rem; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    color: var(--ink);
    padding: 0.75em 1em;
    z-index: 10;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   Shell — the centred column from the original mock-up
   -------------------------------------------------------------------------- */
.wrapper {
    background-color: var(--surface);
    max-width: 860px;
    margin: 0 auto;
    min-height: 100vh;
}

.element {
    width: 100%;
    padding: 0.5em 0.8em;
}

/* Every row after the first gets a divider. */
.element + .element,
.results .element + .element,
main > *:first-child .element:first-child { border-top: 1px solid var(--rule); }

main { display: block; }
.results .result:first-child { border-top: 1px solid var(--rule); }

@media (min-width: 700px) {
    .wrapper { margin: 1rem auto; min-height: 0; border-radius: 10px; overflow: hidden; }
    .element { padding: 0.55em 1em; }
}

/* --------------------------------------------------------------------------
   Header — title and search on one line, categories under them
   -------------------------------------------------------------------------- */
.brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.8em;
    margin-bottom: 0.35em;
}

.brand {
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: -0.01em;
    flex: 0 0 auto;
}
.brand-q { color: var(--open); }

.search {
    display: flex;
    gap: 0.4em;
    flex: 1 1 14em;
    min-width: 0;
}
.search input[type="search"] { flex: 1 1 auto; min-width: 0; }

.categories {
    display: flex;
    flex-flow: row wrap;
    gap: 0.35em;
    align-items: baseline;
    font-size: 0.92rem;
}
.categories .area { color: var(--ink-muted); flex: none; }
/* Basis of zero, so the list never counts as too wide to sit beside the label:
   narrow screens wrap the links among themselves and keep "Categories:" on the
   same line as the first of them, rather than stranding it on a line alone. */
.categories .links {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-flow: row wrap;
    gap: 0.15em 0.5em;
}
.categories a {
    text-decoration: none;
    padding: 0.15em 0.1em;
}
.categories a:hover { text-decoration: underline; }
.categories a[aria-current="page"] {
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Position bar — one box, and the note explaining what it resolved to
   -------------------------------------------------------------------------- */
/* The form and the note it explains share a row wherever they both fit. The
   popup is positioned against this, so it cannot be what clips it. */
.location-bar {
    background: var(--surface-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.8em;
    position: relative;
}

/* Sized to its contents, not to the bar, so the note can sit beside it. */
.where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: 0.92rem;
    flex: 0 1 auto;
}
.where label { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Combobox — the location box and the list it owns
   -------------------------------------------------------------------------- */
.combo {
    flex: 1 1 12em;
    min-width: 0;
    display: flex;
}
.combo input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* Positioned against the whole bar rather than the box it belongs to: the box
   is only as wide as the room left beside the label, which is not enough for
   "Current Location" and a hint to share a line. Dropping under the bar also
   means opening the list never reflows it or pushes the first result away. */
.combo-list {
    position: absolute;
    z-index: 20;
    top: calc(100% - 0.2em);
    left: 0.75em;
    right: 0.75em;
    max-width: 26em;
    margin: 0;
    padding: 0.2em 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.16);
    /* Long enough to be worth scrolling, short enough to leave some of the
       results behind it visible. */
    max-height: min(60vh, 20em);
    overflow-y: auto;
}
.combo-list[hidden] { display: none; }

/* Comfortable under a fingertip, and wide enough that the hint can sit hard
   right of the name rather than wrapping under it. */
.combo-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75em;
    padding: 0.5em 0.7em;
    min-height: var(--tap);
    cursor: pointer;
}
.combo-option[aria-selected="true"] {
    background: var(--surface-alt);
}
.combo-option:hover { background: var(--surface-alt); }

/* One line each. A place name long enough to wrap would push the row's own
   hint out of line with every other row's. */
.combo-value {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.combo-hint {
    color: var(--ink-muted);
    font-size: 0.85em;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The device entry is the one answer that cannot be typed, so it is ruled off
   from the ones that can. */
.combo-option.is-device {
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
}

/* Narrow enough to share the row and wrap inside it, rather than claim one. */
.position-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    flex: 1 1 10em;
    text-align: right;
}

/* --------------------------------------------------------------------------
   The way out — one rung further at the bottom of the list
   -------------------------------------------------------------------------- */
.load-more {
    margin: 0;
    text-align: center;
    background: var(--surface-alt);
}
.load-more .button { width: 100%; }

/* Where the browser lands after a "look further": the first result that press
   brought in, or the control itself when it brought in nothing. Without the
   margin it would sit flush against the top edge, with no sign that anything
   came before it. */
#more {
    scroll-margin-top: 4rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="url"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5em 0.6em;
    min-height: var(--tap);
}
textarea { min-height: 5em; }

input:focus, select:focus, textarea:focus { border-color: var(--focus); }

button, .button {
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--link);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.5em 0.9em;
    min-height: var(--tap);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button:hover, .button:hover { background: var(--link-hover); color: #fff; }

@media (prefers-color-scheme: dark) {
    button, .button { color: #0b0d10; }
    button:hover, .button:hover { color: #0b0d10; }
}

button.secondary, .button.secondary {
    background: transparent;
    color: var(--link);
    border-color: var(--rule);
}
button.secondary:hover, .button.secondary:hover {
    background: var(--surface-alt);
    color: var(--link-hover);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.results {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One row, one line: dot, sentence, why-it-is-closed, distance hard right. */
.result {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}
.result .label   { flex: 0 1 auto; min-width: 0; }
.result .reason  { flex: 0 1 auto; }
.result .distance {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* Status dot. Decorative: aria-hidden in the markup, meaning lives in the text. */
.color {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--ink-muted);
    flex: 0 0 auto;
    margin-right: 0.15em;
    transform: translateY(-0.05em);
}
.color.open    { background-color: var(--open); }
.color.closing { background-color: var(--closing); }
.color.closed  { background-color: var(--closed); }

.label {
    display: inline;
    line-height: 1.35;
}

.place {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
a.place { color: var(--link); }
a.place:hover { text-decoration: underline; }

/* The whole row is tappable on a phone without swallowing the inner controls. */
.result a.place::after {
    content: "";
    position: absolute;
    inset: 0;
}
.result .reltime,
.result .meta a { position: relative; z-index: 1; }

.meta {
    margin: 0.25em 0 0;
    font-size: 0.85rem;
    color: var(--ink-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    align-items: baseline;
}
.meta .sep { opacity: 0.6; }
.distance { font-variant-numeric: tabular-nums; }
.cat-tag { text-decoration: none; }
.cat-tag:hover { text-decoration: underline; }

.reason {
    margin: 0.25em 0 0;
    font-size: 0.85rem;
    color: var(--closing);
}
.result .reason { margin: 0; }

/* Relative time toggle — a real button so it works without a pointer. */
.reltime {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    min-height: 0;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.reltime:hover { background: none; color: var(--link); }

@media (prefers-color-scheme: dark) {
    .reltime, .reltime:hover { color: inherit; }
    .reltime:hover { color: var(--link); }
}

/* --------------------------------------------------------------------------
   Location page
   -------------------------------------------------------------------------- */
.location-head .label { font-size: 1.1rem; }

.address a { font-size: 1.05rem; }

.map-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.6em 0;
    padding: 0;
}
.map-links .button { flex: 1 1 auto; }

/* The front-door pin and the street address, each with the same three apps.
   The heading and the line under it are what tell the two sets apart, so they
   sit tight against their own buttons and the sets stay clearly separated. */
.map-target h3 { margin: 0 0 0.1em; }
.map-target p { margin: 0; }
.map-target + .map-target { margin-top: 1em; }

/* Optional map. The iframe is lazy, so aspect-ratio reserves its space up
   front and the page does not jump when the tiles arrive. */
.map { margin: 0.6em 0; }

.map-frame {
    aspect-ratio: 16 / 10;
    max-height: 60vh;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-note { margin: 0.5em 0 0; }

/* Offered by map-chooser.js when a desktop click on the geo: address would
   otherwise go nowhere. Built from the map links above, never shown without
   scripting — a plain click on the address is unchanged in that case. It
   carries both sets of links, so it can scroll on a short window. */
.map-chooser {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    padding: 1em;
    max-width: 20em;
    width: calc(100% - 2em);
    max-height: 85vh;
    overflow-y: auto;
}
.map-chooser::backdrop { background: rgba(0, 0, 0, 0.5); }
.map-chooser h2 { font-size: 1rem; }
.map-chooser h3 { font-size: 0.95rem; }
.map-chooser .map-links { flex-direction: column; margin: 0.4em 0 0; }
.map-chooser .map-target + .map-target { margin-top: 0.8em; }
.map-chooser .map-targets { margin-bottom: 0.8em; }
.map-chooser .button,
.map-chooser button { width: 100%; }

.phone .button { width: 100%; }

@media (min-width: 460px) {
    .phone .button { width: auto; }
}

.social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 0.5em 0 0;
    padding: 0;
    font-size: 0.9rem;
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.hours-table th, .hours-table td {
    text-align: left;
    padding: 0.4em 0.2em;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.hours-table th {
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
    padding-right: 1em;
}
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table .is-today th,
.hours-table .is-today td {
    font-weight: 700;
    color: var(--ink);
}
.today-tag {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--surface);
    background: var(--ink-muted);
    border-radius: 999px;
    padding: 0.05em 0.5em;
    margin-left: 0.4em;
    vertical-align: 0.1em;
}

.plain { list-style: none; margin: 0.3em 0; padding: 0; }
.plain li { padding: 0.15em 0; }

/* The status sentence above already names the next opening; this is only how
   far off it is, so it reads as a footnote to it. */
.reopens { margin-top: 0.4em; font-size: 0.9rem; }

.notice {
    margin: 0.6em 0 0;
    padding: 0.6em 0.75em;
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: 0.9rem;
}
.notice-warn {
    background: var(--notice-bg);
    color: var(--notice-ink);
}

.flash { font-size: 0.95rem; }
.flash-ok    { background: var(--ok-bg);  color: var(--ok-ink); }
.flash-error { background: var(--err-bg); color: var(--err-ink); }

.report-forms { display: grid; gap: 1.2em; }
.report-form input[type="text"] { width: 100%; margin-bottom: 0.5em; }
.report-form h3 { margin-bottom: 0.2em; }
.report-form button { width: 100%; }

@media (min-width: 560px) {
    .report-forms { grid-template-columns: 1fr 1fr; }
    .report-form button { width: auto; }
}

.back-link { font-size: 0.95rem; }

.empty h1 { margin-bottom: 0.3em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    color: var(--ink-muted);
    font-size: 0.82rem;
    background: var(--surface-alt);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2em 1em;
}
.site-footer p { margin: 0; }
.footer-stat strong { color: var(--ink); }
/* Hard right whether or not the stat line is beside it. */
.footer-admin { margin-left: auto; }

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