/* Pizzeria Colosseum — clean rewrite (zero JS, zero Artisteer cruft) */

/* Cinzel — self-hosted (eliminuje render-blocking round-trip do Google Fonts) */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('/assets/fonts/cinzel-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: 'Cinzel';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('/assets/fonts/cinzel-latin-ext.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;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Wymuś zawsze widoczny pionowy scrollbar — bez tego strony z mniejszą treścią (np. risotta)
   są wąsze i przy przełączaniu między podstronami treść skacze poziomo. */
html { overflow-y: scroll; }

body {
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    color: #D2D2D2;
    background: #524938;
    line-height: 1.5;
}

a { color: #F09F0A; text-decoration: none; }
a:hover { color: #F7B336; text-decoration: underline; }

/* Linki w treści i footerze: zawsze podkreślone (a11y — żeby nie były rozróżnialne tylko po kolorze) */
.art-article a,
footer.art-footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* ale tylko-text-only obrazki (kafelki kategorii na home) bez podkreślenia */
.art-article a:has(img),
.art-article a.art-button {
    text-decoration: none;
}

img { max-width: 100%; height: auto; border: 0; }

/* === Outer wrapper z gradientem (ciemny brąz → tan → off-white). Fixed = nie scrolluje się z treścią. === */
#art-main {
    background: linear-gradient(to bottom, #524938 0, #978768 366px, #F1EEEA 1050px) no-repeat fixed #AC9F86;
    min-height: 100vh;
    padding-bottom: 24px;
}

/* === Top navigation — pełna szerokość, doklejone do góry, sticky przy scrollowaniu === */
nav.art-nav {
    width: 100%;
    margin: 0;
    padding: 8px 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(89, 69, 33, 0.95));
    position: sticky;
    top: 0;
    z-index: 10;
}

nav.art-nav .art-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

ul.art-hmenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

ul.art-hmenu > li { margin: 0; }

ul.art-hmenu > li + li::before {
    content: "|";
    color: #8c7d60;
    margin: 0 4px;
}

ul.art-hmenu > li > a {
    display: inline-block;
    padding: 8px 22px;
    font-family: 'Times New Roman', Georgia, Times, serif;
    font-size: 20px;
    color: #DBDBDB;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

ul.art-hmenu > li > a:hover,
ul.art-hmenu > li > a.active {
    background: rgba(172, 159, 134, 0.4);
    color: #FFFFFF;
    text-decoration: none;
}

ul.art-hmenu > li > a.active { font-weight: bold; }

/* === Header — wide banner z warstwami (full-width, treść w wewnętrznym wrapperze) === */
header.art-header {
    width: 100%;
    /* przy 1200px viewportu osiągamy 400px wysokości (33.33% * 1200 = 400) */
    height: clamp(200px, 33.33vw, 400px);
    margin: 8px 0 0;
    position: relative;
    overflow: hidden;
}

/* Pizza jako pseudo-element. Default: kotwica do prawej krawędzi viewportu z połową schowaną.
   Powyżej 1200px: kotwica do stałej pozycji (środek + 1023px), więc rozszerzanie ekranu odkrywa prawą połowę. */
header.art-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 845 / 400;
    background: url('../images/pizza-banner.webp') center / contain no-repeat;
    transform: translateX(50%);
    z-index: 0;
    pointer-events: none;
}

@media (min-width: 1200px) {
    header.art-header::before {
        transform: none;
        /* min() klamuje na 0 — przy bardzo szerokich ekranach pizza zatrzymuje się przy prawej krawędzi (zamiast jechać dalej w lewo) */
        right: min(50vw - 1023px, 0px);
    }
}

.art-header-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/* Colosseum — widoczne tylko na ≥ 900px (poniżej kolidowałby z dużym logo) */
header.art-header .colosseum-img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-10%, -50%);
    /* skalowanie po wysokości — 90% wysokości headera, ~2x większe niż wcześniej */
    height: clamp(180px, 90%, 380px);
    aspect-ratio: 606 / 296;
    background: url('../images/header-shape.webp') center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Logo tekstowe — zastępuje logo.png, skaluje się płynnie. Cinzel = open-source ekwiwalent Trajan-a. */
/* WAŻNE: font-size na .art-headline jest "bazą"; logo-name/logo-sub używają em → zawsze skalują się razem */
header.art-header .art-headline {
    position: absolute;
    top: 7%;
    left: 15%;
    z-index: 2;
    font-family: 'Cinzel', 'Times New Roman', Georgia, serif;
    font-weight: 800;
    color: #1E170B;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    font-size: clamp(40px, 7.5vw, 90px);
}

header.art-header .art-headline:hover { text-decoration: none; color: #1E170B; }

header.art-header .logo-name {
    display: block;
    font-size: 1em;
    letter-spacing: 0.02em;
    border-bottom: 0.025em solid currentColor;
    padding-bottom: 0.05em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

header.art-header .logo-sub {
    display: block;
    font-weight: 700;
    /* COLOSSEUM = 30% wielkości PIZZERIA — proporcja stała przy każdej szerokości okna */
    font-size: 0.3em;
    letter-spacing: 1.2em;
    margin-top: 0.15em;
    text-align: center;
    margin-right: -1.2em;
}

/* Poniżej 900px: ukrywamy Colosseum, content sheet bez overlap-u, logo szerokie ~90% viewportu */
/* === Content sheet — ciemna brązowa karta === */
.art-sheet {
    max-width: 1100px;
    margin: -90px auto 0; /* mocno wsuwa się pod header — najeżdża na pizzę i Colosseum */
    padding: 24px 28px;
    background: #1E170B;
    border-radius: 15px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.32);
    position: relative;
    z-index: 5;
}

/* Outer (template) layout — bez specjalnego styling, wszystko block */
.art-layout-wrapper { display: block; }
.art-sheet > .art-layout-wrapper > .art-content-layout,
.art-sheet > .art-layout-wrapper > .art-content-layout > .art-content-layout-row {
    display: block;
}
.art-sheet .art-layout-cell.art-content { display: block; padding: 0; }

/* Wewnętrzny artykuł */
article.art-post,
.art-sheet .art-post { background: transparent; border: 0; margin: 0 0 16px; }
.art-postcontent { padding: 0; }
.art-article { color: #D2D2D2; }
.breadcrumbs { display: none; }

/* === Inner layout (z DB content — home/kontakt) — flex, respektuje inline width === */
.art-article .art-content-layout {
    margin-bottom: 16px;
}

.art-article .art-content-layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.art-article .art-layout-cell {
    padding: 8px 12px;
    text-align: center;
    box-sizing: border-box;
}

.art-article .art-layout-cell[style*="width"] { flex: 0 0 auto; }
.art-article .art-layout-cell:not([style*="width"]) { flex: 1 1 0; }

/* === Nagłówki === */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    color: #FFFFFF;
    text-shadow: 1.4px 1.4px 0 rgba(23, 23, 23, 0.81);
    margin: 0 0 12px;
    line-height: 1.2;
}

h1 { font-size: 30px; }
h2 { font-size: 24px; color: #F09F0A; }
h3 { font-size: 20px; }

.art-postheader {
    color: #F09F0A;
    text-align: center;
    margin: 8px 0 12px;
    text-transform: none;
}

p { margin: 0 0 12px; }

/* === Tabela menu === */
.menu-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 16px;
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
}

.menu-table tr.item-row.alt,
.menu-table tr.desc-row.alt { background-color: rgba(242, 242, 242, 0.05); }

.menu-table td {
    padding: 4px 8px;
    vertical-align: top;
}

.menu-table td.col-num { width: 5%; font-size: 20px; white-space: nowrap; }
.menu-table td.col-name { width: 75%; font-size: 20px; }
.menu-table td.col-price { width: 10%; text-align: right; font-size: 20px; white-space: nowrap; }
.menu-table td.col-desc { font-size: 16px; color: #b8b0a0; padding-top: 0; padding-bottom: 8px; }

.menu-table tr.section-row td { font-size: 22px; color: #F09F0A; padding-top: 8px; }
.menu-table tr.section-spacer td { height: 24px; padding: 0; }

/* Buttons (Więcej na home, etc.) */
.art-button {
    display: inline-block;
    padding: 8px 20px;
    margin-top: 8px;
    background: linear-gradient(to bottom, #F09F0A, #BF7F08);
    color: #1E170B !important;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #BF7F08;
    transition: filter 0.2s;
}
.art-button:hover { filter: brightness(1.1); text-decoration: none; }

/* iframe (mapa kontakt) */
iframe { max-width: 100%; border: 0; border-radius: 6px; }

/* === Footer — wewnątrz content sheet, ciemny pasek na dole karty === */
footer.art-footer {
    margin: 24px -28px -24px;
    padding: 10px 28px;
    background: #0e0a05;
    text-align: center;
    color: #b0a890;
    font-size: 13px;
    border-top: 1px solid rgba(159, 143, 115, 0.3);
    border-radius: 0 0 15px 15px;
}

footer.art-footer p { margin: 0; }
footer.art-footer a { color: #F09F0A; }

/* === Responsywność === */
@media (max-width: 1199px) {
    .art-sheet {
        max-width: calc(100% - 16px);
        margin-left: 8px;
        margin-right: 8px;
        margin-top: -70px;
    }
}

/* Poniżej 900px: ukrywamy Colosseum, content sheet bez overlap-u, logo wycentrowane */
@media (max-width: 899px) {
    header.art-header .colosseum-img { display: none; }
    .art-sheet { margin-top: 0; }
    header.art-header .art-headline {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: clamp(48px, 13vw, 110px);
    }
}

@media (max-width: 650px) {
    .art-sheet { padding: 12px; border-radius: 10px; margin-top: -20px; }
    /* footer kompensuje teraz 12px padding sheet'u zamiast 28px */
    footer.art-footer { margin: 16px -12px -12px; padding: 10px 12px; border-radius: 0 0 10px 10px; }

    ul.art-hmenu > li > a { padding: 6px 10px; font-size: 16px; }
    ul.art-hmenu > li + li::before { margin: 0 2px; }

    .art-article .art-content-layout-row { flex-direction: column; }
    .art-article .art-layout-cell { width: 100% !important; }

    .menu-table td.col-num,
    .menu-table td.col-name,
    .menu-table td.col-price { font-size: 16px; }
    .menu-table td.col-desc { font-size: 13px; }
    .menu-table td.col-num { width: 30px; }

    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
}