/* ==========================================================================
   Starter stylesheet for a new intuitiva client site.
   Replace tokens below with the client's brand, then build pages on top.
   ========================================================================== */

/* Typefaces — Source Sans 3 for body text, Libre Baskerville for titles and
   navigation. Self-hosted; the latin + latin-ext subsets cover Slovenian. */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v10-latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v10-latin-ext-italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v10-latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v10-latin-ext-600italic.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/source-sans-3-700-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;
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/source-sans-3-700-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-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/source-sans-3-500-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;
}
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/source-sans-3-500-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;
}
/* Variable font: one file per subset serves both 400 and 700. */
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400 700;
    src: url('../fonts/libre-baskerville-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;
}
@font-face {
    font-display: swap;
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400 700;
    src: url('../fonts/libre-baskerville-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 {
    --color-text: #222;
    --color-text-muted: #6d7276;
    --color-bg: #EEE1CB;
    --color-bg-alt: #E5D5B8;
    --color-accent: #92000C;
    --color-border: #D6C3A2;

    --color-dark: #202020;      /* header, footer and mobile menu */
    --color-light: #F5F2E9;     /* text and links on dark */
    --color-gold: #E0BA88;
    --gold-line: linear-gradient(90deg, #7A654A, #E0BA88 50%, #7A654A);
    --gold-divider: linear-gradient(180deg, rgba(224, 186, 136, 0) 0%, #E0BA88 15.4%, #E0BA88 84.6%, rgba(224, 186, 136, 0) 100%);

    --font-body: 'Source Sans 3', "Helvetica Neue", Arial, sans-serif;
    --font-heading: 'Libre Baskerville', Georgia, serif;

    /* Gap between stacked .contentContainer sections: 100px on wide screens,
       shrinking with the window down to 50px on phones. */
    --spacing-section: clamp(50px, 6.5vw, 100px);
    --spacing-section-inner: clamp(40px, 5.2vw, 80px); /* top/bottom padding inside a .grey/.dark section */
}

* {
    box-sizing: border-box;
}

html {
    font-size: 18px; /* the base 1rem for the whole site — heading/spacing
                         rem values throughout this file are tuned against
                         this, not the browser default 16px */
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Headings -------------------------------------------------------------------
   h1 3rem down to h4, scaling down at tablet (<=1023px) and phone (<=567px)
   so nothing feels oversized on small screens. */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    margin: 30px 0;
}
h1 { font-size: 64px; }
h2 { font-size: 2.6rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.8rem; }

@media only screen and (max-width: 1023px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2.1rem; }
    h3 { font-size: 1.7rem; }
    h4 { font-size: 1.3rem; }
}
@media only screen and (max-width: 567px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.1rem; }
}

/* Layout ------------------------------------------------------------------
   section > .contentContainer > .contentInner.widthN — a full-width section
   wraps a max-width, centered, padded content block. .widthN sets how wide
   that inner block gets (14=1680px down to 2=260px); .contentInner alone
   defaults to 1460px (same as .width12). */

section {
    display: flex;
    width: 100%;
}

.contentContainer {
    flex-flow: column;
    margin-top: var(--spacing-section);
}

.contentContainer.grey {
    background: var(--color-bg-alt);
    padding: var(--spacing-section-inner) 0;
}
/* Dark textured band with gold rules top and bottom, like the header
   (Pivovarna beers). Headings and text turn light. */
.contentContainer.dark {
    position: relative;
    padding: var(--spacing-section) 0;
    background: var(--color-dark) url('../img/texture-dark.jpg') center / cover;
    color: var(--color-light);
}
.contentContainer.dark::before,
.contentContainer.dark::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold-line);
}
.contentContainer.dark::before { top: 0; }
.contentContainer.dark::after { bottom: 0; }
.contentContainer.dark .titleCategory,
.contentContainer.dark h2 {
    color: var(--color-light);
}
.contentContainer.dark .moreLink:hover {
    color: var(--color-gold);
}

.contentInner {
    display: block;
    width: 100%;
    max-width: 1460px;
    padding: 0 20px;
    margin: 0 auto;
}

.contentInner.noPadding {
    padding: 0;
}

.contentInner + .contentInner {
    margin-top: 80px;
}
@media only screen and (max-width: 767px) {
    .contentInner + .contentInner { margin-top: 50px; }
}

.contentContainer h1,
.contentContainer h2,
.contentContainer h3,
.contentContainer h4 {
    margin: 0 0 20px;
}

.contentInner p:first-child,
.contentInner ul:first-child,
.contentInner h1:first-child,
.contentInner h2:first-child,
.contentInner h3:first-child,
.contentInner h4:first-child {
    margin-top: 0;
}
.contentInner p:last-child,
.contentInner ul:last-child,
.contentInner h1:last-child,
.contentInner h2:last-child,
.contentInner h3:last-child,
.contentInner h4:last-child {
    margin-bottom: 0;
}

.contentInner p a,
.contentInner ul a {
    color: var(--color-accent);
}
.contentInner p a:hover,
.contentInner ul a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.contentInner .center,
.center {
    text-align: center;
}

.width14 { max-width: 1680px; }
.width12 { max-width: 1460px; }
.width10 { max-width: 1220px; }
.width8  { max-width: 980px; }
.width6  { max-width: 740px; }
.width4  { max-width: 500px; }
.width2  { max-width: 260px; }

/* Eyebrow above a section heading: small caps label followed by a gold line
   fading out to the right ("KONTAKT ——" above "Stopimo v stik"). */
.titleCategory {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.titleCategory::after {
    content: '';
    width: 231px;
    max-width: 40%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold), rgba(224, 186, 136, 0));
}
.contentInner .titleCategory + h1,
.contentInner .titleCategory + h2 {
    margin-top: 0;
}

/* Site-wide notification bar (see SettingsController::siteMessage,
   "Posebno obvestilo" in urednik) — only rendered when a message is set. */

#headerNotification {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 20px 12px;
    text-align: center;
    background: linear-gradient(90deg, #3D0005, #92000C 50%, #3D0005);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}
#headerNotification::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold-line);
}

#headerNotificationText {
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.3;
}
a#headerNotificationText:hover {
    color: var(--color-light);
    text-decoration: none;
}

/* Header / nav --------------------------------------------------------------
   Dark textured bar with a gold bottom line. The banner hangs from the top of
   the bar over the hero below it; the wordmark sits to its right. */

.mainHeader {
    position: relative;
    z-index: 20;
    background: var(--color-dark) url('../img/texture-dark.jpg') center / cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.mainHeader::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--gold-line);
}

.mainHeaderInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1460px;
    height: 110px;
    margin: 0 auto;
    padding: 0 20px 2px;
}

#logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 158px; /* banner width + gap, the wordmark starts after it */
}
#logo:hover {
    text-decoration: none;
}
.logoBanner {
    position: absolute;
    top: 0;
    left: 16px; /* 4px of the image is the banner's drop shadow */
    width: 157px;
    height: auto;
    z-index: 21;
}
.logoText {
    width: 358px;
    height: auto;
}

