/* =============================================================================
   Components — Buttons, cards, forms, breadcrumbs, pagination, comments
   ============================================================================= */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--flavor-sp-sm);
  padding: var(--flavor-btn-pad-y, 12px) var(--flavor-btn-pad-x, 28px);
  font-weight: 600;
  font-size: var(--flavor-btn-fs, 15px);
  letter-spacing: var(--flavor-btn-ls, normal);
  line-height: 1.5;
  border: none;
  border-radius: var(--flavor-btn-radius, 8px);
  cursor: pointer;
  transition: background-color var(--flavor-transition), color var(--flavor-transition);
  text-decoration: none;
}

.btn--primary,
button[type="submit"],
input[type="submit"] {
  background-color: var(--flavor-primary);
  color: var(--flavor-text-inv);
}

.btn--primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--flavor-primary-h);
  color: var(--flavor-text-inv);
}

.btn--secondary {
  background-color: var(--flavor-bg-alt);
  color: var(--flavor-text);
  border: 1px solid var(--flavor-border);
}

.btn--secondary:hover {
  background-color: var(--flavor-border);
}

.btn--ghost {
  background: transparent;
  color: var(--flavor-primary);
}

.btn--ghost:hover {
  background-color: var(--flavor-bg-alt);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.post-card {
  background: var(--flavor-surface);
  border-radius: var(--flavor-radius-lg);
  overflow: hidden;
  box-shadow: var(--flavor-shadow);
  transition: box-shadow var(--flavor-transition), transform var(--flavor-transition);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  box-shadow: var(--flavor-shadow-lg);
  transform: translateY(-2px);
}

.post-card__image {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: var(--flavor-sp-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flavor-primary);
  margin-block-end: var(--flavor-sp-sm);
}

.post-card__title {
  font-size: 1.125rem;
  margin-block-end: var(--flavor-sp-sm);
}

.post-card__title a {
  color: var(--flavor-secondary);
}

.post-card__title a:hover {
  color: var(--flavor-primary);
}

.post-card__excerpt {
  font-size: 0.875rem;
  color: var(--flavor-text-muted);
  line-height: 1.6;
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--flavor-sp-md);
  margin-block-start: var(--flavor-sp-md);
  padding-block-start: var(--flavor-sp-md);
  border-top: 1px solid var(--flavor-border);
  font-size: 0.8125rem;
  color: var(--flavor-text-muted);
}

/* ── Article Single Meta ──────────────────────────────────────────────────── */
.article-single__header {
  margin-block-end: var(--flavor-sp-xl);
  max-width: var(--flavor-content-w);
  margin-inline: auto;
}

.article-single__title {
  margin-block: var(--flavor-sp-md) var(--flavor-sp-sm);
}

.article-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flavor-sp-md);
  font-size: 0.875rem;
  color: var(--flavor-text-muted);
}

.meta-item::before {
  content: "";
}

.meta-item + .meta-item::before {
  content: "\00b7";
  margin-inline-end: var(--flavor-sp-md);
}

.article-single__hero {
  margin-block: var(--flavor-sp-lg);
  border-radius: var(--flavor-radius-lg);
  overflow: hidden;
}

.article-single__hero-img {
  width: 100%;
  height: auto;
}

.article-single__footer {
  margin-block-start: var(--flavor-sp-2xl);
  padding-block-start: var(--flavor-sp-lg);
  border-top: 1px solid var(--flavor-border);
}

.entry-footer__cats,
.entry-footer__tags {
  margin-block-end: var(--flavor-sp-sm);
  font-size: 0.875rem;
}

.entry-footer__label {
  font-weight: 600;
  margin-inline-end: var(--flavor-sp-sm);
}

/* ── Post Navigation ──────────────────────────────────────────────────────── */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--flavor-sp-lg);
  margin-block-start: var(--flavor-sp-2xl);
  padding-block-start: var(--flavor-sp-xl);
  border-top: 1px solid var(--flavor-border);
}

.post-nav__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--flavor-text-muted);
  margin-block-end: var(--flavor-sp-xs);
}

