/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/**
 * Figma to Bricks - Three-Tier Design System
 * Generated from Figma variables
 *
 * Architecture:
 * 1. Primitives - Raw design values
 * 2. Tokens - Semantic declarations
 * 3. Bricks Defaults - Theme integration with fallbacks
 * 4. Component Utilities - Component-based classes
 */


@import url("imports/_primitives.css");
@import url("imports/_tokens.css");
@import url("imports/_bricks-overrides.css");
@import url("imports/_utilities.css");
@import url("imports/_components.css");



/* ========================================
   DESIGN ELEMENTS
   Complete blocks (navigation, content sections, etc.)
   ======================================== */


a {
  text-decoration-color: transparent; /* Initial transparent color */
  transition: text-decoration-color 0.3s ease; /* Transition only the color */
  transition: text-underline-offset 0.3s ease; /* Transition only the color */
  text-underline-offset: var(--size-0000);
}
a:hover {
  text-decoration: underline;
  text-decoration-color: inherit;
  text-underline-offset: var(--size-000);
}

.bricks-button a:hover,
.bricks-button:hover {
  text-decoration: none;
}

/* Catering Menu Items
*****************************************/
:root {
  --menu-item-width-xxs: 11.8rem;
  --menu-item-width-xs: 14.8rem;
  --menu-item-width-sm: 17.8rem;
  --menu-item-width-md: 19.4rem;
  --menu-item-width-lg: 24rem;
}
@media (min-width: 992px) {
  .menu-item-width-sm { max-width: var(--menu-item-width-md) !important; }
  .menu-item-width-lg { max-width: var(--menu-item-width-lg) !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .menu-item-width-sm { max-width: var(--menu-item-width-md) !important; }
  .menu-item-width-lg { max-width: var(--menu-item-width-md) !important; }
}

@media (max-width: 767px) {
  .menu-item-width-sm { max-width: var(--menu-item-width-xs) !important; }
  .menu-item-width-lg { max-width: var(--menu-item-width-md) !important; }
}

.menu-item-circle {
  margin-top: 0;
  width: 14rem !important;
  height: 14rem !important;
}
.menu-item-circle img {
  margin-top: 1em;
  max-width: 6.8rem;
}
.mixin .menu-item-circle img {
  margin-top: 0;
  max-width: 120%;
}
@media (max-width: 767px) {
  .mixin .menu-item-circle img {
    margin-left: -10%;
  }
}
.food .menu-item-circle img {
  margin-top: 0;
  max-width: 80%;
}
.menu-item-circle.white {
  background-color: var(--pure-white);
  border-color: var(--brown-200);
}

/* Custom Client Menu */

#custom-client-menu {
  padding: 0;
  margin: 0;
  li {
    margin: var(--spacing-xxl) 0;
  }

  li:first-child {
    margin-top: 0;
  }

  li:last-child section.wave {
    display: none !important;
  }
}



/* Generic Elements
*****************************************/

.bricks-content-container {
  .brxe-section {
    padding-top: 0px !important;
  }

  #brxe-gnooiq {
    margin-top: 0px;
  }
}

@media (max-width: 767px) {
  #brx-footer {
    .bricks-nav-menu > li > a {
      justify-content: center;
    }
  }
}

#brx-footer {
  .brxe-ytztff {
    flex: 0 0 auto;
  }
}

.hero-meta {
  padding-bottom: var(--spacing-lg);
  border-bottom: var(--size-0000) solid var(--grey-900);
}

.white-card {
  background-color: var(--pure-white);
  border: var(--em-size-0000) solid var(--brown-200);
  border-radius: var(--radius-xs);
  padding: var(--spacing-lg);
}

.item-cards {
  ul {
    padding-left: 0;
  }
  .repeater-item {
    margin-top: 0;
    //width: 14rem !important;
    //height: 14rem !important;
    background-color: var(--pure-white);
    border: var(--em-size-0000) solid var(--brown-200);
    border-radius: var(--radius-xs);
    padding: var(--spacing-lg);

    img {
      //margin-top: 1em;
      //max-width: 6.8rem;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
  }
}

.spacer {
  //background-color: var(--base-white);
  padding: var(--spacing-xxl) 0;
}

#brx-content {
  overflow-x: hidden;
  background-color: var(--base-white);
}

.brxe-post-content {
  h2 {
    font-family: var(--text-font);
    letter-spacing: 0;
    font-weight: var(--font-weight-9);
  }

  h2,h3,h4,h5,h6 {
    margin-bottom: var(--spacing-md);
  }

  p + h2,
  p + h3,
  p + h4,
  p + h5,
  p + h6 {
    margin-top: var(--spacing-xxl);
  }
}

#brx-footer {
  background-color: var(--base-white);
}

body, html {
  background-color: var(--base-black);
  overflow-x: hidden;
}

.brxe-section {
  //background-color: var(--base-white);
}

img {
  border-radius: var(--btn-primary-sm-radius);
}

.shadow {
  box-shadow: var(--box-outer-shadow);
}

/* Image Zoom
img.zoom {
  zoom: normal;
}
img.zoom:hover {
  zoom: 120%;
}
*/
.icon-block {

}

.icon-block h3 {
  font-weight: var(--font-weight-8);
}

@media (max-width: 991px) {
  #onpage-nav {
    overflow-x: scroll;
  }

  #onpage-nav .brxe-container {
    max-width: none !important;
    width: auto;
    align-items: start !important;
  }

  #onpage-nav .bricks-nav-menu > li {
    white-space: nowrap;
  }

  #onpage-nav .bricks-nav-menu > li:last-child {
    margin-right: 0;
  }
}

