/* CSS @layer restructuring, 2026-08-18 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). A layer's priority is fixed by wherever its name is
   FIRST seen in the whole page's cascade — not by sand_ui/__sand_ui.css's
   own @layer statement, even though that reads as "the" declaration,
   because application.css (this file) loads before it and, without this
   line, its own @layer overrides {} block below would be the first
   mention of "overrides" — registering it dead LAST-declared-loses,
   i.e. lower priority than reset/base/etc, the opposite of intended.
   Declaring the full order here, first, is what actually makes it stick;
   sand_ui/__sand_ui.css's own copy of this line is now a harmless no-op
   repeat, kept there so its file still fully documents the order it
   uses. */
@layer reset, base, components, utilities, platform, theme, native, overrides;
@layer overrides {
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

turbo-frame#modal .hide\@modal {
    display: none !important;
}

/* .stomn-brandmark and its children's sizing/color rules live in
   stomn_theme.css instead of here — see the comment there for why
   (a sand_ui default needs a specific selector shape + load order to
   actually be overridden, not just placed in this file). */

.header-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.15rem;
}

.header-breadcrumb {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    font-size: 0.78rem;
    color: var(--text-500, #888);
}

.header-breadcrumb a.header-breadcrumb__crumb {
    color: var(--text-500, #888);
    text-decoration: none;
}

.header-breadcrumb a.header-breadcrumb__crumb:hover {
    color: var(--text-900, #111);
    text-decoration: underline;
}

.header-breadcrumb__crumb--current {
    color: var(--text-700, #444);
    font-weight: 600;
}

.header-breadcrumb__sep {
    color: var(--text-400, #aaa);
}

@media (max-width: 700px) {
    .header-nav { gap: 1rem; }
}

} /* @layer overrides */

/* Torleiv, 2026-08-18 ("Mentions i vanlig tekstfarge og uten
   understrekning" — #10213415884): deliberately OUTSIDE any @layer.
   stomn_theme/10_style_guide_and_modals.css already sets
   `.person-mention { color: inherit; text-decoration: none; }` — a pill
   chip, not a blue link, per its own comment — but that rule lives
   inside @layer overrides like everything else in this app's own CSS.
   The lexxy gem's lexxy-content.css ships its own `a { color:
   var(--lexxy-color-link); text-decoration: underline; }` for rich-text
   bodies, and that file has no @layer of its own anywhere — CSS layer
   rules put ANY unlayered style ahead of EVERY named layer regardless of
   specificity or source order, so lexxy's plain `a` rule (lower
   specificity, 0-0-1) was still beating .person-mention's `.class` rule
   (0-1-0) inside every document body. Confirmed live: a real mention
   rendered with the underlined link color despite the "layered" rule
   above explicitly saying otherwise. An unlayered rule is the only way
   to actually outrank another unlayered rule — matching it here rather
   than moving .person-mention itself, since this is the one place in the
   whole file that specifically needs to fight lexxy's own CSS, not the
   rest of the app's cascade. */
.person-mention {
    color: inherit;
    text-decoration: none;
}