/* Travnik Theme — structural layout layer.
 * Loaded after legacy style.css. This file narrows risky global rules and
 * centralizes layout behavior for reusable theme components.
 */

/* --------------------------------------------------------------------------
   Layout safety
   -------------------------------------------------------------------------- */

/* Legacy edge-to-edge styling was too broad: on a singular page it also hit
   Featured Image blocks nested inside Query Loop. Reset nested images and keep
   edge-to-edge only for a direct featured image of the main content. */
.wp-singular .wp-block-post-featured-image {
  margin-inline: 0;
}

.wp-singular .wp-site-blocks > main > .wp-block-post-featured-image {
  margin-inline: calc(var(--tn-site-pad) * -1);
}

/* Legacy desktop min-width forced horizontal scrolling on 783–979px screens. */
@media (min-width: 783px) {
  html,
  body,
  .wp-site-blocks,
  .tn-header {
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Reusable archive / query rows
   -------------------------------------------------------------------------- */

.travnik-row {
  column-gap: 1rem;
}

.travnik-row__thumb {
  margin: 0;
}

.travnik-row__body {
  min-width: 0;
}

/* Generic .wp-block-post-title rules are intended for page titles, not rows. */
.travnik-row .travnik-row__title {
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.travnik-row .travnik-row__title::after {
  content: none;
}

.travnik-row__title a,
.travnik-row__title a:visited {
  color: inherit;
  text-decoration: none;
}

/* Stretch the single semantic title link over the complete row. */
.travnik-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Touch/pointer visual states are completed in interaction.css. */
.travnik-row:hover,
.travnik-row:focus-within {
  border-color: transparent;
  outline: none;
}

.travnik-row:hover .travnik-row__title,
.travnik-row:focus-within .travnik-row__title {
  color: var(--tn-heading);
}

@media (hover: hover) and (pointer: fine) {
  .travnik-row:hover {
    border-color: var(--wp--preset--color--accent, #3f7a54);
  }

  .travnik-row:hover .travnik-row__title {
    color: var(--wp--preset--color--accent, #3f7a54);
  }
}

@media (max-width: 782px) {
  .travnik-row {
    column-gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tn-header {
  z-index: 50;
}

.tn-header__left,
.tn-header__title {
  min-width: 0;
}

/* WordPress admin bar is 46px high on narrow screens. */
@media (max-width: 782px) {
  .admin-bar .tn-header {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   Catalog / search overlays
   -------------------------------------------------------------------------- */

.tn-catalog-overlay {
  overscroll-behavior: contain;
}

/* The catalog heading is a component title, not a content section heading. */
.tn-catalog-overlay__title {
  padding-bottom: 0;
}

.tn-catalog-overlay__title::after {
  content: none;
}

/* Keep display state synchronized with ARIA even if legacy .is-open loses the
   cascade to a Gutenberg-generated rule. */
.tn-catalog-overlay[aria-hidden="true"] {
  display: none;
}

.tn-catalog-overlay[aria-hidden="false"] {
  display: block;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

/* The front page is singular, but Query Loop thumbnails are not page hero
   images. This selector intentionally beats the legacy singular-image rule. */
.wp-singular .tn-home .travnik-row__thumb {
  margin-inline: 0;
}

/* flexWrap is declared in front-page.html; CSS owns only visual alignment. */
.tn-home__sectionhead {
  align-items: flex-end;
}

.tn-home__sectionhead .tn-home__h2,
.tn-home__sectionhead .tn-home__more {
  min-width: 0;
}

@media (max-width: 430px) {
  .tn-home__sectionhead {
    gap: 0.65rem;
  }

  .tn-home__more {
    font-size: 0.95rem;
    white-space: nowrap;
  }
}