:root {
    --wood-dark: #3e2723;
    --wood-light: #5d4037;
    --parchment: #f3e5ab;
    --text-dark: #2c1810;
    --accent-green: #2e7d32;
    --gold: #c5a059;
    --color-accent-red: #8a2c2c; /* Deep red */
    
    /* New Variables for Shine Effect (Honey Mead Theme) */
    --color-accent-gold: #ffc107; /* Warm Amber Honey */
    --color-accent-gold-dark: #996515; /* Darker gold for text contrast */
    --color-accent-gold-bright: #ffca28; /* Lighter Honey */
    --color-bg-dark: #2c1810;
    --color-timber-light: #5d4037;

      /* Typography */
    --font-heading: 'MedievalSharp', cursive;
    --font-subheading: 'Cinzel', serif;
    --font-body: 'Lato', sans-serif;

    /* Spacing */
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3); */ /* Gold tap highlight */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for sticky nav */
}

/* Sticky Sub-Navigation */
.sticky-sub-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgb(243 238 219 / 95%); /* Parchment with opacity */
    backdrop-filter: blur(5px);
    padding: 1rem 0.6rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--wood-light);
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
    
    /* Full width hack to ignore parent padding */
    margin-left: -3rem;
    margin-right: -3rem;
    width: calc(100% + 6rem); /* Ensure it fills the space */
}

.sticky-sub-nav a {
    text-decoration: none;
    color: var(--wood-dark);
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.sticky-sub-nav a.active {
    color: var(--color-accent-red);
    border-bottom-color: var(--color-accent-gold);
}

@media (hover: hover) {
    .sticky-sub-nav a:hover {
        color: var(--color-accent-red);
        border-bottom-color: var(--color-accent-gold);
    }
}

/* Global Focus Style for Accessibility & Theme */
:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
    box-shadow: 0 0 8px var(--color-accent-gold);
    border-radius: 2px;
}

input, textarea, select {
    font-family: var(--font-body);
    padding: 0.8rem;
    border: 2px solid var(--wood-dark);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    width: 100%;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    font-size: 1rem;
}

textarea {
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 0; /* Inputs look better with outline hugging the border */
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

body {
    font-family: var(--font-body);
    background-color: var(--wood-dark); /* Dark wood background for contrast */
    background-image: url('assets/light_wood_texture.webp'); /* Optional: use texture if available */
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-dark);
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.05em;
    /* text-transform: uppercase; */
}

h3 {
    color: var(--color-accent-red);
}

/* h2, h3, .nav-btn, .btn-wood { */
.nav-btn, .btn-wood {
    font-family: var(--font-subheading);
    text-transform: uppercase;
}

.text-content {
    max-width: 800px;
    margin: 0 auto;
    /* padding-right: var(--spacing-md); */
    margin-bottom: var(--spacing-lg);
    text-align: justify;
}

.drop-cap {
    font-size: 1.1rem;
}

.drop-cap::first-letter {
    font-family: var(--font-heading);
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    padding-right: 0.5rem;
    color: var(--color-accent-red);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

/* Textures */
.wood-texture {
    background-image: url('assets/light_wood_texture.webp');
    background-size: cover;
    color: var(--wood-dark);
    border-bottom: 5px solid var(--wood-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.wood-texture-light {
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('assets/light_wood_texture.webp');
    background-size: cover;
    padding: 0 1rem;
}

/* Header */
header {
    position: relative;
    text-align: center;
    z-index: 10;
}

/* Logo Container Removed */

.logo {
    height: 150px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: transform 0.3s;
    padding: 0.5rem 0;
}

.logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
}

.logo:active {
    transform: scale(0.96) translateY(2px);
    /* box-shadow: inset 0 0 15px rgba(0,0,0,0.8); */
    transition: transform 0.1s ease-in-out;
}

nav {
    padding: 8px 0 0 0;
    border-bottom: 3px solid var(--wood-dark);
    position: relative; /* Ensure positioning context for mobile menu */
}

.mobile-logo-link {
    display: none; /* Hidden on desktop */
}

.mobile-logo-link:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
}

.mobile-logo-link:active {
    transform: scale(0.96) translateY(2px);
    transition: transform 0.1s ease-in-out;
}

.hamburger {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 20;
    width: 45px;
    height: 45px;
    transition: transform 0.1s ease-in-out;
}

.hamburger .bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px auto;
    background-color: var(--wood-dark);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Hover effect only for mouse users */
@media (hover: hover) {
    .hamburger:hover .bar {
        background-color: var(--color-accent-gold);
        /* box-shadow: 0 0 5px var(--color-accent-gold); */
    }
}

/* Active (press) effect for touch & mouse */
.hamburger:active .bar {
    background-color: var(--color-accent-gold);
    /* box-shadow: 0 0 5px var(--color-accent-gold); */
}

/* Active State (X Animation) */
.hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: var(--color-accent-red);
    box-shadow: none;
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: var(--color-accent-red);
    box-shadow: none;
}