.mainNav ul,
.footerNav ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.mainNav li,
.footerNav li {
    display: flex;
    align-items: center;
}
.mainNav li + li::before,
.footerNav li + li::before,
.footerLegal li + li::before {
    content: '';
    width: 1px;
    height: 30px;
    margin: 0 20px;
    background: var(--gold-divider);
}
.mainNav a,
.footerNav a {
    position: relative;
    color: var(--color-light);
    font-family: var(--font-heading);
    font-size: 18px;
    white-space: nowrap;
    transition: color 0.2s;
}
.mainNav a:hover,
.footerNav a:hover {
    color: var(--color-gold);
    text-decoration: none;
}
.mainNav a.selected {
    color: var(--color-gold);
    font-weight: 700;
}
.mainNav a.selected::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: var(--color-gold);
}

@media only screen and (max-width: 1399px) {
    .mainNav li + li::before { margin: 0 12px; }
    .mainNav a { font-size: 16px; }
    #logo { padding-left: 150px; }
    .logoText { width: 280px; }
}

@media only screen and (max-width: 1179px) {
    .mainHeaderInner { height: 80px; }
    #logo { padding-left: 106px; }
    .logoBanner { width: 100px; left: 17px; }
    .logoText { width: 240px; }
}

@media only screen and (max-width: 567px) {
    .mainHeaderInner { height: 64px; padding-right: 8px; }
    #logo { padding-left: 76px; }
    .logoBanner { width: 70px; left: 18px; }
    .logoText { width: 190px; }
}
/* The smallest phones (320–379px): shrink banner, wordmark, gap and menu
   button so the header never gets wider than the screen. */
@media only screen and (max-width: 379px) {
    .mainHeaderInner { gap: 8px; }
    #logo { padding-left: 62px; }
    .logoBanner { width: 56px; }
    .logoText { width: 150px; }
    #mobileMenuBtn { width: 52px; }
}

/* Page hero -----------------------------------------------------------------
   Photo with a dark left-to-right fade, the page's heading and subtitle, the
   breadcrumb on top and a torn-paper bottom edge. Rendered on every page
   except the homepage; see view/template.php ($heroTitle, $heroSubtitle,
   $heroImage page parameters). */

.pageHero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 559px;
    padding: 120px 0 100px;
    overflow: hidden;
    background-color: var(--color-dark);
}
.pageHero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(108.6deg, rgba(49, 49, 49, 0.75) 14.5%, rgba(49, 49, 49, 0) 100%);
}
.pageHero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    aspect-ratio: 1800 / 50; /* the edge artwork's own proportions — scales with the width */
    background: url('../img/edge.svg') center bottom / 100% 100% no-repeat;
}
.pageHeroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    /* Ken Burns: a slow zoom with a slight drift, anchored at the bottom so
       the torn edge never reveals the photo's lower border. */
    transform-origin: 50% 100%;
    animation: hero-ken-burns 24s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes hero-ken-burns {
    from { transform: scale(1) translateX(0); }
    to { transform: scale(1.12) translateX(-2%); }
}
@media (prefers-reduced-motion: reduce) {
    .pageHeroImg { animation: none; }
}
.pageHeroInner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 20px;
}
.pageHeroTitle {
    margin: 0 0 15px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 72px;
    line-height: 1.2;
    text-shadow: 0 4px 4px #372618;
}
.pageHeroSubtitle {
    margin: 0;
    color: #F2E0C9;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 26px;
}

@media only screen and (max-width: 1023px) {
    .pageHero { min-height: 420px; padding: 100px 0 80px; }
    .pageHeroTitle { font-size: 48px; }
}
@media only screen and (max-width: 567px) {
    .pageHero { min-height: 320px; padding: 80px 0 60px; }
    .pageHeroTitle { font-size: 34px; }
    .pageHeroSubtitle { font-size: 16px; line-height: 24px; }
}

/* Breadcrumbs (Crumbline::print) — at the top of the hero, over the photo.
   Aligned with the content column, but always starting right of the header
   banner that hangs into the hero. */

.crumblineContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.crumblineInner {
    padding: 18px 20px 0 max(20px, calc((100% - 1180px) / 2), calc(max(20px, (100% - 1420px) / 2) + 173px));
}
.crumblineInner ul {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
}
.crumblineInner ul li {
    color: rgba(245, 242, 233, 0.6);
    padding: 0 5px 0 0;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.crumblineInner ul li a {
    color: var(--color-light);
    white-space: nowrap;
}
.crumblineInner ul li a:hover {
    color: var(--color-gold);
    text-decoration: none;
}
.crumblineInner ul li.active {
    color: var(--color-gold);
}

@media only screen and (max-width: 1399px) {
    .crumblineInner { padding-left: max(20px, calc((100% - 1180px) / 2), 190px); }
}
@media only screen and (max-width: 1179px) {
    /* The smaller banner ends ~60px into the hero; sit just below its tip. */
    .crumblineInner { padding: 70px 20px 0; }
}
@media only screen and (max-width: 567px) {
    .crumblineInner { padding-top: 46px; }
}

/* Mobile menu ----------------------------------------------------------------
   Hamburger toggle + slide-in panel, shown only below 1023px. Animations use
   plain CSS transitions (no GSAP) — JS only toggles the `.open` class. */

#mobileMenuBtn {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 102;
}

#nav-icon {
    width: 32px;
    height: 20px;
    position: relative;
}

#nav-icon span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-light);
    opacity: 1;
    transition: 0.25s ease-in-out;
}

#nav-icon span:nth-child(1) { top: 0; }
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) { top: 9px; }
#nav-icon span:nth-child(4) { top: 18px; }

#nav-icon.open span:nth-child(1),
#nav-icon.open span:nth-child(4) {
    top: 10px;
    width: 0;
    left: 50%;
}
#nav-icon.open span:nth-child(2) { transform: rotate(45deg); }
#nav-icon.open span:nth-child(3) { transform: rotate(-45deg); }

#menuPanelBg {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(26, 26, 26, 0.65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
#menuPanelBg.open {
    opacity: 1;
    visibility: visible;
}

#menuPanelContainer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 101;
    width: 100%;
    max-width: 360px;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.5s ease-out;
}
#menuPanelContainer.open {
    transform: translateX(0);
}

#menuPanelContainerInner {
    height: 100%;
    background-color: var(--color-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#menuPanelLinks {
    padding: 0 15%;
}

/* Two visual levels, matching the source design: primary nav (first
   column) is large/bold with an animated underline on hover; the second
   column (contact info) is smaller, dimmer by default, and not uppercase
   since it holds a phone number / email rather than nav labels. Each link
   staggers in from above on open. */
.menuPanelLinksCol {
    color: var(--color-light); /* base color for plain text (e.g. the "T:" prefix before
                    the phone link) — .menuPanelLinksCol a overrides this
                    for the links themselves */
}
.menuPanelLinksCol + .menuPanelLinksCol {
    margin-top: 20px;
}

.menuPanelLinksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menuPanelLinksCol li {
    padding: 10px 0;
}

.menuPanelLinksCol a {
    position: relative;
    display: inline-block;
    color: rgba(245, 242, 233, 0.6);
    text-decoration: none;
    border-bottom: 1px solid transparent; /* reserve the space so :hover's border never shifts layout */
    opacity: 0;
    transform: translateY(-16px);
    /* Hover (color/border-color) transitions at a flat 0.15s with no delay.
       Open/stagger (opacity/transform) gets its per-link delay set below —
       kept on separate transition-property entries so the stagger delay
       can never bleed into the hover response and make it feel sluggish. */
    transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0s, transform 0.4s ease-out 0s;
}
#menuPanelContainer.open .menuPanelLinksCol a {
    opacity: 1;
    transform: none;
}
.menuPanelLinksCol a:hover {
    color: var(--color-light);
    border-bottom-color: rgba(245, 242, 233, 0.6);
    border-bottom-style: dotted;
}

/* Stagger from top: each link across both columns delays a bit more than
   the last (9 menu links, then the contact rows below — add more :nth-child rules if the menu grows). Only the
   opacity/transform delay changes here — color/border-color above always
   keep their instant hover response. */
.menuPanelLinksCol:first-of-type li:nth-child(1) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.05s, transform 0.4s ease-out 0.05s; }
.menuPanelLinksCol:first-of-type li:nth-child(2) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s; }
.menuPanelLinksCol:first-of-type li:nth-child(3) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.15s, transform 0.4s ease-out 0.15s; }
.menuPanelLinksCol:first-of-type li:nth-child(4) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s; }
.menuPanelLinksCol:first-of-type li:nth-child(5) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.25s, transform 0.4s ease-out 0.25s; }
.menuPanelLinksCol:first-of-type li:nth-child(6) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s; }
.menuPanelLinksCol:first-of-type li:nth-child(7) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.35s, transform 0.4s ease-out 0.35s; }
.menuPanelLinksCol:first-of-type li:nth-child(8) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.4s, transform 0.4s ease-out 0.4s; }
.menuPanelLinksCol:first-of-type li:nth-child(9) a { transition: color 0.15s, border-color 0.15s, opacity 0.4s ease-out 0.45s, transform 0.4s ease-out 0.45s; }
/* Contact column: the whole row staggers in, so the "T:" prefix moves with its phone link. */
.menuPanelLinksCol:last-of-type li {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.4s ease-out 0.5s, transform 0.4s ease-out 0.5s;
}
.menuPanelLinksCol:last-of-type li:nth-child(2) { transition-delay: 0.55s; }
.menuPanelLinksCol:last-of-type li:nth-child(3) { transition-delay: 0.6s; }
#menuPanelContainer.open .menuPanelLinksCol:last-of-type li {
    opacity: 1;
    transform: none;
}
.menuPanelLinksCol:last-of-type a {
    opacity: 1;
    transform: none;
    transition: color 0.15s, border-color 0.15s;
}

.menuPanelLinksCol:first-of-type {
    font-family: var(--font-heading);
    font-size: 1.25rem;
}
.menuPanelLinksCol:first-of-type a {
    color: var(--color-light);
}
.menuPanelLinksCol:first-of-type a:hover {
    border-bottom-color: transparent;
}
.menuPanelLinksCol:first-of-type a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: width 0.3s;
}
.menuPanelLinksCol:first-of-type a:hover::after {
    width: 100%;
}
.menuPanelLinksCol:first-of-type a.selected {
    color: var(--color-gold);
}
.menuPanelLinksCol:first-of-type a.selected::after {
    width: 0;
}

.menuPanelLinksCol:last-of-type {
    font-size: 0.875rem;
}
.menuPanelLinksCol:last-of-type a {
    text-transform: none;
}

@media only screen and (max-width: 1179px) {
    .mainNav { display: none; }
    #mobileMenuBtn { display: flex; }
}

/* Footer ----------------------------------------------------------------------
   Dark textured footer under a torn-paper top edge, with the banner hanging
   on the right. Centered stack: wordmark, menu, phone, hours, company line,
   then a divider and the legal links / Izvedba row. */

.mainFooter {
    position: relative;
    margin-top: var(--spacing-section);
    padding: 92px 20px 40px;
    color: var(--color-light);
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 26px;
    background: var(--color-dark) url('../img/texture-dark.jpg') center / cover;
}
.mainFooter::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 3;
    aspect-ratio: 1800 / 50; /* the edge artwork's own proportions — scales with the width */
    background: url('../img/edge.svg') center bottom / 100% 100% no-repeat;
    transform: rotate(180deg);
}
.mainFooter a {
    color: var(--color-light);
    transition: color 0.2s;
}
.mainFooter a:hover {
    color: var(--color-gold);
    text-decoration: none;
}

.footerInner {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 40px;
    max-width: 1420px;
    margin: 0 auto;
    text-align: center;
}

.footerBanner {
    position: absolute;
    top: -92px;
    right: -11px;
    z-index: 2;
    width: 149px;
    height: auto;
}

.footerLogo img {
    width: 358px;
    max-width: 100%;
    height: auto;
}

.footerNav ul {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
}

.footerPhone {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
}
.footerPhoneLabel {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mainFooter a.footerPhoneBtn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: 36px;
    padding: 5px 16px 6px;
    border-radius: 8px;
    background: var(--color-light);
    color: #26221D;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
}
.mainFooter a.footerPhoneBtn:hover {
    background: var(--color-gold);
    color: #26221D;
}

.footerHours,
.footerCompany {
    margin: 0;
}

.footerBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding-top: 40px;
    border-top: 1px solid rgba(245, 242, 233, 0.1);
}
.footerLegal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    row-gap: 6px;
}
.footerLegal li {
    display: flex;
    align-items: center;
}
.footerWebdesign {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
/* The logo is a mask filled with the link colour, so it follows the
   text's hover colour. */
.footerWebdesignLogo {
    width: 80px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url('../img/intuitiva.svg') center / contain no-repeat;
    mask: url('../img/intuitiva.svg') center / contain no-repeat;
}

@media only screen and (max-width: 1179px) {
    .footerBanner { width: 110px; right: 0; top: -92px; }
}
.footerLegal li:first-child {
    display: block;
}

/* Below 1024px the footer menu and the legal row stack into single
   centred columns; dividers would dangle, so they are dropped. */
@media only screen and (max-width: 1023px) {
    .footerNav li + li::before,
    .footerLegal li + li::before { display: none; }
    .footerNav ul,
    .footerLegal { flex-flow: column; }
    .footerNav ul { gap: 16px; }
    .footerLegal { gap: 12px; }
    .footerBottom { flex-flow: column; gap: 28px; }
}

@media only screen and (max-width: 767px) {
    .mainFooter { padding-top: 70px; }
    /* Hangs centred from the footer's top edge, above the wordmark. */
    .footerBanner { position: static; width: 110px; margin-top: -70px; margin-bottom: -30px; }
    .footerInner { gap: 50px; }
    .footerNav a { font-size: 16px; }
}

/* Scroll to top (same behaviour as nai-significa: appears after 200px) ----- */

#scrollTop {
    position: fixed;
    right: 20px;
    bottom: -70px;
    z-index: 90;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(224, 186, 136, 0.6);
    border-radius: 50%;
    background: var(--color-dark) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.79 15.9 1.42 1.41 7.79-7.79 7.79 7.79 1.42-1.41-9.21-9.21z' fill='%23E0BA88'/%3E%3C/svg%3E") 50% 45% / 24px 24px no-repeat;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    opacity: 0;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), bottom 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#scrollTop.scrollTop-scrolled {
    bottom: 30px;
    opacity: 1;
}
#scrollTop:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}
@media only screen and (min-width: 1024px) {
    #scrollTop:hover {
        transform: scale(1.2);
    }
}