.post-nav__title {
  font-weight: 600;
  color: var(--flavor-text);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.breadcrumbs {
  font-size: 0.8125rem;
  color: var(--flavor-text-muted);
}

.breadcrumbs a {
  color: var(--flavor-text-muted);
}

.breadcrumbs a:hover {
  color: var(--flavor-primary);
}

.breadcrumbs__sep {
  margin-inline: var(--flavor-sp-sm);
  opacity: 0.5;
}

.breadcrumbs__current {
  color: var(--flavor-text);
}

/* ── Pagination — standalone square boxes, RTL-native ────────────────────────
   Markup is compiled by natureil_pagination() as:
     nav.pagination > ul.pagination__list > li.pagination__item > a.page-numbers

   The flex row inherits the document direction, so in RTL the first page box
   sits on the right automatically — no manual row-reverse, no LTR bleed.
   Every dimension and colour is a Customizer-driven custom property.
   ─────────────────────────────────────────────────────────────────────────── */
.pagination {
  margin-block-start: var(--flavor-sp-2xl);
}

/* The list wrapper we emit ourselves, PLUS the flat .nav-links container that
   WordPress core (the_posts_pagination) and most plugins output. Styling both
   means the square-box treatment survives no matter which code path actually
   rendered the pagination on a given template. */
.pagination__list,
.pagination .nav-links,
.navigation.pagination .nav-links,
.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--flavor-pag-gap, 8px);
  direction: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  display: flex;
  margin: 0;
  padding: 0;
}

/* Catch every renderer: our nav, core's nav.navigation, the query-loop block,
   and any bare .page-numbers a plugin drops into the page. */
