/*
Theme Name:  Magical North
Theme URI:   https://magicalnorth.tours
Author:      Magical North
Description: Affiliate catalog of Nordic tours (Tromsø, Lapland and more) on the Viator Partner API v2.0. Forked from the Islandia Mágica theme v1.4.4.
Version:     0.1.0
License:     GNU General Public License v2 or later
Text Domain: magicalnorth
Tags:        travel, affiliate, tours, nordic
*/

/* ==========================================================================
   1. CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Palette — Stone */
  --c-bg:          #ffffff;
  --c-bg-alt:      #f7f6f2;
  --c-surface:     #ffffff;
  --c-dark:        #1c1917;
  --c-dark-2:      #292524;
  --c-text:        #1c1917;
  --c-text-muted:  #78716c;
  --c-text-light:  #a8a29e;
  --c-border:      #e7e5e4;
  --c-accent:      #6fa5b8;
  --c-accent-deep: #4e8fa5;
  --c-star:        #f59e0b;
  --c-green:       #3d8f52;
  --c-white:       #ffffff;
  --c-red:         #ef4444;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7rem;

  /* Layout */
  --max-width:      1200px;
  --max-width-text: 760px;
  --gutter:         clamp(1.25rem, 5vw, 2.5rem);

  /* Radii */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 16px 36px rgba(0,0,0,.12);

  /* Transitions */
  --t:      180ms ease;
  --t-slow: 360ms ease;

  /* Typography */
  --font-sans:    'Jost', system-ui, sans-serif;
  --font-heading: 'Jost', system-ui, sans-serif;

  /* Header */
  --header-h: 64px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
}

#main-content {
  min-height: 100vh;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }
ul { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 400; }
h4 { font-size: 1rem; font-weight: 400; }

p + p { margin-top: var(--space-md); }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--max-width-text);
  padding-block: 5rem;
}

.section {
  padding-block: var(--space-3xl);
}

.section--alt {
  background: var(--c-bg-alt);
}

.section--dark {
  background: var(--c-dark);
  color: var(--c-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--c-white);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-header__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
  margin-bottom: var(--space-md);
}

.section--dark .section-header__eyebrow {
  color: var(--c-text-light);
}

.section-header__title {
  margin-bottom: var(--space-md);
}

.section-header__desc {
  color: var(--c-text-muted);
  max-width: 480px;
  margin-inline: auto;
}

.section--dark .section-header__desc {
  color: var(--c-text-light);
}

/* Grid */
.grid-tours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

/* Push main content below the fixed header */
#main-content {
  margin-top: var(--header-h);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-dark);
  display: flex;
  align-items: center;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
  text-decoration: none;
  transition: color 300ms ease;
}

.site-logo__mark {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.site-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.site-logo__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

.site-logo__sub {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  transition: color var(--t);
}

.site-nav a:hover { color: var(--c-white); }

.nav-cta {
  color: var(--c-white) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  padding: 0.4rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: border-color var(--t), color var(--t) !important;
  white-space: nowrap;
}

.nav-cta:hover {
  border-color: rgba(255,255,255,.65) !important;
  color: var(--c-white) !important;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-sm);
  background: none;
  border: none;
  position: relative;
  z-index: 1;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--c-white);
  transform-origin: center;
  transition: transform 350ms cubic-bezier(.23,1,.32,1),
              opacity   250ms ease,
              background 300ms ease;
}

/* Hamburger → X */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* Full-screen overlay — sits below the header, shown via opacity */
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 4vh, 2.2rem);
    background: var(--c-dark);

    /* Closed */
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Strip list-item chrome from wp_nav_menu <li> wrappers */
  .site-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.4rem, 4vh, 2.2rem);
    padding: 0;
    margin: 0;
  }

  /* Links — closed / exit state */
  .site-nav a,
  .site-nav .nav-cta {
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    text-align: center;

    /* Reset .nav-cta button styles */
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;

    /* Exit animation (fast, no stagger) */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 200ms ease,
                transform 200ms ease,
                color 200ms ease;
    transition-delay: 0ms;
  }

  .site-nav a:hover,
  .site-nav .nav-cta:hover { color: var(--c-white); }

  /* Links — open / entrance state (staggered) */
  .site-nav.is-open a,
  .site-nav.is-open .nav-cta {
    opacity: 1;
    transform: none;
    transition: opacity 500ms cubic-bezier(.23,1,.32,1),
                transform 500ms cubic-bezier(.23,1,.32,1),
                color 200ms ease;
    transition-delay: calc(var(--i, 0) * 70ms + 80ms);
  }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: .65;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(28,25,23,.75) 0%, rgba(28,25,23,.15) 55%, transparent 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  max-width: 620px;
}