/* Floating call / location buttons above #scrollTop, below 1024px only. They
   sit where #scrollTop appears and slide up (same easing) once it shows. */
.quickActions {
    display: none;
}
@media only screen and (max-width: 1023px) {
    .quickActions {
        position: fixed;
        right: 20px;
        bottom: 30px;
        z-index: 90;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: bottom 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    #scrollTop.scrollTop-scrolled ~ .quickActions {
        bottom: 90px;
    }
}
.quickAction {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(224, 186, 136, 0.6);
    border-radius: 50%;
    background: var(--color-dark);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.quickAction::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #E0BA88;
    -webkit-mask: var(--icon) center / 24px 24px no-repeat;
    mask: var(--icon) center / 24px 24px no-repeat;
}
.quickActionPhone { --icon: url('../img/icon-phone-gold.svg'); }
.quickActionLocation { --icon: url('../img/icon-location.svg'); }
.quickAction:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Shared components --------------------------------------------------------- */

/* .featureStrip: two or three short facts, each with an icon, in one light
   strip split by gold dividers; they stack on phones (Kontakt advantages,
   Dostava facts). */
.featureStrip {
    list-style: none;
    display: grid;
    grid-auto-flow: column; /* as many equal columns as there are facts */
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr; /* equal heights, also when stacked */
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(186, 142, 84, 0.45);
}
.featureStrip li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    font-weight: 700;
}
.featureStrip li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: var(--gold-divider);
}
.featureStrip img {
    flex: none;
    width: 32px;
    height: 32px;
}
@media only screen and (max-width: 1179px) {
    .featureStrip li { padding: 20px; }
}
@media only screen and (max-width: 767px) {
    /* Stacked: the dividers turn horizontal. */
    .featureStrip { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
    .featureStrip li + li::before { top: 0; bottom: auto; left: 16px; right: 16px; width: auto; height: 1px; background: linear-gradient(90deg, rgba(224, 186, 136, 0), #E0BA88 15.4%, #E0BA88 84.6%, rgba(224, 186, 136, 0)); }
}

/* .moreLink: gold "Spoznajte … →" link with an arrow that nudges on hover.
   .moreLinkBack puts the arrow first, pointing back. */
.moreLink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    color: #BA8E54;
    font-weight: 700;
}
.moreLink img {
    transition: transform 0.2s;
}
.moreLink:hover {
    color: var(--color-accent);
    text-decoration: none;
}
.moreLink:hover img {
    transform: translateX(4px);
}
.moreLinkBack img {
    transform: scaleX(-1);
}
.moreLinkBack:hover img {
    transform: scaleX(-1) translateX(4px);
}

/* Kontakt page (view/pages/contact.php) ------------------------------------- */

.visuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Title in its own block; below it the contact details and, under them,
   the three advantages in one light strip split by gold dividers. */
.contactDetails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 283px));
    column-gap: 100px;
    row-gap: 60px;
}
.contactAdvantages {
    margin-top: 80px;
}
@media only screen and (max-width: 767px) {
    .contactAdvantages { margin-top: 50px; }
}
.contactDetailsCol {
    display: flex;
    flex-flow: column;
    gap: 60px;
}
.contactItem {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.contactItem img {
    width: 32px;
    height: 32px;
}
.contactItemLabel {
    padding-top: 6px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
}
.contentInner .contactItem p {
    margin: 10px 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.contentInner .contactItem p strong {
    font-weight: 700;
}
.contentInner .contactItem p a {
    color: var(--color-text);
}
.contentInner .contactItem p a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

@media only screen and (max-width: 1179px) {
    .contactDetails { column-gap: 50px; }
}
@media only screen and (max-width: 767px) {
    .contactDetails { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
    .contactDetailsCol { gap: 40px; }
}

/* Map: a dark street map with gold rules, the heading over its top-left and
   the restaurant marked in the centre by a gold dot. The knight bubble floats
   above it (like nai-significa's .mapContact pin) with its tail pointing at
   the dot, and links to Google Maps. */
.mapContact {
    position: relative;
    min-height: 1000px;
    background: var(--color-dark) url('../img/map-rodica.jpg') center / cover no-repeat;
    color: var(--color-light);
}
.mapContact::before,
.mapContact::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold-line);
}
.mapContact::before { top: 0; }
.mapContact::after { bottom: 0; }

.mapContactText {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 100px;
}
.mapContact .titleCategory {
    color: var(--color-light);
}
.mapContact h2 {
    margin: 0 0 40px;
    color: var(--color-light);
    font-size: 64px;
}
.contentInner.mapContactText p {
    margin: 0;
}

.mapContactDot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: #DFB987;
}
.mapContactDot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid #DFB987;
    border-radius: 50%;
    animation: map-dot-pulse 2s ease-out infinite;
}

.mapContactPin {
    position: absolute;
    z-index: 2;
    /* Left edge on the dot's centre; the tail (20px) points straight down
       at the dot and its tip stops just above the pulsing ring (19px). */
    left: 50%;
    bottom: calc(50% + 22px + 20px);
    display: block;
    padding: 10px;
    background: #3D0005; /* frame around the knight, same colour as the tail */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    animation: map-pin-float 2s ease-in-out infinite alternate;
}
.mapContactPin::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 22px;
    height: 20px;
    background: #3D0005;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.mapContactPin img {
    width: 96px;
    height: 96px;
}

@keyframes map-pin-float {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes map-dot-pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mapContactPin,
    .mapContactDot::after { animation: none; }
}

@media only screen and (max-width: 1023px) {
    .mapContact { min-height: 720px; }
    .mapContact h2 { font-size: 44px; margin-bottom: 24px; }
    .mapContactText { padding-top: 70px; }
}
@media only screen and (max-width: 567px) {
    /* Tall enough that the pin, anchored at the centre, clears the heading. */
    .mapContact { min-height: 720px; }
    .mapContact h2 { font-size: 32px; }
    .mapContactText { padding-top: 50px; }
    .mapContactPin { padding: 8px; }
    .mapContactPin img { width: 72px; height: 72px; }
}

/* O nas page (view/pages/o-nas.php) ----------------------------------------- */

