/* ======================================================
   BoardingCafe Menu — Scoped Styles (brown palette)
   Applies only inside .bcmenu
   ====================================================== */

/* Tokens */
.bcmenu{
  --bc-bg: #F6EBD5;
  --bc-text: #3a2a21;
  --bc-border: #E8D9BF;
  --bc-primary: #5B3A29;
  --bc-primary-600: #4B2F22;
  --bc-accent: #8B6B4A;
  --bc-badge: #5B3A29;
  --bc-on-badge: #FFFFFF;
  --bc-radius: 16px;
  --bc-shadow: 0 10px 28px rgba(0,0,0,.08);
  --section-pad: clamp(24px, 4vw, 40px);
  --card-pad: clamp(14px, 2vw, 20px);
  --max-width: 1100px;

  color: var(--bc-text);
}

/* Let theme handle outer layout, but normalize inside */
.bcmenu{
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Internal container so menu is centered, not hugging the left */
.bcmenu .section > .container,
.bcmenu > .container{
  width: min(var(--max-width), 92vw);
  margin: 0 auto;
}

/* If your shortcode content isn't wrapped, this helps too */
.bcmenu > .section{
  padding: var(--section-pad) 0;
}

.bcmenu .mt-0 { margin-top: 0 !important; }

/* Title / subtitle */
.bcmenu .page-title{
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  color: var(--bc-primary);
  text-align: center;
}
.bcmenu .page-subtitle{
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--bc-text) 85%, white);
  text-align: center;
}

/* Subnav chips */
.bcmenu .menu-subnav{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.bcmenu .menu-subnav a{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bc-border);
  background: #fff;
  color: var(--bc-primary-600);
  text-decoration: none;
}
.bcmenu .menu-subnav a:hover{
  background: color-mix(in srgb, var(--bc-bg) 70%, white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sections */
.bcmenu .section{
  padding: var(--section-pad) 0;
}
.bcmenu .section--tint--sticky{
  background: color-mix(in srgb, var(--bc-bg) 60%, white);
  border-top: 1px solid var(--bc-border);
  border-bottom: 1px solid var(--bc-border);
}

.bcmenu .section--tint{
  background: color-mix(in srgb, var(--bc-bg) 60%, white);
  border-top: 1px solid var(--bc-border);
  border-bottom: 1px solid var(--bc-border);
}
/* Section headings */
.bcmenu .menu-heading{
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 1.1vw + 1rem, 1.8rem);
  color: var(--bc-primary);
  text-align: center;
}
.bcmenu #dine-in > .container > .menu-heading,
.bcmenu #drinks  > .container > .menu-heading,
.bcmenu #kitchen > .container > .menu-heading,
.bcmenu #shakes > .container > .menu-heading{
  position: relative;
}
.bcmenu #dine-in  > .container > .menu-heading::after,
.bcmenu #drinks   > .container > .menu-heading::after,
.bcmenu #kitchen  > .container > .menu-heading::after,
.bcmenu #shakes   > .container > .menu-heading::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--bc-accent), transparent);
  border-radius:2px;
}

/* 2-column layout */
.bcmenu .menu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.5vw, 22px);
}
@media (max-width: 760px){
  .bcmenu .menu-grid{
    grid-template-columns: 1fr;
  }
}

/* Cards */
.bcmenu .menu-card{
  background:#fff;
  border:1px solid var(--bc-border);
  border-radius:var(--bc-radius);
  box-shadow:var(--bc-shadow);
  padding:var(--card-pad);
}
.bcmenu .menu-card > .menu-heading{
  font-size: clamp(1.05rem, .9vw + .9rem, 1.3rem);
  margin-bottom:10px;
}

/* Items */
.bcmenu .menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

/* NAME LEFT, PRICE RIGHT */
.bcmenu .menu-item{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding-bottom:6px;
  border-bottom:1px dashed var(--bc-border);
}
.bcmenu .menu-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

/* Name */
.bcmenu .menu-name{
  font-weight:600;
  color:var(--bc-text);
  font-size:1rem;
  line-height:1.4;
  text-align:left;
  margin:0;
}

/* Price: right aligned, tight */
.bcmenu .menu-price{
  font-variant-numeric:tabular-nums;
  color:var(--bc-primary-600);
  font-weight:700;
  text-align:right;
  white-space:nowrap;
  margin-left:8px;
}

/* stacked lists spacing */
.bcmenu .menu-list + .menu-list{
  margin-top:10px;
}

/* Notes */
.bcmenu .menu-note{
  margin-top:6px;
  color:color-mix(in srgb, var(--bc-text) 85%, white);
  font-size:.9rem;
}

