/* ==========================================================================
   Spaquito — provisioned site stylesheet.
   Hand-written, no framework, no build step. Copied into a site's
   public/assets/site.css when the site is created and kept as shipped: a
   platform update replaces it wholesale, which is how new widget hooks
   reach an existing site. The site's own themed rules belong in
   public/assets/custom.css, loaded after this file — the platform never
   writes that one.

   It covers the site surface only — header, nav, page, footer, the card,
   form and error patterns the shipped widgets and the site's own sign-in
   use — and none of the control centre's tables. Sharing tokens with the
   control centre is deliberate: both surfaces are this company's work.
   ========================================================================== */

:root {
    --ink: #14201e;
    --ink-soft: #4d5c59;
    --paper: #f6f7f5;
    --surface: #ffffff;
    --line: #dfe4e1;
    --line-strong: #c3ccc8;
    --accent: #0d7d6b;
    --accent-dark: #0a6355;
    --accent-tint: #e6f4f1;
    --danger: #b42318;
    --danger-tint: #fdeceb;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(20, 32, 30, 0.06), 0 6px 20px rgba(20, 32, 30, 0.05);
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }

code, .mono { font-family: var(--mono); font-size: 0.9em; }

/* ---------------------------------------------------------------- topbar -- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar_inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.nav { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; }

.nav_link {
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-weight: 500;
}
.nav_link:hover { background: var(--accent-tint); text-decoration: none; color: var(--accent-dark); }
.nav_link.is-active { background: var(--accent-tint); color: var(--accent-dark); }

/* ----------------------------------------------------------------- page --- */

.page {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.page_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page_head p { color: var(--ink-soft); margin: 0.25rem 0 0; }
.page_title { margin: 0; }

/* --------------------------------------------------------------- footer --- */

.footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
}
.footer > span { display: inline-block; padding: 0.9rem 1.5rem; }
.footer > span:first-child { padding-left: max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); }
.footer > span:last-child { padding-right: max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); }
.footer_mode { font-family: var(--mono); }

/* --------------------------------------------------------------- cards ---- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.card_head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card_head h2 { margin: 0; }

/* --------------------------------------------------- widget rows on home -- */

.widget_list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.widget_row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.widget_row strong { color: var(--accent-dark); }

/* -------------------------------------------------------- widget hooks ---- */
/*
   Styling a widget exposes to the site that runs it. Widgets never carry
   inline `style="…"` attributes: a hook class lands here, in the base skin
   every site copies, and each site restyles it by appending its own rule to
   *its* copy of site.css — later rule wins, same selector. Hooks are named
   after their widget so an override reads as belonging to one.
*/

.faq_list { margin: 0; }

.faq_item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.faq_item:last-child { border-bottom: 0; }