/* A section heading under an eyebrow label is as large as the page title. */
.contentInner .titleCategory + h2 {
    font-size: 64px;
}
@media only screen and (max-width: 1023px) {
    .contentInner .titleCategory + h2,
    .homeHero .homeHeroContent h2 { font-size: 2.5rem; }
}
@media only screen and (max-width: 567px) {
    .contentInner .titleCategory + h2,
    .homeHero .homeHeroContent h2 { font-size: 2rem; }
}

/* Timeline: horizontal from 1024px up — icon, year disc on a gold line,
   label — and a vertical list with the line on the left below that. The
   discs zoom in on hover. */
.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0 4%;
    list-style: none;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 125px; /* icon 64 + gap 20 + half the 84px disc − half the line */
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(208, 166, 94, 0), #D0A65E 10%, #F2DAA4 50%, #D0A65E 90%, rgba(208, 166, 94, 0));
}
.timeline li {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}
.timelineIcon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
}
.timelineYear {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The artwork is an 84px disc plus a 6px gold ring on every side. The
       negative margins keep the layout at 84px so the disc stays centred on
       the line. */
    width: 96px;
    height: 96px;
    margin: -6px 0;
    background: url('../img/timeline-circle.svg') center / 96px 96px no-repeat;
    color: var(--color-light);
    font-family: var(--font-heading);
    font-size: 24px;
    transition: transform 0.3s ease;
}
.timeline li:hover .timelineYear {
    transform: scale(1.15);
}
.timelineLabel {
    max-width: 150px;
    margin-top: 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
}

@media only screen and (max-width: 1023px) {
    .timeline {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
        padding: 0;
    }
    .timeline::before {
        top: 48px;
        bottom: 48px;
        left: 47px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(208, 166, 94, 0), #D0A65E 8%, #F2DAA4 50%, #D0A65E 92%, rgba(208, 166, 94, 0));
    }
    .timeline li {
        display: grid;
        grid-template-columns: 96px 48px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        text-align: left;
    }
    .timelineYear { grid-column: 1; grid-row: 1; }
    .timelineIcon { grid-column: 2; grid-row: 1; width: 48px; height: 48px; margin: 0; }
    .timelineLabel { grid-column: 3; grid-row: 1; max-width: none; margin: 0; }
}

/* Brewery / restaurant blocks: heading, text, a gold "more" link and three
   square photos that open in the lightbox. */
.aboutBlock h3 {
    margin: 0 0 40px;
    color: #BA8E54;
    font-size: 48px;
}
.photoGallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.photoGallery figure {
    margin: 0;
}
.photoGallery a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-gold);
}
.photoGallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.photoGallery a:hover img {
    transform: scale(1.05);
}
.photoGallery figcaption {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

@media only screen and (max-width: 1023px) {
    .aboutBlock h3 { font-size: 36px; margin-bottom: 30px; }
}
@media only screen and (max-width: 567px) {
    .aboutBlock h3 { font-size: 28px; margin-bottom: 20px; }
    .photoGallery { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 30px; }
}

/* Lightbox caption (GLightbox): a page-coloured strip with the title
   centred in Libre Baskerville. The doubled classes outrank glightbox.min.css,
   which loads after this file. */
.glightbox-container.glightbox-clean .gslide-description,
.glightbox-mobile .glightbox-container.glightbox-clean .gslide-description {
    background: var(--color-bg);
}
.glightbox-container.glightbox-clean .gdesc-inner {
    text-align: center;
}
.glightbox-container.glightbox-clean .gslide-title,
.glightbox-mobile .glightbox-container.glightbox-clean .gslide-title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
}

/* Dostava page (view/pages/dostava.php) ------------------------------------- */

/* Big gold call button; its phone icon shakes every few seconds like a
   ringing phone. */
.callButton {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 10px 32px 12px;
    border-radius: 16px;
    background: #BA8E54;
    color: var(--color-light);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.05;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.callButton:hover {
    background: #A67B43;
    text-decoration: none;
}
.callButton img {
    width: 36px;
    height: 36px;
}
/* Phone icons vibrate like a ringing phone (Dostava call button, footer). */
.callButton img,
.footerPhoneBtn img {
    animation: phone-ring 3.2s linear infinite;
}
/* Vibrate: two short bursts of small, fast shakes, then a pause. */
@keyframes phone-ring {
    0% { transform: rotate(-7deg); }
    2% { transform: rotate(7deg); }
    4% { transform: rotate(-7deg); }
    6% { transform: rotate(7deg); }
    8% { transform: rotate(-7deg); }
    10% { transform: rotate(7deg); }
    12% { transform: rotate(-7deg); }
    14% { transform: rotate(7deg); }
    20% { transform: rotate(-7deg); }
    22% { transform: rotate(7deg); }
    24% { transform: rotate(-7deg); }
    26% { transform: rotate(7deg); }
    28% { transform: rotate(-7deg); }
    30% { transform: rotate(7deg); }
    32% { transform: rotate(-7deg); }
    34% { transform: rotate(7deg); }
    16%, 36%, 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .callButton img,
    .footerPhoneBtn img { animation: none; }
}

.contentInner.deliveryOrder p {
    margin: 40px 0 20px;
}
.deliveryHours {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.deliveryHours img {
    width: 32px;
    height: 32px;
}
/* Very narrow phones: drop the clock so the days and times keep one line each. */
@media only screen and (max-width: 359px) {
    .deliveryHours img { display: none; }
}
.deliveryHours dl {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 40px;
    margin: 0;
    font-weight: 700;
}
.deliveryHours dt,
.deliveryHours dd {
    margin: 0;
}
.deliveryHours dd {
    text-align: right;
}
.deliveryOrder .moreLink {
    margin-top: 40px;
}

/* Towns: four columns of two, each with a gold diamond. */
.deliveryTowns {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    column-gap: 100px;
    row-gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
}
.deliveryTowns li {
    display: flex;
    align-items: center;
    gap: 14px;
}
.deliveryTowns li::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 3px;
    background: #BA8E54;
    transform: rotate(45deg);
}

.deliveryAreaImg {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-gold);
}

@media only screen and (max-width: 1023px) {
    .deliveryTowns { column-gap: 50px; }
}
@media only screen and (max-width: 567px) {
    .callButton { gap: 16px; padding: 10px 24px 12px; font-size: 34px; }
    .callButton img { width: 28px; height: 28px; }
    .deliveryTowns { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); column-gap: 50px; row-gap: 16px; }
}

/* Pivovarna page (view/pages/pivovarna.php) --------------------------------- */

/* .introSplit / .introPhoto (shared, Pivovarna and Dostava): text beside a
   photo that opens in the lightbox; stacked on phones. On Pivovarna the four
   ingredients sit centred between two gold rules under the photo. */