#menu-catering-menu-onpage-nav {
  position: relative;
}

#onpage-nav .bricks-nav-menu > li {
  margin-right: 0 !important;
}

#menu-catering-menu-onpage-nav .nav-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gold-300);
  border-radius: var(--btn-max-radius);
  border: 0.1em solid var(--gold-800);
  transition: left 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
  box-sizing: border-box;
}

#menu-catering-menu-onpage-nav .bricks-menu-item a {
  transition: color 0.3s ease, font-weight 0.3s ease;
  position: relative;
  z-index: 1;
  padding: 0 var(--spacing-md) var(--spacing-xxs) var(--spacing-md);
}

#menu-catering-menu-onpage-nav .bricks-menu-item.active a {
  font-weight: var(--font-weight-8);
  color: var(--brown-800);
}

.primary-nav {
  background: var(--base-black-trans);
}

.primary-nav .innerwrap {
  backdrop-filter: var(--standard-blur);
  width: 100%;
}

.primary-nav .brx-open {
  height: 100vh;
}

.primary-nav .menu-item {
  /* Aligns main nav li content to vertical center;
  used to fix alignment with contact button */
  align-content: center;
}

#menu-main-menu-1.bricks-mobile-menu li {
  margin-bottom: var(--spacing-xl);
}
.bricks-mobile-menu-toggle span { height: 4px; border-radius: var(--btn-max-radius) }
.bricks-mobile-menu-toggle .bar-top { //top: 0; }
.bricks-mobile-menu-toggle[aria-expanded="false"] .bar-center { top: 9px !important; } /* OG: 7 */
.bricks-mobile-menu-toggle[aria-expanded="false"] .bar-bottom { top: 18px !important; } /* OG: 14 */

.black-hero .post-meta {
  p {
    display: flex;
    column-gap: var(--spacing-sm);
  }
  a {
    color: var(--btn-primary-bg);
  }
  .separator {
    color: var(--grey-100);
  }
  .last {
    color: var(--grey-600);
  }
}

@property --hole {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.cta-block {
  position: relative;
  margin: var(--spacing-xxl) 0;
  padding: var(--spacing-xxl) var(--spacing-xxl);
  background-color: transparent;
  border: 2px solid var(--base-black);
  border-radius: var(--radius-xs);
  color: var(--base-white);
  transition: color 0.2s ease;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--base-black);
    border-radius: 0;
    --hole: 0%;
    mask-image: linear-gradient(black, black), linear-gradient(black, black);
    mask-size: 100% 100%, var(--hole) var(--hole);
    mask-position: center, center;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    transition: --hole 0.25s ease;
    z-index: 0;
  }

  & > * {
    position: relative;
    z-index: 1;
  }

  h1, h2, h3, h4 {
    font-family: var(--display-font);
    color: var(--gold-900);
    text-shadow: 0px 0px 0px var(--base-white);
    transform: translate(0, 0);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
  }
}

.cta-block:hover {
  color: var(--base-black);

  &::before {
    --hole: 150%;
  }
}

.cta-block:hover h1,
.cta-block:hover h2,
.cta-block:hover h3,
.cta-block:hover h4 {
  transform: translate(-2px, -2px);
  color: var(--base-black);
}





/* Sidebar - Table of Contents
****************************************/

#sidebar .accordion-title-wrapper {
  background-color: var(--pure-white);
  padding: 1.4em 2em;
  border-radius: var(--btn-primary-sm-radius);
}

#sidebar .accordion-content-wrapper {
  background-color: var(--pure-white);
  padding: 1em 2em 2em !important;
  border-radius: 0 0 var(--btn-primary-sm-radius) var(--btn-primary-sm-radius);
}

#sidebar .brf-toc-content ol {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding-inline-start: 1em !important;
}

#sidebar .brf-toc-content a {
  color: var(--txt-link-pimary);
}



/* Pricing Table
****************************************/

/* Most Popular Package Card */
.brxe-pricing-tables {
  background-color: var(--pure-white);
  border-radius: var(--size-00);
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);

  .pricing-table-header {
    padding-bottom: 0;
  }

  .asterisk {
    color: var(--grey-100);
  }
}

[most-popular="True"] {
  background-color: var(--base-black);
  color: var(--base-white);

  .pricing-table-price,
  .pricing-table-price-prefix {
    color: var(--base-white);
  }

  .pricing-table-feature {
    border-color: var(--grey-800);
  }

  .asterisk {
    color: var(--grey-800);
  }
}


/* List Element
****************************************/

.brxe-list {
  .icon {
    margin-right: var(--spacing-sm);
  }
}

/* FAQs
****************************************/

.faq-group {
  margin-bottom: var(--size-4);

  h3 {
    font-size: var(--size-4);
  }
  .brxe-block.accordion-title-wrapper {
    padding-bottom: 0;
  }
  .brxe-block.accordion-content-wrapper {
    padding-top: 0 !important;
    padding-bottom: var(--size-2) !important;
  }
  .brxe-block {
    padding: var(--size-1) 0 var(--size-2);
  }
  .brxe-block:first-child {
    padding-top: 0;
  }
  .brxe-block:last-child {
    padding-bottom: 0;
  }
  .border {
    border-bottom: var(--size-0000) solid var(--brown-100);
  }
  .brxe-block.border:last-child {
    border: none;
  }
  .brxe-accordion-nested {
    background-color: var(--pure-white);
    border-radius: var(--size-00);
    padding: var(--size-7) var(--size-8);
  }
}