* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #000000;
    --yellow: #FFD700;
    --white: #FFFFFF;
    --gray: #333333;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    color: var(--white);
    background: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navigation - Brushed Metal */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--black);
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 2px solid var(--yellow);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

nav .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.logo-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    background: var(--yellow);
    padding: 5px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 3rem;
}

nav a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
}

nav a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--yellow);
    transition: width 0.3s;
}

nav a:hover {
    color: var(--yellow);
}

nav a:hover::before {
    width: 100%;
}

/* Hero Section - Industrial Lab */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8rem 2rem 4rem;
    background: var(--black);
}

/* Grid pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 215, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--white);
}

.hero-content .subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--yellow);
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.hero-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--white);
    margin-bottom: 3rem;
    max-width: 500px;
    opacity: 0.9;
}

/* Modern Professor Character - Minimalist */
.professor-minimal {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular metal frame */
.metal-frame {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--gray);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 3px solid var(--white);
}

/* Glowing ring effect */
.metal-frame::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 3px solid var(--yellow);
    opacity: 0.6;
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Professor silhouette - SVG image */
.prof-silhouette {
    width: 90%;
    height: 90%;
    max-width: 350px;
    max-height: 350px;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

/* CTA Button - Industrial */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2.5rem;
    background: var(--yellow);
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.95rem;
    border: 2px solid var(--yellow);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--white);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5);
}

/* Section Styles - Industrial */
section {
    padding: 8rem 2rem;
    position: relative;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -1px;
    color: var(--white);
}

.section-subtitle {
    text-align: center;
    color: var(--yellow);
    font-size: 1.1rem;
    margin-bottom: 4rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

/* Beer Grid - Metal Cards */
.beer-selection {
    background: var(--black);
    position: relative;
}

.beer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

.beer-card {
    background: var(--gray);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.beer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    border-color: var(--yellow);
}

/* Number badge - metallic. Vertically centred on the 80px icon: card padding (3rem) + (80px - 50px) / 2,
   and aligned with the text edge on the right (3rem). */
.card-number {
    position: absolute;
    top: calc(3rem + 15px);
    right: 3rem;
    width: 50px;
    height: 50px;
    background: var(--yellow);
    color: var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.beer-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: var(--yellow);
}

.beer-icon .icon {
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

/* Credential & Info Icons */
.credential-item h4 i,
.info-card h3 .icon {
    margin-right: 0.8rem;
    font-size: 1.5rem;
}

/* Social Icons */
.social-links a .icon {
    font-size: 1.8rem;
}

/* Info Card Icons */
.icon-pin {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

.icon-pin::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--yellow);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid var(--white);
}

.icon-clock {
    width: 30px;
    height: 30px;
    border: 3px solid var(--yellow);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.icon-clock::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 8px;
    background: var(--white);
    transform: translate(-50%, -100%);
}

.icon-clock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 2px;
    background: var(--white);
    transform: translate(-50%, -50%);
}

/* Social Icons */
.icon-instagram {
    width: 30px;
    height: 30px;
    border: 3px solid var(--black);
    border-radius: 8px;
    position: relative;
}

.icon-instagram::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border: 2px solid var(--black);
    border-radius: 50%;
}

.icon-instagram::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 4px;
    height: 4px;
    background: var(--black);
    border-radius: 50%;
}

.icon-facebook {
    width: 30px;
    height: 30px;
    background: var(--black);
    border-radius: 4px;
    position: relative;
}

.icon-facebook::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 14px;
    width: 6px;
    height: 12px;
    border-left: 3px solid var(--yellow);
    border-top: 3px solid var(--yellow);
}

.icon-untappd {
    width: 30px;
    height: 30px;
    position: relative;
}

.icon-untappd::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 20px;
    background: var(--black);
    clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
}

/* Credential Icons */
.credential-icon {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.icon-flask {
    width: 20px;
    height: 30px;
    border: 3px solid var(--yellow);
    border-radius: 0 0 10px 10px;
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.icon-flask::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border: 3px solid var(--yellow);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.icon-target {
    width: 30px;
    height: 30px;
    border: 3px solid var(--yellow);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.icon-target::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border: 2px solid var(--white);
    border-radius: 50%;
}

.icon-target::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
}

.icon-refresh {
    width: 30px;
    height: 30px;
    border: 3px solid var(--yellow);
    border-radius: 50%;
    border-top-color: transparent;
    position: relative;
    display: inline-block;
    transform: rotate(45deg);
}

.icon-refresh::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -2px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid var(--yellow);
    transform: rotate(45deg);
}

