/* ---------------------------------------------------------------------------
   Self-hosted fonts. Google now ships both families as variable fonts, so one
   file per family covers every weight we use — Montserrat 600/700 for display,
   Roboto 400/500 for running text. Served from KebabKongen/wwwroot/fonts.

   Do not replace these with a fonts.googleapis.com <link>: it is render-blocking
   and it hands every visitor's IP to Google before first paint.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 500;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Fallbacks only — AppLogo sets both of these inline from AppTheme.CrownGold /
       CrownGoldEdge, so the brand colours live in one C# file. The crown is gold in both
       themes, as it is in the logo itself; the darker edge is what keeps it legible on the
       warm off-white app bar, where a flat gold fill alone would wash out. */
    --kk-crown: #F7C325;
    --kk-crown-edge: #A87008;
    /* Mirrors AppTheme.ButtonPrimary / ButtonPrimaryHover / ButtonPrimaryText. Kept here rather
       than set inline because the override targets MudBlazor's own button classes, and the
       message dialog renders outside MudLayout so it could not inherit a scoped value. */
    --kk-button-primary: #E20009;
    --kk-button-primary-hover: #C40008;
    --kk-button-primary-text: #FFFFFF;
}

/* Filled buttons keep the logo red and a white label in BOTH themes. The palette's Primary is
   the colour of red *text*, which has to be much lighter on a dark ground — white on that
   lighter red would measure 3.42:1, under the AA text minimum. White on the logo red is
   4.96:1, and the fill clears 3:1 against both backgrounds. Disabled buttons are left to
   MudBlazor. */
.mud-button-filled-primary:not([disabled]) {
    background-color: var(--kk-button-primary);
    color: var(--kk-button-primary-text);
}

    .mud-button-filled-primary:not([disabled]):hover {
        background-color: var(--kk-button-primary-hover);
    }

/* --- App bar logo -------------------------------------------------------- */
/* The wordmark is a transparent PNG with the gold crown deleted; the crown is the
   inlined vector, upright, sitting above the last "b". Percentages are measured from
   the source art, so the whole mark scales with AppLogo's Height. */
.app-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.app-logo-mark {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

/* The crown overhangs the wordmark's top by 8.9% of its height, so the wordmark takes
   1/1.089 = 91.8% of the box and the crown occupies the rest. All three numbers are
   measured from the source art (images/kebab-kongen-svelvik.png) by the generator script,
   so re-measure them if the wordmark is ever regenerated. */
.app-logo-wordmark {
    display: block;
    height: 91.8%;
    width: auto;
}

/* Both width AND height are given, so the crown occupies exactly the rectangle the original
   gold crown occupied in the source art (left 65.5%..82.7% of the wordmark's width, centred
   over the "a", and from its top edge down to 23.1% of the mark's height). Re-measured against
   images/kebab-logo-trans.png after the crown drifted onto the second "b" — see git history for
   the prior 67.8% value. With height:auto the vector's own 24:21 aspect made it ~13% taller than
   that box and it hung down into the letters. preserveAspectRatio defaults to "meet", so the
   drawing is fitted inside the box and centred on the original crown's centre rather than being
   stretched to it. */
.app-logo-crown {
    position: absolute;
    top: 0;
    left: 65.0%;
    width: 17.2%;
    height: 23.1%;
    fill: var(--kk-crown);
    stroke: var(--kk-crown-edge);
    stroke-width: 1px;
    paint-order: stroke fill;
}

    /* vector-effect is not an inherited property, so it has to go on the path itself. It keeps
       the outline a constant hairline instead of scaling with the mark, so the shape is still
       defined at 56px in the app bar. */
    .app-logo-crown path {
        vector-effect: non-scaling-stroke;
    }

/* The Forside hero's standalone crown — see Components/CrownMark.razor. */
.crown-mark {
    display: block;
    fill: var(--kk-crown);
    stroke: var(--kk-crown-edge);
    paint-order: stroke fill;
    /* Deliberately NOT vector-effect: non-scaling-stroke, unlike .app-logo-crown path. That
       hairline exists to keep the 56px bar crown defined; at hero size a hairline leaves a pale
       gold shape on the warm off-white (gold measures ~1.3:1 there — see AppTheme.CrownGold).
       Here the outline must grow with the mark, so stroke-width is in viewBox units. */
    stroke-width: 0.5;
}

/* --- Desktop app bar ------------------------------------------------------ */
/* The bar's visual height comes from .mud-toolbar's min-height; --mud-appbar-height is what
   the scroll-offset maths reads (app.js's breadcrumb sticky offset, and scroll-padding-top
   below) — both must be set together or Meny's jump-links land under the bar. */
@media (min-width: 960px) {
    :root {
        --mud-appbar-height: 80px;
    }

    .mud-toolbar {
        min-height: 80px;
    }
}

/* Grid-centres the logo on the bar itself, not on the leftover space either side of it — a
   flex row with a spacer would drift off-centre whenever the nav or phone-button group's width
   changes. */
.appbar-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

    .appbar-grid > :first-child {
        justify-self: start;
    }

    .appbar-grid > :last-child {
        justify-self: end;
    }

/* --- Desktop nav (NavLinkButton) ------------------------------------------ */
.nav-link-button {
    position: relative;
}

    .nav-link-button::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 2px;
        background-color: var(--kk-button-primary);
        transform: scaleX(0);
    }

    .nav-link-button:hover::after,
    .nav-link-button:focus-visible::after {
        transform: scaleX(0.5);
        opacity: 0.6;
    }

    .nav-link-button-active::after {
        transform: scaleX(1);
    }

