/*
    Heading font (docs/platform/05-design-irany.md, section 2): Nunito, self-hosted so no third party sees the
    visitors (SIL Open Font License, fonts/nunito/OFL.txt). Only 700 and 800; latin-ext carries ő and ű.
*/
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/nunito/nunito-latin-700-normal.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: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/nunito/nunito-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/nunito/nunito-latin-800-normal.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: "Nunito";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/nunito/nunito-latin-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
    Semantic pastel surfaces follow the theme by mixing with its surface colour.
    Use TextPrimary on these surfaces; blue remains reserved for verification.
*/
:root {
    --appbar-vine-band: 24px;
    /* Half of the band hangs below the app bar, the other half overlaps it (AppBarVine.razor.css). */
    --appbar-vine-below: calc(var(--appbar-vine-band) / 2);
    --szomszed-sun: #F3CC6B;
    --szomszed-on-sun: #20383C;
    --szomszed-aqua: color-mix(in srgb, #61B6B0 22%, var(--mud-palette-surface));
    --szomszed-mint: color-mix(in srgb, #7EB76D 22%, var(--mud-palette-surface));
    --szomszed-honey: color-mix(in srgb, #E8BD47 32%, var(--mud-palette-surface));
    --szomszed-peach: color-mix(in srgb, #DA7964 27%, var(--mud-palette-surface));
    --szomszed-lilac: color-mix(in srgb, #A88AD8 22%, var(--mud-palette-surface));
    /*
        Soft cards (docs/platform/05-design-irany.md, "Puha kártyák"): large radii, no outlines, a deep but faint
        shadow, and a few highlight cards in brand gradients instead of flat pastels.
    */
    /*
        Concentric with the 48 px pill buttons MudCardActions puts 8 px from the corner: 24 px button radius + 8 px
        inset, so a button in a card's corner follows the card's curve.
    */
    --szomszed-radius-card: 32px;
    --szomszed-shadow-card: 0 1px 2px rgba(32, 56, 60, 0.04), 0 14px 34px -12px rgba(32, 56, 60, 0.16);
    --szomszed-shadow-raised: 0 2px 4px rgba(32, 56, 60, 0.05), 0 24px 48px -16px rgba(32, 56, 60, 0.26);
    --szomszed-shadow-button: 0 1px 2px rgba(32, 56, 60, 0.06), 0 8px 18px -8px rgba(32, 56, 60, 0.22);
    /* Petrol with a soft aqua sheen in one corner; white text. */
    --szomszed-grad-petrol: radial-gradient(120% 90% at 100% 100%, rgba(140, 212, 217, 0.38), transparent 55%), linear-gradient(155deg, #1F6F79 0%, #123C44 100%);
    /* Peach to orange and honey to amber; dark text (contrast at least 5:1 at the deep end). */
    --szomszed-grad-orange: radial-gradient(90% 70% at 100% 100%, rgba(255, 255, 255, 0.28), transparent 60%), linear-gradient(150deg, #FCE6CF 0%, #F7BD82 50%, #EF9A4D 100%);
    --szomszed-grad-honey: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.4), transparent 60%), linear-gradient(150deg, #F9DC86 0%, #F4B652 100%);
    --szomszed-grad-cream: linear-gradient(160deg, #FFFDF9 0%, #FBEBDA 100%);
    --szomszed-on-light-gradient: #20383C;
    /* Display figures and page titles; the simple look sets them in the body font. */
    --szomszed-font-display: "Nunito", system-ui, sans-serif;
}

/* Warm light from the left and a bright corner, as on a lit table; faint enough to stay out of the way. */
body {
    background:
        radial-gradient(60vmax 50vmax at -10% 70%, rgba(246, 185, 122, 0.16), transparent 70%),
        radial-gradient(50vmax 40vmax at 110% -10%, color-mix(in srgb, var(--mud-palette-surface) 55%, transparent), transparent 70%),
        var(--mud-palette-background);
    background-attachment: fixed;
}

/* Large headings set tight, as on the reference boards. */
h1.mud-typography, h2.mud-typography, .mud-typography-h3, .mud-typography-h4 {
    letter-spacing: -0.02em;
}

/* Petrol chrome anchors the otherwise quiet, light interface. */
.mud-appbar {
    box-shadow: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-appbar a.mud-typography-h6 {
    font-family: "Nunito", system-ui, sans-serif;
    font-weight: 800;
}

/* Cards in the page: rounded, borderless, a soft shadow instead of an outline. */
.mud-main-content .mud-card,
.mud-main-content .mud-paper-outlined {
    border-radius: var(--szomszed-radius-card);
    border-color: transparent;
    box-shadow: var(--szomszed-shadow-card);
}

/* Cards that are links lift a little under the pointer. */
.home-example {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.home-example:hover {
    transform: translateY(-2px);
    box-shadow: var(--szomszed-shadow-raised);
}

@media (prefers-reduced-motion: reduce) {
    .home-example { transition: none; }
    a.home-example:hover { transform: none; }
}

/* Every button is a pill. The primary action is filled and at least 48 px tall (02-design-system.md: touch targets). */
.mud-button-root.mud-button {
    border-radius: 999px;
}

.mud-button-filled.mud-button-filled-primary {
    min-height: 48px;
    padding-inline: 24px;
    box-shadow: var(--szomszed-shadow-button);
}

/* The secondary action is a white pill with a soft shadow instead of an outline. */
.mud-main-content .mud-button-outlined {
    min-height: 44px;
    padding-inline: 22px;
    border-color: transparent;
    background-color: var(--mud-palette-surface);
    box-shadow: var(--szomszed-shadow-button);
}

.mud-main-content .mud-button-outlined:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

/* Active navigation uses a soft aqua surface and an explicit current-page state. */
.app-drawer .mud-nav-link {
    border-radius: 999px;
    margin: 2px 8px;
    width: auto;
}

.app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 0;
    background-color: var(--szomszed-aqua);
    color: var(--mud-palette-primary);
}

/* A clearly visible keyboard focus on everything that can take it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Blazor focuses the page heading after navigation; it is not an interactive control. */
.mud-main-content h1[tabindex="-1"]:focus { outline: none; }

.mud-appbar a:focus-visible,
.mud-appbar button:focus-visible {
    outline-color: var(--szomszed-sun);
}

/* Room for the vine band under the app bar (AppBarVine.razor): the page and the clipped drawer start below it. */

.mud-main-content {
    padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8 + var(--appbar-vine-below));
}

.app-drawer .mud-drawer-content {
    padding-top: var(--appbar-vine-below);
}

/* The page vines (PageVine.razor) are positioned against the main content, so they scroll with the page. */
.mud-main-content {
    position: relative;
}

/* Keep the last content above the phone bottom bar (WCAG 2.4.11 Focus Not Obscured). */
@media (max-width: 599.98px) {
    .mud-main-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* Feed and form pages: readable line length on wide screens (docs/platform/02-design-system.md, section 3). */
.content-narrow {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* Shared content surfaces; each has a role rather than giving every panel a colour. */
.neighbour-panel {
    padding: 24px;
    border-radius: var(--szomszed-radius-card);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--szomszed-shadow-card);
}

/* Highlight panels: help requests in honey, community in warm orange, both with dark text. */
.neighbour-panel--honey { background: var(--szomszed-grad-honey); color: var(--szomszed-on-light-gradient); }
.neighbour-panel--coral { background: var(--szomszed-grad-orange); color: var(--szomszed-on-light-gradient); }

/* Comments and messages: conversation text, a step smaller than post bodies, in boxes that grow with the text. */
.mud-typography.text-compact {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* The boxes go small only on wider screens: iOS zooms into any field under 16 px when it gets the focus. */
@media (min-width: 600px) {
    .mud-input-control.text-compact .mud-input > textarea.mud-input-slot {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

.post-composer .mud-chip { min-height: 40px; height: auto; border-radius: 999px; }
.post-composer .mud-chip-content { white-space: normal; padding-block: 6px; }
/* A long feed: cards far off screen skip layout and paint; the remembered height keeps the scrollbar steady. */
.post-card { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.post-list-more { display: grid; place-items: center; min-height: 48px; margin-bottom: 16px; }
.post-card .mud-card-actions { border-top: 1px solid var(--mud-palette-lines-default); padding: 12px 16px; }
.post-tag.mud-chip { background: var(--szomszed-aqua); color: var(--mud-palette-text-primary); border-radius: 999px; }
.post-tag--helprequest.mud-chip, .post-tag--warning.mud-chip { background: var(--szomszed-honey); }
.post-tag--lostpet.mud-chip, .post-tag--foundpet.mud-chip { background: var(--szomszed-peach); }
.post-tag--giveaway.mud-chip { background: var(--szomszed-mint); }
.post-tag--poll.mud-chip { background: var(--szomszed-lilac); }

.page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.page-intro p { max-width: 60ch; margin-top: 8px; }

.page-intro-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50% 50% 14px 50%;
    background: var(--szomszed-grad-honey);
    box-shadow: var(--szomszed-shadow-button);
    color: var(--szomszed-on-light-gradient);
}

.home-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: 40px;
    padding: clamp(24px, 4vw, 56px);
    border-radius: var(--szomszed-radius-card);
    background: var(--mud-palette-surface);
    box-shadow: var(--szomszed-shadow-raised);
}

/* The illustration sits on its own warm tile inside the hero card. */
.home-hero > svg {
    padding: clamp(12px, 2vw, 24px);
    border-radius: var(--szomszed-radius-card);
    background: var(--szomszed-grad-cream);
}

.home-hero > div { min-width: 0; }
.home-hero h1 { font: 800 clamp(2.25rem, 5vw, 3.5rem)/1.1 var(--szomszed-font-display); max-width: 14ch; letter-spacing: -.025em; }
.home-hero p { margin-top: 24px; max-width: 48ch; font-size: 1.125rem; line-height: 1.65; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-actions .mud-button-outlined { min-height: 48px; border-radius: 999px; padding-inline: 24px; }
.home-how-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--mud-palette-primary); text-decoration: underline; text-underline-offset: 4px; }
.home-section { margin-block: 48px; scroll-margin-top: 112px; }
.home-section h2 { margin-bottom: 20px; }
.home-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-example { display: flex; gap: 20px; align-items: center; min-height: 148px; padding: 28px; border-radius: var(--szomszed-radius-card); box-shadow: var(--szomszed-shadow-card); }
.home-example:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.home-example--garden { background: var(--szomszed-grad-petrol); color: #F0FAF9; }
.home-example--pets { background: var(--szomszed-grad-orange); color: var(--szomszed-on-light-gradient); }
.home-example .mud-icon-root { width: 40px; height: 40px; flex-shrink: 0; }
.home-example .home-example-chevron { width: 24px; height: 24px; margin-left: auto; }
.home-example p { margin-top: 4px; }
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: home-step; }
.home-step { counter-increment: home-step; padding: 28px; border-radius: var(--szomszed-radius-card); background: var(--mud-palette-surface); box-shadow: var(--szomszed-shadow-card); }
.home-step::before { content: counter(home-step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--szomszed-grad-honey); color: var(--szomszed-on-light-gradient); font-weight: 800; box-shadow: var(--szomszed-shadow-button); }
.home-step p { margin-top: 8px; line-height: 1.65; color: var(--mud-palette-text-secondary); }
.home-section.neighbour-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; }
.home-section.neighbour-panel > div { max-width: 60ch; }
.home-section.neighbour-panel .mud-button { flex-shrink: 0; min-height: 48px; }

.community-search { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.community-search .mud-input-control { flex: 1; min-width: 0; margin-top: 0; }
.community-search .mud-button { min-height: 56px; }

.request-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 32px; }
.request-banner > div { flex: 1; min-width: min(100%, 220px); }
.request-banner .mud-icon-root { width: 36px; height: 36px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block: 16px 32px; }
.category-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: var(--szomszed-radius-card); color: var(--mud-palette-text-primary); box-shadow: var(--szomszed-shadow-card); }
/* White tiles like the rest of the board; the group colour is the round icon badge. */
.category-tile { background: var(--mud-palette-surface); }
.category-tile > .mud-icon-root { width: 52px; height: 52px; padding: 13px; border-radius: 50%; box-shadow: var(--szomszed-shadow-button); }
/* A tile opens the category's helpers. */
a.category-tile { transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.category-tile:hover { transform: translateY(-2px); box-shadow: var(--szomszed-shadow-raised); }
a.category-tile:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { a.category-tile, a.category-tile:hover { transition: none; transform: none; } }
.category-tile--garden > .mud-icon-root { background: var(--szomszed-grad-petrol); color: #F0FAF9; }
.category-tile--pets > .mud-icon-root { background: var(--szomszed-grad-orange); color: var(--szomszed-on-light-gradient); }
.category-tile .mud-chip { height: auto; min-height: 32px; margin: auto 0 0; }
.category-tile .mud-chip-content { white-space: normal; padding-block: 6px; }
.category-group { scroll-margin-top: 112px; }

@media (max-width: 959.98px) {
    .home-hero { gap: 24px; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
    .home-hero { grid-template-columns: 1fr; gap: 16px; }
    .home-actions { flex-direction: column; }
    .home-hero > svg { max-width: 280px; }
    .home-section { margin-block: 32px; }
    .home-steps { gap: 16px; }
    .home-step { padding: 22px; }
    .home-section.neighbour-panel { flex-direction: column; align-items: stretch; padding: 24px; gap: 8px; }
    .home-example { gap: 12px; padding: 20px; }
    .community-search { flex-direction: column; gap: 8px; }
    .community-search .mud-input-control, .community-search .mud-button { width: 100%; }
    .home-examples, .home-steps, .category-grid { grid-template-columns: 1fr; }
    .neighbour-panel, .category-tile { padding: 20px; }
    .page-intro { gap: 12px; }
    .page-intro-mark { width: 48px; height: 48px; }
    .mud-main-content .mud-card-actions { flex-wrap: wrap; }
}

/*
    The simple look (PlatformDesign.Simple, docs/platform/05-design-irany.md, "Egyszerű nézet"): the same pages, flat,
    as on a social feed. A white bar over a grey page, white cards without shadows, flat colours instead of gradients,
    one font, no vine. The theme (PlatformTheme.Simple) sets the colours; these rules only take the soft look back.
*/
html[data-design="simple"] {
    --appbar-vine-below: 0px;
    --szomszed-radius-card: 16px;
    --szomszed-shadow-card: none;
    --szomszed-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.12);
    --szomszed-shadow-button: none;
    /* Fixed light tints, not mixed with the surface: the text on them stays dark in dark mode too. */
    --szomszed-grad-petrol: #175E68;
    --szomszed-grad-orange: #FBE1CB;
    --szomszed-grad-honey: #F8E3A3;
    --szomszed-grad-cream: var(--mud-palette-background);
    --szomszed-font-display: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-design="simple"] body {
    background: var(--mud-palette-background);
}

html[data-design="simple"] h1.mud-typography,
html[data-design="simple"] h2.mud-typography,
html[data-design="simple"] .mud-typography-h3,
html[data-design="simple"] .mud-typography-h4 {
    letter-spacing: normal;
}

html[data-design="simple"] .mud-appbar {
    border-bottom: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* The name in the brand colour on the white bar, like a logo. */
html[data-design="simple"] .mud-appbar .brand-link {
    color: var(--mud-palette-primary);
}

html[data-design="simple"] .mud-appbar a:focus-visible,
html[data-design="simple"] .mud-appbar button:focus-visible {
    outline-color: var(--mud-palette-primary);
}

html[data-design="simple"] .user-menu-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Buttons stay pills, but smaller and flat; the secondary one is a grey fill. */
html[data-design="simple"] .mud-button-filled.mud-button-filled-primary {
    min-height: 40px;
    padding-inline: 20px;
}

html[data-design="simple"] .mud-main-content .mud-button-outlined {
    min-height: 40px;
    padding-inline: 18px;
    background-color: var(--mud-palette-background-gray);
}

html[data-design="simple"] .mud-main-content .mud-button-outlined:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-background-gray));
}

/* The navigation sits on the page grey, without a divider; the current page is a light brand tint. */
html[data-design="simple"] .app-drawer {
    border-right: 0;
}

html[data-design="simple"] .app-drawer .mud-nav-link {
    border-radius: 8px;
}

html[data-design="simple"] .app-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Link cards change shade under the pointer instead of lifting. */
html[data-design="simple"] a.home-example:hover,
html[data-design="simple"] a.category-tile:hover {
    transform: none;
}

html[data-design="simple"] .home-hero h1 {
    font-weight: 700;
}

.app-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }