html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Open Sans, Arial, sans-serif;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    line-height: 1.7em;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

/* Utility class to prevent scrolling on the body when an overlay is active */
.no-scroll {
    overflow: hidden !important;
    height: 100% !important;
}

div {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
}

header {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
}

header,
footer {
    flex-shrink: 0;
}

h1, h2, h3 {
    font-family: 'Oswald', Helvetica, Arial, Lucida, sans-serif;
    color: #333;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 26px;
    padding-bottom: 10px;
}

h3 {
    font-size: 22px;
    padding-bottom: 10px;
}

h4 {
    color: #333;
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1em;
    font-weight: 500;
}

a {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #e94558;
}

a,
a:hover {
    text-decoration: none;
}

article {
    padding-bottom: 30px;
    display: block;
}

img {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
}

footer {
    display: block;
    box-sizing: border-box;
}

/* Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

thead th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Adds zebra striping for readability */
}

.main-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.main-content {
    flex: 1;
    background-color: #efefef !important;
}

.header-no-padding {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.article-headings {
    padding-bottom: 4px;
}

.header-inner-content {
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

.header-section {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: url('../images/home_06_hero_03.jpg') !important;
    position: relative;
    background-color: #fff;
    background-position: 50%;
    background-size: cover;
    height: 210px;
    background-repeat: no-repeat;
}

.header-row {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 80%;
    margin: auto;
    position: relative;
}

.header-column {
    margin-right: 0 !important;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    float: left;
    position: relative;
    z-index: 2;
    min-height: 1px;
    mix-blend-mode: unset !important;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
    text-align: center;
    width: 100%;
}

.header-column-image {
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
    box-sizing: border-box;
    text-align: center;
    animation-timing-function: linear;
    animation-duration: .2s;
}

.header-column a {
    cursor: pointer;
}

.menu-section {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #171717 !important;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.menu-row {
    z-index: 3;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 80%;
    max-width: 1080px;
    margin: auto;
    position: relative;
}

.menu-wrap {
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-box-flex: 1;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    opacity: 1;
}

.primary-menu {
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -webkit-box-pack: start;
    justify-content: flex-start;
    text-align: center;
}

.primary-menu-nav {
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    float: none;
    box-sizing: border-box;
}

.primary-menu-nav>ul {
    -webkit-box-pack: center;
    justify-content: center;
    padding: 0 !important;
    flex-wrap: wrap;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    line-height: 1.7em;
    float: none;
    margin-left: -11px;
    margin-right: -11px;
    list-style: none;
}

.primary-menu-nav>ul>li {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 11px;
    padding-right: 11px;
    line-height: 1em;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    background: transparent;
    box-sizing: border-box;
}

.primary-menu-nav>ul>li>a {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    word-wrap: break-word;
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    -webkit-text-size-adjust: 100%;
    background: transparent;
}

.primary-menu-nav>ul>li>a:hover {
    color: #e94558;
}

.page-header-section {
    padding-top: 10px;
    padding-bottom: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative;
}

.page-header-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    max-width: 1080px;
    border-left: 2px solid #e94558;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 80%;
    margin: auto;
    position: relative;
}

.page-header-content {
    text-align: left;
    position: relative;
}

.page-header-content h1 {
    text-transform: uppercase;
    font-size: 100px;
    color: #fff !important;
}

.page-header-content h4 {
    font-size: 24px;
    color: #e94558 !important;
}

.main-content-container {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    background-color: #efefef !important;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.main-content-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: auto;
    position: relative;
}

.main-content-row {
    width: 80%;
    max-width: 1080px;
    margin: auto;
    position: relative;
    display: block;
}

.article-summary-container {
    position: relative;
    padding-bottom: 30px;
    word-wrap: break-word;
}

.article-summary-container a img {
    vertical-align: bottom;
    max-width: 100%;
}

.article-title a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.article-subtitle {
    padding-top: 6px;
    font-size: 13px;
    color: #888;
    font-weight: 400;
}

.featured-image-url {
    display: block;
    position: relative;
    margin-bottom: 30px;
    border: 0 solid #333;
}

.featured-image-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure all images within an article's content are responsive */
article img {
    max-width: 100%;
    height: auto;
    display: block; /* Helps remove extra space below the image */
}

.contact-section-one {
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.contact-section-one::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/brewery-17.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
}

.contact-section-two {
    padding: 40px 0;
    position: relative;
    color: #fff;
    z-index: 1;
}

.contact-section-two::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero_bgnd_01-1.jpg');
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.contact-section-two a {
    color: #fff;
    text-decoration: underline;
}

.contact-section-two figcaption {
    font-size: 0.9em;
    font-style: italic;
    margin-top: 10px;
}

.contact-section-two img {
    max-width: 100%;
    height: auto;
}

.contact-column-left, .contact-column-right {
    box-sizing: border-box;
    flex: 1; /* Allow columns to share space */
}

.social-icons-container {
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Clearfix for the row */
.main-content-row::after {
    content: "";
    display: table;
    clear: both;
}

.contact-columns {
    display: flex;
    gap: 40px;
}

.pagination {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    flex: 0 1;
    width: 50%;
    margin: 0 auto;
}

.pagination-item {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    min-width: 40px;
    height: 40px;
    color: #e94558;
    font-weight: 500;
    text-decoration: none;
    font-size: 14px;
}

.footer-section {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #171717 !important;
    color: #fff;
}

.footer-row {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-row-bottom {
    width: 80%;
    margin: 0 auto;
    padding-top: 0px;
    display: flex;
    justify-content: center;
}

.footer-column-left {
    text-align: left;
    width: 50%;
}

.footer-column-right {
    display: flex;
    justify-content: flex-end;
    width: 50%;
}

.footer-column-right-inner {
    text-align: left;
}

.footer-column p {
    margin: 5px 0;
}

.social-icon {
    width: 32px;
    height: 32px;
    margin-left: 10px;
}

/* --- Photo Gallery Grid Styling --- */

/* 1. Define the container for the grid */
.gallery-images {
    /* Use flexbox to manage layout of children */
    display: flex;
    /* Allow images to wrap to the next row */
    flex-wrap: wrap;
    /* Consistent spacing between images */
    gap: 15px; 
    padding: 0;
    margin-top: 20px;
    list-style: none; /* Ensure no bullets if the container was an ul/ol */
}

/* 2. Style the individual photo links (the thumbnails) */
.gallery-images a {
    /* Calculate the width for 3 images per row, subtracting the gap */
    /* 100% / 3 = 33.333% | Minus 2 gaps / 3 */
    width: calc(33.333% - 10px); 
    height: auto;
    /* Makes the anchor tag behave like a block element */
    display: block;
    /* Optional: Add a subtle border or box shadow */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.gallery-images a:hover {
    transform: translateY(-2px); /* Lift the image slightly on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 3. Style the image itself */
.gallery-images img {
    /* Ensure the image fills its container */
    width: 100%;
    /* Maintain aspect ratio and crop to fill the space */
    height: 100%; 
    object-fit: cover;
    /* Remove any space below images */
    display: block; 
}

/* 1. The Container: Establishes the aspect ratio */
.videobox {
    /* Use 'span' as the actual element is a span */
    display: block; 
    
    /* CRITICAL: Set the relative positioning anchor */
    position: relative; 
    
    /* CRITICAL: This is what maintains the 16:9 aspect ratio */
    padding-bottom: 56.25%; 
    
    /* Set height to zero, forcing the padding to define the visible box height */
    height: 0; 
    overflow: hidden;
    max-width: 100%;
}

/* 2. The Iframe: Force the video to fill the container */
.videobox iframe {
    /* CRITICAL: Force absolute positioning to align with the container's edges */
    position: absolute; 
    top: 0;
    left: 0;
    
    /* CRITICAL: Overrides the inline width="640" height="390" */
    width: 100%;
    height: 100%;
    
    border: none;
}

/* --- NEW SEARCH ICON STYLES (Desktop Focus) --- */

/* Style the container <li> for vertical centering */
.search-desktop-item {
    /* Inherits padding from primary-menu-nav>ul>li */
    position: relative; 
    display: flex !important; /* Forces the list item to use Flexbox */
    align-items: center;    /* Vertically centers icon with text links */
    justify-content: center;
}

/* Style the link/button wrapper */
.search-icon-link {
    /* Inherits link color from anchor styles, but we want white here */
    color: #fff !important; 
    font-size: 18px; /* Match the font size of primary links */
    /* Ensure no extra padding is added by the link block style */
    padding: 0; 
    margin: 0;
    line-height: 1; /* Match link line height */
    
    /* Ensure alignment is maintained */
    display: flex;
    align-items: center;
}

/* Style the icon itself */
.search-icon-link .material-symbols-outlined {
    /* CRITICAL: Set size to match the surrounding 18px link text */
    font-size: 16px;

    /* Fine-tune vertical position if needed (may not be necessary with 16px) */
    position: relative;
    top: 0px;
    
    /* Ensure the icon renders correctly */
    font-variation-settings: 
        'FILL' 0, 
        'wght' 700,
        'GRAD' 0,
        'opsz' 24; 
    
    margin: 0; 
}

.search-icon-link:hover {
    color: #e94558 !important; /* Match your accent color */
}

/* --- NEW STYLES for Mobile Search Button (Visible on Mobile Only) --- */

.search-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; 
    z-index: 1001; 
    outline: none;
    
    /* Default: Hide this button globally/on desktop */
    display: none; 
}

.search-toggle-button .material-symbols-outlined {
    font-size: 24px; /* Larger icon for touch target */
    color: #fff; 
    font-variation-settings: 
        'FILL' 0,
        'wght' 700, 
        'GRAD' 0,
        'opsz' 24;
    transition: color 0.2s;
}

.search-toggle-button:hover .material-symbols-outlined {
    color: #e94558 !important;
}

/* --- PAGEFIND STYLES --- */
#pagefind-search-container {
    /* Full screen overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    
    display: none !important;

    --pagefind-ui-text: #fff;
    --pagefind-ui-primary: #e94558;
    --pagefind-ui-background: transparent;
    --pagefind-ui-border: #333;
    
    /* Center the Pagefind UI element inside */
    justify-content: center; /* Horizontally center the content */
    align-items: flex-start; /* Align content to the top of the container */
     padding-top: 50px; /* Push the content down from the top edge */
     /* Add some bottom padding so items at the end of the results (like the
         "Load more results" button) don't sit flush against the viewport edge */
     padding-bottom: 40px;
    
    /* Ensure the search box itself is correctly positioned */
    box-sizing: border-box;
    /* Allow the overlay to scroll if the inner content grows taller than the viewport
       (this lets the user scroll the overlay when Pagefind internal scrolling doesn't
       capture the extra results for any reason) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Show the container when the .is-open class is added by JS */
#pagefind-search-container.is-open {
    display: flex !important; /* Use flex to center the content */
} 

/* NEW: Restore styles for the <pagefind-ui> HOST element */
/* This controls the component's size and position on the page */
.pagefind-ui {
    width: 90%;
    max-width: 600px;
    position: relative;
    background-color: transparent;

    /* Use max-height instead of a hard height so the component can grow/shrink
       naturally inside the overlay and allow the overlay itself to scroll when
       results expand. Make this a flex column so the internal "results" area can
       properly use flex-grow/overflow. */
    display: flex;
    flex-direction: column;
    min-height: 0; /* critical for flex children to allow overflow to work */
    max-height: calc(100vh - 100px);
    /* Ensure internal padding is included inside the max-height and
       provide breathing room at the bottom of the host element. */
    box-sizing: border-box;
    padding-bottom: 48px;
}

.pagefind-ui__result {
    padding-top: 10px !important;
    padding-bottom: 14px !important;   
}

.pagefind-ui__result-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.3em; /* Slightly larger heading */
    font-weight: 700;
    margin: 0;
    padding-bottom: 8px;
}

.pagefind-ui__result-link {
    color: #e94558 !important;
    text-decoration: none;
    display: block;
}

.pagefind-ui__result-excerpt {
    margin-top: 10px;
}

.pagefind-ui__result-excerpt p {
    font-size: 1em;
    line-height: 1.5;
    color: #fff !important;
    margin: 0 0 10px 0;
}

.pagefind-ui__result-excerpt mark {
    background-color: #e94558 !important;
    color: #fff;
    padding: 3px 5px;
    border-radius: 2px;
    font-weight: 700;
}

/* Style the Pagefind result tags (date pill) so they are readable on the
   dark overlay. This covers the light-DOM rendering case. If Pagefind renders
   into a shadowRoot the same rules are injected at runtime from the template. */
.pagefind-ui__result-tag {
    background-color: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

.pagefind-close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10000;
    padding: 10px;
    transition: color 0.2s;
}

.pagefind-close-button .material-symbols-outlined {
    font-size: 30px;
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 0,
        'opsz' 24;
}

.pagefind-close-button:hover {
    color: #e94558;
}

/* Date pill styling for search results: shown under the excerpt/title when
   Pagefind provides a date. This keeps the pill readable on the dark overlay. */
.pagefind-ui__result-meta-pills {
    display: block;
    margin-top: 6px;
}
.pagefind-date-pill {
    display: inline-block;
    margin-left: 0;
    padding: 3px 8px;
    background-color: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    vertical-align: middle;
}

/* --- Responsive Adjustments (Optional but Recommended) --- */

/* For smaller tablets (e.g., max-width: 768px) */
@media (max-width: 768px) {
    .gallery-images a {
        /* Change to 2 columns */
        width: calc(50% - 7.5px); /* 100% / 2 - half the gap */
    }
}

/* For mobile phones (e.g., max-width: 480px) */
@media (max-width: 480px) {
    .gallery-images a {
        /* Change to 1 column */
        width: 100%;
    }
}

/* --- Hamburger Menu Styles --- */

/* Hide hamburger by default on larger screens */
.hamburger-button {
    display: none;
}

@media (max-width: 960px) {
    .header-section {
        height: 150px !important;
    }

    .header-column-image img {
        max-width: 40vw;
        max-height: 140px;
        width: auto;
        height: auto;
    }

    .header-row, .nav-column {
        padding: 30px 0;
        max-width: 1080px;
    }

    .header-column {
        margin-bottom: 0;
        width: 100%;
    }

    .page-header-content h1 {
        font-size: 60px !important;
    }

    .page-header-content h4 {
        font-size: 16px !important;
    }

    .menu-section {
        /* Ensure the menu bar can contain the absolutely positioned mobile menu */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Hide the desktop menu links */
    .primary-menu-nav {
        display: none;
        position: absolute;
        top: 100%; /* Position below the menu bar */
        left: 0;
        width: 100%;
        background-color: #171717;
        z-index: 1000;
    }

    /* When the menu is active, display it */
    .primary-menu-nav.is-active {
        display: block;
    }

    /* Stack the menu items vertically */
    .primary-menu-nav ul {
        flex-direction: column;
        width: 100%;
        margin: 0;
    }

    .primary-menu-nav ul li {
        width: 100%;
        padding: 0;
        border-top: 1px solid #333;
    }

    .primary-menu-nav ul li a {
        padding: 15px;
        display: block; /* Ensure the link fills the li */
    }

    /* Style and display the hamburger button */
    .hamburger-button {
        display: block !important;
        position: static;
        transform: none;
        order: 1;
        margin: 0 5px 0 0;
        padding: 10px;
        background: transparent;
        border: none;
    }

    .hamburger-bar {
        display: block !important;
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 5px 0;
        transition: 0.4s;
    }

    .search-toggle-button {
        display: block;
        order: 2;
        margin: 0 0 0 5px;
        padding: 10px;
        background: transparent;
        border: none;
    }

    .menu-row {
        display: block; 
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999; 
    }

    /* When the menu is active, ensure the menu appears over everything else (unchanged) */
    .primary-menu-nav {
        /* display: none is now handled by setting display:none on the parent .menu-row, 
           but we need to re-enable it on activation */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #171717;
        z-index: 1000;
        
        /* New: We rely on the JS to show it when active */
        display: none;
    }

    /* When the menu is active, display it (Re-enabling the visibility) */
    .primary-menu-nav.is-active {
        display: block;
    }

    /* Hide the desktop search icon that sits inside the list */
    .search-desktop-item {
        display: none !important;
    }

    .primary-menu-nav ul li {
        width: 100%;
        padding: 0;
        border-top: 1px solid #333;
    }

    .primary-menu-nav ul li a {
        padding: 15px;
        display: block; 
    }

    #primary-nav {
        display: none; /* Default hidden state for JS to override */
        background-color: #171717;
        width: 100%;
        box-sizing: border-box;
    }

    /* 5. JS TOGGLE: When the class is added by JS, show the menu */
    #primary-nav.is-active {
        display: block; 
    }

    /* stack footer content */
    .footer-row {
        display: block !important;
        flex-direction: unset !important;
        justify-content: unset !important;
        align-items: unset !important;
        padding: 10px 0;
    }

    .footer-column-left,
    .footer-column-right {
        float: left !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        clear: both !important;
    }

    .footer-column-right {
        justify-content: center;
    }

    .footer-column-right-inner {
        text-align: center !important;
    }

    .social-icon {
        margin: 0 5px !important;
    }

    .footer-row::after {
        content: "";
        display: table;
        clear: both;    
    }
}

@media (max-width: 767px) {
    .page-header-wrapper {
        padding-left: 20px;
        border-left-width: 2px;
    }
    .contact-columns {
        flex-direction: column;
    }
}