/* TicketsFest UI polish | 10.2.64
   One small layer that loads after every other theme stylesheet. It only touches:
   - the fixed header under the WordPress admin bar, and the city button on phones
   - home section headings: one alignment, one colour, one icon tile
   - the home tours grid: cards fill their column and share one height
   - the home city block: same width as the other sections, two columns on phones
   - keyboard focus rings
   It never changes CRM event card grids (.tfe-grid, .tfe-instance), booking widgets
   or checkout. Roll back with define('TFE_DISABLE_UI_POLISH', true); in wp-config.php. */

/* 1. Fixed header below the admin bar (signed-in staff only).
   WordPress keeps the bar fixed at 32px (46px on narrow screens) down to 601px and makes it
   scroll away on phones, so on phones the header follows the bar while the page scrolls. */
@media (min-width: 783px) {
  body.admin-bar .tfe-header-outer { top: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .tfe-header-outer { top: 46px; }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 600px) {
    body.admin-bar .tfe-header-outer {
      top: 46px;
      animation: tfe-adminbar-follow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 46px;
    }
    @keyframes tfe-adminbar-follow { to { top: 0; } }
  }
}

/* 2. City button in the mobile header: show the whole label instead of "Choose ci...". */
@media (max-width: 1180px) {
  .tfe-header-outer .tfe-location-mobile-trigger span { max-width: min(190px, 44vw); }
}
@media (max-width: 430px) {
  .tfe-header-outer .tfe-logo img { height: 27px; width: auto; }
  .tfe-header-outer .tfe-location-mobile-trigger { flex: 1 1 auto; max-width: none; padding-inline: 9px; }
  .tfe-header-outer .tfe-location-mobile-trigger span { max-width: none; }
}

/* 3. Home headings: left aligned, solid ink, icon in a soft tile.
   Older stylesheets centre these with !important, so the few properties that decide the
   look repeat !important here and win by loading last. */
html body .tfe-discovery-home .tfe-section-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 14px;
  max-width: none;
  margin: 0 0 clamp(18px, 2.2vw, 26px) !important;
  text-align: left;
}
.tfe-discovery-home .tfe-section-header > .tfe-flag-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--tfe-border, #e1e9f4);
  background: var(--tfe-soft, #eff5ff);
  color: var(--tfe-primary, #1d4ed8);
  font-size: 24px;
  line-height: 1;
}
.tfe-discovery-home .tfe-section-header > .tfe-flag-icon .tfe-icon {
  display: block;
  width: 1em;
  height: 1em;
}
html body .tfe-discovery-home .tfe-section-header .tfe-section-title {
  min-width: 0;
  margin: 0;
  font-family: var(--tfe-font-head, 'e-Ukraine Head', 'e-Ukraine', system-ui, sans-serif);
  font-size: clamp(25px, 2.9vw, 37px) !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: -.032em !important;
  text-align: left !important;
  color: #122342 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-wrap: balance;
}
.tfe-discovery-home .tfe-discovery-tours__heading h2 {
  font-size: clamp(25px, 2.9vw, 37px);
  font-weight: 700;
  letter-spacing: -.032em;
  color: #122342;
  text-wrap: balance;
}
@media (max-width: 768px) {
  html body .tfe-discovery-home .tfe-section-header { gap: 10px; }
  .tfe-discovery-home .tfe-section-header > .tfe-flag-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
  }
}

/* 4. Home tours: cards fill their column and share one height per row. */
.tfe-discovery-home .tfe-discovery-tours__grid { align-items: stretch; }
.tfe-discovery-home .tfe-discovery-tours__grid > .tfe-discovery-tour {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: auto;
}
.tfe-discovery-home .tfe-discovery-tour__image { flex: 0 0 auto; }
.tfe-discovery-home .tfe-discovery-tour__info { flex: 1 1 auto; }

/* 5. Home cities: same side padding as every other section, two columns on phones. */
.tfe-discovery-home .tfe-growth-section--cities {
  padding-left: var(--padding-x, 24px);
  padding-right: var(--padding-x, 24px);
}
@media (min-width: 341px) and (max-width: 420px) {
  .tfe-discovery-home .tfe-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tfe-discovery-home .tfe-city-card { min-height: 104px; padding: 13px; }
}

/* 6. Events filters on desktop: the grid holds seven fields, older rules made six columns and
   left one field alone on a second row. Four selects fill the first row, three date fields the
   second. When the country is locked (city and country pages) three selects fill the first row. */
@media (min-width: 1101px) {
  html body :is(.tfe-events-page--premium, .tfe-premium-section--event-archive) .tfe-filter-gridline {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  html body :is(.tfe-events-page--premium, .tfe-premium-section--event-archive) .tfe-filter-gridline > select {
    grid-column: span 3;
  }
  html body :is(.tfe-events-page--premium, .tfe-premium-section--event-archive) .tfe-filter-gridline:has(> select[aria-hidden="true"]) > select {
    grid-column: span 4;
  }
  html body :is(.tfe-events-page--premium, .tfe-premium-section--event-archive) .tfe-filter-gridline > input {
    grid-column: span 4;
  }
}

/* 7. Keyboard focus. Components with their own focus style keep it (higher specificity). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #74a5f5;
  outline-offset: 3px;
}