/**
 * Untappd Embed Style Overrides
 * Customize the Untappd menu to match Tipsy Monk design
 *
 * Uses CSS variables from /assets/css/brand-colors.css
 * which are dynamically loaded from the database settings
 */

/* Remove white box wrapper */
.untappd-container {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Main menu container */
.untappd-container .ut-menu {
  background: transparent !important;
  color: var(--monastery-ink) !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
}

/* HIDE TABS COMPLETELY */
.untappd-container .menu-nav,
.untappd-container .menu-tabs,
.untappd-container .nav-tabs,
.untappd-container [role="tablist"] {
  display: none !important;
}

/* HIDE Menu info header (title + update time) */
.untappd-container .menu-info {
  display: none !important;
}

/* Section headers - border-radius on all 4 corners */
/* High specificity to override Untappd inline styles */
.untappd-container .section-heading,
.untappd-container .section-header,
.untappd-container .section-header-bg-color,
.untappd-container .ut-menu .section-heading,
.untappd-container .section > .section-heading,
#menu-container .section-heading,
#menu-container .section-header,
#menu-container .section-header-bg-color {
  background: var(--brewers-navy) !important;
  background-color: var(--brewers-navy) !important;
  color: var(--foam-crown) !important;
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  border-radius: 0.5rem !important;
}

/* Force blue background on section header even with inline styles */
.untappd-container .section-heading[style],
.untappd-container .section-header[style],
.untappd-container .section-header-bg-color[style],
#menu-container .section-heading[style],
#menu-container .section-header[style],
#menu-container .section-header-bg-color[style] {
  background: var(--brewers-navy) !important;
  background-color: var(--brewers-navy) !important;
}

.untappd-container .section-name,
.untappd-container .section-heading .section-name,
#menu-container .section-name {
  font-family: 'Grandstander', cursive !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 1.125rem !important;
  color: var(--golden-hop) !important;
}

/* Item background - the beer items */
.untappd-container .section,
.untappd-container .item-bg-color,
.untappd-container .menu-items-container {
  background: transparent !important;
}