/* Hover State for Active Hamburger (Gold X) - Mouse Only */
@media (hover: hover) {
    .hamburger.active:hover .bar {
        background-color: var(--color-accent-gold) !important;
    }
}

/* Active (press) State for Active Hamburger - Touch & Mouse */
.hamburger.active:active .bar {
    background-color: var(--color-accent-gold) !important;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Reduced gap slightly to fit wider buttons */
}

nav ul li {
    width: 200px; /* Increased fixed width for symmetry */
    display: flex;
    justify-content: center;
}

/* Split the navigation around the logo */
/* Split navigation hack removed */
.nav-logo {
    width: auto;
}

.nav-btn {
    text-decoration: none;
    color: var(--parchment);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px 10px; /* Vertical padding only, width handles horizontal */
    width: 100%; /* Fill the li container */
    display: inline-block; /* Allow width to take effect */
    text-align: center; /* Center text */
    /* background-image: url('assets/button_iron_oak.webp'); */
    /* background-size: 100% 100%; */
    background: linear-gradient(to bottom, #5d4037, #3e2723); /* Wood gradient */
    border: 3px solid #2c2c2c; /* Iron border */
    border-radius: 4px;
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.8), /* Inner shadow for depth */
        0 4px 6px rgba(0,0,0,0.4); /* Drop shadow */
    transition: transform 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    position: relative;
    overflow: hidden; /* For the shine effect */
}

/* The Shine Effect */
.nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: none;
}

.nav-btn:hover::after {
    left: 200%;
    transition: all 0.7s ease;
}

.nav-btn:hover {
    /* transform: translateY(-2px); */
    transform: scale(1.05);
    color: #ffb300; /* Amber Gold */
    box-shadow: 0 0 20px rgba(255, 179, 0, 0.4); /* Amber Glow */
    text-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px #ffb300;
}

.nav-btn:focus {
    /* Outline handled by global :focus-visible */
    position: relative; /* Ensure z-index works if needed */
    z-index: 5;
}

.nav-btn:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.9);
    transition: transform 0.1s ease-in-out;
}


/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/hero_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    height: 80vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: 8px solid var(--wood-dark);
}

.hero-small {
    height: 50vh;
}

/* Page Specific Hero Backgrounds */
.hero-events {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/events_header.webp');
}

.hero-hall {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/the_hall_header.webp');
}

.hero-visit {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/visit_header.webp');
    background-position: center 70%; /* Adjust for centering door */
}

.hero-mead {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/mead_header.webp');
}

.hero-content {
    background-color: transparent;
    padding: 2rem 4rem;
    border-radius: 0;
    border: none;
    box-shadow: none;
    max-width: 1000px; /* Allow more width for the cinematic text */
}