.icon-community {
    width: 35px;
    height: 25px;
    position: relative;
    display: inline-block;
}

.icon-community::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background: var(--yellow);
    border-radius: 50%;
}

.icon-community::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
    height: 15px;
    background: var(--white);
    border-radius: 50%;
    border: 2px solid var(--yellow);
}

.beer-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 1px;
}

.beer-card p {
    color: var(--white);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.beer-count {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--black);
    color: var(--yellow);
    border: 1px solid var(--yellow);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* About Section - Dark Industrial */
.about {
    background: var(--black);
    border-top: 2px solid var(--yellow);
    border-bottom: 2px solid var(--yellow);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.about-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--white);
}

.about-text p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.highlight {
    color: var(--yellow);
    font-weight: 600;
}

.credentials {
    display: grid;
    gap: 1.5rem;
}

.credential-item {
    background: var(--gray);
    padding: 2rem;
    border-left: 4px solid var(--yellow);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--white);
    border-left: 4px solid var(--yellow);
}

.credential-item h4 {
    font-size: 1.3rem;
    color: var(--yellow);
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.credential-item p {
    color: var(--white);
    line-height: 1.7;
    opacity: 0.9;
}

/* Events - Modern Cards */
.events {
    background: var(--black);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.event-card {
    background: var(--gray);
    overflow: hidden;
    transition: all 0.3s;
    border: 2px solid var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    border-color: var(--yellow);
}

.event-header {
    background: var(--yellow);
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.event-day {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

.event-frequency {
    font-size: 0.9rem;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
    opacity: 0.8;
}

.event-body {
    padding: 2.5rem;
}

.event-body h4 {
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 700;
}

.event-body p {
    color: var(--white);
    line-height: 1.8;
    opacity: 0.9;
}

/* Visit Section */
.visit {
    background: var(--black);
    border-top: 2px solid var(--yellow);
}

.visit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.info-card {
    background: var(--gray);
    padding: 3rem;
    border: 2px solid var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.info-card h3 {
    font-size: 1.8rem;
    color: var(--yellow);
    margin-bottom: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-card p {
    color: var(--white);
    line-height: 1.9;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    opacity: 0.9;
}

.info-card strong {
    color: var(--white);
}

/* Footer */
footer {
    background: var(--black);
    border-top: 2px solid var(--yellow);
    padding: 3rem 2rem;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.social-links a {
    width: 50px;
    height: 50px;
    background: var(--yellow);
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.social-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
}

footer p {
    color: var(--white);
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content p {
        max-width: 100%;
    }

    .professor-minimal {
        order: -1;
        margin-bottom: 3rem;
    }

    .about-grid,
    .visit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    nav .container {
        padding: 1rem 2rem;
    }

    nav ul {
        display: none;
    }

    .beer-grid,
    .events-grid {
        grid-template-columns: 1fr;
    }

    .metal-frame {
        width: 300px;
        height: 300px;
    }

    .prof-silhouette {
        width: 85%;
        height: 85%;
        max-width: 250px;
        max-height: 250px;
    }

    section {
        padding: 5rem 1.5rem;
    }
}

/* ==========================================================================
   PHP site additions
   ========================================================================== */

[hidden] {
    display: none !important;
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--yellow);
    color: var(--black);
    padding: 0.7rem 1.2rem;
    font-weight: 700;
    z-index: 2000;
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

nav .logo {
    text-decoration: none;
}

nav .lang-switch {
    border: 1px solid var(--yellow);
    padding: 0.3rem 0.7rem;
    color: var(--yellow);
}

nav .lang-switch::before {
    display: none;
}

nav .lang-switch:hover {
    background: var(--yellow);
    color: var(--black);
}

/* Hero stats */
.hero-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.hero-stats li {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    opacity: 0.9;
}

.hero-stats strong {
    display: block;
    font-size: 2.2rem;
    color: var(--yellow);
    letter-spacing: 0;
    line-height: 1.1;
}

/* Collection cards are links to the menu section */
a.beer-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.beer-card h3 {
    padding-right: 3.5rem;
}

.card-top-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--yellow);
    margin-bottom: 0.5rem !important;
}

.card-top {
    list-style: none;
    margin-bottom: 1.5rem;
}

.card-top li {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 1.4;
}

.card-top-name {
    font-weight: 600;
}

.card-top-brewery {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
}

.section-cta {
    text-align: center;
    margin-top: 3rem;
}

.section-note {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.85;
}

.section-note.small {
    font-size: 0.9rem;
    margin-top: 2rem;
}

.section-note a,
.info-card a,
.notice a {
    color: var(--yellow);
}

/* Beer lists (on tap + full menu) */
.tap-section {
    background: var(--black);
    border-top: 2px solid var(--yellow);
}

.beer-list {
    list-style: none;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.beer-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--gray);
    border: 2px solid var(--white);
    border-left: 4px solid var(--yellow);
    padding: 1.2rem 1.5rem;
}

.beer-label {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--white);
    border-radius: 8px;
    flex: none;
}

.beer-main {
    flex: 1;
    min-width: 0;
}

.beer-name {
    font-size: 1.2rem;
    line-height: 1.3;
}

.beer-name a {
    color: var(--white);
    text-decoration: none;
}

.beer-name a:hover {
    color: var(--yellow);
}

.beer-meta {
    opacity: 0.85;
    font-size: 0.95rem;
}

.beer-location::before {
    content: '· ';
}

.beer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--yellow);
    color: var(--yellow);
}

.tag-rating .icon {
    font-size: 0.85rem;
    vertical-align: -1px;
}

.beer-sizes {
    list-style: none;
    flex: none;
    min-width: 170px;
    font-size: 0.95rem;
}

.beer-sizes li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.15rem 0;
}