@media (prefers-reduced-motion: no-preference) {
    .nav-link-button::after {
        transition: transform 0.2s ease;
    }
}

/* --- Layout chrome ------------------------------------------------------- */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 10px 20px;
}

/* Footer.razor renders a MudPaper, which paints Surface. Let the page ground show through
   so the footer is not a panel sitting on top of the page. */
#footer {
    background-color: transparent;
}

@media (max-height: 500px) {
    /* The chat button in .floating-button is fixed to the viewport's bottom-right corner, so on a
       short viewport (e.g. landscape phone) the footer's own margin isn't enough clearance to keep
       its links from sitting behind the button once the page is scrolled to the bottom.
       Footer.razor renders <MudPaper id="footer" ...> — target the id, not the (unused) .footer
       class. */
    #footer {
        padding-bottom: 64px;
    }
}

.mud-range-container {
    margin: 5px 0;
}

.floating-button {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    /* Same treatment as the filled buttons: the logo red with a white icon in both themes. */
    color: var(--kk-button-primary-text);
    background: var(--kk-button-primary);
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2px;
}

.image-container {
    position: relative;
    display: block;
    width: 100%;
}

.tiny-mud-checkbox .mud-button-root {
    padding: 0 2px 0 0 !important;
}

.uppercase input.mud-input-slot {
    text-transform: uppercase;
}

/* --- HorizontalImage ----------------------------------------------------- */
/* Kept deliberately: the Forside hero leaves a slot for a real photograph and this is
   the overlay treatment it would use. See docs/plans/completed/0004-visual-restyle.md,
   Step 11 — do not delete as dead code. */
.img-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .img-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* adjust darkness here */
        z-index: 1; /* lower than MudContainer */
    }

    .img-container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        min-width: 100%;
        max-width: none;
    }


.img-container-text {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    z-index: 10;
}

@media (max-width: 600px) {
    /* Below this width the MudGrid inside .kontakt-overlay-card stacks (xs="12"), making the
       overlay taller than the 600px hero image behind it. Let it flow in normal position instead
       of floating over the image so it can't overflow/clip against the image's fixed height. */
    .kontakt-overlay-container {
        position: static;
        width: 100%;
        padding-bottom: 24px !important;
        color: inherit;
    }

    .kontakt-overlay-card {
        position: static;
    }
}

/* Routes.razor renders <FocusOnNavigate Selector="h1">, which moves focus to the page
   heading after every navigation — good for screen readers — and Blazor stamps the heading
   with tabindex="-1" to make that possible. The browser then paints a focus ring around the
   heading on load. Suppress it for elements that are not keyboard-tabbable only; every real
   interactive control keeps its focus indicator. */
[tabindex="-1"]:focus {
    outline: none;
}

/* --- Forside hero -------------------------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.hero-headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

    .hero-headline .hero-headline-accent {
        color: var(--mud-palette-primary);
    }

.hero-lead {
    max-width: 34rem;
    color: var(--mud-palette-text-secondary);
}

.hero-cta {
    font-size: 1.05rem;
    padding: 0.65rem 2rem;
}

/* --- Lists --------------------------------------------------------------- */
.list-container {
    display: flex;
    flex-wrap: wrap;
}

.list-item {
    flex: 1 1 100%;
    padding: 4px 0;
    word-break: break-word;
}

@media (min-width: 600px) { /* sm breakpoint in MudBlazor */
    .list-item {
        flex: 1 1 50%;
    }
}