.hero h1 {
    font-size: 5rem; /* Larger for impact */
    background: linear-gradient(to bottom, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Fallback handled by background-clip */
    filter: drop-shadow(0 2px 0px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(0,0,0,0.8));
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.hero h2 {
    font-size: 1.5rem; /* Reduced from 2rem */
    font-family: var(--font-subheading);
    color: #F0E68C; /* Solid Pale Gold */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(240, 230, 140, 0.4);
    letter-spacing: 0.2em;
    font-weight: 400; /* Reduced from 700 */
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
    position: relative;
    width: 100%;
}

.section-header h2 {
    font-size: 3rem;
    color: var(--accent-green);
    padding: 0 1.5rem 0.5rem 1.5rem; /* Added bottom padding for line */
    text-align: center;
    display: inline-block; /* Make width fit content */
    position: relative;
    z-index: 1; 
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.divider {
    margin-top: 0.5rem;
    text-align: center;
}

.divider img {
    width: 60px; /* Adjust size as needed */
    height: auto;
    display: inline-block;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
    margin-top: 1rem;
}

/* Parchment Content */
.parchment-content {
    background-image: url('assets/parchment_bg.webp');
    /* background-size: 125%; */ /* Cover the whole sheet */
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    /* background-position-y: -20px; */
    background-color: var(--parchment); /* Fallback */
    padding: 4rem 3rem;
    min-height: 600px;
}

/* Torn paper effect top - REMOVED for single sheet look, or could be adapted */
/* .parchment-content::before { ... } */

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

.feature-card {
    background: transparent;
    padding: 1rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-border {
    border: 3px double var(--wood-dark);
    padding: 2rem;
    height: 100%;
    border-radius: 10px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    /* transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; */
}

.card-food .card-border {
    background: rgba(139, 69, 19, 0.08); /* Warm, subtle brown tint */
    border-color: var(--wood-light);
}

/* .card-border:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
} */

/* Celtic corners (simulated with pseudo elements) */
.card-border::before, .card-border::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url('assets/celtic_knot.webp');
    background-size: contain;
    background-repeat: no-repeat;
}

.card-border::before { 
    top: 5px; 
    left: 5px; 
}

.card-border::after { 
    bottom: 5px; 
    right: 5px; 
    transform: rotate(180deg);
}

.card-border > :last-child {
    margin-top: auto;
}

.menu-section .card-border > :last-child {
    margin-top: 0;
}



.feature-card h3 {
    font-size: 1.8rem;
    margin: 0 auto 1rem auto;
    /* color: var(--wood-dark); */
    border-bottom: 2px solid var(--wood-dark);
    padding-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 5rem;
    width: fit-content;
    text-align: center;
}

.feature-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.feature-card .card-subtitle {
    font-style: italic;
    color: var(--color-accent-gold-dark);
    margin-bottom: 1.5rem;
}

/* Tertiary Button - "The Cask & Honey" Style (3D Depth) */
.btn-wood {
    background: linear-gradient(to bottom, var(--wood-light), var(--wood-dark)); /* 3D Curve */
    color: var(--color-accent-gold);
    border: 2px solid var(--color-accent-gold); /* Thicker Rim */
    padding: 1rem 2rem;
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.6), /* Inner Depth */
        0 4px 6px rgba(0,0,0,0.3); /* Drop Shadow */
    width: auto;
    min-width: 160px;
    align-self: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Etched Text */
}

.btn-wood:hover {
    /* transform: translateY(-2px); */
    transform: scale(1.05);
    background: linear-gradient(to bottom, #6d4c41, #4e342e); /* Slightly Lighter */
    color: var(--color-accent-gold-bright);
    border-color: var(--color-accent-gold-bright);
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.6),
        0 0 15px rgba(255, 193, 7, 0.4); /* Honey Glow */
}

.btn-wood:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    transition: transform 0.1s ease-in-out;
}


/* Primary CTA Button - Solid Gold (High Emphasis) */
/* Primary CTA Button - "The Gold Ingot" (3D Solid) */
.btn-cta {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 1rem 3rem;
    font-family: var(--font-subheading);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wood-dark); /* Dark Text for contrast on Gold */
    background: linear-gradient(to bottom, var(--color-accent-gold-bright), var(--color-accent-gold)); /* 3D Gold */
    border: 1px solid #e0a800; /* Darker Gold Rim */
    border-radius: 4px;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.5), /* Top Highlight */
        inset 0 -2px 0 rgba(0,0,0,0.1), /* Bottom Shade */
        0 4px 15px rgba(255, 193, 7, 0.4); /* Glow */
    transition: all 0.3s ease;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4); /* Engraved Light */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Hover State for Primary */
