/* ===========================================
   layout.css — Page Structure & Layout (CLEAN)
   =========================================== */

/* ---------------------------
   HEADER / NAV
   --------------------------- */
.header-wrapper {
    position: absolute;
    top: 0;
    left: 33%;
    width: 67%;
    z-index: 200; /* keep above hero/carousel */
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.60));
    box-shadow: 0 1px 6px rgba(0,0,0,0.30);
    padding: 10px 28px;
}

#top-menu {
    display: flex;
    align-items: center;
}

#top-menu ul {
    list-style: none;
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
}

#top-menu li a {
    font-size: 15px;
    padding: 4px 4px 3px;
    color: #fff;
    transition: color 0.2s ease;
}

#top-menu li a:hover {
    color: var(--bh-color);
}

#top-menu li.active > a {
    font-weight: 600;
    border-bottom: 3px solid var(--bh-color);
}

/* Never underline menu links */
#top-menu a,
#top-menu a:hover {
    text-decoration: none !important;
}

/* ---------------------------
   HERO
   --------------------------- */
.home-hero {
    display: flex;
    width: 100%;
    padding-top: 0;
    align-items: center;
    height: 34vh; /* mirrors .home-banner height */
    max-height: 340px; /* optional to stay matched */
}


/* Left logo panel */
.hero-brand {
    width: 33%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* optional: cleaner centering */
    height: 100%; /* NEW */
    border-right: 2px solid var(--bh-color);
    padding-bottom: 12px;
    text-align: center;
}

.hero-brand img {
    width: 150px;
    margin-bottom: 6px;
}

.hero-tagline {
    font-family: 'TroutKings', cursive;
    font-size: 1.9rem;
    letter-spacing: 0.08em;
    color: var(--bh-color);
}

/* Right image/hero area (supports static img OR Owl carousel) */
.home-banner {
    flex: 1;
    height: 34vh; /* slightly shorter */
    max-height: 340px; /* prevents “next image peeking” */
    min-height: 240px;
    position: relative;
    overflow: hidden;
    background: #000;
}

.home-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.85), transparent);
    z-index: 2;
}

/* Static image */
.home-banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------
   RIBBONS (GLOBAL)
   --------------------------- */

/* Kill the “white strip” above ribbons (showcase.css sets padding-top:6px) */
.bh-showcase {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Full-width ribbon with bottom radius + shadow + correct spacing */
.bh-showcase-ribbon {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: var(--bh-color);
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    line-height: 1.2;
    /* Ribbon sizing */
    padding: 10px 0;
    /* Restore look */
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    /* Space below ribbon (was missing) */
    margin-top: 0;
    margin-bottom: 18px;
}

/* If any wrapper adds spacing above the ribbon, force it off */
.bh-showcase > .bh-showcase-ribbon:first-child {
    margin-top: 0 !important;
}

/* ---------------------------
   STORY + HOURS
   --------------------------- */
.bh-section {
    padding-top: 18px;
    padding-bottom: 18px;
}

.bh-story-container {
    max-width: 1100px;
    margin: 0 auto;
}

.bh-story-container .row {
    column-gap: 30px;
}

.bh-story-container .col-lg-4 {
    padding-left: 48px;
}

.bh-section-title {
    font-size: 1.7rem;
    font-weight: 700;
}

/* Subtle divider between Story + Hours */
.bh-story-container .col-lg-4 {
    position: relative;
}

.bh-story-container .col-lg-4::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient( to bottom, transparent, rgba(0, 0, 0, 0.15), transparent );
}

/* Hours */
div.bh-hours > div {
    display: flex;
    gap: 18px; /* tighten: day + hours were too far apart */
    padding: 2px 0;
    align-items: baseline;
}

div.bh-hours span:first-child {
    width: 110px; /* tighter than 130 */
    flex: 0 0 110px;
}

div.bh-hours span:last-child {
    color: var(--bh-color);
    white-space: nowrap;
}

/* Align Hours content with story paragraph */
.bh-hours {
    margin-top: 12px;
    padding-left: 16px;
}

.bh-story-container .bh-section-title-hours {
    padding-left: 16px;
}

/* ---------------------------
   VIDEO SECTION
   --------------------------- */
.bh-video-section {
    position: relative;
    padding: 12px 0;
    background: url("/assets/images/banner/alcohol_bottles.jpg") center/cover no-repeat;
}

.bh-video-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

/* Prevent any “shadow carryover” feeling by clipping inside */
.bh-video-section {
    overflow: hidden;
}

.video-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
    position: relative;
    z-index: 2;
}

/* ---------------------------
   FOOTER
--------------------------- */

.bh-footer {
    background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.01)), #000;
    border-top: 3px solid var(--bh-color);
    color: #fff;
}

/* ---- LAYOUT (GRID, NOT FLEX) ---- */
.bh-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 30% 20% 20% 30%;
    gap: 40px;
    align-items: start;
}

/* Columns */
.bh-footer-col {
    min-width: 0; 
    position: relative;
}

.bh-footer-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -24px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient( to bottom, transparent, rgba(255,255,255,0.06), transparent );
}

    .bh-footer a {
        color: #fff;
    }


/* ---------------------------
   TYPOGRAPHY
--------------------------- */

.bh-footer h4 {
    margin-bottom: 8px;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--bh-color);
    text-transform: uppercase;
}

.bh-footer p,
.bh-footer li,
.bh-footer a {
    font-size: 1.0rem;
    line-height: 1.35;
}

/* ---------------------------
   CONTACT ROWS
--------------------------- */