.mud-treeview-item-content {
    padding-left: 0px !important;
}

    .mud-treeview-item-content .mud-treeview-item-arrow {
        margin-left: 0px !important;
    }

/* --- Menu ---------------------------------------------------------------- */
.col-text {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.menu-category-section {
    display: block;
}

/* Group heading: the only red on the page apart from the CTA, so it still carries
   meaning. The rule sits on the header ROW's cells, not on the heading block, so it spans
   the full table width including the size-label columns — one line under the whole header,
   and none under "Liten"/"Stor" themselves.
   Specificity note: MudSimpleTable's own `.mud-simple-table table * tr>td` (0,1,3) sets a
   hairline border-bottom on every cell, so these need two classes to win. */
.mud-simple-table .menu-category-row > td {
    border-bottom: 2px solid var(--mud-palette-primary);
    padding-top: 20px !important;
}

.menu-category-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mud-palette-primary);
}

/* Size labels belong on the heading's line, so the cell aligns to the top rather than
   floating to the middle of a header cell made tall by a category description. */
.menu-size-cell {
    vertical-align: top !important;
}

.menu-category-cell {
    vertical-align: top !important;
}

/* A category repeating the previous one's name (Innbakt Pizza, Tilbehør Pizza under
   Pizza) is a sub-heading of it, not a peer: smaller, neutral, indented, no rule. */
.mud-simple-table .menu-category-row-sub > td {
    border-bottom: none;
    padding-top: 28px !important;
}

.menu-category-row-sub .menu-category {
    padding-left: 16px;
}

.menu-category-row-sub .menu-category-title {
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
}

.menu-category-allergens {
    color: var(--mud-palette-text-secondary);
    cursor: help;
}

.menu-category-description {
    color: var(--mud-palette-text-secondary);
}

.menu-category-additional {
    color: var(--mud-palette-text-secondary);
    padding: 8px 16px 0 16px;
}

.menu-category-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .menu-category-text.d-flex {
        flex-wrap: wrap;
    }

    .menu-category-row-sub .menu-category {
        padding-left: 8px;
    }
}

.menu-size-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    /* Match the heading's line box so the labels read as being on the same line. */
    line-height: 1.75rem;
}

/* Name and description differ by size, weight AND colour strength — three signals,
   none of them hue, so the hierarchy survives greyscale and colour blindness. */
.menu-item-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.menu-item-description {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.menu-item-price {
    font-family: var(--mud-typography-subtitle1-family);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--mud-appbar-height) + 20px);
}

.mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th {
    padding: 8px 8px;
}

    .mud-simple-table.mud-table-dense * tr td:first-child {
        padding-left: 16px !important;
        padding-right: 0px !important;
    }

    .mud-simple-table.mud-table-dense * tr td:last-child {
        padding-right: 16px !important;
    }

@media (max-width: 600px) {
    /* Must come after the unconditional rule above — same selectors, so with equal specificity
       and matching !important usage, source order decides the winner regardless of the media
       query. Gives the price columns more breathing room next to the (now-wrapping)
       name/description column on narrow screens, without changing the table structure itself. */
    .mud-simple-table.mud-table-dense * tr td, .mud-simple-table.mud-table-dense * tr th {
        padding: 6px 4px;
    }

        .mud-simple-table.mud-table-dense * tr td:first-child {
            padding-left: 8px !important;
        }

        .mud-simple-table.mud-table-dense * tr td:last-child {
            padding-right: 8px !important;
        }
}

/* The name/description column absorbs the leftover width so the price columns shrink to
   their content. With the category header out of the table there is nothing left to fight
   this, so it no longer needs !important. */
.menu-table td:first-child {
    width: 100%;
}

/* Dropping Outlined removed the border, but MudSimpleTable is still a MudPaper painting
   Surface — which left each category as a white block on the warm ground. Let the page show
   through: separation is the red rule above and the hairline between items, the way a
   printed menu works. */
.menu-table {
    background-color: transparent;
}

.menu-item-content img {
    margin-top: 0px;
    border-radius: 4px;
}


.menu-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.menu-item-content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    overflow-wrap: anywhere;
}

.menu-item-content-block-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.menu-item-content-icon-right {
    max-width: 32px;
    height: 24px;
    flex-shrink: 0;
}

/* Only some of the 61 items will ever be photographed, so a row without a photo closes
   up rather than reserving a ragged empty column. */
.menu-item-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

@media (max-width: 400px) {
    .menu-item-thumb {
        display: none;
    }
}