.hero__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--space-lg);
}

.hero h1 {
  color: var(--c-white);
  margin-bottom: var(--space-lg);
  font-weight: 300;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: normal;
  color: var(--c-accent);
}

.hero__desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--space-xl);
  max-width: 460px;
  line-height: 1.65;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.hero__stats {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,.1);
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--c-white);
  letter-spacing: -0.02em;
}

.hero__stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,.55);
  margin-top: 3px;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Dark fill — for use on light backgrounds */
.btn--primary {
  background: var(--c-dark);
  color: var(--c-white);
  border-color: var(--c-dark);
}

.btn--primary:hover {
  background: var(--c-dark-2);
  border-color: var(--c-dark-2);
  color: var(--c-white);
}

/* White fill — for use on dark backgrounds */
.btn--light {
  background: var(--c-white);
  color: var(--c-dark);
  border-color: var(--c-white);
}

.btn--light:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-bg-alt);
  color: var(--c-dark);
}

/* Ghost — white border on dark backgrounds */
.btn--outline {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,.28);
}

.btn--outline:hover {
  border-color: rgba(255,255,255,.65);
  color: var(--c-white);
}

.btn--sm {
  font-size: 0.8rem;
  padding: 0.45rem 1.1rem;
}

.btn--full { width: 100%; justify-content: center; }

/* ==========================================================================
   7. TOUR CARD
   ========================================================================== */

.tour-card {
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t), box-shadow var(--t);
}

.tour-card:hover {
  border-color: var(--c-text-light);
  box-shadow: var(--shadow-md);
}

.tour-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--c-border);
}

.tour-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.tour-card:hover .tour-card__thumb img {
  transform: scale(1.03);
}

.tour-card__badges {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* All badges: frosted dark pill — reads cleanly over any image */
.badge--dark,
.badge--accent,
.badge--gold,
.badge--aurora {
  background: rgba(28,25,23,0.62);
  color: #fff;
}

/* Free cancellation: green tint — the one badge worth standing out */
.badge--green {
  background: rgba(40,120,60,0.78);
  color: #fff;
}

.tour-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tour-card__category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  margin-bottom: var(--space-sm);
}

.tour-card__title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tour-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: var(--c-text-muted);
  margin-bottom: var(--space-md);
}

.tour-card__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tour-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--space-md);
}

.stars { display: flex; gap: 2px; }

.star {
  width: 13px;
  height: 13px;
  color: var(--c-star);
  fill: var(--c-star);
}

.star--empty { color: var(--c-border); fill: var(--c-border); }

.rating-score {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--c-text);
}

.rating-count {
  font-size: 0.775rem;
  color: var(--c-text-muted);
}

.tour-card__footer {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.tour-card__price { line-height: 1.2; }

.price-label {
  font-size: 0.7rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.price-value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

.price-value sup {
  font-size: 0.75em;
  vertical-align: super;
}

/* ==========================================================================
   8. TOUR FILTERS (Archive page)
   ========================================================================== */

.filters-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--space-md);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
}

.filters-bar .container {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.filters-bar__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.filter-select {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-bg-alt);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  transition: border-color var(--t);
}

.filter-select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.filters-bar__count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

/* ==========================================================================
   9. SINGLE TOUR PAGE
   ========================================================================== */

.tour-hero {
  position: relative;
  height: clamp(340px, 52vh, 540px);
  overflow: hidden;
  background: var(--c-dark);
}

.tour-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .65;
}

.tour-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,25,23,.9) 0%, transparent 55%);
}

.tour-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2xl) var(--gutter);
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
}