.bh-footer-col p {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-footer-col p i {
    width: 18px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}

/* ---------------------------
   LINKS
--------------------------- */

.bh-footer a {
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.bh-footer a:hover {
    color: var(--bh-color);
}

/* Footer menu */
.bh-footer ul,
.bh-footer ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bh-footer-col.links ul {
    max-width: 180px;
}

.bh-footer ul li {
    margin: 4px 0;
}

/* ---------------------------
   SOCIAL ICONS
--------------------------- */

.bh-footer .bh-social {
    display: flex;
    gap: 18px;
    justify-content: center;
}

.bh-footer-col.follow-us h4 {
    text-align: center;
}

.bh-footer-col.follow-us {
    text-align: center;
}

.bh-footer-col.follow-us .bh-social {
    justify-content: center;
}


.bh-footer .bh-social a {
    font-size: 1.6rem;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
    transition: transform 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}

.bh-footer .bh-social a:hover {
    background: rgba(204,106,0,0.18);
    color: var(--bh-color);
    transform: translateY(-2px) scale(1.08);
    text-shadow: 0 0 6px rgba(204,106,0,0.35);
}


.bh-social a {
    font-size: 1.6rem;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 6px;
    transition: transform 0.2s ease, background-color 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}


.bh-social a:hover {
    background: rgba(204,106,0,0.18);
    color: var(--bh-color);
    transform: translateY(-2px) scale(1.08);
    text-shadow: 0 0 6px rgba(204,106,0,0.35);
}

/* ---------------------------
   LOGO COLUMN
--------------------------- */

.bh-footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    text-align: center;
}

.bh-footer-logo img {
    max-height: 78px;
    opacity: 0.9;
}

/* ===========================================
   FOOTER HEIGHT TIGHTENING
   =========================================== */

/* Reduce overall vertical padding */
.bh-footer {
    padding: 0px 20px 10px; /* was 22px */
}

/* Tighten column spacing */
.bh-footer-container {
    gap: 32px; /* was 40px */
}

/* Reduce heading bottom spacing */
.bh-footer h4 {
    margin-bottom: 6px; /* was 8px */
}

/* Tighten contact / text rows */
.bh-footer-col p {
    margin: 3px 0; /* was 4px */
}

/* Tighten link list spacing */
.bh-footer ul li {
    margin: 3px 0; /* was 4px */
}

/* Reduce divider vertical reach slightly */
.bh-footer-col:not(:last-child)::after {
    top: 6px;
    bottom: 6px;
}

/* Slightly tighten social icons block */
.bh-footer .bh-social {
    margin-top: 4px;
}

/* Reduce logo visual weight */
.bh-footer-logo img {
    max-height: 72px; /* was 78px */
}


/* ---------------------------
   VISIT US
--------------------------- */

.contact-visit i {
    font-size: 2.2rem;
    color: var(--bh-color);
    margin-bottom: 12px;
}

.contact-visit h5 {
    font-weight: 600;
    margin-bottom: 6px;
}

.contact-visit p {
    margin: 0;
    color: #444;
}

.contact-visit a {
    color: inherit;
    text-decoration: none;
}

.contact-visit a:hover {
    color: var(--bh-color);
}

/* ---------------------------
   HERO — CONTACT VARIANT
--------------------------- */

.home-hero.hero--contact {
    height: 28vh; /* slightly shorter than Home */
    max-height: 280px;
}

.home-hero.hero--contact .home-banner {
    height: 28vh;
    max-height: 280px;
}

/* ---------------------------
   MAP IMAGE DIVIDER
--------------------------- */

.banner.map-banner {
    position: relative;
    padding-bottom: 20px; /* breathing room before footer */
}

.banner.map-banner .img {
    max-height: 260px;
    overflow: hidden;
}

.banner.map-banner img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* Dark fade into footer */
.banner.map-banner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55) );
}

/* ---------------------------
   MENU DOWNLOAD CTA
--------------------------- */

.menu-download {
    text-align: center;
    padding: 40px 0 20px;
}

.menu-download a {
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    background: var(--bh-color);
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.menu-download a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
/* CTA spacing inside showcase */
.bh-showcase-cta {
    text-align: center;
    margin: 18px auto 26px;
}
.bh-showcase-cta {
    margin-top: 10px;
    margin-bottom: 22px;
}
.bh-showcase-cta {
    position: relative;
}

.bh-showcase-cta::after {
    content: "";
    display: block;
    width: 120px;
    height: 1px;
    margin: 22px auto 0;
    background: linear-gradient( to right, transparent, rgba(0,0,0,0.15), transparent );
}

/* ---------------------------
   MENU IMAGE INTERACTION
--------------------------- */

.menu-image-link {
    position: relative;
    display: block;
}

.menu-image-link img {
    width: 100%;
    border-radius: 6px;
}

.menu-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.menu-image-link:hover .menu-view {
    opacity: 1;
}

tr.row-inactive td {
    background-color: #f3f3f3 !important;
    opacity: 0.6;
}

.form-two-col {
    width: 100%;
    display: flex !important;
    flex-direction: row;
    gap: 24px;
    box-sizing: border-box;
}

    .form-two-col .form-col {
        width: 50%;
        box-sizing: border-box;
    }

        .form-two-col .form-col textarea {
            width: 100%;
        }



.nowrap {
    white-space: nowrap;
}





/* ---------------------------
   RESPONSIVE
   --------------------------- */
@media (max-width: 991px) {
.header-wrapper {
    left: 0;
    width: 100%;
    position: relative;
}

.home-hero {
    flex-direction: column;
}

.hero-brand {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 2px solid var(--bh-color);
}

.home-banner {
    width: 100%;
    height: 240px;
    max-height: none;
    min-height: 0;
}

.bh-story-container .col-lg-5 {
    padding-left: 15px;
}

.bh-footer-container {
    flex-direction: column;
}
}