.introSplit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}
.introPhoto {
    margin: 0;
}
.introPhoto a {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-gold);
}
.introPhoto img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.introPhoto a:hover img {
    transform: scale(1.05);
}
/* Caption under an intro photo: centred between two short gold rules. */
.introCaption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}
.introCaption::before,
.introCaption::after {
    content: '';
    flex: 1 0 24px;
    max-width: 55px;
    height: 1px;
    margin: 0 auto;
    background: var(--color-gold);
}
.ingredientLine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ingredientLine::before,
.ingredientLine::after {
    content: '';
    flex: 0 0 55px;
    height: 1px;
    background: var(--color-gold);
}
.ingredientLine::before { margin-right: auto; }
.ingredientLine::after { margin-left: auto; }
.ingredientLine span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}
/* A drawn dot between the words (the "・" glyph falls back to another font
   and knocks the baseline out of line). */
.ingredientLine span + span::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
}

/* Beer cards on the dark section: name, a short gold rule, description with
   the alcohol content in gold. */
.photoGallery.beerGallery {
    margin-top: 0;
}
.beerGallery figcaption {
    margin-top: 20px;
    color: #fff;
}
.beerGallery figcaption strong {
    display: block;
    font-size: 24px;
}
.beerGallery figcaption strong::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    margin: 20px auto;
    background: linear-gradient(90deg, rgba(224, 186, 136, 0), #E0BA88 50%, rgba(224, 186, 136, 0));
}
.beerGallery figcaption span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.3;
}
.beerGallery figcaption em {
    font-style: normal;
    color: #DFB987;
}

.contentInner .breweryHeading {
    margin: 0 0 40px;
    font-size: 48px;
}

@media only screen and (max-width: 1023px) {
    .contentInner .breweryHeading { font-size: 36px; margin-bottom: 30px; }
}
@media only screen and (max-width: 767px) {
    .introSplit { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media only screen and (max-width: 567px) {
    .contentInner .breweryHeading { font-size: 28px; margin-bottom: 20px; }
}

/* Full-width fading photo slider (.fadeSlider in .gallerySlider, Gostilna):
   Splide fades between photos while the visible one zooms slowly (Ken
   Burns). Gold rules above and below like the dark bands. */
.contentContainer.gallerySlider {
    position: relative;
    display: block;
}
.gallerySlider::before,
.gallerySlider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 2px;
    background: var(--gold-line);
}
.gallerySlider::before { top: 0; }
.gallerySlider::after { bottom: 0; }
.fadeSlider .splide__slide {
    overflow: hidden;
    height: clamp(320px, 61vw, 85vh);
}
.fadeSlider:not(.is-initialized) .splide__slide:not(:first-child) {
    display: none;
}
.fadeSlider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
    .fadeSlider .is-zooming img {
        animation: slider-ken-burns 8s linear both;
    }
}
@keyframes slider-ken-burns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

/* .btn: solid gold button (homepage hero and specials). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 28px;
    background: #BA8E54;
    color: var(--color-light);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s;
}
.btn:hover {
    background: #A67B43;
    color: var(--color-light);
    text-decoration: none;
}

/* Homepage (view/pages/home.php) ------------------------------------------- */

/* Hero: Gostilna and Pivovarna side by side, filling the window below the
   header (stacked on phones), each with a photo, eyebrow, title and button.
   A torn-paper edge and a bouncing arrow close it at the bottom. */
.homeHero {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Header + hero take 80% of the window, leaving room for the highlights below. */
    min-height: calc(80vh - 110px);
    min-height: calc(80svh - 110px);
    background: var(--color-dark);
    overflow: hidden;
}
.homeHero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    aspect-ratio: 1800 / 50;
    background: url('../img/edge.svg') center bottom / 100% 100% no-repeat;
}
.homeHeroCol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px 90px;
    overflow: hidden;
}
.homeHeroCol + .homeHeroCol::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 2px;
    background: linear-gradient(180deg, #7A654A, #E0BA88 50%, #7A654A);
}
.homeHeroImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}
.homeHeroCol:hover .homeHeroImg {
    transform: scale(1.05);
}
.homeHeroContent {
    position: relative;
    z-index: 2;
    max-width: 560px;
    text-align: center;
}
.homeHeroContent .titleCategory {
    justify-content: center;
    color: var(--color-light);
}
.homeHeroContent .titleCategory::after {
    display: none;
}
/* Hero buttons: dark with a gold frame and gold text, filling gold on hover. */
.homeHeroContent .btn {
    border: 1px solid var(--color-gold);
    background: rgba(32, 32, 32, 0.85);
    color: var(--color-gold);
    transition: background-color .2s, color .2s;
}
.homeHeroContent .btn:hover {
    background: var(--color-gold);
    color: var(--color-dark);
}
.homeHeroContent h2 {
    margin: 0 0 24px;
    color: #fff;
    font-size: 64px; /* same as the eyebrow-labelled h2s (.titleCategory + h2) */
    line-height: 1.15;
    text-shadow: 0 4px 4px #372618;
}
/* Scroll arrow under the torn edge, phones only (the stacked hero fills the
   screen there); hidden from 768px up. */
.homeHeroScrollWrap {
    display: none;
}
@media only screen and (max-width: 767px) {
    /* The strip under the hero is exactly the remaining 10% of the screen, so
       only the hero and the arrow are visible; the next section starts below. */
    .homeHeroScrollWrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10svh;
        min-height: 48px;
    }
    .homeHeroScrollWrap + #ponudba {
        margin-top: 30px;
    }
    .homeHeroScroll {
        display: block;
        width: 48px;
        height: 44px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M2 2l12 12 12-12' fill='none' stroke='%23BA8E54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 16px no-repeat;
        animation: home-scroll-bounce 2s ease-in-out infinite;
    }
}
@keyframes home-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .homeHeroScroll { animation: none; }
}
html:has(.homeHero) {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html:has(.homeHero) { scroll-behavior: auto; }
}

@media only screen and (max-width: 1179px) {
    .homeHero { min-height: calc(80svh - 80px); }
}
@media only screen and (max-width: 767px) {
    /* Stacked: header + hero take 90% of the screen (header 80px here); the
       scroll arrow below shows there is more. */
    .homeHero { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; min-height: 0; height: calc(90svh - 80px); min-height: 400px; }
    .homeHeroCol { min-height: 0; padding: 20px 20px 24px; }
    .homeHeroCol:last-child { padding-bottom: 32px; } /* clear the torn edge */
    .homeHeroCol + .homeHeroCol::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; background: var(--gold-line); }
    .homeHeroContent .titleCategory { margin-bottom: 6px; font-size: 13px; }
    .homeHeroContent h2 { margin-bottom: 14px; }
    .homeHeroContent .btn { min-height: 40px; padding: 8px 20px; font-size: 16px; }
}

/* Four highlights under the hero: icon, title, short text, centred, with
   subtle gold dividers between the columns. */
.homeHighlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.homeHighlights li {
    position: relative;
    padding: 0 24px;
    text-align: center;
}
.homeHighlights li + li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold-divider);
}
.homeHighlights img {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
}
.contentInner .homeHighlights h3 {
    margin: 0 0 6px;
    font-size: 20px;
}
/* The whole column is one link (more specific than the red .contentInner ul a
   rule); the title turns gold and the icon lifts on hover. The gold .moreLink
   label at the bottom shows it is clickable without hover (phones). */
