/* GastroWall production interpretation of the user's 24 October 2026 brand boards.
   Palette: source board 05. Layout direction: source boards 06/07.
   Raster illustrations and the mark are production derivatives; UI text stays HTML. */
@font-face {
    font-family: "GastroWall Rounded";
    src: url("fonts/Nunito-variable.ttf") format("truetype");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-tomato: #ff3b3b;
    --brand-coral: #ff7a4d;
    --brand-orange: #ffa53a;
    --brand-basil: #4caf3a;
    --brand-olive: #2e7d32;
    --brand-cream: #fff8ee;
    --brand-brown: #8b5e3c;
    --brand-heading: #681c13;
    --brand-action-ink: #32110c;
    --green: #2e7d32;
    --green-dark: #235e27;
    --ink: #432f27;
    --muted: #725f52;
    --line: #ebdccb;
    --page: #f1e7db;
    --canvas: #fff8ee;
    --white: #fffdf9;
    --radius: 22px;
    --shadow: 0 12px 36px #8b5e3c0b;
}

h1, h2, h3, .brand-name strong, .control-brand strong, .guest-brand strong {
    font-family: "GastroWall Rounded", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
    font-weight: 850;
}

.app-frame {
    border-color: #e7d7c6;
    background: var(--brand-cream);
    box-shadow: 0 18px 70px #8b5e3c12;
}

.site-header {
    background: #fffaf3f5;
    border-block-end-color: #ecdcc8;
}

.brand-mark {
    inline-size: 52px;
    block-size: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    border-radius: 15px;
    filter: none;
}

.brand-name strong {
    display: flex;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: -1px;
}

