/* ==========================================================================
   Components: the shared vocabulary every template composes from.
   Add a pattern here once, use it everywhere. Never restyle it in a page.
   ========================================================================== */

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

.container {
    width: 100%;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 0 var(--s-5);
}

.container--narrow { max-width: 820px; }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--c-ink);
    color: var(--c-white);
    padding: var(--s-3) var(--s-4);
    border-radius: 0 0 var(--r-md) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
    color: var(--c-white);
}

/* --- Site header and navigation ---------------------------------------- */

.site-header {
    background: var(--c-paper);
    border-bottom: var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    min-height: 74px;
}

.brand {
    font-family: var(--f-display);
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--c-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}

.brand:hover { color: var(--c-oxide); }

.brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-oxide);
    box-shadow: inset 0 0 0 4px var(--c-paper), 0 0 0 1px var(--c-oxide);
    flex: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
}

/* Scoped with :not(.button) so the underline treatment never touches a button.
   Previously .site-nav .button had its bottom border stripped, which made the
   button 1px shorter than its siblings and knocked it off the nav baseline. */
.site-nav a:not(.button) {
    color: var(--c-ink);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    padding: var(--s-2) 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:not(.button):hover { color: var(--c-oxide); border-bottom-color: var(--c-oxide); }

.site-nav a:not(.button)[aria-current="page"] { border-bottom-color: var(--c-ink); }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--c-paper);
    border: var(--border);
    border-radius: var(--r-md);
    padding: 0;
    color: var(--c-ink);
    cursor: pointer;
}

.menu-icon {
    width: 20px;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* --- Buttons ----------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    font-family: var(--f-body);
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    color: var(--c-white);
    background: var(--c-oxide);
    border: 1px solid var(--c-oxide);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.button:hover { background: var(--c-oxide-dark); border-color: var(--c-oxide-dark); color: var(--c-white); }

.button[disabled],
.button:disabled {
    background: var(--c-rule);
    border-color: var(--c-rule);
    color: var(--c-ink-faint);
    cursor: not-allowed;
}

.button--outline {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}

.button--outline:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }

.button--quiet {
    background: transparent;
    color: var(--c-oxide);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.button--quiet:hover { background: transparent; color: var(--c-oxide-dark); text-decoration: underline; }

.button--light {
    background: var(--c-paper);
    color: var(--c-ink);
    border-color: var(--c-paper);
}

.button--light:hover { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }

.button--small { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}

/* Card footers specifically want both actions the same width, since they sit
   directly next to each other in a tight row. Scoped to .card__actions
   rather than changing .button-row itself, which is used all over the app
   (hero, dashboards, role chooser) where content-sized buttons are correct. */
.card__actions .button {
    flex: 1;
    text-align: center;
}

/* Buttons produced by FormHelper submit inputs */
:where(button:not(.button):not(.nav-toggle):not(.sidebar-toggle):not(.sidebar-close)),
input[type="submit"] {
    font: inherit;
    font-weight: 700;
    font-size: var(--t-sm);
    padding: var(--s-3) var(--s-5);
    color: var(--c-white);
    background: var(--c-oxide);
    border: 1px solid var(--c-oxide);
    border-radius: var(--r-md);
    cursor: pointer;
}

:where(button:not(.button):not(.nav-toggle):not(.sidebar-toggle):not(.sidebar-close)):hover,
input[type="submit"]:hover { background: var(--c-oxide-dark); }

button:not(.button):not(.nav-toggle):not(.sidebar-toggle):not(.sidebar-close):disabled,
input[type="submit"]:disabled {
    background: var(--c-rule);
    border-color: var(--c-rule);
    color: var(--c-ink-faint);
    cursor: not-allowed;
}

/* --- Page header (inside the app and on secondary public pages) -------- */

.page-header {
    padding: 0 0 var(--s-5);
    border-bottom: var(--border);
    margin-bottom: var(--s-7);
}

.page-header__title { margin-bottom: var(--s-3); }

.page-header__lead {
    color: var(--c-ink-soft);
    font-size: var(--t-md);
    margin-bottom: 0;
}

.page-header__actions { margin-top: var(--s-5); }

/* --- Section ----------------------------------------------------------- */

.section { padding: var(--s-8) 0; }
.section--tint { background: var(--c-raised); }

.section__intro { max-width: 46ch; margin-bottom: var(--s-7); }
.section__intro p { color: var(--c-ink-soft); margin-bottom: 0; }

/* --- Forms: enquiry and multi-field layouts ----------------------------- */
/* These live in components.css rather than pages.css because the templates
   that use them render in both shells: the public layout loads pages.css,
   the signed-in layout loads app.css, and both load this file. `.field-pair`
   in particular is used by Users/add, Users/edit and Services/add, which are
   app-layout screens and were silently losing it. */

.enquiry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s-7);
    align-items: start;
}