/* Optional badges */
.bcmenu .badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.3px;
  padding:2px 6px;
  margin-left:6px;
  color:var(--bc-on-badge);
  background:var(--bc-badge);
  border-radius:999px;
  vertical-align:middle;
}
.bcmenu .badge--outline{
  background:transparent;
  color:var(--bc-primary);
  border:1px solid var(--bc-primary);
}

/* Focus */
.bcmenu a:focus-visible,
.bcmenu :focus-visible{
  outline:3px solid var(--bc-accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ===== Sticky Menu Subnav (inside BoardingCafe menu) ===== */

/* Make sure nothing upstream kills sticky via overflow */
.bcmenu,
.bcmenu .section,
.bcmenu .section .container{
  overflow: visible;
}

/* Stick the tinted subnav section */
.bcmenu .section--tint--sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0px; /* adjust to sit just below your main site header */
  z-index: 60;
  /* keep its tint + add slight backing so text stays readable */
  background: color-mix(in srgb, var(--bc-bg) 90%, #ffffff 10%);
  backdrop-filter: blur(6px);
}

/* Keep the chips row tidy when sticky */
.bcmenu .menu-subnav{
  margin-top: 6px;
  margin-bottom: 4px;
  justify-content: center;
}

/* ===== Decorated sticky pills ===== */

/* Wrapper row inside the sticky section */
.bcmenu .menu-subnav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;

  padding: 6px 10px;
  margin-top: 6px;
  margin-bottom: 4px;

  border-radius: 999px;
}

/* Individual pills */
.bcmenu .menu-subnav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 16px 8px;
  border-radius: 999px;

  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: var(--bc-primary-600);
  text-decoration: none;

  border: 1px solid rgba(75, 47, 34, 0.16); /* soft brown */
  background: linear-gradient(
    to bottom,
    #ffffff,
    #f6ebd5
  );

  box-shadow: 0 2px 4px rgba(0,0,0,0.04);

  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.08s ease;
}

/* Tiny accent dot on each pill */
.bcmenu .menu-subnav a::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bc-accent);
}

/* Hover state */
.bcmenu .menu-subnav a:hover{
  background: var(--bc-primary);
  color: var(--bc-on-badge);
  border-color: rgba(75,47,34,0.4);
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

/* Active press feel */
.bcmenu .menu-subnav a:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Optional: “current section” highlight if you add .is-active via JS or manually */
.bcmenu .menu-subnav a.is-active{
  background: var(--bc-primary);
  color: var(--bc-on-badge);
  border-color: rgba(75,47,34,0.6);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.bcmenu .menu-subnav a.is-active::before{
  background: var(--bc-on-badge);
}


/* ==============================
   Dine-In DoorDash style cards
   Scoped: only .bcmenu #dine-in
   ============================== */

.bcmenu #dine-in .dine-subtitle{
  margin: 4px 0 18px;
  text-align: left;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--bc-text) 75%, #ffffff);
}

/* Grid: 2 columns desktop, 1 column mobile */
.bcmenu #dine-in .dine-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .bcmenu #dine-in .dine-grid{
    grid-template-columns: 1fr;
  }
}

/* Card */
.bcmenu #dine-in .dine-card{
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 130px;
  gap: 12px;
  align-items: stretch;

  padding: 12px 12px 10px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--bc-border);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);

  transition: box-shadow 0.16s ease, transform 0.08s ease,
              border-color 0.16s ease, background 0.16s ease;
}
.bcmenu #dine-in .dine-card:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  border-color: rgba(91,58,41,0.2);
  transform: translateY(-1px);
}

/* Card text block */
.bcmenu #dine-in .dine-card-body{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Title + price inline (left+right) */
.bcmenu #dine-in .dine-title{
  margin: 0;
  font-size: large;
  font-weight: 700;
  color: var(--bc-primary-600);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bcmenu #dine-in .dine-price{
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--bc-primary-600);
  white-space: nowrap;
}

/* Short description */
.bcmenu #dine-in .dine-desc{
  margin: 0;
  font-size: 0.9rem;
  color: var(--bc-text);
}

/* Lighter meta line */
.bcmenu #dine-in .dine-meta{
  margin: 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--bc-text) 70%, #ffffff);
}

/* Thumbnail on the right */
.bcmenu #dine-in .dine-thumb-wrap{
  width: 100%;
  height: 100%;
  max-height: 110px;
  border-radius: 10px;
  overflow: hidden;
  align-self: center;
}
.bcmenu #dine-in .dine-thumb-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: stack image on top */
@media (max-width: 600px){
  .bcmenu #dine-in .dine-card{
    grid-template-columns: 1fr;
    grid-template-rows: auto 140px;
  }
  .bcmenu #dine-in .dine-thumb-wrap{
    max-height: 140px;
  }
}