.tour-hero h1 {
  color: var(--c-white);
  max-width: 700px;
}

/* Tour layout */
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-2xl);
  padding-block: var(--space-2xl);
  align-items: start;
}

@media (max-width: 900px) {
  .tour-layout { grid-template-columns: 1fr; }
  .tour-sidebar { order: -1; }
}

/* Tour meta strip */
.tour-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--c-bg-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--c-border);
}

#tour-map {
  /* Full row width — #tour-map is a child of the flex .tour-meta-strip, so
     without an explicit basis/width a flex item sizes to its (empty) content
     and collapses to ~0px, leaving Leaflet a 0-wide container. */
  flex: 0 0 100%;
  width: 100%;
  height: 280px;
  border-radius: var(--radius);
  margin-top: var(--space-md);
  overflow: hidden;
  /* Leaflet stacks its panes at z-index 400 and its zoom control at 1000. With
     no stacking context here those numbers compete with the whole page, and the
     fixed .site-header (z-index 100) loses — the map scrolls up over the nav.
     Isolating confines them to this box. */
  isolation: isolate;
}

/* Same full-row treatment as the map it labels, minus the top margin so caption
   and map read as one block. */
.tour-map__caption {
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--space-md);
  color: var(--c-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tour-map__caption + #tour-map {
  margin-top: var(--space-sm);
}

/* Numbered itinerary-stop marker. A Leaflet divIcon rather than an image, so the
   number travels with the pin and a twenty-stop itinerary costs no extra
   requests. A divIcon's className replaces Leaflet's own .leaflet-div-icon
   rather than joining it, so its default white box never applies here.

   Scoped through #tour-map for specificity, not for scoping: leaflet.css is
   enqueued after this file, so its .leaflet-marker-icon { display: block }
   beats a bare .tour-map__stop and the number lands in the top-left corner
   instead of the middle of the circle. */
#tour-map .tour-map__stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--c-accent-deep);
  border: 2px solid var(--c-white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  color: var(--c-white);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

.tour-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
}

.tour-meta-item__icon {
  width: 34px;
  height: 34px;
  background: var(--c-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  flex-shrink: 0;
}

.tour-meta-item__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}

.tour-meta-item__value {
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

/* Tabs */
.tour-tabs { margin-bottom: var(--space-xl); }

.tour-tabs__nav {
  display: flex;
  border-bottom: 1.5px solid var(--c-border);
  margin-bottom: var(--space-xl);
}

.tour-tab-btn {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all var(--t);
  letter-spacing: -0.01em;
}

.tour-tab-btn.is-active,
.tour-tab-btn:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

/* Panels collapse only once JS marks the container .js-tabs — so with JS disabled
   all panels render visible (progressive enhancement) instead of being hidden. */
.js-tabs .tour-tab-panel { display: none; }
.js-tabs .tour-tab-panel.is-active { display: block; }

/* Highlights list */
.highlight-list { display: grid; gap: var(--space-sm); }

.highlight-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.highlight-item::before {
  content: '—';
  font-weight: 700;
  color: var(--c-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.inclusion-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.inclusion-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.9rem;
}

.inclusion-item--included::before { content: '✓'; color: var(--c-green); font-weight: 700; }
.inclusion-item--excluded::before { content: '✗'; color: #ef4444; font-weight: 700; }

/* Photo gallery */
.tour-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius);
  overflow: hidden;
}

.tour-gallery__item {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.tour-gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.tour-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.tour-gallery__item:hover img { transform: scale(1.04); }

@media (max-width: 600px) {
  .tour-gallery { grid-template-columns: 1fr 1fr; }
}

/* Lightbox slider */
.gallery-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.gallery-lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  padding: .25rem .75rem .35rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  z-index: 1;
}
.gallery-lightbox__btn:hover { background: rgba(255,255,255,.3); }
.gallery-lightbox__btn--prev { left: 1rem; }
.gallery-lightbox__btn--next { right: 1rem; }

.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.gallery-lightbox__close:hover { background: rgba(255,255,255,.3); }

.gallery-lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  pointer-events: none;
}