.contentInner .homeHighlights a {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    color: var(--color-text);
    text-decoration: none;
}
.contentInner .homeHighlights a:hover {
    color: var(--color-text);
    text-decoration: none;
}
.homeHighlights h3 {
    transition: color .2s;
}
.homeHighlights a:hover h3 {
    color: #BA8E54;
}
.homeHighlights img {
    transition: transform .2s;
}
.homeHighlights a:hover > img {
    transform: translateY(-4px);
}
.homeHighlights .moreLink {
    margin-top: auto;
    padding-top: 12px;
}
.homeHighlights .moreLink img {
    width: 22px;
    height: 12px;
    margin: 0;
}
.homeHighlights a:hover .moreLink {
    color: var(--color-accent);
}
.homeHighlights a:hover .moreLink img {
    transform: translateX(4px);
}
.contentInner .homeHighlights p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}
/* Sits close under the hero so it shows on the first screen. */
#ponudba {
    margin-top: 30px;
}
@media only screen and (max-width: 1023px) {
    .homeHighlights { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .homeHighlights li:nth-child(3)::before { display: none; }
}
@media only screen and (max-width: 567px) {
    .homeHero { height: calc(90svh - 64px); }
    .homeHighlights { grid-template-columns: minmax(0, 1fr); }
    .homeHighlights li + li::before { top: -20px; bottom: auto; left: 20%; right: 20%; width: auto; height: 1px; background: linear-gradient(90deg, rgba(224, 186, 136, 0), #E0BA88 50%, rgba(224, 186, 136, 0)); display: block; }
}

/* Ravbarjeve posebnosti on the dark band: name and price, description below. */
.specialsList {
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}
.specialsList li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(224, 186, 136, 0.25);
}
.specialsHeading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
}
.contentInner .specialsHeading h3 {
    margin: 0;
    color: var(--color-light);
    font-size: 1.2rem;
}
.specialsHeading span {
    color: var(--color-gold);
    font-weight: 700;
    white-space: nowrap;
}
.contentInner .specialsList p {
    max-width: 75%;
    margin: .5rem 0 0;
    color: rgba(245, 242, 233, 0.75);
    font-size: 16px;
}

/* Four stories: text beside a photo, alternating sides (.flip). */
.homeStory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    align-items: center;
}
.homeStory.flip > div {
    order: 2;
}
.contentInner .homeStory .titleCategory + h2,
.contentInner.homeStory .titleCategory + h2,
.contentInner.homeHistory .titleCategory + h2 {
    font-size: 48px;
}
.homeStoryPhoto {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-gold);
}
.homeStoryPhoto a {
    display: block;
}
.homeStoryPhoto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.homeStoryPhoto a:hover img {
    transform: scale(1.05);
}

/* History band: story text beside the gold knight, over the engraved
   landscape of the area (covers the band, anchored at the bottom). */
.contentContainer.dark.homeHistorySection {
    background: var(--color-dark) url('../img/adam-ravbar-pokrajina.jpg') center bottom / cover no-repeat;
}
.homeHistory {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 80px;
    align-items: center;
}
.homeHistoryKnight {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
}

@media only screen and (max-width: 1023px) {
    .homeStory,
    .homeHistory { gap: 40px; }
    .contentInner.homeStory .titleCategory + h2,
    .contentInner.homeHistory .titleCategory + h2 { font-size: 36px; }
}
@media only screen and (max-width: 767px) {
    .homeStory,
    .homeHistory { grid-template-columns: minmax(0, 1fr); }
    .homeStory.flip > div { order: 0; }
    .homeHistoryKnight { max-width: 220px; }
    .contentInner.homeStory .titleCategory + h2,
    .contentInner.homeHistory .titleCategory + h2 { font-size: 30px; }
    .contentInner .specialsList p { max-width: none; }
}

/* .goldVerse: centred gold verse in Libre Baskerville italic (the Adam Ravbar
   song on the homepage, the closing line on Kontakt). */
.goldVerse,
.contentInner .goldVerse {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}
.contentInner .goldVerse p {
    margin: 0;
    color: #BA8E54;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 20px;
    line-height: 1.7;
}
@media only screen and (max-width: 567px) {
    .contentInner .goldVerse p { font-size: 16px; line-height: 1.65; }
}

/* Forms (see view/templates/contact-form.php) ------------------------------- */

.formRow {
    margin-bottom: 16px;
}

.formRow.split50 {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    padding-right: 16px;
}

.formRowName {
    font-weight: 600;
    margin-bottom: 4px;
}

.formRequired {
    color: var(--color-accent);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.submitBtn {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font: inherit;
    cursor: pointer;
}

.submitBtn:hover {
    opacity: 0.9;
}

/* Article content (view/articles/article.php) -------------------------------- */

.articleItemCover {
    padding: 20px 0;
}
.articleItemCoverInner {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-top: 50%;
}
.articleItemCoverImg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.articleItemCoverImg img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.contentContainer h2.articleSubtitle {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-accent);
    font-family: var(--font-heading);
}

.articleItemDate {
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-muted);
}

.articleItemContent {
    font-weight: 400;
}
.articleItemContent strong {
    font-weight: 600;
}
.articleItemContent p a,
.articleItemContent ul a {
    color: var(--color-accent);
    text-decoration: underline;
}
.articleItemContent p a:hover,
.articleItemContent ul a:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
}
.articleItemContent figure,
.articleItemContent img {
    display: block;
    width: 100%;
    height: auto;
}
.articleItemContent figure figcaption {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--color-text-muted);
    padding-top: 5px;
    text-align: center;
}

blockquote {
    border-left: 4px solid var(--color-accent);
    padding: 8px 0 8px 16px;
    margin: 30px 0;
}

.articleItemGallery {
    display: flex;
    padding: 0;
}
.articleItemGalleryInner {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
.articleGalleryItem {
    display: flex;
    width: 50%;
    padding: 20px;
}
.articleItemGallery img,
.articleItemGallery picture {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}
.articleItemGallery a:hover img {
    transform: scale(1.05);
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .articleGalleryItem {
        padding: 10px;
    }
    .articleItemGallery {
        padding: 0 10px;
    }
    .contentInner.articleItemCover {
        padding: 0;
    }
}

/* Tags, share buttons, next-article link (article.php + articles.php) -------- */

.articleItemTagList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}
.articleItemTagList a {
    display: flex;
    height: 32px;
    align-items: center;
    padding: 0 15px;
    background-color: var(--color-bg-alt);
    transition: background-color 0.3s, color 0.3s;
}
.articleItemTagList a:hover {
    text-decoration: none;
    background-color: var(--color-text);
    color: #fff;
}