.size-price {
    font-weight: 700;
    color: var(--yellow);
    white-space: nowrap;
}

/* Full menu page */
.menu-page {
    padding-top: 9rem;
}

.menu-tools {
    max-width: 1100px;
    margin: 0 auto 3rem;
}

.menu-search {
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.05rem;
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--white);
    margin-bottom: 1.5rem;
}

.menu-search:focus {
    border-color: var(--yellow);
}

.menu-jump {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.menu-jump a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--white);
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
}

.menu-jump a:hover {
    border-color: var(--yellow);
    color: var(--yellow);
}

.menu-jump span,
.menu-count {
    color: var(--yellow);
    font-weight: 700;
}

.menu-section {
    padding: 0;
    margin-bottom: 4rem;
}

.menu-section h2 {
    text-align: left;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--yellow);
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 0.6rem;
}

.menu-empty {
    text-align: center;
    font-size: 1.2rem;
}

/* Notices */
.notice {
    max-width: 700px;
    margin: 0 auto 2rem;
    padding: 2rem;
    background: var(--gray);
    border: 2px solid var(--white);
    text-align: center;
}

.notice h3 {
    color: var(--yellow);
    margin-bottom: 0.8rem;
}

.notice-warn {
    border-color: var(--yellow);
}

.not-found {
    min-height: 70vh;
    padding-top: 12rem;
}

@media (max-width: 768px) {
    nav .container {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
    }

    /* Keep the menu usable on phones instead of hiding it. */
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1.2rem;
    }

    nav a {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    nav .logo {
        font-size: 1.1rem;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
    }

    html {
        scroll-padding-top: 9rem;
    }

    .hero {
        padding-top: 11rem;
    }

    .menu-page {
        padding-top: 11rem;
    }

    .beer-item {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .beer-sizes {
        width: 100%;
        min-width: 0;
    }

    .beer-card {
        padding: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .metal-frame::before {
        animation: none;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: clamp(2.2rem, 11vw, 3rem);
        letter-spacing: -1px;
    }

    .hero-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }
}

.section-cta-top {
    margin-top: -2rem;
    margin-bottom: 3rem;
}

/* Inline SVG icons (replaces the icon font) */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.125em;
}

h1.page-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: -1px;
}

.beer-name {
    font-weight: 700;
}

.menu-intro {
    margin-bottom: 3rem;
}

.footer-nap {
    margin-bottom: 1rem;
}

.footer-nap a {
    color: var(--yellow);
}

/* Skip rendering work for off-screen menu sections (275 beers). */
.menu-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

