/*
Theme Name: Barami Live
Theme URI: https://example.com
Author: Elad Buzzers
Version: 1.0
Text Domain: barami-theme
*/

/*
                                                                                                    
   @@@                                                                                              
   @@@@                                                                                             
   @@@@                                                              @@@@                           
   @@@@@@@@@@@@@@ @@@@   @@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@  @@@@@@@@@@@@@@  @@@@@@@@  @ @@@@ @@    
   @@@@@@@@@@@@@@@@@@@   @@@@    @@@@@      @@@@@ @@@@  @@@@@@@@  @@@@       @@@@@  @  @@  @@@  @   
   @@@@       @@@@@@@@   @@@@  @@@@@      @@@@@  @@@@@@@@@@@@@@    @@@@@@@@  @@@@@@@@@@@ @@@@@@@@   
   @@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@ @@@@@@@@@ @@@@@@@@  @@@    @@@@@@@@                         
     @@@@@@@@@@@    @@@@@@@  @@@@@@@@@@@@@@@@@@@@@ @@@@@@@  @@@   @@@@@@@@@                   @@@   
    buzzers.co.il
*/

::selection {
    background: #9C6C2EA6;
    color: white;
}

html[lang^="he"] .megamenu-arrow {
    transform: rotate(180deg);
}

body{
    margin:0;
    /* font-family: 'Futura PT', sans-serif; */
    /* font-family: 'Heebo', sans-serif; */
    /* font-family: 'Noto Sans Hebrew', sans-serif; */
    font-family: 'futura-100-hebrew', sans-serif;
    background: #fff;
    color: #000;
    overflow-x: hidden;
}

body {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="44" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="1" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path></svg>'), auto;
}
a{
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="1" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>'), auto !important;
}

.direction-ltr{
    direction: ltr;
}

#header-nav{
    /* direction: ltr; */
}

.footer-wrap{
    /* direction: ltr; */
}

.filter-wrap {
    gap: 10px 30px !important;
}

.filter-menu-category {
    max-height: 400px;
    display: flex;
    flex-wrap: wrap;
    width: 500px;
}


.flex-start {
    align-items: flex-start;
}

.project-filter-btn{
    text-align:start;
    text-wrap: nowrap;
}

.circle {
  --circle-size: 20px;
  position: fixed;
  height: var(--circle-size);
  width: var(--circle-size);
  border: 2px solid black;
  border-radius: 100%;
  top: calc(var(--circle-size) / 4 * -1);
  left: calc(var(--circle-size) / 4 * -1);
  pointer-events: none;
	z-index:999;
}

/*---------------- specs gallery single product ----------------*/
.specs-gallery-item{
    border: 1px solid black;
}

/*---------------- clients page ----------------*/
.logo-item img {
    transition: filter 300ms ease-in-out;
    /* filter: grayscale(100%); */
}

.logo-item:hover img {
    /* filter: grayscale(0%); */
}


@media screen and (max-width: 768px) {
    .filter-menu-category {
        /* max-height: 400px; */
        /* display: flex; */
        /* flex-wrap: wrap; */
        width: 100%;
        column-gap: 0px !important;
    }
    #products-grid{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .menu-product-content{
        flex-direction: column !important;
        gap: 0px !important;
    }
    #products-grid .product-item img,
    #products-grid .product-item__media > div{
        height: 250px;
    }
}

/*---------------- Barami Live: additions for the live site ----------------*/

/* The live main menu has more and longer items than the design's sample menu: keep each on one line and
   tighten the row on narrow desktops so it stays a single row. */
#header-nav .nav-link {
    white-space: nowrap;
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    #header-nav {
        gap: 24px;
    }
}

/* Rounded corners on every picture tile (owner's request). */
.product-item img,
.product-item__media,
.project-card,
.logo-item,
.barami-lightbox-trigger,
.collection-item {
    border-radius: 22px;
}

/* The tiles zoom their picture on hover: clip it to the rounded shape. */
.product-item__media,
.product-item > .overflow-hidden,
.project-card,
.logo-item,
.barami-lightbox-trigger,
.collection-item {
    overflow: hidden;
}

.product-item > .overflow-hidden {
    border-radius: 22px;
}

/* Text for screen readers only (labels of the search form, texts stored in the live content). */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Animations come from a CDN. If it did not load, content must not stay invisible. */
.no-gsap .fade-up {
    opacity: 1 !important;
    transform: none !important;
}

/* Editor content (pages, descriptions): Tailwind resets headings, lists and links, so they are styled here. */
.barami-content > *:first-child {
    margin-top: 0;
}

.barami-content p,
.barami-content ul,
.barami-content ol,
.barami-content table,
.barami-content blockquote,
.barami-content figure {
    margin: 0 0 1.1em;
}

.barami-content h2,
.barami-content h3,
.barami-content h4 {
    margin: 1.6em 0 0.7em;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1A1A1A;
}

