/*=====================================================
    Bayou Fork Kitchen - brand overrides
=====================================================*/

/*--- Black & gold theme: the template's --secondary-color (green,
      used sitewide for the cart button, hovers, badges, etc.) is a
      single CSS variable, so redefining it here retints all of it
      at once instead of hunting down every green usage. Same for
      --primary-color, which the template ships as red (#BF1109) -
      that's the Lotus Seafood look this site is deliberately not
      using, so it becomes gold too. Since both variables now land
      on the same gold, .theme-btn.style-one below gets its own
      hover swap to gold/black instead of red/gold. ---*/
:root {
    --primary-color: #f0a500;
    --secondary-color: #f0a500;
}

/* Gold-on-gold has no contrast, so give the primary button dark
   text at rest and invert to a black fill with gold text on hover
   (the template's own hover rule would otherwise just swap it to
   the same gold used at rest, i.e. no visible hover state at all). */
.theme-btn.style-one {
    color: #12100e;
}

.theme-btn.style-one:hover {
    background-color: #12100e !important;
    color: #f0a500;
}

.back-to-top {
    background-color: #12100e !important;
    color: #f0a500 !important;
}

/*--- Catering/contact form (.contact-wrapper): the theme ships an
      icon-positioning rule for a ".contact-form-wrapper" class that
      isn't used anywhere in this site, so the calendar icon on the
      catering form's Event Date field was rendering as a loose inline
      icon under the input instead of sitting inside it. ---*/
.contact-wrapper .form_group .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    pointer-events: none;
}

/* The theme also pads .contact-wrapper 130px on the bottom below
   1199px to match a decorative image column that's hidden on these
   sizes anyway (d-none d-xl-block) - pure dead space on mobile. */
@media (max-width: 1199px) {
    .contact-wrapper {
        padding-bottom: 0 !important;
    }
}

/*--- Mobile off-canvas nav: a short link list left a big slab of
      empty white space at the bottom of the full-height drawer.
      Center the menu content instead of pinning it to the top. ---*/
@media (max-width: 1199px) {
    .header-navigation .foodix-nav-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/*=====================================================
    Full-bleed photo hero (replaces the old circle-photo
    hero-wrapper-four layout) + shared gold/black/white
    button styles used by the hero and the new dark menu.
=====================================================*/
.bf-hero-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 92vh;
    padding: 160px 0 90px;
    background-position: center;
}

.bf-hero-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 40%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.55) 100%);
}

.bf-hero-banner .container {
    position: relative;
    z-index: 1;
}

.bf-hero-banner-content {
    max-width: 780px;
}

.bf-hero-banner-content .bf-tag-line {
    display: inline-block;
    margin-bottom: 14px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f0a500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.bf-hero-banner-content h1 {
    margin-bottom: 22px;
    font-size: 76px;
    line-height: 1.05;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

.bf-hero-banner-content p {
    max-width: 620px;
    margin-bottom: 34px;
    font-size: 19px;
    line-height: 30px;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

@media (max-width: 991px) {
    .bf-hero-banner-content h1 {
        font-size: 52px;
    }
}

@media (max-width: 575px) {
    .bf-hero-banner {
        min-height: 0;
        padding: 120px 0 50px;
    }

    .bf-hero-banner-content .bf-tag-line {
        font-size: 21px;
    }

    .bf-hero-banner-content h1 {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .bf-hero-banner-content p {
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 26px;
    }
}

/*--- Shared button row (hero CTAs) ---*/
.bf-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.bf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition: all .3s ease-out;
    white-space: nowrap;
}

.bf-btn-dark {
    background: #12100e;
    border-color: #12100e;
    color: #ffffff;
}

.bf-btn-dark:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.bf-btn-gold {
    background: #f0a500;
    border-color: #f0a500;
    color: #12100e;
}

.bf-btn-gold:hover {
    background: transparent;
    border-color: #f0a500;
    color: #f0a500;
}

.bf-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #ffffff;
}

.bf-btn-outline:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #12100e;
}

/*--- Plate photo (service-area section, replaces the old combo cutout) ---*/
.bf-plate-photo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bf-plate-photo {
    max-width: 480px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
    border: 6px solid rgba(255, 255, 255, .08);
}

/*--- Top bar (address, hours, phone) ---*/
.bf-topbar {
    background: #f0a500;
    padding: 9px 0;
}

.bf-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 30px;
}

.bf-topbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #12100e;
    white-space: nowrap;
}

.bf-topbar-item i {
    color: #12100e;
    font-size: 12px;
}