@media (max-width: 768px) {
    /* Comfortable tap targets for the wrapped mobile navigation. */
    nav a {
        display: inline-block;
        padding: 0.7rem 0.4rem;
    }

    nav .lang-switch {
        padding: 0.6rem 0.8rem;
    }
}

/* Menu section heading: the count sits next to the h2 instead of inside the heading text. */
.menu-heading {
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--yellow);
    border-bottom: 2px solid var(--yellow);
    padding-bottom: 0.6rem;
}

.menu-heading h2 {
    margin: 0;
    padding: 0;
    max-width: none;
    border: 0;
    font-size: 1.8rem;
    text-align: left;
    letter-spacing: 0;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.footer-credit {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.6;
}

.footer-credit a {
    color: var(--white);
}

@media (max-width: 768px) {
    /* The wrapped mobile navigation is ~190px tall. */
    html {
        scroll-padding-top: 12rem;
    }
}

.menu-heading .menu-count {
    font-size: 1.8rem;
    font-weight: 700;
}

/* ==========================================================================
   Mobile refinements (from the mobile layout review)
   ========================================================================== */

/* minmax(0, 1fr): a plain 1fr column can never be narrower than its content, which made the NL
   "Openingstijden" card wider than the screen. */
@media (max-width: 1024px) {
    .visit-grid,
    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    /* The wrapped navigation is ~150px tall: let it scroll away instead of covering the screen. */
    nav {
        position: absolute;
    }

    nav .container {
        gap: 0.2rem;
        padding: 0.6rem 1rem 0.3rem;
    }

    nav .logo {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
    }

    nav ul {
        gap: 0 0.8rem;
    }

    /* At least 44px high touch targets. */
    nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.4rem 0.3rem;
        font-size: 0.78rem;
        letter-spacing: 0.5px;
    }

    nav .lang-switch {
        padding: 0.4rem 0.9rem;
    }

    /* The nav is no longer fixed, so jumps only need a little room. */
    html {
        scroll-padding-top: 1rem;
    }

    section {
        padding: 4rem 1.5rem;
    }

    /* Hero: logo smaller, heading and button visible without scrolling past a huge logo. */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: 11rem 1.5rem 3rem;
    }

    .hero-container {
        gap: 2rem;
    }

    .professor-minimal {
        height: auto;
        margin-bottom: 0;
    }

    .metal-frame {
        flex: none;
        width: min(220px, 60vw);
        height: min(220px, 60vw);
    }

    .prof-silhouette {
        width: 88%;
        height: 88%;
    }

    .hero-content .subtitle {
        letter-spacing: 2px;
        margin-bottom: 1rem;
    }

    .hero-content p {
        font-size: 1rem;
        margin: 0 auto 2rem;
    }

    .hero-stats {
        justify-content: center;
        gap: 1rem 1.5rem;
        margin-bottom: 2rem;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
        letter-spacing: 1px;
        padding: 1.1rem 1.2rem;
    }

    .menu-page {
        padding-top: 10rem;
    }

    .not-found {
        padding-top: 10rem;
    }

    .beer-grid,
    .events-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .beer-card {
        padding: 1.75rem 1.5rem;
    }

    .visit-grid {
        gap: 1.5rem;
    }

    .info-card {
        padding: 2rem 1.5rem;
    }

    .info-card h3 {
        font-size: 1.4rem;
        gap: 0.6rem;
        overflow-wrap: anywhere;
    }

    .info-card a {
        overflow-wrap: anywhere;
    }

    .info-card .contact a {
        display: inline-block;
        padding: 0.4rem 0;
    }

    /* The 13 category chips become one swipeable row instead of seven rows. */
    .menu-jump {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -1.5rem;
        padding: 0 1.5rem 0.5rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .menu-jump li {
        flex: none;
    }

    .menu-jump a {
        padding: 0.7rem 1rem;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* Denser beer rows: 275 of them. */
    .beer-item {
        gap: 0.8rem;
        padding: 0.8rem;
    }

    .beer-label {
        width: 44px;
        height: 44px;
    }

    .beer-name {
        font-size: 1.05rem;
    }

    .beer-sizes {
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem 1.2rem;
    }

    .beer-sizes li {
        gap: 0.5rem;
    }
}

.tag {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.hero-stats li {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Button that brings you back to the search and categories on the long menu page. */
.to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

/* No sticky hover effects on touch screens. */
@media (hover: none) {
    .beer-card:hover,
    .cta-button:hover,
    .social-links a:hover {
        transform: none;
    }
}

/* Sticky search + category chips on the menu page, only when the SCREEN is tall enough (the bar is
   ~115px, about 1/6 of a 680-740px high phone). On short screens (landscape) it scrolls with the page.
   Deliberately min-device-height, not min-height: the on-screen keyboard shrinks the viewport, and a
   viewport-based query would switch the sticky off while typing in the search box (the bar then jumped
   up and scrolled away). The device height does not change when the keyboard opens. */
@media (max-width: 768px) and (min-device-height: 680px) {
    .menu-tools {
        position: sticky;
        top: 0;
        z-index: 800;
        margin: 0 -1.5rem 1.5rem;
        padding: 0.5rem 1.5rem 0;
        background: var(--black);
        border-bottom: 1px solid rgba(255, 215, 0, 0.35);
    }

    .menu-search {
        padding: 0.7rem 1rem;
        margin-bottom: 0.5rem;
    }

    .menu-jump {
        padding-bottom: 0.5rem;
    }

    .menu-jump a {
        padding: 0.55rem 1rem;
    }

    /* Jumps to a category must land below the sticky bar. */
    .menu-section {
        scroll-margin-top: 8rem;
    }

    /* The bar itself is always reachable, so the extra button is not needed. */
    .to-top {
        display: none;
    }
}

/* ==========================================================================
   Navigation: logo + language switch on the first row, the links on one line below (phones)
   ========================================================================== */

/* Desktop: logo left, links and language switch right (same look as before the markup change). */
nav .nav-links {
    margin-left: auto;
}

nav .lang-switch {
    margin-left: 3rem;
}

@media (max-width: 768px) {
    nav .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo lang"
            "links links";
        align-items: center;
        gap: 0.2rem 0.5rem;
        padding: 0.6rem 1rem 0.3rem;
    }

    nav .logo {
        grid-area: logo;
        justify-self: start;
    }

    nav .lang-switch {
        grid-area: lang;
        margin-left: 0;
    }

    nav .nav-links {
        grid-area: links;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.3rem;
        margin-left: 0;
        width: 100%;
    }

    /* The logo already links to the home page. */
    nav .nav-home {
        display: none;
    }

    nav .nav-links a {
        padding: 0.4rem 0.2rem;
        white-space: nowrap;
    }

    /* The nav is ~100px tall now (was ~150px). */
    .hero {
        padding-top: 8.5rem;
    }

    .menu-page,
    .not-found {
        padding-top: 7.5rem;
    }
}

/* ==========================================================================
   Collection cards on phones: one compact row per category (icon, title, top 3 beers, count, arrow).
   Desktop/tablet keep the full cards.
   ========================================================================== */
@media (max-width: 768px) {
    .beer-grid {
        gap: 0.75rem;
    }

    a.beer-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "icon title num arrow"
            "icon top num arrow";
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.15rem;
        padding: 0.8rem 0.8rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .beer-card .beer-icon {
        grid-area: icon;
        width: 36px;
        height: 36px;
        margin: 0;
        font-size: 1.7rem;
    }

    .beer-card h3 {
        grid-area: title;
        margin: 0;
        padding: 0;
        font-size: 1.05rem;
        letter-spacing: 0;
        line-height: 1.25;
    }

    .beer-card .card-number {
        grid-area: num;
        position: static;
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .beer-card::after {
        content: "\203A";
        grid-area: arrow;
        color: var(--yellow);
        font-size: 1.5rem;
        line-height: 1;
    }

    .beer-card .card-top-label,
    .beer-card .beer-count {
        display: none;
    }

    /* The three best rated beers, one line each. */
    .beer-card .card-top {
        grid-area: top;
        margin: 0.15rem 0 0;
        min-width: 0;
    }

    .beer-card .card-top li {
        padding: 0.05rem 0;
        border: 0;
        font-size: 0.85rem;
        line-height: 1.3;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .beer-card .card-top-brewery {
        display: inline;
        font-size: inherit;
        opacity: 0.7;
    }

    .beer-card .card-top-brewery::before {
        content: "\00B7  ";
    }
}