.barami-content h2 { font-size: 1.35em; }
.barami-content h3 { font-size: 1.15em; }
.barami-content h4 { font-size: 1em; }

.barami-content a {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color 0.5s ease;
}

.barami-content a:hover {
    color: #9C6C2E;
}

.barami-content ul,
.barami-content ol {
    padding-inline-start: 1.4em;
}

.barami-content ul { list-style: disc; }
.barami-content ol { list-style: decimal; }

.barami-content img {
    max-width: 100%;
    height: auto;
    border-radius: 22px;
}

.barami-content iframe {
    max-width: 100%;
}

.barami-content table {
    width: 100%;
    border-collapse: collapse;
}

.barami-content td,
.barami-content th {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
    text-align: start;
}

/* The live content uses the old theme's grid classes inside the editor. */
.barami-content .row,
.barami-footer-content .row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.barami-content .row > [class*="col-"],
.barami-footer-content .row > [class*="col-"] {
    flex: 1 1 280px;
    min-width: 0;
}

.barami-content .row > .col-12,
.barami-footer-content .row > .col-12 {
    flex-basis: 100%;
}

/* Live forms (Contact Form 7): underlined fields, outlined button. */
.barami-form .wpcf7-form p {
    margin: 0;
}

.barami-form .wpcf7-form-control-wrap {
    display: block;
}

.barami-form input[type="text"],
.barami-form input[type="tel"],
.barami-form input[type="email"],
.barami-form input[type="search"],
.barami-form select,
.barami-form textarea {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.45);
    border-radius: 0;
    outline: none;
    color: #1A1A1A;
    font: inherit;
    font-size: 14px;
    letter-spacing: 1.958px;
    transition: border-color 0.5s ease;
}

.barami-form input:focus,
.barami-form select:focus,
.barami-form textarea:focus {
    border-bottom-color: #1A1A1A;
}

.barami-form input:focus-visible,
.barami-form textarea:focus-visible {
    box-shadow: 0 1px 0 0 #1A1A1A;
}

.barami-form ::placeholder {
    color: rgba(26, 26, 26, 0.55);
    opacity: 1;
}

.barami-form textarea {
    min-height: 96px;
    resize: vertical;
}

.barami-form input[type="submit"],
.barami-form button[type="submit"] {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 34px;
    background: transparent;
    border: 1px solid #1A1A1A;
    border-radius: 999px;
    color: #1A1A1A;
    font: inherit;
    font-size: 12px;
    letter-spacing: 1.958px;
    text-transform: uppercase;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.barami-form input[type="submit"]:hover,
.barami-form button[type="submit"]:hover {
    background: #1A1A1A;
    color: #fff;
}

.barami-form .wpcf7-not-valid-tip,
.barami-form .wpcf7-response-output {
    font-size: 12px;
    letter-spacing: 1px;
}

.barami-form .wpcf7-response-output {
    margin: 16px 0 0 !important;
    padding: 10px 14px !important;
}

/* Wide contact strip: the fields sit in one row on large screens. */
@media screen and (min-width: 1024px) {
    .barami-form--row .wpcf7-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0 32px;
    }

    .barami-form--row .wpcf7-form > .single-coloum {
        flex: 1 1 160px;
    }

    .barami-form--row .wpcf7-form > .wpcf7-response-output {
        flex-basis: 100%;
    }

    .barami-form--row input[type="submit"] {
        margin: 0 0 18px;
    }
}

/* Footer: the contact details block comes from the live options as HTML. */
.barami-footer-content {
    font-size: 14px;
    line-height: 1.6;
    color: #1A1A1A;
}

.barami-footer-content .footerheader {
    margin-bottom: 24px;
    font-size: 14px;
    letter-spacing: 1.96px;
    text-transform: uppercase;
}

.barami-footer-content p {
    margin: 0;
}

.barami-footer-content a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.barami-footer-content .row {
    gap: 0 24px;
}

/* The live content links to Facebook with an icon font this theme does not load: show its text instead. */
.barami-footer-content .fa .screen-reader-text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 1.96px;
}

.barami-footer-content .footerheader a {
    display: block;
    margin-top: 6px;
}

.barami-footer-menu a,
.barami-mobile-menu a {
    transition: color 0.5s ease;
}

.barami-footer-menu a:hover {
    color: #9C6C2E;
}

.barami-footer-legal p,
.barami-footer-legal pre {
    margin: 0;
    font: inherit;
    white-space: normal;
}

/* Floating "lighting consultant" pill and its pop-up. */
#advice-popup-trigger strong {
    font-weight: 500;
}

/* Closed by default here, not by utility classes, so it never flashes before the page is styled. */
#advice-popup:not(.is-open) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#advice-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#advice-popup-header p {
    margin: 0 0 6px;
}

#advice-popup-header a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.barami-modal-lock {
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    /* On phones the second line of the pill is dropped so it stays small. */
    #advice-popup-trigger span span {
        display: none;
    }
}