.brand-name strong > span:first-child { color: #c92b23; }
.brand-name strong > span:last-child { color: #26732b; }
.brand-name small { color: #765f4d; }

.header-search {
    background: #fffefa;
    border-color: #a18569;
    border-radius: 999px;
    box-shadow: 0 3px 10px #8b5e3c09;
}

.header-search input { color: #432f27; }
.header-search input::placeholder { color: #806d5e; }

.button-primary, .header-search button {
    background: var(--brand-tomato);
    background-image: linear-gradient(110deg, var(--brand-tomato), var(--brand-coral));
    color: var(--brand-action-ink);
    border-color: #9d4a2e;
    border-radius: 999px;
    box-shadow: 0 5px 14px #eb603323;
    font-weight: 800;
}

.button-primary:hover:not(:disabled), .header-search button:hover:not(:disabled) {
    background: #ff6347;
    background-image: linear-gradient(110deg, #ff4b3e, #ff9a52);
    color: var(--brand-action-ink);
    border-color: #9d4a2e;
}

.button-primary:active { box-shadow: 0 2px 5px #eb603325; }
.button-primary:disabled { background-image: none; }
.button-outline { color: #5b3122; border-color: #9f8063; background: #fffdf7; border-radius: 999px; }
.button-outline:hover:not(:disabled) { color: #5b3122; border-color: #8c715b; background: #fff0dc; }

.card, .profile-card {
    border-color: #eadbc9;
    background: #fffefa;
    box-shadow: 0 7px 22px #8b5e3c09;
}

.feed-intro h1, .feed-intro h2, .auth-intro h1,
.feed-tools h2, .rail-panel h2, .empty-state h2,
.settings-section h1, .settings-section h2,
.business-page-heading h1, .business-hero h1,
.business-workspace-heading h1, .business-workspace-list-heading h2 {
    color: var(--brand-heading);
}

.feed-intro h2 {
    margin: 2px 0 4px;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.eyebrow { color: #8a4930; }
.story-ring { border-color: #eedac1; background: #fffdf6; color: #6b3824; }
.story[aria-current="page"] .story-ring { border-color: #f76b46; box-shadow: 0 0 0 3px #ff7a4d20; color: #a8271c; }
.story[aria-current="page"] > span:last-child { color: #9a2c1d; }
.story .ring-namirnice { background: #edf6e5; color: #2b702d; border-color: #cce2be; }
.story .ring-dogadanja { background: #fff0d8; color: #8d4a16; border-color: #f3d3a0; }
.story .ring-restorani { background: #fff0e5; color: #a23b23; border-color: #f1cbb4; }
.avatar { background: #eaf2df; color: #356732; }
.post-category { background: #fff0dd; color: #824521; }
.side-nav a[aria-current="page"] { background: #ffead7; color: #8c2e1e; }
.like-form button[aria-pressed="true"], .like-form .active { color: #bd2925; }
.join-strip { background: #fff3e3; border-color: #efd1ab; }
.site-footer { border-color: #eadac5; background: #fff8ee; }

.brand-art { display: block; min-inline-size: 0; }
.brand-art img { display: block; inline-size: 100%; block-size: auto; }

.brand-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(16px, 3vw, 42px);
    max-inline-size: 1340px;
    margin: 24px auto 8px;
    padding: 8px clamp(22px, 3vw, 42px) 12px;
}

.brand-welcome-copy { min-inline-size: 0; }
.brand-welcome-copy > .eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.brand-welcome h1 {
    margin: 0;
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: -.045em;
    color: var(--brand-heading);
    overflow-wrap: anywhere;
}
.brand-welcome h1 > span { display: block; color: #b92d20; }
.brand-welcome-description { max-inline-size: 520px; color: #655348; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; margin: 20px 0 24px; }
.brand-welcome-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-welcome-actions .button { min-block-size: 50px; padding-inline: 22px; white-space: normal; text-align: center; }
.brand-topics { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; list-style: none; }
.brand-topics a { display: inline-flex; align-items: center; gap: 7px; min-block-size: 44px; padding: 8px 13px; border: 1px solid #e6d8c3; border-radius: 999px; color: #5a3d2d; background: #fffdf7; font-size: 13px; font-weight: 700; }
.brand-topics li:nth-child(3) a { background: #edf5e4; color: #285f2b; border-color: #d0e1bf; }
.brand-topics a:hover { border-color: #dbad81; background: #fff0dc; }
.brand-welcome-art { border-radius: 28px; }
.brand-welcome-art img { aspect-ratio: 4 / 3; object-fit: contain; border-radius: inherit; }

.auth-wrap {
    max-inline-size: 1180px;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 440px);
    gap: 42px;
    align-items: center;
}
.auth-intro { min-inline-size: 0; }
.auth-intro h1 { font-weight: 950; font-size: clamp(34px, 3.5vw, 49px); line-height: 1.1; }
.auth-intro > p { max-inline-size: 500px; color: #6c5749; }
.auth-emblem { color: #2e7132; margin-block-start: 16px; }
.auth-brand-art { margin-block-start: 20px; border-radius: 24px; }
.auth-brand-art img { border-radius: inherit; aspect-ratio: 4 / 3; object-fit: contain; }
.auth-card { border-color: #e4cfb9; box-shadow: 0 15px 48px #8b5e3c10; }
.auth-card h2 { color: var(--brand-heading); }
.form-stack input:not([type="checkbox"]):not([type="radio"]),
.form-stack textarea, .form-stack select { background-color: #fffefa; border-color: #a18569; color: #432f27; }
.language-switch select, .location-search-row input { border-color: #a18569; }
.language-switch button { min-inline-size: 44px; min-block-size: 44px; }

.brand-empty-state { padding-block-start: 0; }
.brand-empty-art { margin: 0 -24px 22px; }
.brand-empty-art img { block-size: 210px; object-fit: cover; object-position: center 52%; border-radius: 21px 21px 0 0; }
.brand-empty-state > .eyebrow { color: #8c4931; }

/* Business pages keep their own uploaded identity and operational forms. */
.business-workspace-heading, .business-page-heading { border-block-end: 1px solid #ead7c0; padding-block-end: 24px; }
.business-workspace .business-stat-card, .business-workspace .business-owner-card,
.business-workspace .business-workspace-filters, .business-workspace .business-workspace-empty { border-color: #e7d8c5; background: #fffefa; }
.business-workspace .business-stat-icon, .business-workspace .business-empty-icon { color: #a22c21; background: #fff0e0; }
.business-workspace .business-stat-card dd { color: #6b281a; }
.business-workspace .business-form-section-heading > span { color: #8a351f; background: #ffecd5; }
.business-workspace .business-form-nav a[aria-current="location"] { color: #92331f; background: #fff0df; }
.business-logo-placeholder { background: #eef5e4; color: #2e6a2e; }

.app-frame :focus-visible { outline-color: #964118; }

@media (max-width: 1000px) {
    .brand-welcome { gap: 18px; padding-inline: 24px; }
    .brand-welcome h1 { font-size: 44px; }
    .brand-welcome-description { font-size: 16px; margin-block: 16px 20px; }
    .brand-welcome-actions .button { padding-inline: 16px; font-size: 13px; }
    .brand-topics { gap: 6px; margin-block-start: 16px; }
    .brand-topics a { font-size: 12px; padding-inline: 10px; }
}

@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: minmax(0, 1fr); max-inline-size: 700px; gap: 20px; }
    .auth-intro { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 0 18px; align-items: center; }
    .auth-intro > .eyebrow { align-self: end; }
    .auth-intro h1 { font-size: 34px; margin-block: 8px; }
    .auth-intro > p { display: none; }
    .auth-emblem { margin-block-start: 8px; font-size: 13px; }
    .auth-brand-art { grid-column: 2; grid-row: 1 / 5; margin: 0; }
    .auth-card { inline-size: 100%; }
}

@media (max-width: 760px) {
    .brand-welcome { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block-start: 18px; padding: 10px 20px 8px; text-align: center; }
    .brand-welcome h1 { font-size: clamp(37px, 7.3vw, 51px); }
    .brand-welcome-description { max-inline-size: 530px; margin: 16px auto 20px; }
    .brand-welcome-actions, .brand-topics { justify-content: center; }
    .brand-welcome-art { inline-size: 100%; max-inline-size: 570px; margin-inline: auto; }
    .brand-welcome-art img { max-block-size: 350px; }
    .brand-name strong { font-size: 23px; }
}

@media (max-width: 540px) {
    .brand-mark { inline-size: 43px; block-size: 43px; flex-basis: 43px; border-radius: 12px; }
    .brand-name strong { font-size: 22px; }
    .brand-name small { font-size: 9px; }
    .brand-welcome-copy > .eyebrow { font-size: 10px; margin-block-end: 12px; }
    .brand-welcome h1 { font-size: 39px; }
    .brand-welcome-actions { gap: 9px; }
    .brand-welcome-actions .button { min-block-size: 48px; padding-inline: 15px; }
    .brand-topics { margin-block-start: 17px; }
    .brand-topics a { font-size: 12px; }
    .brand-welcome-art img { max-block-size: 285px; }
    .feed-intro h2 { font-size: 24px; }
    .auth-wrap { padding-inline: 14px; margin-block-start: 14px; }
    .auth-intro { grid-template-columns: minmax(0, 1fr) 125px; gap: 0 10px; }
    .auth-intro h1 { font-size: 27px; line-height: 1.15; }
    .auth-intro > .eyebrow { font-size: 9px; letter-spacing: .06em; }
    .auth-emblem { font-size: 11px; line-height: 1.5; margin-block-start: 4px; }
    .auth-brand-art { border-radius: 16px; }
    .brand-empty-art img { block-size: 180px; }
}

@media (max-width: 400px) {
    .brand-name strong { font-size: 20px; }
    .brand { gap: 7px; }
}

@media (max-width: 350px) {
    .brand-welcome h1 { font-size: 34px; }
    .brand-welcome-actions .button { flex: 1 1 100%; }
    .auth-intro { grid-template-columns: minmax(0, 1fr); }
    .auth-brand-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-welcome *, .auth-brand-art { animation: none; transition: none; }
}

@media (forced-colors: active) {
    :root { --ink: CanvasText; --muted: CanvasText; --canvas: Canvas; --white: Canvas; --green: LinkText; --green-dark: LinkText; --brand-heading: CanvasText; }
    .app-frame, .site-header, .card, .profile-card { background: Canvas; border-color: CanvasText; box-shadow: none; }
    .brand-welcome h1, .brand-welcome h1 > span, .brand-name strong > span,
    .brand-welcome-description, .auth-intro h1, .auth-intro > p, .auth-emblem { color: CanvasText; }
    .button-primary, .button-outline, .header-search button, .brand-topics a {
        background: ButtonFace;
        background-image: none;
        color: ButtonText;
        border: 1px solid ButtonText;
        box-shadow: none;
    }
    .story[aria-current="page"] .story-ring { outline: 2px solid Highlight; }
}