.faq_question {
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.faq_answer {
    color: var(--ink-soft);
    margin: 0;
}

/* The admin section: the add form, and one row per answer with its own edit
   and delete forms. Inputs share the generic field styling below — what is
   named here is layout, which belongs to this widget alone. */

.faq_admin_new { margin-bottom: 1rem; }

.faq_admin_list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.faq_admin_row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.faq_admin_row:first-child { border-top: 0; padding-top: 0; }

.faq_admin_fields { display: grid; gap: 0.3rem; }

.faq_admin_answer { resize: vertical; min-height: 4.5rem; }

.faq_admin_actions { margin-top: 0.5rem; }

.faq_admin_delete { margin-top: 0.5rem; }

/* The contact widget: the thank-you note the form becomes on success, and
   the inbox's one-row-per-message list. Inputs again share the generic
   field styling below — named here is layout, which belongs to this widget
   alone. The success note borrows the accent tint: it is the same green the
   site uses for "yes", worn as a border instead of a badge. */

.contact_sent {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.contact_admin_list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.contact_admin_row {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.contact_admin_row:first-child { border-top: 0; padding-top: 0; }

.contact_admin_meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.contact_admin_email {
    font-family: var(--mono);
    font-size: 0.85em;
}

.contact_admin_message {
    color: var(--ink-soft);
    margin: 0;
    white-space: pre-line;
}

.contact_admin_delete { margin-top: 0.5rem; }

/* The opening-hours widget: the week as the public page reads it, the
   season message that can stand in its place, and the admin section that
   edits both. The edit form's inputs are named here instead of reaching
   for .field, because their layout — a day, two times, a tick — belongs
   to this widget alone; only the input chrome is redrawn, and it follows
   the generic field rule exactly. The message input is a plain .field,
   because one labelled line needs no layout of its own. */

.hours_week { margin: 0; }

.hours_day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.hours_day:last-child { border-bottom: 0; }

.hours_day_name { font-weight: 600; }

.hours_day_times { margin: 0; color: var(--ink-soft); }

.hours_time { font-family: var(--mono); font-size: 0.9em; }

.hours_dash { color: var(--ink-soft); margin: 0 0.25rem; }

.hours_closed {
    color: var(--ink-soft);
    font-style: italic;
}

.hours_override {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.hours_form {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.hours_form_row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.hours_form_row:first-child {
    border-top: 1px solid var(--line);
}

.hours_form_day {
    font-weight: 600;
    flex: 1 1 6rem;
    padding-bottom: 0.35rem;
}

.hours_form_field { display: grid; gap: 0.2rem; }

.hours_form_field label { margin: 0; }

.hours_form_time {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.35rem 0.5rem;
}

.hours_form_time:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.hours_form_closed {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    padding-bottom: 0.35rem;
    cursor: pointer;
}

.hours_admin_current {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* The poll widget: the question's form, and the results list both the
   public page and the admin section render. Percentages live in their
   own span as plain text — the contract keeps inline `style="…"` out of
   templates, so any bar a site wants is drawn by restyling this hook in
   the site's own copy of the skin, not by a width smuggled in markup. */

.poll_form { margin-bottom: 0.25rem; }

.poll_options {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}

.poll_option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
}

.poll_option:hover {
    background: var(--accent-tint);
    border-color: var(--line);
}

.poll_option input { accent-color: var(--accent); }

.poll_results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.poll_result_row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.poll_result_row:last-child { border-bottom: 0; }

.poll_label { flex: 1 1 auto; font-weight: 600; }

.poll_count { color: var(--ink-soft); }

.poll_pct {
    font-family: var(--mono);
    font-size: 0.9em;
    min-width: 3rem;
    text-align: right;
}

.poll_thanks { margin-top: 0.75rem; }

.poll_admin_reset { margin-bottom: 1.25rem; }

.poll_admin_question {
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.poll_admin_current {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------- buttons --- */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* The two quieter buttons: outlined for "also available" actions beside the
   primary one, red for destroying something. Both keep the one rule every
   button here follows — state lives in tokens, so a retheme restyles all
   three at once. */
.button-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-soft);
}
.button-secondary:hover {
    background: var(--paper);
    border-color: var(--line-strong);
    color: var(--ink);
    text-decoration: none;
}

.button-danger { background: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: #8f1c13; border-color: #8f1c13; }

.inline-form { display: inline; margin: 0; }

/* ---------------------------------------------------------------- forms --- */
/*
   The vocabulary the site's sign-in and every widget's back end share with
   the rest of the site surface: a labelled field, the action row under it,
   and a notice that reports a problem without navigating away. Generic by
   design — a widget styles its own hooks (.faq_admin_*) for layout and
   reaches for these only for the inputs themselves.
 */

.field {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.field label,
.faq_admin_label {
    font-weight: 600;
    font-size: 0.9rem;
}

.field input,
.field textarea,
.faq_admin_input {
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
    width: 100%;
}

.field input:focus,
.field textarea:focus,
.faq_admin_input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.field_hint {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.form_actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.notice {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
}

.notice-error {
    background: var(--danger-tint);
    border-color: var(--danger);
    color: var(--danger);
}

.empty { color: var(--ink-soft); }

/* --------------------------------------------------------------- badges --- */

.badge {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-neutral { background: #eceeed; color: var(--ink-soft); }

/* -------------------------------------------------------------- error ----- */

.error-page { text-align: center; padding: 3rem 1rem; }
.error-page_code { font-family: var(--mono); font-size: 4rem; margin: 0; color: var(--line-strong); font-weight: 700; }
.error-page_heading { font-size: 1.6rem; }
.error-page_message { color: var(--ink-soft); }
.error-page_actions { margin-top: 1.5rem; }

/* ------------------------------------------------------- htmx behaviours -- */

.htmx-request { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }

.htmx-indicator {
    display: none;
    color: var(--ink-soft);
    font-size: 0.85rem;
}
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ------------------------------------------------------------ utilities --- */

.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.87rem; }
.nowrap { white-space: nowrap; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}