/*
Theme Name: Brooklyn Brothers Theme
Theme URI: https://tandemcreate.com
Template: twentytwentyfive
Author: Tandem Create
Author URI: https://tandemcreate.com
Description: Brooklyn Brothers Theme
Tags: brooklyn-brothers, theme
Version: 1.9.2
Updated: 2026-05-14 00:00:00

*/

:root {
    --text-colour: #000000;
    --text-inverted-colour: #ffffff;
    --background-colour: #ffffff;
    --background-inverted-colour: #000000;
    --banner-colour: #E0E0E0;
    --banner-dark-colour: #A3A3A3;
    --banner-black-text-colour: #040404;
    --banner-grey-text-colour: #B9B9B9;
    --primary-colour: #000000;
    --button-black-background-colour: #000000;
    --button-grey-background-colour: #B9B9B9;
    --button-white-text-colour: #ffffff;
    --button-black-text-colour: #000000;
    --brooklyn-brothers-yellow: #FDDD10;
    --text-shadow-colour: #000000;
    --overlay-colour: rgba(0, 0, 0, 0.5);
    --menucard-grey-background-colour: #DFDFDF;
    --menucard-black-background-colour: #000000;
    --slider-dot-colour: #000000;
    --menucard-grey-text-colour: #E0E0E0;
    --menucard-white-text-colour: #FFFFFF;
    --dropdown-box-background-colour: #E0E0E0;
}

/* HOOKRIDE */
@font-face {
    font-family: 'HOOKRIDE';
    src: url('fonts/HOOKRIDE.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Poppins */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html[data-theme-environment="production"] body.bb-content-protection,
html[data-theme-environment="production"] body.bb-content-protection * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html[data-theme-environment="production"] body.bb-content-protection input,
html[data-theme-environment="production"] body.bb-content-protection textarea,
html[data-theme-environment="production"] body.bb-content-protection select,
html[data-theme-environment="production"] body.bb-content-protection option,
html[data-theme-environment="production"] body.bb-content-protection [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body,
button,
input,
select,
textarea,
.site-title,
.site-description,
.entry-title,
.entry-content,
.entry-summary {
    font-family: 'Poppins', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'HOOKRIDE', sans-serif !important;
}

.relative {
    position: relative;
}

.text-center p,
.text-center a,
.text-center span,
.text-center ::placeholder,
.text-center input {
    text-align: center;
}

#brooklyn-brothers-logo-black {
    width: 100%;
    height: auto;
    max-width: 126px;
    max-height: 91px;
}

#brooklyn-brothers-logo-white {
    width: 100%;
    height: auto;
    max-width: 145px;
    max-height: 120px;
}

#brooklyn-brothers-halaal-logo {
    width: 100%;
    height: auto;
    max-width: 80px;
    max-height: 103px;
}

.no-padding > p {
    padding: 0 !important;
    margin: 0 !important;
}

.flipbox-text-shadow {
    text-shadow: 2px 2px 0px var(--text-shadow-colour);
}

.max-20vh {
    max-height: 20vh;
    overflow-y: scroll;
}

.max-30vh {
    max-height: 30vh;
    overflow-y: scroll;
}

#contact-us,
#franchise {
    transition: all 0.5s ease;
}

#contact-us.dropdown-is-closing,
#franchise.dropdown-is-closing {
    pointer-events: none;
}

#contact-us.dropdown-is-closing *,
#franchise.dropdown-is-closing * {
    animation-direction: reverse !important;
    animation-fill-mode: both !important;
}

/* Add overlay effect when dropdown is active */
div[data-elementor-type="wp-page"].dropdown-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.admin-bar #bb-menu {
    top: 32px;
}

.current-menu-item > a {
    font-weight: 600 !important;
}

.hfe-menu-item:hover {
    text-shadow: 0px 0px 0px var(--text-shadow-colour);
}


#category-groups .category-item img {
    transition: all 0.3s ease;
}

#category-groups .category-item img:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.bb-food-images img {
    object-fit: cover;
    object-position: center;
}

#bb-burger {
    transition: margin-bottom 0.5s ease;
}

#bb-burger.collapsed img {
    margin-bottom: -78px;
}

#bb-burger:not(.collapsed) img {
    margin-bottom: 0;
}

#burger-text,
#burger-lines {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#bb-burger:not(.collapsed) ~ #burger-text,
#bb-burger:not(.collapsed) ~ #burger-lines {
    opacity: 1;
    visibility: visible;
}

#brooklyn-brothers-logo-black-mobile,
#brooklyn-brothers-logo-black,
#brooklyn-brothers-logo-white-mobile,
#brooklyn-brothers-logo-white {
    min-width: 200px;
    max-width: 200px;
}

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body div[data-elementor-type="wp-page"],
    body .elementor,
    body .elementor-section-wrap,
    body .elementor-section,
    body .elementor-container,
    body .elementor-column,
    body .elementor-widget-wrap {
        max-width: 100%;
    }

    body div[data-elementor-type="wp-page"] {
        overflow-x: hidden;
    }

    #brooklyn-brothers-logo-black-mobile,
    #brooklyn-brothers-logo-black,
    #brooklyn-brothers-logo-white-mobile,
    #brooklyn-brothers-logo-white {
        min-width: 0;
        width: 100%;
        max-width: 160px;
    }

    .max-100 img,
    .max-100-story-image {
        max-width: 100% !important;
    }

    #bb-burger.collapsed img {
        margin-bottom: 0;
    }
}