/* Breadcrumbs */
.breadcrumbs {
  background: var(--c-surface);
  padding: .5rem 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  font-size: .8125rem;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.breadcrumbs__link {
  color: var(--c-text-muted, #6b7280);
  text-decoration: none;
}
.breadcrumbs__link:hover { text-decoration: underline; }

.breadcrumbs__sep {
  color: var(--c-text-muted, #6b7280);
  font-size: .75rem;
}

.breadcrumbs__item span[aria-current] {
  color: var(--c-text, #111);
  font-weight: 500;
}

/* Booking sidebar */
.booking-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  border: 1px solid var(--c-border);
}

.booking-card__header {
  background: var(--c-dark);
  padding: var(--space-lg);
  color: var(--c-white);
}

.booking-card__from {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.55);
  margin-bottom: var(--space-xs);
}

.booking-card__price {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--c-white);
  letter-spacing: -0.02em;
}

.booking-card__price-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,.55);
}

.booking-card__body { padding: var(--space-lg); }

.booking-perks {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.booking-perk {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.booking-perk::before {
  content: '✓';
  color: var(--c-green);
  font-weight: 700;
}

.booking-card__disclaimer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--c-text-light);
  margin-top: var(--space-md);
  line-height: 1.5;
}

.booking-card__disclaimer a {
  color: var(--c-text-muted);
  text-decoration: underline;
}

/* ==========================================================================
   10. TRANSITION SECTION
   ========================================================================== */

.site-transition {
  position: relative;
  min-height: 65vh;
  background-color: var(--c-dark);
  overflow: hidden;
}

.site-transition picture {
  position: absolute;
  inset: 0;
  display: block;
}

.site-transition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fades from the white section above into the photo */
.site-transition::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 35%;
  background: linear-gradient(to bottom, #ffffff, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Fades from the photo into the dark footer below */
.site-transition::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--c-dark), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--c-dark);
  color: rgba(255,255,255,.6);
  padding-block: var(--space-2xl) var(--space-xl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.footer-brand__logo {
  margin-bottom: var(--space-md);
}

.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 260px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-col a {
  font-size: 0.875rem;
  color: rgba(255,255,255,.55);
  transition: color var(--t);
}

.footer-col a:hover { color: var(--c-white); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}

.affiliate-notice {
  font-size: 0.72rem;
  color: rgba(255,255,255,.5);
  max-width: 560px;
}

/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

.text-center  { text-align: center; }
.text-muted   { color: var(--c-text-muted); }
.text-accent  { color: var(--c-accent); }
/* .screen-reader-text is WordPress core's class, not ours — the_posts_pagination()
   and friends emit it (e.g. <h2 class="screen-reader-text">Posts pagination</h2>).
   The theme never defined it, so those headings were hidden only because
   wp-block-library's stylesheet happens to define it. Hummingbird strips unused
   CSS on this site, so relying on another sheet is a live risk: prune that rule
   and the heading becomes visible on every paginated archive. Own it here. */
.sr-only,
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
/* Reveal the skip link when it receives keyboard focus (it is otherwise .sr-only,
   so without this the "Ir al contenido" bypass is never visible — WCAG 2.4.7). */
.sr-only:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  margin: 0; padding: .6rem 1rem;
  background: var(--c-dark); color: var(--c-white); border-radius: var(--radius-sm);
}
.mt-auto      { margin-top: auto; }
.no-results   { text-align: center; padding: var(--space-3xl) 0; color: var(--c-text-muted); }

/* ==========================================================================
   13. PAGINATION
   ========================================================================== */

/* the_posts_pagination() emits <nav class="navigation pagination"> and nests the
   links one level down in <div class="nav-links">. The templates wrap that in
   their own <div class="pagination">, so BOTH elements match .pagination — and
   neither is the links' parent. Flex and gap therefore applied to the wrong box
   (whose only children are the screen-reader heading and .nav-links), leaving
   the links in inline flow, and padding-top was applied twice. */
.pagination {
  padding-top: var(--space-2xl);
}

/* The inner nav.navigation.pagination — don't double the wrapper's padding. */
.pagination .pagination {
  padding-top: 0;
}

