/*
This is the main stylsheet for the web site
*/

/* AMS-337 (L2): page-level styling stays on `body` (it is the single root —
   embedded service fragments are nested far below its flex children, so its
   `display:flex` does not reach them). Tokenized so the shell themes in
   amslight/amsdark; the type voice comes from the shell `@theme --font-*`. */
body {
    font-family: var(--font-sans);
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    display: flex;
    justify-content: center;
}

/* Page Frame Constraints */
#page-frame {
    /* Logic: 75% width, but clamped between 1000px and 1400px */
    width: 75%;
    min-width: 1000px;
    max-width: 1400px;
    background-color: var(--color-base-200);
    /* AMS-337: L2 depth is hairline + tonal layers, not drop shadows. */
    border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
    display: flex;
    flex-direction: column;
}

/* Header (shell chrome). AMS-335: scope to the chrome's own id `#menu`, NOT a
   bare `header` — a bare `header {}` rule cascades into every htmx-embedded
   service fragment's `<header class="*-index__header">` (the fragment slot is a
   descendant of #page-frame, so a wrapper class would still match). The chrome
   header is the only `#menu` on the page. */
#menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background-color: var(--color-base-200);
    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
}

nav.desktop-nav a {
    margin: 0 15px;
    text-decoration: none;
    color: var(--color-base-content);
    font-weight: 500;
}

.auth-buttons button {
    padding: 8px 18px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.btn-login { background: var(--color-primary); color: var(--color-primary-content); }
.btn-register { background: transparent; color: var(--color-base-content); }

/* AMS-337: L2 serif wordmark in the chrome top bar (replaces the logo image). */
.ams-wordmark {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-base-content);
    text-decoration: none;
    cursor: pointer;
}

.ams-wordmark__accent { color: var(--color-primary); }

/* Main Body Styling with CSS Grid */
.main-body {
    min-height: 600px;
    padding: 40px;
    flex-grow: 1;

    /* Grid Setup */
    display: grid;
    /* This creates a 3-column layout where the middle is 2x wider */
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 30px;
    align-content: start; /* Keeps content at the top */
}

/* The base wrapper (always present) — the content slot every service
   fragment is swapped into. Kept as normal block flow on purpose: a
   flex column here breaks the standard `max-width + margin-inline:auto`
   centering idiom that the services use (auto cross-axis margins
   suppress flex stretch, so a short-content fragment shrink-wraps to a
   narrow column instead of filling up to its max-width). */
.main-content-wrapper {
    display: block;
    min-height: 75vh;
}

/* Example Content Blocks for the Grid */
.content-sidebar-left {
    grid-column: 1;
    background: var(--color-base-300);
    padding: 20px;
    border-radius: 8px;
}

.content-center {
    grid-column: 2;
}

.content-sidebar-right {
    grid-column: 3;
    background: var(--color-base-300);
    padding: 20px;
    border-radius: 8px;
}


/* AMS-302: real heading design (was a navy/green placeholder). 24px/18px,
   weight 600, daisyUI base-content. The token is now supplied by the shell's
   own daisyUI build (AMS-309); the fallback covers any load ordering where
   shell.css has not yet applied. */
.ams-page-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-base-content, oklch(0.21 0.006 285.885));
}

.ams-page-section-subtitle {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-base-content, oklch(0.21 0.006 285.885));
}

/* AMS-358: the auth / registration fragments' `#submission-feedback` div and
   the inline client-side validators toggle these two classes. They were never
   authored, so the hard-coded inline `color:blue` always won. Define them here,
   wired to the L2 semantic tokens, so validation/feedback text renders
   terracotta (error) / green (success) in both amslight and amsdark.
   Hand-authored (not a scanned daisyUI `text-error`/`text-success` utility) so
   the color can't silently drop out of the content-scanned shell.css build. */
.error-message-style { color: var(--color-error); }
.success-message-style { color: var(--color-success); }


/* RESPONSIVE GRID: Stack columns on smaller screens */
@media (max-width: 1200px) {
    .main-body {
        grid-template-columns: 1fr; /* Stack into a single column */
    }

    .content-sidebar-left,
    .content-center,
    .content-sidebar-right {
        grid-column: 1; /* Force everything to the same single column */
    }
}