.enquiry-aside {
    background: var(--c-raised);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    font-size: var(--t-sm);
}

.enquiry-aside h3 { font-size: var(--t-base); }
.enquiry-aside ol { padding-left: var(--s-4); color: var(--c-ink-soft); margin-bottom: 0; }

.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.captcha-block {
    background: var(--c-raised);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
}

.captcha-block__status {
    font-size: var(--t-sm);
    color: var(--c-ink-soft);
    margin: var(--s-3) 0 0;
}

/* --- Card -------------------------------------------------------------- */

/* Flex column + margin-top:auto on the footer pins the action to the bottom of
   every card, so buttons line up across a row regardless of how long each
   card's title or description runs. Grid already stretches cards to equal
   height; this makes the content inside them agree. */
.card {
    background: var(--c-white);
    border: var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
}

.card__media {
    margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__title { margin-bottom: var(--s-2); }

.card__meta {
    font-size: var(--t-sm);
    color: var(--c-ink-soft);
    margin-bottom: var(--s-3);
}

.card__body { color: var(--c-ink-soft); font-size: var(--t-sm); }

.card__footer { margin-top: auto; padding-top: var(--s-5); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-5);
}

/* --- Panel (flat surface for forms and detail blocks) ------------------ */

.panel {
    background: var(--c-white);
    border: var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}

/* --w-form (620px) suits the narrow public forms. Inside the app shell the
   panel should use the full content column so it starts level with the
   dashboard and the other signed-in screens. */
.panel--form { max-width: var(--w-form); }

.app__inner .panel--form { max-width: none; }

/* --- Definition list for detail pages ---------------------------------- */

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-3) var(--s-5);
    margin: 0 0 var(--s-5);
    font-size: var(--t-sm);
}

.detail-list dt { font-weight: 700; color: var(--c-ink-soft); margin: 0; }
.detail-list dd { margin: 0; }

/* --- Badge ------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: var(--s-1) var(--s-3);
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 700;
    background: var(--c-raised);
    color: var(--c-ink-soft);
}

.badge--positive { background: var(--c-glaze-tint); color: var(--c-glaze); }
.badge--pending  { background: var(--c-ochre-tint); color: #8a5c12; }
.badge--negative { background: var(--c-oxide-tint); color: var(--c-oxide-dark); }

/* --- Flash and inline messages ----------------------------------------- */

.message {
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    border-left: 4px solid var(--c-ink-soft);
    background: var(--c-raised);
    color: var(--c-ink);
    font-size: var(--t-sm);
    margin-bottom: var(--s-5);
    cursor: pointer;
}

.message.success { background: var(--c-glaze-tint); border-left-color: var(--c-glaze); }
.message.warning { background: var(--c-ochre-tint); border-left-color: var(--c-ochre); }
.message.error   { background: var(--c-oxide-tint); border-left-color: var(--c-oxide); }
.message.hidden  { display: none; }