.bf-topbar-item a {
    color: #12100e;
}

.bf-topbar-item a:hover {
    color: #ffffff;
}

.bf-topbar .bf-todo {
    background: #12100e;
    box-shadow: none;
    color: #f0a500;
}

/*--- Header nav: dark bar so the logo's own black background blends in ---*/
.header-area.page-header {
    background-color: #12100e;
}

.header-area.page-header .header-navigation .main-menu > ul > li > a {
    color: rgba(255, 255, 255, .92);
}

.header-area.page-header .header-navigation .main-menu > ul > li:hover > a,
.header-area.page-header .header-navigation .main-menu > ul > li.active > a {
    color: #f0a500;
}

/* Dropdown panel stays white with dark text, regardless of the dark bar above it */
.header-area.page-header .header-navigation .main-menu .sub-menu,
.header-area.page-header .header-navigation .main-menu .sub-menu li > a {
    background: #ffffff;
    color: #12100e;
}

.header-area.page-header .header-navigation .main-menu .sub-menu li:hover > a {
    color: #f0a500;
}

.header-area.page-header .header-navigation .navbar-toggler span {
    background-color: rgba(255, 255, 255, .92);
}

/* The mobile off-canvas menu panel is white (see style.css), so the
   dark-bar link color above needs to flip back to dark in there or
   the links disappear against the white background. */
@media (max-width: 1199px) {
    .header-area.page-header .header-navigation .foodix-nav-menu .main-menu > ul > li > a {
        color: #12100e;
    }

    .header-area.page-header .header-navigation .foodix-nav-menu .main-menu > ul > li:hover > a,
    .header-area.page-header .header-navigation .foodix-nav-menu .main-menu > ul > li.active > a {
        color: #f0a500;
    }
}

/* Buttons that wrap onto their own line on narrow screens (hero CTAs,
   "Order Online" / "Cater My Event", etc.) were landing flush against
   each other with no gap. Give any stacked pair breathing room and
   drop the left margin meant for the side-by-side desktop layout. */
@media (max-width: 575px) {
    .theme-btn + .theme-btn {
        margin-top: 15px;
    }

    .theme-btn.ml-10 {
        margin-left: 0 !important;
    }
}

@media (max-width: 767px) {
    .bf-topbar { padding: 6px 0; }
    .bf-topbar-inner {
        justify-content: center;
        gap: 2px 14px;
    }
    .bf-topbar-item { font-size: 11px; gap: 5px; }
    .bf-topbar-item i { font-size: 10px; }
}

@media (max-width: 480px) {
    .bf-topbar-inner { flex-direction: column; gap: 2px; }
}

/*--- Trust-stat icons (plain flaticon glyphs, no illustration) ---*/
.iconic-box.style-five .icon i {
    font-size: 44px;
    line-height: 1;
    color: #f0a500;
}

/*--- About-section portrait photo ---*/
.bf-about-photo {
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    max-width: 420px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*--- Logo image (full badge, never cropped) ---*/
.site-logo-img {
    display: inline-block;
    height: 72px;
    width: auto;
    max-width: none;
    object-fit: contain;
    vertical-align: middle;
}

.site-logo-footer {
    height: 100px;
    width: auto;
}

/* The logo file itself is a square PNG with a solid black background
   baked into the art (not real transparency) - it disappears on the
   header's black bar, but on the white mobile off-canvas menu it
   showed up as a stray black box. Frame it as an intentional badge
   there instead of fighting the asset. */
.mobile-logo .site-logo-img {
    height: 90px;
    width: auto;
    padding: 10px;
    border-radius: 12px;
    background: #12100e;
}

@media (max-width: 575px) {
    .site-logo-img { height: 56px; width: auto; }
    .site-logo-footer { height: 80px; width: auto; }
}

/*--- Notices (pricing pending, allergen, cutoff) ---*/
.bf-notice {
    display: block;
    padding: 18px 24px;
    margin-bottom: 40px;
    border-left: 4px solid #f0a500;
    background: #fbf6ef;
    border-radius: 6px;
    font-size: 15px;
    color: #4a443d;
}

.bf-notice strong {
    color: #12100e;
}

.bf-notice.dark {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    border-left-color: #f0a500;
}

.bf-notice.dark strong {
    color: #ffffff;
}

/*--- Service-area chips ---*/
.bf-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0 0 10px;
    list-style: none;
}

.bf-areas li {
    padding: 8px 18px;
    border: 1px solid #e6ded2;
    border-radius: 30px;
    background: #ffffff;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #12100e;
}

