/* ==========================================================================
   VestaSys CSS — 01 · Base
   --------------------------------------------------------------------------
   Layer 1 of 5. Loaded first, before tokens/utilities/components.

   Contains three things and nothing else:
     1. @font-face declarations for the self-hosted Montserrat display face.
     2. A "preflight" reset that normalises browser defaults away, so every
        visual decision comes from an explicit class rather than from whatever
        the user agent happens to do.
     3. Minimal document-level defaults (box sizing, base font, colours).

   The reset deliberately mirrors the one the project used before (Tailwind's
   Preflight), because the 367 existing Blade views were written against it —
   e.g. they assume headings are NOT bold/large by default and that lists have
   no bullets until `list-disc` is added. Changing these rules would silently
   restyle the whole application.
   ========================================================================== */


/* ==========================================================================
   1. Self-hosted display face — Montserrat
   --------------------------------------------------------------------------
   Only the four weights the kiosk/infoscreen UI actually uses are shipped
   (200/300/400/600), latin subset only (covers Norwegian æ/ø/å). Files live in
   /vendor/fonts/montserrat and are committed to the repo, so there is no build
   step and no runtime CDN dependency.

   `font-display: swap` means text paints immediately in the fallback face and
   re-renders when the webfont arrives — never a blank screen on a slow kiosk.
   ========================================================================== */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/vendor/fonts/montserrat/montserrat-latin-200-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/vendor/fonts/montserrat/montserrat-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/vendor/fonts/montserrat/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/vendor/fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
}


/* ==========================================================================
   2. Preflight reset
   ========================================================================== */

/* Border-box everywhere, and reset the default border so a bare `border`
   utility only has to set the width. Borders default to "none" width but a
   real colour, which is why adding `border` alone produces a visible hairline. */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--vs-border-default, currentColor);
}

/* Document defaults: consistent line-height, no iOS text inflation on rotate,
   and smooth in-page anchor scrolling. */
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: var(--vs-font-sans);
    scroll-behavior: smooth;
}

/* The body carries the theme's surface + text colour so an unstyled page is
   still readable and theme-correct. Individual layouts override the background
   with `bg-base-200` etc. */
body {
    margin: 0;
    min-height: 100%;
    font-family: inherit;
    background-color: var(--vs-base-100);
    color: var(--vs-base-content);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings are stripped to plain text. Views set their own size/weight with
   `text-2xl font-semibold` etc., exactly as they did under the old framework. */
h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Block-level elements lose their default margins — spacing is always explicit
   (`mb-4`, `space-y-2`, `gap-3`). */
p, figure, blockquote, dl, dd, pre, hr {
    margin: 0;
}

/* Lists are unstyled until a view opts in with `list-disc` / `list-decimal`. */
ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A horizontal rule becomes a plain 1px line inheriting the current colour. */
hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

/* Monospace stack for code-ish elements; `font-mono` applies it anywhere else. */
code, kbd, samp, pre {
    font-family: var(--vs-font-mono);
    font-size: 1em;
}

/* Small print and sub/sup keep sane metrics without shifting line boxes. */
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Tables collapse borders and inherit text alignment/colour so `.table`
   component styling has a clean slate. */
table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}
th { text-align: inherit; font-weight: inherit; }

/* Form controls inherit typography instead of using the OS font, and lose the
   default background/padding so component classes fully own their appearance. */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-image: none;
}

/* Safari/Firefox strip the inherited text-transform on buttons and selects. */
button, select { text-transform: none; }

/* Make every kind of button behave identically and be click-targetable. */
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

/* Remove the Firefox inner focus ring and the Chrome spinner on numbers. */
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: auto; }
::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

/* Textareas resize vertically only — horizontal resize breaks card layouts. */
textarea { resize: vertical; }

/* Placeholder text is a muted version of the theme's foreground colour. */
input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: rgb(var(--vs-base-content-rgb) / 0.45);
}

/* Progress and legend defaults that otherwise leak OS styling. */
progress { vertical-align: baseline; }
legend { padding: 0; }
fieldset { margin: 0; padding: 0; }

/* Replaced elements are block-level and never overflow their container — this
   is what stops avatars and logos from blowing out flex rows. */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
}
img, video { max-width: 100%; height: auto; }

/* …but if a utility puts one back inline (e.g. `inline` on an icon), align it
   with the surrounding text rather than sitting on the baseline. */
:is(img, svg, video, canvas):where(.inline, .inline-block, .inline-flex) {
    vertical-align: middle;
}

/* Links carry no colour or underline by default; `link` / `text-primary` opt in. */
a {
    color: inherit;
    text-decoration: inherit;
}

/* Bold/strong keep semantic weight (the reset above wipes it from headings only). */
b, strong { font-weight: bolder; }

/* Anything hidden via the HTML attribute stays hidden regardless of display
   utilities applied to it. */
[hidden]:where(:not([hidden='until-found'])) { display: none !important; }

/* Alpine.js: keep `x-cloak` elements invisible until Alpine has initialised,
   so un-evaluated templates never flash on screen. */
[x-cloak] { display: none !important; }


/* ==========================================================================
   3. Focus visibility
   --------------------------------------------------------------------------
   Keyboard focus must always be visible for accessibility. We use
   :focus-visible so mouse clicks don't leave a ring behind, and colour the
   ring with the theme's primary so it works on both light and dark surfaces.
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--vs-primary);
    outline-offset: 2px;
}