/*
 * pivo-dum.cz — display / responsive / alignment fixes on top of the Webflow export.
 * Injected by scripts/mirror.py after all other stylesheets. Keep rules scoped and commented.
 */

/* ---------- Fonts ---------- */
/* Lato 2.0 Light (full Czech glyph set). Google's Lato 1.x lacks č ě ř → mixed fonts in menu items. */
@font-face {
  font-family: "Lato";
  src: url("/assets/site/fonts/lato-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/site/fonts/lato-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/site/fonts/lato-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Global ---------- */
/* Long Czech words in headings must wrap instead of pushing the page sideways (320–360px phones). */
h1, h2, h3, h4,
.hero-heading-1, .intro_box-heading, .subpage-h2 { overflow-wrap: break-word; }
@media (max-width: 359px) {
  /* Only on the narrowest phones: hyphenate the big display headings (needs <html lang>). */
  .hero-heading-1, .intro_box-heading, .subpage-h2 { -webkit-hyphens: auto; hyphens: auto; }
}

/* Visible keyboard focus (Webflow resets outlines). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .w-nav-button:focus-visible {
  outline: 2px solid #c0a58a;
  outline-offset: 3px;
}

/* Duplicated blocks in the Webflow markup: homepage repeats header + footer after the footer,
   /en/lunch-offer has two identical stacked headers. */
.map-section ~ .map-section,
.map-section ~ .header-section,
.map-section ~ .header-section-en,
.header-section + .header-section,
.header-section-en + .header-section-en {
  display: none !important;
}

/* Tablet (768–991): .hero-container margin-top:140px collapsed through the hero → white strip above header. */
@media (min-width: 768px) and (max-width: 991px) { .hero-wrap { display: flow-root; } }

/* Language switch after the phone number (desktop). Webflow's own top-corner link vanished in the sticky
   header; on desktop it is replaced by this one, below 992px (non-sticky header) the original stays. */
.pd-lang-divider, .pd-lang-link { display: none; }
@media (min-width: 992px) {
  .header-language-container { display: none; }
  /* Logo was squeezed by the nav at 992–1199px (63px on live, worse with the extra link): never shrink it. */
  .header-logo-container { flex: 0 0 auto; }
  .header-phone-container { display: flex; align-items: center; }
  .pd-lang-divider { display: inline; color: rgba(255, 255, 255, 0.35); margin: 0 14px; font-size: 18px; line-height: 32px; }
  .pd-lang-link {
    display: inline-block;
    color: #fff;
    font-family: Catamaran, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 32px;
    padding: 0 2px;
  }
  .pd-lang-link:hover { color: #c0a58a; }
}
/* Small desktops: logo + 7 nav items + phone + language did not fit (language link ended off-screen). */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-container { padding-left: 16px; padding-right: 16px; }
  .header-logo-container { margin-right: 12px; }
  .header-menu-link { letter-spacing: 1px; margin-right: 12px; }
  .header-menu-link.reservation { padding-left: 12px; padding-right: 12px; }
  .header-phone { font-size: 16px; letter-spacing: 0; }
  .pd-lang-divider { margin: 0 8px; }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .header-logo-image { max-width: 140px; }   /* keep EN logo's height="35" attribute intact */
  .header-menu-link { margin-right: 10px; }
}

/* WiFi logo was squashed (64×30 box for a 64×37 image). */
.contacts-block-logos-image { object-fit: contain; }

/* Bigger tap targets without changing the layout. */
.intro_box-link-container {
  padding-top: 12px; padding-bottom: 12px;
  margin-top: -12px; margin-bottom: -12px;
}
.map-content-inside-social-icon-container { box-sizing: content-box; padding: 8px; margin: -8px 7px -8px -8px; } /* 40px hit area, 15px visual gap */

/* ---------- Footer (map was removed from the site) ---------- */
/* The dark contact box was absolutely positioned over a map; the map is gone, so the section
   collapsed (desktop: half-width box + blank right half; phones: 300px white gap). */
.map-html-container,      /* empty #map embeds (CZ, EN footers) */
.contacts-map-section {   /* 600px empty map block on /kontakt, /reviews, /en/contacts */
  display: none !important;
}
.map-section, .map-wrap { height: auto; }
.map-container { position: relative; top: 0; height: auto; }
.map-left-container { width: 100%; flex: 1 1 auto; justify-content: center; }
.map-content-container {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  padding: 80px max(30px, calc((100% - 1320px) / 2)) 0;
}
.map-copyright {
  color: #9a9a9a;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0 32px;
}
.map-copyright a { color: #c0a58a; white-space: nowrap; }   /* restaurant names never split */
.map-content-inside-text { color: #a3a3a3; }   /* was #747474 on #333 (2.7:1) */

/* One icon column of fixed width so every text block starts at the same x. */
.map-content-inside-icon {
  flex: 0 0 28px;
  width: 28px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
}
.map-content-inside-icon img { width: auto; height: auto; max-width: 28px; max-height: 28px; object-fit: contain; }
.map-content-inside-content { flex: 1 1 auto; min-width: 0; }
.map-content-inside-content .social-wrapp { justify-content: flex-start; }
/* Contact page heading variant (.black) had 10px left padding → misaligned with its text. */
.map-content-inside-content > .reviews-map-content-inside-heading { padding-left: 0; }

@media (min-width: 768px) {
  .map-content-container > .map-content-inside-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
  }
  .map-content-container > .map-content-inside-container > .map-content-inside-row { margin-bottom: 48px; }
}
@media (min-width: 1100px) {
    .map-content-container > .map-content-inside-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* equal gutters; address/hours wrap naturally */
    column-gap: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* Tablet 2-column footer: a little more text width so "11.00-23.30" stays on one line. */
  .map-content-container > .map-content-inside-container { column-gap: 32px; }
  .map-content-inside-icon { margin-right: 14px; }
}
/* Time ranges ("11.00-23.30") are wrapped in .pd-nowrap by mirror.py. */
.pd-nowrap { white-space: nowrap; }
/* Never break an e-mail or phone number at its hyphen/spaces. */
.map-content-inside-link { white-space: nowrap; }
@media (max-width: 767px) {
  .map-content-container { padding: 64px 30px 0; }
  .map-content-inside-container { align-items: center; }
  .map-content-inside-row { width: 100%; max-width: 360px; margin-bottom: 40px; }
  .contacts-intro-container { margin-bottom: 40px; }
}

/* ---------- Homepage intro blocks ---------- */
@media (max-width: 767px) {
  /* Desktop 108px offset pushed the text column to the right on phones. */
  .intro_menu-content-container { padding-left: 0; padding-right: 0; }
  .intro_menu-gray-container, .intro_menu-white-container { width: 100%; }
  /* Photos tiled side by side (background-size: contain + repeat). */
  .intro_menu-image-container,
  .intro_restaurant-image-container {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}
@media (max-width: 767px) {
  /* Intro blocks without a .wrap-narrow parent (e.g. /en/home tasting) had no side gutter. */
  .intro_menu-container { padding-left: 30px; padding-right: 30px; }
  .wrap-narrow .intro_menu-container { padding-left: 0; padding-right: 0; }
  /* Menu sub-nav: active item lacked the 15px gap the other items have. */
  .menu-link-container .menu-link-text { margin-bottom: 15px; }
}
@media (max-width: 991px) {
  /* "Zobrazit menu" / "Book your table" links sat 8px above the next photo / footer. */
  .intro_menu-white-container { padding-bottom: 24px; }
}
@media (min-width: 992px) {
  /* Voucher photo ran 20px into the (now in-flow) footer. */
  .wrap-narrow.intro_restaurant-wrap { padding-bottom: 40px; }
}
/* Bouquet promo is one graphic with text baked in: never crop it. */
@media (min-width: 768px) {
  /* Box takes the graphic's own ratio (940×788) so contain = full width, no side bars. */
  .intro_menu-image-container.bouquet { aspect-ratio: 940 / 788; height: auto !important; min-height: 0 !important; }
}
.intro_menu-image-container.bouquet {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #fff;
}

/* ---------- Brewery / tasting photo blocks ---------- */
/* On phones the photos alternated between 315×300, 338×600 (overflowing) and 142×600. */
@media (max-width: 767px) {
  .pivovar-image-container {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    aspect-ratio: 4 / 3;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* ---------- Reservation page: bouquet promo ---------- */
/* Webflow quick-stack auto-sized the image column to ~46px on phones (and cramped it on tablets). */
@media (max-width: 991px) {
  .wf-layout-layout:has(.image-4) { grid-template-columns: 1fr !important; }
  .wf-layout-layout:has(.image-4) .w-layout-cell { justify-content: center; }
  .wf-layout-layout:has(.image-4) .image-4 { width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
}

/* ---------- Menus (a la carte, drinks, wine, spirits, beer) ---------- */
/* lunchMenu.css gives names 30px right padding and fixed 80px/95px quantity/price columns with no
   phone override, so dish names wrapped one or two words per line and the quantity column drifted.
   Selectors are html-prefixed because lunchMenu.css loads later (in <body>) and would win ties. */
@media (max-width: 767px) {
  html .jidelni_listek-item-container,
  html .napojovy_listek-item-container,
  html .alcoholic-item-container,
  html .wine-item-container { gap: 6px 12px; }

  html .jidelni_listek-item-name,
  html .napojovy_listek-item-name,
  html .alcoholic-item-name,
  html .wine-item-name,
  html .beer-label-container {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    padding-right: 0;
  }
  html .jidelni_listek-item-name-text,
  html .napojovy_listek-item-name-text,
  html .alcoholic-item-name-text,
  html .wine-item-name-text { width: auto; }

  html .jidelni_listek-item-quantity,
  html .napojovy_listek-item-quantity,
  html .alcoholic-item-quantity,
  html .wine-item-quantity {
    flex: 0 0 auto;
    min-width: 3.2em;
    justify-content: flex-end;
    text-align: right;
    white-space: nowrap;
  }
  html .jidelni_listek-item-price,
  html .napojovy_listek-item-price,
  html .alcoholic-item-price,
  html .wine-item-price {
    flex: 0 0 auto;
    width: auto;
    min-width: 3.6em;
    font-size: 20px;
    white-space: nowrap;
  }
  html .lunchMenuDateContainer { font-size: clamp(24px, 7vw, 32px); line-height: 1.2; }
}
html .lunchMenuItemPrice { white-space: nowrap; }
@media (min-width: 480px) and (max-width: 991px) {
  /* Lunch days were a 45% (~330px) column on tablets; prices wrapped. */
  html .lunchMenuDayContainer { width: 100%; max-width: 640px; margin-right: 0; }
}
@media (max-width: 479px) {
  /* lunchMenu.css min-width 300px + margin overflowed 320px phones. */
  html .lunchMenuDayContainer { min-width: 0; width: 100%; margin-right: 0; }
}

/* Brewery names were 36% alpha (≈2:1 contrast). */
.beer-label-brewery { color: #333333b3; }

/* Allergen tooltips: the absolutely positioned label shrank to ~50px wide (one word per line). */
html .allergen-number::after {
  font-style: normal;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: center;
}
/* Touch / phones: show the label as a bottom bar so it can never run off-screen. */
@media (hover: none), (max-width: 767px) {
  html .allergen-number::before { display: none; }
  html .allergen-number::after {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    font-size: 15px;
    padding: 12px 16px;
    z-index: 1000;
  }
}