/**
 * Booklex — mobile & tablet adjustments (safe areas, stacking, typography).
 */

:root {
  --booklex-safe-top: env(safe-area-inset-top, 0px);
  --booklex-safe-right: env(safe-area-inset-right, 0px);
  --booklex-safe-bottom: env(safe-area-inset-bottom, 0px);
  --booklex-safe-left: env(safe-area-inset-left, 0px);
  /* Мінімальний відступ від країв екрана + safe area на вирізах */
  --booklex-gutter: max(1.125rem, var(--booklex-safe-left));
  --booklex-gutter-right: max(1.125rem, var(--booklex-safe-right));
}

body {
  padding-left: var(--booklex-gutter);
  padding-right: var(--booklex-gutter-right);
}

.wp-site-blocks {
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

/* Fluid type for large presets */
.has-xl-font-size {
  font-size: clamp(1.85rem, 1.2rem + 2.5vw, 2.4rem);
  line-height: 1.12;
  word-wrap: break-word;
}

.has-lg-font-size {
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.2rem);
  line-height: 1.55;
}

/* App Store badge: see assets/css/appstore.css (loaded last) */

/* Header: allow nav + language row to wrap */
.booklex-site-header > .wp-block-group > .wp-block-group:last-child {
  flex-wrap: wrap;
  row-gap: 0.65rem;
  column-gap: 0.75rem;
  justify-content: flex-end;
}

/* Catalog link (Polylang-aware URL from [booklex_catalog_nav]) */
.booklex-catalog-nav {
  display: flex;
  align-items: center;
}

.booklex-catalog-nav__link {
  color: var(--wp--preset--color--text);
  text-decoration: none;
  font-weight: 600;
  font-size: inherit;
}

.booklex-catalog-nav__link:hover {
  opacity: 0.92;
}

.booklex-language-switcher {
  font-size: 0.9rem;
  position: relative;
  display: inline-block;
  z-index: 30;
}

.booklex-language-switcher__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--wp--preset--color--text);
  font-weight: 600;
  list-style: none;
}

.booklex-language-switcher__summary::-webkit-details-marker {
  display: none;
}

.booklex-language-switcher__summary::after {
  content: "▾";
  font-size: 0.72rem;
  opacity: 0.8;
}

.booklex-language-switcher__list {
  position: absolute !important;
  top: calc(100% + 0.45rem);
  right: 0;
  min-width: 4.25rem;
  display: none !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0.45rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  z-index: 20;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
}

.booklex-language-switcher__item a,
.booklex-language-switcher__item span {
  display: block;
  padding: 0.18rem 0.35rem;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  font-weight: 600;
  border-radius: 0.4rem;
}

.booklex-language-switcher__item a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.booklex-language-switcher__item.is-current a,
.booklex-language-switcher__item.is-current span {
  color: var(--wp--preset--color--text);
}

.booklex-language-switcher[open] .booklex-language-switcher__list {
  display: flex !important;
}

.booklex-site-header,
.booklex-site-header .wp-block-group {
  overflow: visible;
}

@media (max-width: 640px) {
  header .booklex-site-header > .wp-block-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  header .booklex-site-header > .wp-block-group > .wp-block-group:last-child {
    justify-content: space-between;
    width: 100%;
  }
}

/* Columns: override inline flex-basis on small screens */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }

  .wp-block-column[style*="flex-basis"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* Hero */
@media (max-width: 781px) {
  .booklex-hero {
    padding-top: clamp(2.5rem, 6vw + 1.5rem, 4rem) !important;
    padding-bottom: clamp(2rem, 4vw + 1rem, 3rem) !important;
  }
}

@media (max-width: 520px) {
  .booklex-hero .wp-block-column:first-child > .wp-block-group:first-of-type {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Section rhythm */
@media (max-width: 781px) {
  .booklex-section-slider,
  .booklex-section-flow,
  .booklex-section-benefits,
  .booklex-section-cta {
    padding-top: clamp(1.25rem, 3vw, 2rem) !important;
    padding-bottom: clamp(2rem, 5vw, 3rem) !important;
  }

  .booklex-section-cta {
    padding-bottom: clamp(2.5rem, 6vw, 3.5rem) !important;
  }
}

/* Bottom CTA band */
@media (max-width: 640px) {
  .booklex-section-cta > .wp-block-group.alignwide.has-background {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1.35rem;
    padding-top: clamp(1.5rem, 4vw, 2.2rem) !important;
    padding-right: clamp(1.1rem, 4vw, 2.2rem) !important;
    padding-bottom: clamp(1.5rem, 4vw, 2.2rem) !important;
    padding-left: clamp(1.1rem, 4vw, 2.2rem) !important;
  }
}

/* Footer */
@media (max-width: 560px) {
  footer .booklex-site-footer .wp-block-group.is-layout-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  footer .booklex-site-footer .wp-block-navigation {
    width: 100%;
  }

  footer .booklex-site-footer .wp-block-navigation .wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Catalog listing / single content */
@media (max-width: 781px) {
  main .wp-block-post-content,
  .wp-block-query {
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .wp-block-query-pagination.is-layout-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
  }
}

/* Screenshot slider: touch targets & viewport height */
@media (max-width: 640px) {
  .booklex-screenshot-slider__image {
    max-height: min(68vh, 520px);
  }

  .booklex-slider-arrow {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .booklex-screenshot-slider__controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .booklex-screenshot-slider__slide {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

@media (max-width: 980px) {
  .booklex-screenshot-slider__viewport {
    border-radius: 18px;
  }
}