.error-message {
    display: block;
    color: var(--c-oxide-dark);
    font-size: var(--t-sm);
    font-weight: 600;
    margin: calc(var(--s-4) * -1) 0 var(--s-5);
}

.field-hint {
    display: block;
    color: var(--c-ink-soft);
    font-size: var(--t-sm);
    margin: calc(var(--s-4) * -1) 0 var(--s-5);
}

/* --- Empty state ------------------------------------------------------- */

.empty-state {
    border: 1px dashed var(--c-rule);
    border-radius: var(--r-lg);
    padding: var(--s-7);
    text-align: center;
    background: var(--c-white);
}

.empty-state h3 { margin-bottom: var(--s-2); }
.empty-state p { margin: 0 auto var(--s-5); color: var(--c-ink-soft); max-width: 44ch; }

/* --- Table wrapper (keeps wide tables usable on small screens) --------- */

.table-wrap {
    overflow-x: auto;
    border: var(--border);
    border-radius: var(--r-lg);
    background: var(--c-white);
}

.table-wrap table { min-width: 640px; }
.table-wrap tr:last-child td { border-bottom: 0; }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    background: var(--c-ink);
    color: var(--c-raised);
    padding: var(--s-8) 0 var(--s-5);
    margin-top: var(--s-9);
}

.site-footer h3, .site-footer h4 { color: var(--c-white); }
.site-footer p { color: var(--c-rule); font-size: var(--t-sm); }

.site-footer a {
    color: var(--c-rule);
    font-size: var(--t-sm);
    text-decoration: none;
    display: inline-block;
    padding: var(--s-1) 0;
}

.site-footer a:hover { color: var(--c-white); text-decoration: underline; }

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-7);
}

.site-footer__bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(228, 213, 193, 0.22);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.site-footer__bottom p { margin: 0; }

/* --- Main region ------------------------------------------------------- */

.main { min-height: 60vh; }
.main--padded { padding: var(--s-7) 0 var(--s-8); }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 980px) {
    .enquiry-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .field-pair { grid-template-columns: 1fr; gap: 0; }

    .nav-toggle { display: inline-flex; }

    body.site-nav-open { overflow: hidden; }

    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-1);
        padding: var(--s-4) var(--s-5) var(--s-5);
        background: var(--c-paper);
        border-bottom: var(--border);
        box-shadow: var(--shadow-2);
    }

    .site-nav.is-open { display: flex; }

    .site-nav a { padding: var(--s-3) 0; border-bottom: var(--border); }
    .site-nav a:hover { border-bottom-color: var(--c-rule); }
    .site-nav .button { margin-top: var(--s-3); }

    .site-header__inner { position: relative; }

    .page-header {
        margin-bottom: var(--s-6);
        padding-bottom: var(--s-4);
    }
}

/* --- Legacy class aliases ----------------------------------------------
   Pages not yet rebuilt (auth, dashboards, enquiry admin) still use the
   old Milligram class names. These keep them coherent until pass two,
   then they can be deleted along with the last old class name.
   ---------------------------------------------------------------------- */

.button-outline {
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}

.button-outline:hover { background: var(--c-ink); color: var(--c-white); }

.button-clear {
    background: transparent;
    border-color: transparent;
    color: var(--c-oxide);
}

.button-clear:hover { background: transparent; color: var(--c-oxide-dark); text-decoration: underline; }

.side-nav {
    background: var(--c-raised);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}

.content > h1:first-child { margin-top: 0; }

.app-nav .enquiry-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enquiry-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #faeed5; color: #825510; font-size: 12px; font-weight: 700; line-height: 1; }
.enquiry-nav-count[hidden] { display: none; }
.enquiry-pending-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 14px 18px; border: 1px solid #ecdab9; border-radius: 12px; background: #fff8eb; color: #825510; text-decoration: none; font-size: var(--t-sm); }
.enquiry-pending-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: #ad771f; }