.bf-areas li i {
    margin-right: 7px;
    color: #f0a500;
}

@media (max-width: 991px) {
    .bf-areas {
        justify-content: center;
        margin-bottom: 20px;
    }
}

/*--- Offer/CTA button group under the service-area chips ---*/
.offer-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

@media (min-width: 992px) {
    .offer-cta-group {
        justify-content: flex-start;
    }
}

/* the group's own gap already spaces these; don't double up with the
   generic stacked-button rule below */
.offer-cta-group .theme-btn + .theme-btn {
    margin-top: 0;
}

/*--- Ordering-info cards ---*/
.bf-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.bf-info-card {
    padding: 30px 28px;
    border: 1px solid #eee7dc;
    border-radius: 10px;
    background: #ffffff;
    height: 100%;
}

.bf-info-card h5 {
    margin-bottom: 12px;
    font-size: 20px;
    text-transform: uppercase;
}

.bf-info-card h5 i {
    margin-right: 8px;
    color: #f0a500;
}

.bf-info-card p,
.bf-info-card li {
    font-size: 15px;
    color: #5c554c;
    margin-bottom: 6px;
}

.bf-info-card ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*--- Placeholder tokens the owner still needs to supply ---*/
.bf-todo {
    padding: 1px 7px;
    border-radius: 3px;
    background: #fff2c9;
    box-shadow: inset 0 0 0 1px #e8cf85;
    font-weight: 600;
    font-size: .92em;
    color: #7a5a00;
    white-space: nowrap;
}

/*--- Price slot while the menu pricing is being finalised ---*/
.bf-price-tbd {
    font-weight: 600;
    color: #9a9189 !important;
}

/*--- Drive-thru banner ---*/
.bf-drivethru {
    padding: 26px 30px;
    border-radius: 12px;
    background: #12100e;
    color: #ffffff;
}