.btn-cta:hover {
    /* transform: translateY(-2px); */
    transform: scale(1.05);
    background: linear-gradient(to bottom, #fff176, #ffd54f); /* Brighter Ingot */
    border-color: #ffca28;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 0 25px rgba(255, 215, 0, 0.6),
        0 8px 20px rgba(0,0,0,0.4);
}

.btn-cta:active {
    transform: scale(0.96) translateY(2px);
    background: linear-gradient(to bottom, var(--color-accent-gold-bright), var(--color-accent-gold)); /* 3D Gold */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
    transition: transform 0.1s ease-in-out;
}

/* Secondary CTA Button - Ghost Style (Lower Emphasis) */
/* Secondary CTA Button - "The Crystal Pane" (3D Ghost) */
.btn-cta-secondary {
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.15)); /* Subtle Glass */
    color: var(--color-accent-gold);
    border: 2px solid var(--color-accent-gold);
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1); /* Inner Depth */
    text-shadow: none;
}

/* Hover State for Secondary */
.btn-cta-secondary:hover {
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.25));
    color: var(--color-accent-gold-bright);
    border-color: var(--color-accent-gold-bright);
    box-shadow: 
        inset 0 0 15px rgba(255, 215, 0, 0.3), /* Stronger Inner Glow */
        0 0 20px rgba(255, 215, 0, 0.2); /* Outer Glow */
}

.btn-cta-secondary:active {
    transform: scale(0.96) translateY(2px);
    box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.3);
    transition: transform 0.1s ease-in-out;
}

.cta-container {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* New Button Styles */
.btn-primary {
    background-color: rgba(139, 90, 43, 0.3); /* Timber tint */
    border-color: var(--color-timber-light);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--wood-dark);
    color: var(--wood-dark);
}

.btn-outline:hover {
    background: rgba(255, 215, 0, 0.15); /* Gold tint */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    border-color: var(--color-accent-gold-bright);
    color: var(--color-accent-red);
}

.btn-outline:active {
    transform: scale(0.96) translateY(2px);
    background-color: rgba(255, 215, 0, 0.1);
    transition: transform 0.1s ease-in-out;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    border-width: 2px;
}

.map-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border: 2px solid var(--wood-dark);
    border-radius: 5px;
    margin-bottom: 1rem;
}

.map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.info-item h4 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--wood-dark);
    border-bottom: 1px solid var(--wood-light);
    margin-bottom: 0.5rem;
    padding-bottom: 0.2rem;
}

.info-item p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Menu Item Grid Layout */
.menu-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 1.5rem;
    border-bottom: 1px dotted var(--wood-dark);
    padding-bottom: 0.5rem;
}

.menu-item-grid:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.menu-item-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--wood-dark);
    margin: 0;
    text-align: left;
}

.menu-item-desc {
    font-style: italic;
    font-size: 0.9rem;
    text-align: right;
    color: var(--text-dark);
}

.location-link {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
    border-bottom: 1px dotted var(--wood-dark);
}

.location-link:hover {
    color: var(--color-accent-red);
    border-bottom-style: solid;
}

.contact-form {
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

.phone-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    border-bottom: 1px dotted var(--wood-dark);
}

.phone-link:hover {
    color: var(--color-accent-red);
    border-bottom-style: solid;
}

/* Footer */
footer {
    background-color: var(--wood-dark);
    color: var(--parchment);
    padding: 2rem 1.5rem;
    text-align: center;
    border-top: 4px solid var(--color-accent-gold-dark); /* Gold border */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.5); /* Shadow for depth */
    position: relative;
    z-index: 10;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.1rem;
    font-family: var(--font-subheading);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-section.left {
    justify-content: flex-start;
}

