/* Hide old Drupal pane labels on both front and bar pages. */
#wrapper .pane-title {
  display: none;
}

/* Hero cover for bar pages. */
body.node-type-bar #wrapper .panelizer-view-mode {
  margin-top: 75px;
}

body.node-type-bar #wrapper .bar-hero {
  position: relative;
  margin: 0;
}

body.node-type-bar #wrapper .bar-hero .field-name-field-image {
  margin: 0;
}

body.node-type-bar #wrapper .bar-hero .parallax-image {
  height: auto;
  min-height: 0;
  background: #1d1d1d;
}

body.node-type-bar #wrapper .bar-hero .parallax-image img {
  position: relative;
  left: auto;
  top: auto;
  display: block;
  width: 100%;
  height: auto;
}

body.node-type-bar #wrapper .bar-hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.1) 0%, rgba(14, 14, 14, 0.82) 78%);
}

body.node-type-bar #wrapper .bar-hero-overlay .container {
  padding-top: 22px;
  padding-bottom: 24px;
}

body.node-type-bar #wrapper .bar-hero-overlay h1 {
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

body.node-type-bar #wrapper .bar-hero-overlay .field-name-field-datum,
body.node-type-bar #wrapper .bar-hero-overlay .field-name-field-adres {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Reduce whitespace between hero and first content section. */
body.node-type-bar #wrapper .section-text.section-text--first .container {
  padding-top: 14px;
}

body.node-type-bar #wrapper .section-text.section-text--first p:first-child {
  margin-top: 0;
}

@media only screen and (max-width: 767px) {
  body.node-type-bar #wrapper .bar-hero .parallax-image {
    height: auto;
  }

  body.node-type-bar #wrapper .bar-hero-overlay .field-name-field-datum,
  body.node-type-bar #wrapper .bar-hero-overlay .field-name-field-adres {
    font-size: 21px;
  }
}

/* Static rating sprites with partial fill based on score decimals. */
body.node-type-bar #wrapper .rate-widget-fivestar .item-list .rate-button {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

body.node-type-bar #wrapper .rate-widget-fivestar .item-list .rate-button-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Subtle visual refresh: warm tones and cleaner surfaces for old bar photography. */
:root {
  --bar-bg: #241a15;
  --bar-bg-soft: #31241d;
  --bar-wood: #8f4e1f;
  --bar-wood-soft: #aa6430;
  --bar-paper: #f4ede2;
  --bar-paper-soft: #efe5d7;
  --bar-ink: #2d241e;
  --bar-muted: #756658;
  --bar-border: rgba(61, 39, 25, 0.25);
  --bar-shadow: 0 10px 28px rgba(7, 4, 3, 0.22);
}

body {
  background:
    radial-gradient(circle at 15% 0%, rgba(166, 104, 52, 0.16), transparent 45%),
    radial-gradient(circle at 100% 18%, rgba(119, 69, 28, 0.17), transparent 48%),
    linear-gradient(180deg, var(--bar-bg-soft) 0%, var(--bar-bg) 360px, #1e1612 100%);
  color: var(--bar-paper);
}

#wrapper {
  color: var(--bar-paper);
  letter-spacing: 0.01em;
}

#wrapper p {
  line-height: 1.5;
}

#wrapper a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

#wrapper a:hover,
#wrapper a:focus {
  color: #ffd9b4;
}

#wrapper header {
  background: linear-gradient(180deg, #9f5724 0%, #7f3f1b 100%);
  border-bottom: 1px solid rgba(255, 215, 176, 0.22);
  box-shadow: 0 4px 18px rgba(8, 5, 4, 0.28);
}

#wrapper #branding a {
  font-size: clamp(34px, 4.2vw, 48px);
  letter-spacing: 0.02em;
}

#wrapper #main_nav .item-list li a,
#wrapper #mobile_nav_toggle a {
  border-radius: 6px;
}

#wrapper .panelizer-view-mode {
  animation: site-fade-in 0.45s ease-out both;
}

@keyframes site-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#wrapper .section-text {
  background-color: var(--bar-paper) !important;
  color: var(--bar-ink) !important;
  border-top: 1px solid rgba(78, 50, 31, 0.1);
  border-bottom: 1px solid rgba(78, 50, 31, 0.1);
}

#wrapper .section-text h2,
#wrapper .section-text h3 {
  color: #241911;
  letter-spacing: 0.01em;
}

#wrapper .section-text .container {
  background: linear-gradient(180deg, var(--bar-paper) 0%, var(--bar-paper-soft) 100%);
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(37, 25, 18, 0.08);
}

body.front #wrapper .view-bars .views-row {
  margin-bottom: 12px;
}

body.front #wrapper .view-bars .views-row .clearfix a {
  background: linear-gradient(180deg, #f8f1e7 0%, #eee2d1 100%);
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(32, 18, 11, 0.12);
  padding: 10px 12px;
}

body.front #wrapper .view-bars .views-row .clearfix a:hover,
body.front #wrapper .view-bars .views-row .clearfix a:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(32, 18, 11, 0.15);
}

body.front #wrapper .view-bars .views-row h3 {
  color: #2f2018;
  font-size: clamp(24px, 3.2vw, 31px);
  line-height: 1.1;
}