.bf-drivethru h4 {
    color: #ffffff;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.bf-drivethru p {
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

.bf-drivethru i {
    color: #f0a500;
}

/*--- Team card with optional photo (falls back to an icon avatar) ---*/
.bf-team-card {
    padding: 30px 28px;
    border: 1px solid #eee7dc;
    border-radius: 10px;
    background: #ffffff;
    height: 100%;
    text-align: center;
}

.bf-team-avatar {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    background: #f4ede1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #f0a500;
}

.bf-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.bf-team-avatar i {
    font-size: 46px;
    color: #f0a500;
}

.bf-team-card h5 {
    margin-bottom: 12px;
    font-size: 20px;
    text-transform: uppercase;
}

.bf-team-card p {
    font-size: 15px;
    color: #5c554c;
    margin-bottom: 0;
}

/*=====================================================
    Mobile spacing pass - the theme's section padding
    utilities (pt-130, pb-100, etc.) don't scale down on
    their own, so every section stays desktop-sized on
    phones. Cut them roughly in half below 767px.
=====================================================*/
@media (max-width: 767px) {
    .pt-130, .pt-125 { padding-top: 55px !important; }
    .pt-120 { padding-top: 50px !important; }
    .pt-110 { padding-top: 45px !important; }
    .pt-100 { padding-top: 42px !important; }
    .pt-90  { padding-top: 38px !important; }

    .pb-130 { padding-bottom: 55px !important; }
    .pb-120 { padding-bottom: 50px !important; }
    .pb-110 { padding-bottom: 45px !important; }
    .pb-100 { padding-bottom: 42px !important; }
    .pb-90  { padding-bottom: 38px !important; }
    .pb-80  { padding-bottom: 34px !important; }
    .pb-65  { padding-bottom: 28px !important; }

    .mb-55 { margin-bottom: 30px !important; }
    .mb-50 { margin-bottom: 26px !important; }
    .mb-40 { margin-bottom: 22px !important; }

    /* Offcanvas mobile menu: less dead air above the nav links and the CTA */
    .foodix-nav-menu .mobile-logo { margin-bottom: 14px !important; }
    .foodix-nav-menu .nav-button { margin-top: 20px !important; }
    .foodix-nav-menu .mobile-logo .site-logo-img { height: 60px !important; }
}

/*--- Outline button on a dark background needs light text,
      not the template's default dark text ---*/
.offer-bg-wrapper .theme-btn.style-two {
    color: #ffffff;
    border-color: #ffffff;
}

.offer-bg-wrapper .theme-btn.style-two:hover {
    color: #12100e;
    background-color: #ffffff;
}

/*--- Quick-order section: give the form card real breathing room
      instead of ending flush at the section's bottom edge ---*/
.booking-wrapper {
    padding-bottom: 90px;
}

.booking-wrapper .booking-form-box {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/*--- Page banner (title + breadcrumb strip on every inner page):
      the template gives it 210px of padding just to show one line
      of text. Cut it down so it's not a full-screen block. ---*/
.page-banner .page-bg-wrapper {
    position: relative;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

/* Every inner page now runs a real food photo behind the title
   instead of a flat background, so an overlay keeps the white
   title/breadcrumb readable over whatever's in the shot. */
.page-banner .page-bg-wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 100%);
}

.page-banner .page-banner-content {
    position: relative;
    z-index: 1;
}

.page-banner .page-title {
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .page-banner .page-bg-wrapper {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/*--- About page story-photo banner: was 130px/125px of padding
      around one line of text, now a tighter photo strip. The photo
      itself is busy (signage, foliage), so a dark overlay sits
      behind the heading to keep the white text readable. ---*/
.play-wrapper {
    position: relative;
    padding-top: 75px;
    padding-bottom: 75px;
}

.play-wrapper:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.play-wrapper h2 {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .play-wrapper {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

/*=====================================================
    Dark menu page - black background, one strip per
    category, photo-grid cards, gold accents throughout
    (no red) so it reads as its own black/gold/white system.
=====================================================*/
.bf-dark-menu {
    background: #12100e;
    padding: 60px 0 20px;
}

.bf-dark-menu .bf-notice.dark {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.bf-menu-category {
    padding: 50px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.bf-menu-category:last-child {
    border-bottom: none;
}

.bf-menu-category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}

.bf-menu-category-header h2 {
    margin: 0;
    font-size: 34px;
    text-transform: uppercase;
    color: #ffffff;
}

.bf-menu-category-header h2 span {
    color: #f0a500;
}

.bf-menu-category-note {
    margin: -18px 0 30px;
    max-width: 760px;
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
}

/*--- Photo dish grid ---*/
.bf-dish-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 22px 18px;
    margin-bottom: 34px;
}

.bf-dish-card {
    text-align: center;
}

.bf-dish-card .bf-dish-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #1c1a17;
}

.bf-dish-card .bf-dish-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-out;
}

.bf-dish-card:hover .bf-dish-photo img {
    transform: scale(1.06);
}

.bf-dish-card h4 {
    margin-bottom: 4px;
    font-size: 17px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #f0a500;
}

.bf-dish-card h4 a {
    color: inherit;
}

.bf-dish-card .price {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .6);
}

/*--- Text-list categories (sides, sauces - no photos, like the
      reference site's Rice+Noodles / Sides sections) ---*/
.bf-dish-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 40px;
    margin-bottom: 34px;
    list-style: none;
    padding: 0;
}

.bf-dish-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    font-size: 16px;
}

.bf-dish-list li span.bf-dish-name {
    color: #ffffff;
    font-weight: 600;
}

.bf-dish-list li span.bf-dish-desc {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .55);
}

.bf-dish-list li span.price {
    flex-shrink: 0;
    color: rgba(255, 255, 255, .6);
}

.bf-menu-category-cta {
    text-align: center;
}

@media (max-width: 575px) {
    .bf-dark-menu {
        padding: 40px 0 10px;
    }

    .bf-menu-category {
        padding: 34px 0;
    }

    .bf-menu-category-header h2 {
        font-size: 26px;
    }

    .bf-dish-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .bf-dish-card h4 {
        font-size: 14px;
    }
}

/*--- Homepage "From the Kitchen" gallery slider: the theme's slides
      have no fixed height, just width:100% on the <img>, so each
      slide's height depends on that photo's aspect ratio AND on
      whether it's finished downloading by the time Slick measures
      slide heights on init. With 16 real (portrait phone) photos,
      that race easily leaves a tall blank gap where a slide should
      be. A fixed aspect-ratio removes the guesswork entirely. ---*/
.gallery-item.style-two .gallery-img {
    aspect-ratio: 4 / 3;
}

.gallery-item.style-two .gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*--- "Our Promise" homepage section: dark card instead of the
      default white background. ---*/
.bf-promise-dark {
    background: #12100e;
}

.bf-promise-dark .theme-btn.style-two {
    color: #ffffff;
    border-color: #ffffff;
}

.bf-promise-dark .theme-btn.style-two:hover {
    color: #12100e;
    background-color: #ffffff;
}