.footer-section.center {
    justify-content: center;
}

.footer-section.right {
    justify-content: flex-end;
}

.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(243, 229, 171, 0.2); /* Subtle separator */
    padding-top: 1rem;
    font-size: 0.9rem;
    color: rgba(243, 229, 171, 0.8);
}

.footer-address {
    color: var(--parchment);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-align: left;
}

.footer-address:hover, .footer-address:focus {
    color: var(--color-accent-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* .sticky-sub-nav a:hover,
.sticky-sub-nav a.active {
    color: var(--color-accent-gold);
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
} */

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: var(--parchment);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: var(--color-accent-gold);
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-section.left,
    .footer-section.center,
    .footer-section.right {
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    /* Tablet / Small Laptop Adjustments */
    
    /* Compact Navigation */
    nav ul {
        gap: 10px;
    }

    nav ul li {
        width: 160px; /* Reduce width from 200px */
    }

    .nav-btn {
        font-size: 1rem;
        padding: 10px 10px;
    }

    /* Hero Scaling */
    .hero h1 {
        font-size: 3rem;
    }

    .hero h2 {
        font-size: 1.5rem;
    }

    .hero-content {
        padding: 2rem 1rem;
        background-color: transparent; /* Ensure no background on tablet */
        border: none;
        box-shadow: none;
    }

    /* Fix Hero Background on Tablet */
    .hero {
        background-attachment: scroll;
        background-size: 180% auto;
    }

    .hero-small {
        background-size: 160% auto;
    }

    /* Content Spacing */
    .parchment-content {
        padding: 3rem 2rem;
    }

    .content-grid {
        gap: 1.5rem;
    }

    /* Adjust sticky sub-nav for tablet padding */
    .sticky-sub-nav {
        margin-left: -2rem;
        margin-right: -2rem;
        width: calc(100% + 4rem);
    }
}

@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 80vh;
        padding: 6rem 1rem 4rem 1rem; /* Add padding to prevent content touching edges, account for header */
        align-items: center;
        background-attachment: scroll;
        background-size: 275% auto;
    }

    .hero-small {
        height: auto;
        min-height: 50vh;
        background-size: 175% auto;
    }

    .hero-content {
        padding: 1.5rem 1rem;
        margin-top: 0;
        width: 100%;
        max-width: 100%; /* Allow full width */
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .hero h1 {
        font-size: 3rem; /* Good size for mobile cinematic */
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    .hero h2 {
        font-size: 1.1rem; /* Reduced from 1.3rem */
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }

    .section-header h2 {
        font-size: 1.8rem;
        word-wrap: break-word;
    }

    .btn-cta {
        padding: 0.8rem 1.5rem; /* Smaller button padding */
        font-size: 1rem; /* Smaller button text */
        margin-top: 0.5rem;
        width: 100%; /* Full width on mobile */
        max-width: 280px; /* But not too wide */
    }

    .cta-container {
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
        width: 100%;
    }
    
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
    }

    .mobile-logo-link {
        display: flex;
    }

    .mobile-logo-link img {
        height: 70px; /* Adjust size as needed */
        width: auto;
        padding: 0.38rem 0;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        justify-content: start; 
        align-items: center;
        width: 100%;
        background: var(--wood-dark);
        padding: 0;
        position: fixed; /* Fixed to cover screen */
        top: -4rem; /* Offset by header height (approx) */
        left: 0;
        z-index: 15; /* Below hamburger (20) */
        border-bottom: 3px solid var(--wood-dark);
        box-shadow: 0 4px 6px rgba(0,0,0,0.5);
        gap: 1.25rem;
        /* Animation properties */
        height: 0; /* Animate height */
        overflow: hidden;
        transition: height 0.3s ease-in-out, padding-top 0.3s ease-in-out;
    }

    nav ul.active {
        top: 0rem;
        height: 100vh; /* Full screen */
        padding-top: 8rem;
        transition: height 0.3s ease-in-out, padding-top 0.3s ease-in-out;
    }

    nav ul li {
        width: 200px;
        height: 65px;
        opacity: 0;
        /* transform: translateX(-100%); */ /* Slide in from left */
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    nav ul.active li {
        opacity: 1;
        /* transform: translateX(0); */
    }

    /* Staggered delays matching example */
    /* nav ul.active li:nth-child(1) { transition-delay: 0.2s; }
    nav ul.active li:nth-child(2) { transition-delay: 0.3s; }
    nav ul.active li:nth-child(3) { transition-delay: 0.4s; }
    nav ul.active li:nth-child(4) { transition-delay: 0.5s; }
    nav ul.active li:nth-child(5) { transition-delay: 0.6s; } */



    .nav-btn {
        align-content: center;
    }

    .hamburger {
        display: block; /* Visible on mobile */
        position: static; /* Reset absolute positioning */
        transform: none;
    }

    .nav-logo {
        order: -1; /* Move to top of flex container */
        align-items: center;
        margin-bottom: 2rem; /* 2rem space above first link */
        opacity: 0;
        transition: opacity 0s; /* Immediate hide on close */
    }
    
    nav ul.active .nav-logo {
        opacity: 1;
        transition: opacity 0.5s ease-in;
        transition-delay: 0.3s; /* Wait for menu to slide down */
    }
    
    /* Hide logo in the menu list if it's duplicated, or adjust layout */
    /* In this structure, the logo is a list item. We might want to hide it inside the dropdown 
       and show a separate one in the bar, OR keep it as the top item. 
       Let's keep it simple: The logo is part of the list. 
       If we want a persistent logo bar, we'd need to restructure HTML.
       For now, let's just let the menu drop down. 
       BUT, the hamburger is in 'nav', and 'nav ul' is the menu.
       If 'nav ul' is hidden, the logo (which is an li) is hidden.
       We need a visible logo on the bar.
       
       Refining plan: 
       The current HTML has the logo INSIDE the UL.
       To have a persistent logo on mobile + hamburger, we need to move the logo OUT of the UL 
       or duplicate it, OR make the UL not cover the whole bar.
       
       Given the constraints, I will modify the CSS to handle the existing structure best:
       The 'nav' bar will just contain the hamburger.
       When clicked, the menu (with logo) drops down.
       
       Actually, a better UX is to have a logo visible on the bar always.
       I will add a mobile-only logo outside the UL in the HTML updates.
       For now, let's style the UL to be the dropdown.
    */

    .parchment-content{
        padding: 2rem 1rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    /* Mead Selection Mobile Adjustments */
    .mead-menu-container {
        gap: 2rem; /* Reduce gap on mobile */
    }

    /* Adjust sticky sub-nav for mobile padding */
    .sticky-sub-nav {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }
}

@media (max-width: 450px) {
/* Adjust sticky sub-nav for mobile padding */
    .sticky-sub-nav {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
        gap: 0;
        justify-content: space-between;
    }

    .hero-mead {
        background-size: 250% auto;
    }

    .hero-events {
        background-size: 250% auto;
    }

    .feature-card {
        padding: 1rem 0;
    }
}

/* Mead Selection Styles */
.mead-menu-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
}

.mead-menu-section {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.mead-header-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--wood-dark);
}

.mead-section-title {
    font-size: 2rem;
    color: var(--color-accent-red);
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 2px solid var(--wood-dark);
    padding-bottom: 0.5rem;
}

.mead-section-desc {
    margin-bottom: 2rem;
    font-style: italic;
    text-align: center;
}

/* Utility Classes */
.keep-together {
    display: inline-block;
}

/* Contact Section Improvements */
.contact-container {
    max-width: 800px;
    margin: 3rem auto 0;
    width: 100%;
}

.contact-form-row {
    display: flex;
    gap: 1rem;
}

.contact-form-row input {
    flex: 1;
}

@media (max-width: 600px) {
    .contact-form-row {
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }
}