.articleShareBox {
    display: flex;
    align-items: center;
    width: 100%;
}
.articleShareTitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    white-space: nowrap;
    font-weight: 700;
    padding-right: 10px;
    text-transform: uppercase;
}
.articleShare {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 6px;
    transition: transform 0.3s;
}
.articleShare:hover {
    transform: scale(1.1);
}
.articleShare.articleShareFb { background-image: url('../img/icon-share-facebook.svg'); }
.articleShare.articleShareTwitter { background-image: url('../img/icon-share-twitter.svg'); }
.articleShare.articleSharePinterest { background-image: url('../img/icon-share-pinterest.svg'); }
.articleShare.articleShareLinkedin { background-image: url('../img/icon-share-linkedin.svg'); }
.articleShare.articleShareMail { background-image: url('../img/icon-share-mail.svg'); }

.nextArticleContainer {
    display: flex;
    flex-flow: column;
    position: relative;
    border-top: 1px solid var(--color-border);
    margin-top: 60px;
    padding-top: 60px;
}
.nextArticleDescription {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: var(--color-bg);
    padding: 0 10px;
    color: var(--color-text-muted);
}
.nextArticle:hover {
    text-decoration: underline;
}

a.linkMore {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-accent);
    padding-right: 24px;
    position: relative;
}
a.linkMore span::after {
    content: '→';
    position: absolute;
    right: 0;
    transition: right 0.3s ease;
}
a.linkMore:hover span::after {
    right: -6px;
}
.nextArticleContainer .linkMore {
    margin-top: 20px;
}

/* Utility -------------------------------------------------------------------- */

/* Scroll reveal (see js/scripts.js). `.animated` in markup just marks a
   candidate element — JS adds `.reveal` dynamically, so a no-JS visitor (or
   JS failing to load) still sees full content instead of permanently hidden
   sections. Never add `.reveal` directly in HTML. */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}
/* Intrinsic image dimensions reserve layout space while CSS remains responsive. */
picture img { max-width: 100%; height: auto; }

/* Database-backed restaurant menu. Photos and descriptions are optional. */
.foodCategory { display: block; margin-top: 80px; }
@media only screen and (max-width: 767px) {
    .foodCategory { margin-top: 50px; }
}
.foodCategory h2 { color: #BA8E54; }
.foodList { list-style: none; padding: 0; margin: 0; }
.foodItem { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border, #ddd); }
.foodPhoto { width: 144px; height: 108px; flex-shrink: 0; object-fit: cover; border-radius: 6px; }
.foodDetails { flex: 1; min-width: 0; }
.foodHeading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.foodHeading h3 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.foodPrice { white-space: nowrap; font-weight: 600; }
.foodDescription { max-width: 75%; margin: .5rem 0 0; font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
.foodServeDate { margin: 0 0 .25rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-accent); }
.foodClosedMessage { font-size: 1.1rem; }
.foodLunchHours { margin: 0 0 1.5rem; }
.contentInner p.foodAlaCarte { margin: 40px 0 10px; }
.contentInner p.deliveryExtra { margin-top: 40px; }
.contentInner p.foodMenuNote { margin: 60px 0 0; color: var(--color-text-muted); font-size: 16px; text-align: center; }
.lunchPreviewNotice { margin: 0 0 12px; padding: 10px 16px; background: #BA8E54; color: var(--color-light); }
.lunchPreviewBack { margin-bottom: 1.5rem; }
.lunchPreviewLogin { margin-bottom: 1.5rem; }
.lunchPreviewLogin a { color: var(--color-light); text-decoration: underline; }
@media only screen and (max-width: 567px) {
    .foodItem { flex-wrap: wrap; gap: .75rem; }
    .foodPhoto { width: 96px; height: 72px; }
    .foodDetails { flex-basis: 100%; }
}

.foodMenu > .contentInner { min-width: 0; }
.foodCategoryNav {
    min-height: 62px; /* keeps the space while the dropdown floats at the top */
    margin-bottom: 1rem;
}
/* One category dropdown. In the menu column it is a light box like the
   feature strip; once scrolled past it becomes a full-width bar fixed at the
   top, styled like the header: dark texture with a gold line below
   (.isFloating, food-menu.js). No focus frames on tap or click. */
.foodCategorySelect {
    position: relative;
    display: block;
    border: 1px solid rgba(186, 142, 84, 0.45);
    background: rgba(255, 255, 255, 0.35);
}
.foodCategorySelect select {
    display: block; width: 100%; height: 60px; margin: 0; padding: 0 3.25rem 0 20px;
    border: 0; border-radius: 0; outline: none; box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23BA8E54' stroke-width='2'/%3E%3C/svg%3E") right 20px center / 14px 8px no-repeat;
    color: var(--color-text); font: 700 1rem var(--font-body);
    cursor: pointer; appearance: none; -webkit-appearance: none;
}
.foodCategorySelect select:focus,
.foodCategorySelect select:active { outline: none; box-shadow: none; }
.foodCategorySelect option { background: #fff; color: var(--color-text); }
/* Sections receive focus when jumped to (for screen readers); no focus frame. */
.foodCategory:focus { outline: none; }

.foodCategoryNav.isFloating .foodCategorySelect {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    border: 0;
    background: var(--color-dark) url('../img/texture-dark.jpg') center / cover;
    animation: food-nav-in .25s ease-out;
}
.foodCategoryNav.isFloating .foodCategorySelect::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--gold-line);
}
/* Text stays in line with the menu column (width8) below. */
.foodCategoryNav.isFloating .foodCategorySelect select {
    max-width: 980px; margin: 0 auto 2px;
    color: var(--color-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E0BA88' stroke-width='2'/%3E%3C/svg%3E");
}
@keyframes food-nav-in {
    from { transform: translateY(-100%); }
    to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .foodCategoryNav.isFloating .foodCategorySelect { animation: none; }
}
.foodCategory { scroll-margin-top: 78px; } /* floating dropdown bar (62px) + breathing room */
.foodCategoryDescription { white-space: normal; overflow-wrap: anywhere; }
.foodPrices { display: flex; gap: 1.25rem; flex-shrink: 0; }
.foodPrices .foodPrice { display: flex; flex-direction: column; text-align: right; }
.foodPrice small { font-size: .75rem; font-weight: 400; }
@media only screen and (max-width: 567px) {
    .foodHeading:has(.foodPrices) { flex-wrap: wrap; }
    .foodPrices { width: 100%; justify-content: flex-end; }
}

/* /malice/: "Dodaj malice na začetni zaslon" (js/lunch-install.js). */
.lunchInstall {
    margin-top: 40px;
}
.lunchInstallBtn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s;
}
.lunchInstallBtn:hover {
    border-color: #BA8E54;
}
.lunchInstallBtn img {
    flex: none;
    border-radius: 11px;
}
.lunchInstallBtn strong {
    display: block;
    color: #BA8E54;
}
.lunchInstallBtn small {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    color: var(--color-text-muted);
}
.contentInner .lunchInstallHelp {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-top: 0;
    font-size: 16px;
}
.lunchInstallShare {
    vertical-align: -3px;
    color: #007AFF; /* the iOS share icon's blue, so it is easy to spot */
}