/* Footer (shell chrome). AMS-335: scope to the chrome's own id `#footer`, not a
   bare `footer` (same fragment-leak reasoning as `#menu` above). */
#footer {
    padding: 20px;
    text-align: center;
    background: var(--color-base-200);
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
    font-size: 0.9rem;
}

/* Hamburger Menu Icon */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--color-base-content);
    margin: 2px 0;
}

/* RESPONSIVE BREAKPOINT < 1000px */
@media (max-width: 1000px) {
    #page-frame {
        width: 100%;
        min-width: 100%; /* Overrides the 1000px min-width for true mobile use */
    }

    /* AMS-580: below the breakpoint the chrome collapses to logo + hamburger,
       and the SAME per-role #menu fragment reflows into a stacked drawer. The
       shell used to carry a SECOND, hardcoded public `#mobile-menu` here that
       nothing re-rendered — so an authenticated user below 1000px was offered
       Register/Login and had no Logout at all. One slot, one source of truth:
       whatever role the session has, the drawer is that role's own menu.

       #menu wraps so the nav and auth rows fall below the logo. `order` is
       required, not cosmetic: the hamburger is LAST in every menu fragment's
       source, so without it the two full-width rows push it onto a fourth line
       instead of leaving it beside the logo. */
    #menu {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    #menu .hamburger { display: flex; order: 1; }
    #menu .desktop-nav { order: 2; }
    #menu .auth-buttons { order: 3; }

    #menu .desktop-nav,
    #menu .auth-buttons {
        display: none;
        flex-basis: 100%;
    }

    #menu.mobile-nav-open .desktop-nav,
    #menu.mobile-nav-open .auth-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* The desktop rules space these horizontally; in a column that reads as a
       stray indent on the links and a hanging offset on the buttons. */
    #menu.mobile-nav-open .desktop-nav a { margin: 0; }
    #menu.mobile-nav-open .auth-buttons button { margin-left: 0; }
}

/* AMS-337: shell-owned theme toggle. Persistent (outside the swapped chrome),
   fixed top-right, tokenized so it themes itself. The moon shows in light
   (click → dark), the sun in dark (click → light). */
#ams-theme-toggle {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    color: var(--color-base-content);
    background: var(--color-base-200);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
    border-radius: 9999px;
}

#ams-theme-toggle:hover {
    background: var(--color-base-300);
}

#ams-theme-toggle .icon-sun { display: none; }
#ams-theme-toggle .icon-moon { display: inline-flex; }
[data-theme="amsdark"] #ams-theme-toggle .icon-sun { display: inline-flex; }
[data-theme="amsdark"] #ams-theme-toggle .icon-moon { display: none; }

/* On wide screens the toggle floats in the right margin outside the centered
   #page-frame. But #page-frame holds `min-width:1000px`, so between ~1000px and
   ~1112px the right margin is thinner than the toggle's 56px footprint and it
   overlays the top-right chrome (auth buttons / hamburger). Below 1140px, move
   the toggle to the BOTTOM-right so it never intercepts those controls. */
@media (max-width: 1140px) {
    #ams-theme-toggle {
        top: auto;
        bottom: 14px;
    }
}

/* AMS-471: shell-level gateway-error banner. htmx swaps only 2xx responses, so
   a non-2xx the SERVICE did not produce — an nginx gateway error (413 oversize,
   502/503/504 upstream down/timeout) — renders nothing in-shell, the AMS-422
   invisible-error class. The shell's htmx:responseError handler injects this
   banner (fixed shell copy, never the raw upstream body) into the failed
   request's own target so the error is always visible. Inline (not fixed): it
   lands in the content slot / control the failed swap targeted, so it reads as
   contextual to what failed. Tokenized so it themes in amslight / amsdark like
   the rest of the shell chrome. */
.ams-gateway-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    color: var(--color-error-content);
    background: var(--color-error);
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.ams-gateway-error__message {
    flex: 1 1 auto;
}

.ams-gateway-error__dismiss {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 4px;
    opacity: 0.85;
}

.ams-gateway-error__dismiss:hover {
    opacity: 1;
    background: color-mix(in oklab, var(--color-error-content) 18%, transparent);
}