/* The actual row. Scoped under .pagination so it works whether or not a
   template adds the wrapper div (the nav carries .pagination either way). */
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-width, not width: the digits stay square but "← Anterior" and
     "Siguiente →" need to grow — at a fixed 40px their text spilled out. */
  min-width: 40px;
  height: 40px;
  padding: 0 .625rem;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--t);
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-white);
}

/* ==========================================================================
   14. LOADING SKELETON
   ========================================================================== */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.skeleton {
  background: var(--c-border);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.6s ease infinite;
}

/* ==========================================================================
   15. PROSE — long-form page content (privacy policy, about, etc.)
   ========================================================================== */

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin-top: var(--space-md);
}

.prose p:first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin-top: var(--space-md);
  padding-left: 1.5rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li + li {
  margin-top: var(--space-xs);
}

.prose a {
  color: var(--c-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--c-accent);
}

.prose strong {
  font-weight: 600;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin-block: var(--space-2xl);
}

/* ==========================================================================
   16. BLOG — post card grid (category.php, front-page.php) + single.php
   ========================================================================== */

/* single.php reuses .tour-hero (section 12) — no extra hero CSS needed */

.grid-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
}

.post-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.post-card:hover .post-card__thumb img {
  transform: scale(1.04);
}

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

.post-card__meta {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-bottom: var(--space-sm);
}

.post-card__title {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

.post-card__title a {
  color: var(--c-text);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--c-accent-deep);
}

.post-card__excerpt {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  flex: 1;
  margin-bottom: var(--space-md);
}

.post-card__read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-accent-deep);
  text-decoration: none;
}

.post-card__read-more:hover {
  color: var(--c-accent);
}

/* ==========================================================================
   17. RESPONSIVE — mobile spacing
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --space-2xl: 2.5rem;   /* 4rem  → 2.5rem */
    --space-3xl: 3.5rem;   /* 7rem  → 3.5rem */
  }
}

/* ==========================================================================
   18. SEARCH HERO (homepage)
   ========================================================================== */

.search-hero {
  position: relative;
  /* ~20% taller than the original clamp(280px, 42vh, 480px). The text block is a
     fixed ~135px, so height buys clean photo: taller hero -> the type occupies a
     smaller fraction -> the overlay can start lower and leave more of the frame
     untouched. Safe for the Algolia logo straddle below, which is measured off
     the hero's bottom edge and so is independent of its height — padding-bottom
     is the value that must not move. */
  min-height: clamp(336px, 50vh, 576px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-dark);
  padding-bottom: var(--space-2xl);
}

.search-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
}

.search-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Full strength: at .55 the photo was flattened toward --c-dark everywhere,
     including the top where nothing needs dulling. The overlay below now does
     all the darkening, and only where the type needs it — so the top of the
     frame is the actual photograph. */
  opacity: 1;
  display: block;
}

.search-hero__overlay {
  position: absolute;
  inset: 0;
  /* Carries all the darkening now that the image runs at full opacity, so
     everything above this scrim is the untouched photograph.

     Measured in pixels from the bottom, NOT percentages. The type is bottom-
     anchored (flex-end + padding-bottom), so its distance from the hero's
     bottom edge is fixed — eyebrow top at 199px on desktop, 176px on mobile —
     while the hero's height swings with the vh clamp. Percentage stops broke
     exactly there: tuned at a 450px hero they read 1.16:1 once a short window
     clamped it to 336px, because the type climbed out of the scrim as the frame
     shrank. Anchored to the bottom, the band tracks the type at every height,
     and a taller hero simply adds clean photo above it.

     .9 must extend past 199px: this photo has near-white highlights (luminance
     .95) right where the type sits, so white-on-white is the failure mode.
     Re-measure if the type scale or padding-bottom changes — those move the
     offsets this is built on. Hero height is safe by construction. */
  background: linear-gradient(
    to top,
    rgba(15,23,42,.96) 0,
    rgba(15,23,42,.9) 205px,
    rgba(15,23,42,0) 300px
  );
}

.search-hero__content {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  padding-top: var(--space-2xl);
}