.pagination .page-numbers,
.navigation.pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
a.page-numbers,
span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--flavor-pag-size, 44px);
  height: var(--flavor-pag-size, 44px);
  padding-inline: var(--flavor-pag-pad, 10px);
  border: var(--flavor-pag-border, 2px) solid var(--flavor-pag-bdr-color, #cbd5e1);
  border-radius: var(--flavor-pag-radius, 0px);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--flavor-pag-text, #1e293b);
  background: var(--flavor-pag-bg, #f1f5f9);
  text-decoration: none;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible,
a.page-numbers:hover,
a.page-numbers:focus-visible,
.wp-block-query-pagination a:hover {
  background: var(--flavor-pag-active, #2563eb);
  color: var(--flavor-pag-active-text, #fff);
  border-color: var(--flavor-pag-active, #2563eb);
  transform: translateY(-1px);
}

.pagination .page-numbers.current,
span.page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
  background: var(--flavor-pag-active, #2563eb);
  color: var(--flavor-pag-active-text, #fff);
  border-color: var(--flavor-pag-active, #2563eb);
  cursor: default;
  pointer-events: none;
}

.pagination .page-numbers.dots,
span.page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--flavor-text-muted, #64748b);
  pointer-events: none;
}

/* Arrow glyphs are direction-aware: natureil_pagination() emits the correct
   chevron per writing mode, so no CSS transform is needed here. */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-size: 1.375rem;
  font-weight: 400;
  padding-block-end: 2px;
}

@media (max-width: 480px) {
  .pagination .page-numbers {
    min-width: calc(var(--flavor-pag-size, 44px) * 0.82);
    height: calc(var(--flavor-pag-size, 44px) * 0.82);
    font-size: 0.875rem;
  }
}

/* ── Social Profile Links ─────────────────────────────────────────────────── */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--flavor-sp-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links__item {
  margin: 0;
}

.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--flavor-footer-link, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.social-links__link:hover,
.social-links__link:focus-visible {
  background: var(--flavor-primary, #2563eb);
  color: #fff;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Travel Map containment contract

   The theme owns exactly one thing about the map: making sure its block can
   never escape the content column. Everything inside (.leaflet-*, panels,
   markers, popups) belongs to the plugin and is never touched here.

   `isolation: isolate` creates a stacking context so the plugin's own
   z-index scale resolves locally instead of fighting the header.
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-block-travel-custom-maps-travel-map {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  overflow: visible;
}

/* Never let a full-aligned map break out of a sidebar-bearing column */
.layout-left-sidebar .wp-block-travel-custom-maps-travel-map.alignfull,
.layout-right-sidebar .wp-block-travel-custom-maps-travel-map.alignfull,
.layout-double-sidebar .wp-block-travel-custom-maps-travel-map.alignfull {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.wp-block-travel-custom-maps-travel-map .tcm-map-wrap {
  max-width: 100%;
}

/* The offline "save map" bar sits below the canvas and must stay clickable */
.wp-block-travel-custom-maps-travel-map .tcm-offline-footer,
.wp-block-travel-custom-maps-travel-map + .tcm-offline-footer {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--flavor-border);
  border-radius: 6px;
  background: var(--flavor-surface);
  font-size: 0.9375rem;
  transition: border-color var(--flavor-transition);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--flavor-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-block-end: var(--flavor-sp-xs);
}

/* ── Search Form ──────────────────────────────────────────────────────────── */
.search-form {
  display: flex;
  gap: var(--flavor-sp-sm);
}

.search-form .search-field {
  flex: 1;
}

.search-form .search-submit {
  flex-shrink: 0;
}

/* ── Comments ─────────────────────────────────────────────────────────────── */
.comments-area {
  margin-block-start: var(--flavor-sp-2xl);
  max-width: var(--flavor-content-w);
  margin-inline: auto;
}

.comments-area__title {
  margin-block-end: var(--flavor-sp-lg);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list .comment {
  padding: var(--flavor-sp-lg) 0;
  border-bottom: 1px solid var(--flavor-border);
}

.comment-list .children {
  padding-inline-start: var(--flavor-sp-xl);
}

.comments-area__closed {
  font-style: italic;
  color: var(--flavor-text-muted);
}

/* ── In-post pagination — wp_link_pages() ─────────────────────────────────────
   A post split with <!--nextpage--> renders through wp_link_pages(), which
   emits `.post-page-numbers` — a DIFFERENT class from the `.page-numbers` the
   archive nav uses. Styling only the archive class left this row completely
   unthemed, which is why long posts kept showing bare "Pages: 1 2 3" links.

   Both element families now share one square-box treatment, driven by the same
   Customizer properties, and inherit document direction for RTL.
   ─────────────────────────────────────────────────────────────────────────── */
.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--flavor-pag-gap, 8px);
  direction: inherit;
  margin-block-start: var(--flavor-sp-xl);
}

.page-links__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--flavor-text-muted, #64748b);
  margin-inline-end: var(--flavor-pag-gap, 8px);
}

.page-links .post-page-numbers,
a.post-page-numbers,
span.post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--flavor-pag-size, 44px);
  height: var(--flavor-pag-size, 44px);
  padding-inline: var(--flavor-pag-pad, 10px);
  border: var(--flavor-pag-border, 2px) solid var(--flavor-pag-bdr-color, #cbd5e1);
  border-radius: var(--flavor-pag-radius, 0px);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  color: var(--flavor-pag-text, #1e293b);
  background: var(--flavor-pag-bg, #f1f5f9);
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.page-links a.post-page-numbers:hover,
.page-links a.post-page-numbers:focus-visible,
a.post-page-numbers:hover,
a.post-page-numbers:focus-visible {
  background: var(--flavor-pag-active, #2563eb);
  color: var(--flavor-pag-active-text, #fff);
  border-color: var(--flavor-pag-active, #2563eb);
  transform: translateY(-1px);
}

.page-links .post-page-numbers.current,
span.post-page-numbers.current,
span.post-page-numbers:not(a) {
  background: var(--flavor-pag-active, #2563eb);
  color: var(--flavor-pag-active-text, #fff);
  border-color: var(--flavor-pag-active, #2563eb);
  cursor: default;
}

@media (max-width: 480px) {
  .page-links .post-page-numbers,
  a.post-page-numbers,
  span.post-page-numbers {
    min-width: calc(var(--flavor-pag-size, 44px) * 0.82);
    height: calc(var(--flavor-pag-size, 44px) * 0.82);
    font-size: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE BLACK SQUARE — IT WAS A FOCUS OUTLINE, NOT A BORDER
   ───────────────────────────────────────────────────────────────────────────
   Scrollable regions inside blocks carry tabindex="0" so they can be reached
   and scrolled from the keyboard. Correct for accessibility, and it makes them
   focusable by MOUSE too.

   The block stylesheets style `:focus-visible` only. Plain `:focus` was never
   handled, so the browser fell back to its own default focus ring — a hard
   dark rectangle around the entire region, appearing the moment a visitor
   clicked or scrolled the carousel.

   This is why the reported "black square" survived every fix and every cache
   purge: an `outline` is not a `border`, and a user-agent default rule is not
   in any stylesheet here to delete.

   `:focus:not(:focus-visible)` removes it for pointer users only. Keyboard
   users still get a ring from the `:focus-visible` rules the blocks already
   define — dropping the outline unconditionally would strip the only cue a
   keyboard user has for where they are.
   ═══════════════════════════════════════════════════════════════════════════ */
.nc-track:focus:not(:focus-visible),
.ic-track:focus:not(:focus-visible),
[class*="wp-block-natureil"] [tabindex="0"]:focus:not(:focus-visible),
[class*="wp-block-natureil"] [role="region"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Safari on iOS still paints a tap ring on a focusable scroller even with the
   outline cleared, so the tap highlight is suppressed alongside it. */
.nc-track,
.ic-track {
  -webkit-tap-highlight-color: transparent;
}