/* Remove top margin/padding from section and tab content */
.untappd-container .section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.untappd-container .tab-content,
.untappd-container .tab-pane {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override Untappd section backgrounds with transparent (but NOT menu-items or section-headers) */
.untappd-container .section[style*="background"],
.untappd-container .section-items-container[style*="background"],
.untappd-container .menu-items-container[style*="background"],
.untappd-container .tab-content[style*="background"],
.untappd-container .item-bg-color[style]:not(.menu-item) {
  background: transparent !important;
}

/* Section items container - full width, no padding */
.untappd-container .section-items-container {
  display: block !important;
  padding: 0 !important;
}

/* TWO COLUMNS on desktop - applied to menu-items-container */
.untappd-container .menu-items-container {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
  padding: 0.75rem 0 !important;
}

@media (min-width: 768px) {
  .untappd-container .menu-items-container {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Beer item cards - label-parchment background for contrast */
/* Using high specificity to override Untappd's inline styles */
.untappd-container .menu-item,
.untappd-container .menu-item[style],
.untappd-container .menu-item.item-bg-color,
.untappd-container .menu-item.item-bg-color[style],
.untappd-container .ut-menu .menu-item,
.untappd-container .menu-items-container .menu-item,
.untappd-container .menu-items-container > .menu-item,
#menu-container .menu-item,
#menu-container .menu-item[style] {
  background: var(--label-parchment) !important;
  background-color: var(--label-parchment) !important;
  border-radius: 0.5rem !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}

.untappd-container .menu-item:hover,
#menu-container .menu-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Inner item-bg-color should be transparent so parent card color shows */
.untappd-container .menu-item .item-bg-color,
.untappd-container .menu-item .item-bg-color[style],
#menu-container .menu-item .item-bg-color {
  background: transparent !important;
  background-color: transparent !important;
}

/* Beer name and details */
.untappd-container .item-name,
.untappd-container .item-name a,
.untappd-container .item-title-color {
  color: var(--brewers-navy) !important;
  font-family: 'Grandstander', cursive !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.untappd-container .item-name a:hover {
  color: var(--golden-hop) !important;
}

/* Beer style */
.untappd-container .item-style,
.untappd-container .item-category {
  color: var(--monastery-ink) !important;
  opacity: 0.7;
  font-family: 'Nunito Sans', sans-serif !important;
  text-transform: none !important;
  font-size: 0.8rem !important;
}

/* Brewery name */
.untappd-container .item-meta,
.untappd-container .brewery,
.untappd-container .brewery a {
  color: var(--monastery-ink) !important;
  opacity: 0.8;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 0.8rem !important;
}

.untappd-container .brewery a:hover {
  color: var(--golden-hop) !important;
  opacity: 1;
}

/* Container list (serving sizes) */
.untappd-container .container-list,
.untappd-container .container-list p {
  color: var(--monastery-ink) !important;
  font-size: 0.8rem !important;
}

/* Prices */
.untappd-container .price {
  color: var(--golden-hop) !important;
  font-weight: 600 !important;
}

/* Links */
.untappd-container .link-font-color,
.untappd-container a.link-font-color {
  color: var(--brewers-navy) !important;
}

.untappd-container a.link-font-color:hover {
  color: var(--golden-hop) !important;
}

/* Dividers */
.untappd-container .divider-color {
  border-color: var(--label-parchment) !important;
}

/* BEER MUG RATINGS - Replace stars with beer mugs */
.untappd-container .rating {
  display: inline-block !important;
  width: 90px !important;
  height: 18px !important;
  background-size: 18px 18px !important;
  background-repeat: repeat-x !important;
  background-position: left center !important;
  /* Default: empty mugs */
  background-image: url('/assets/brand/beer-mug-empty.svg') !important;
}

/* Hide any child content in rating spans */
.untappd-container .rating * {
  display: none !important;
}

/* Rating-specific backgrounds using layered images */
/* 3.0 stars = 3 filled, 2 empty */
.untappd-container .rating.r300 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-empty.svg'),
    url('/assets/brand/beer-mug-empty.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 3.25 stars = 3 filled, 1 half, 1 empty */
.untappd-container .rating.r325 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-half.svg'),
    url('/assets/brand/beer-mug-empty.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 3.5 stars = 3 filled, 1 half, 1 empty */
.untappd-container .rating.r350 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-half.svg'),
    url('/assets/brand/beer-mug-empty.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 3.75 stars = 4 filled, 1 empty */
.untappd-container .rating.r375 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-empty.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 4.0 stars = 4 filled, 1 empty */
.untappd-container .rating.r400 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-empty.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 4.25 stars = 4 filled, 1 half */
.untappd-container .rating.r425 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-half.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 4.5 stars = 4 filled, 1 half */
.untappd-container .rating.r450 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-half.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 4.75 stars = 5 filled */
.untappd-container .rating.r475 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* 5.0 stars = 5 filled */
.untappd-container .rating.r500 {
  background-image:
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg'),
    url('/assets/brand/beer-mug-filled.svg') !important;
  background-position: 0 0, 18px 0, 36px 0, 54px 0, 72px 0 !important;
  background-repeat: no-repeat !important;
}

/* Hide elements we don't need */
.untappd-container .location-info,
.untappd-container .menu-phone,
.untappd-container .menu-address,
.untappd-container .menu-website,
.untappd-container .menu-header-logo-hideable,
.untappd-container .menu-header {
  display: none !important;
}

/* Events tab - hide completely */
.untappd-container .events-container,
.untappd-container [data-tab="events"],
.untappd-container #events {
  display: none !important;
}

/* Make sure inner container has no extra padding */
.untappd-container .inner-container {
  padding: 0 !important;
}

/* Label images - optional: show beer labels */
.untappd-container .item-label {
  display: block !important;
}

.untappd-container .item-label img {
  border-radius: 0.25rem !important;
  width: 45px !important;
  height: auto !important;
}

/* Linear guide (dotted line between name and price) */
.untappd-container .linear-guide {
  border-bottom: 1px dotted rgba(2, 53, 85, 0.3) !important;
  flex-grow: 1 !important;
  margin: 0 0.5rem !important;
}

/* Container rows for serving sizes */
.untappd-container .container-row {
  display: flex !important;
  align-items: baseline !important;
}

.untappd-container .conatiner-item {
  margin-bottom: 0.25rem !important;
}

/* With-price section - show it */
.untappd-container .with-price {
  display: block !important;
}

.untappd-container .no-price {
  display: none !important;
}

/* Type (serving size label) */
.untappd-container .type {
  color: var(--monastery-ink) !important;
  opacity: 0.7 !important;
  font-size: 0.75rem !important;
}

/* Currency symbol */
.untappd-container .currency-hideable {
  display: inline !important;
}

/* ABV and IBU */
.untappd-container .abv,
.untappd-container .ibu {
  font-size: 0.75rem !important;
  color: var(--brewers-navy) !important;
  opacity: 0.8;
}