.search-hero__eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  /* Solid, not translucent: at .5 this sat at 3.35:1 over the photo and no
     overlay could rescue it, because translucent text darkens along with the
     backdrop behind it. The small size, weight and tracking already read as an
     eyebrow without the alpha doing it. */
  color: #fff;
  margin-bottom: var(--space-md);
}

.search-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--c-white);
  margin: 0 0 var(--space-md);
}

.search-hero__desc {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.6;
}

/* ─── Search stage — white card that emerges from the hero ─────────────────── */

.search-stage {
  background: var(--c-bg, #fff);
  padding: var(--space-xl) 0 var(--space-3xl);
}

/* Pull the search widget up to overlap the hero bottom edge */
.search-stage > .container {
  margin-top: calc(-1 * var(--space-3xl));
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-xl);
}

/* Remove the section wrapper the shortcode normally adds at the top level */
.search-stage > .container > .section {
  padding: 0;
}

.search-stage > .container > .section > .container {
  padding: 0;
  max-width: none;
}

@media (max-width: 768px) {
  .search-hero {
    /* ~20% up from clamp(200px, 35vh, 320px), matching the desktop bump. */
    min-height: clamp(240px, 42vh, 384px);
    padding-bottom: var(--space-xl);
  }
  /* No overlay override needed: the scrim is anchored in px from the bottom and
     the type is bottom-anchored here too (top at 176px vs desktop's 199px), so
     the same band covers both. */

  .search-stage > .container {
    margin-top: calc(-1 * var(--space-2xl));
    border-radius: var(--radius, 10px);
    padding: var(--space-lg);
  }
}

/* The Algolia attribution logo sits at the top of the widget, inside the zone
   this card is pulled up into — so above 768px the hero is still behind it and
   white makes it pop. The plugin ships a muted grey default that stays legible
   on the white card, which is what /tours and mobile get; this overrides it for
   the one case the theme's own layout creates.

   Which side of the edge the logo lands on is decided entirely by these tokens,
   not by the hero's height — that cancels out of the geometry:
     >=769px: stage 40 - pull 112 + card 40 = -32  -> 32px OVER the hero
     <=768px: stage 40 - pull  40 + card 24 = +24  -> 24px BELOW it, on the card
   So this must stay in step with the pull/padding above: if either changes, the
   sign can flip and the logo goes white-on-white again. */
@media (min-width: 769px) {
  .search-stage .algolia-powered-by svg path {
    fill: var(--c-white, #fff);
  }
}

/* ─── Language switcher ─────────────────────────────────────────────────────
   Rendered by the Islandia Languages plugin — in the header nav via
   islandia_lang_switcher(), or anywhere via [islandia_lang_switcher].
   Only the language you can switch to is listed, so this is normally a single
   link. .is-fallback marks one that has no counterpart for this page and so
   points at that language's home instead.

   Scoped to .site-nav and placed after the mobile nav rules so the pill keeps
   its own size there instead of inheriting the full-screen menu's uppercase
   treatment. */
.islandia-lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Two markups, one treatment. The plugin renders __item inside its own <ul>
   when the switcher is placed by hand, and __menu-item as a plain <li> when it
   appends to an assigned nav menu. Styling only the first left the nav variant
   completely unstyled — which reads as the switcher having disappeared. */
.site-nav .islandia-lang-switcher__item a,
.site-nav .islandia-lang-switcher__menu-item a,
.islandia-lang-switcher__menu-item a,
.islandia-lang-switcher__item a {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  color: var(--c-white);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  transition: color var(--t);
}

.site-nav .islandia-lang-switcher__item a:hover,
.site-nav .islandia-lang-switcher__item a:focus-visible,
.site-nav .islandia-lang-switcher__menu-item a:hover,
.site-nav .islandia-lang-switcher__menu-item a:focus-visible,
.islandia-lang-switcher__menu-item a:hover,
.islandia-lang-switcher__menu-item a:focus-visible,
.islandia-lang-switcher__item a:hover,
.islandia-lang-switcher__item a:focus-visible {
  color: var(--c-red);
}

/* A button inside .prose: the prose link colour and underline would otherwise
   win over the button's own. */
.prose a.btn--primary,
.prose a.btn--primary:hover {
  color: var(--c-white);
  text-decoration: none;
}