body.front #wrapper .view-bars .ratings-teaser {
  color: var(--bar-muted);
  font-size: 13px;
}

#wrapper .views-exposed-widgets {
  background: #eadcca;
  border: 1px solid var(--bar-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(34, 20, 12, 0.08);
  padding: 14px 14px 4px;
}

body.front #wrapper .view-filters {
  margin-bottom: 14px;
}

body.front #wrapper .pane-bars-panel-pane-1 {
  margin-top: 14px;
}

body.front #wrapper #scroll_anchor_2 {
  color: #f8e8d5 !important;
  background: linear-gradient(180deg, #8e4f22 0%, #6f3617 100%) !important;
  border-top: 1px solid rgba(255, 216, 181, 0.22);
  border-bottom: 1px solid rgba(255, 216, 181, 0.22);
  margin-bottom: 12px;
  padding-bottom: 14px;
}

body.front #wrapper #scroll_anchor_2 .container {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.front #wrapper #scroll_anchor_2 h2 {
  color: #fff1df;
  margin-bottom: 0;
}

body.front #wrapper #scroll_anchor_1 {
  padding-top: 30px;
  padding-bottom: 30px;
}

body.front #wrapper #scroll_anchor_1 .container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 14px;
  padding-bottom: 14px;
}

body.front #wrapper #scroll_anchor_1 h2 {
  margin-bottom: 16px;
}

body.front #wrapper .pane-bars-panel-pane-1 .pane-content {
  margin-top: 10px;
}

body.front #wrapper .views-exposed-widget label {
  color: #2b1e16;
  font-weight: 700;
}

#wrapper select,
#wrapper .form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid rgba(96, 67, 43, 0.4);
  border-radius: 7px;
  color: #2d2018;
  background-color: #fffdf9;
  background-image:
    linear-gradient(45deg, transparent 50%, #7b4723 50%),
    linear-gradient(135deg, #7b4723 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.2;
}

#wrapper input.form-submit,
#wrapper .btn {
  background: linear-gradient(180deg, var(--bar-wood-soft) 0%, var(--bar-wood) 100%);
  border: 1px solid rgba(64, 34, 14, 0.55);
  color: #fff;
  border-radius: 8px;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(27, 15, 8, 0.2);
}

#wrapper input.form-submit:hover,
#wrapper .btn:hover {
  opacity: 0.95;
}

#wrapper #leaflet-map-608145122,
#wrapper [id^="leaflet-map-"] {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 212, 175, 0.2);
  box-shadow: var(--bar-shadow);
}

body.node-type-bar #wrapper .bar-hero-overlay {
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.12) 0%, rgba(20, 12, 8, 0.88) 82%);
}

body.node-type-bar #wrapper .bar-hero-overlay h1 {
  text-wrap: balance;
}

body.node-type-bar #wrapper .pane-rate-widget .pane-content {
  background: linear-gradient(180deg, #3a2a21 0%, #2a1f19 100%);
  border-top: 1px solid rgba(255, 221, 191, 0.18);
  border-bottom: 1px solid rgba(255, 221, 191, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 235, 214, 0.06);
}

body.node-type-bar #wrapper .rate-widget h3,
body.node-type-bar #wrapper .rate-info {
  color: #f3dbc1;
}

body.node-type-bar #wrapper .pane-rate-widget .rate-widget-fivestar .item-list,
body.node-type-bar #wrapper .pane-rate-widget .rate-widget-fivestar .item-list ul,
body.node-type-bar #wrapper .pane-rate-widget .rate-widget-fivestar .item-list ul li {
  background: transparent !important;
}

body.node-type-bar #wrapper .pane-rate-widget .rating-icons-lane {
  float: right;
  margin-top: 4px;
  padding: 4px 9px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

body.node-type-bar #wrapper .pane-rate-widget .rating-icons-lane .item-list {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}

body.node-type-bar #wrapper .pane-rate-widget .rate-widget-fivestar .item-list ul {
  margin: 0;
  padding: 0;
}

#wrapper footer {
  background: linear-gradient(180deg, #7a3c18 0%, #5f2e12 100%);
  border-top: 1px solid rgba(255, 214, 177, 0.2);
}

#wrapper footer .created-by {
  height: auto;
}

#wrapper footer .created-by p {
  margin: 0;
  font-size: 13px;
  color: #f2d8bc;
}

#wrapper footer .created-by a {
  color: #fff2df;
  font-size: 13px;
  font-weight: 700;
}

#wrapper footer .created-by a img {
  display: none;
}

@media only screen and (max-width: 767px) {
  #wrapper #branding a {
    font-size: clamp(26px, 9vw, 34px);
  }

  #wrapper .section-text .container {
    border-radius: 8px;
  }

  body.front #wrapper .view-bars .views-row .clearfix a {
    padding: 8px 10px;
  }

  #wrapper .views-exposed-widgets {
    padding: 10px 10px 2px;
  }

  body.front #wrapper .pane-bars-panel-pane-1 {
    margin-top: 10px;
  }

  body.node-type-bar #wrapper .pane-rate-widget .rating-icons-lane {
    float: none;
    display: inline-block;
    margin-top: 6px;
  }
}