/* Pack Lightly Mega Menu
   Brand tokens (design-system.md):
     --plmm-teal       #124F53
     --plmm-teal-dark  #0d3a3d
     --plmm-accent     #F29B07
     --plmm-mint       #E8F0EE
     --plmm-cream      #FCEACF
*/

/* Auto-inject mode: hide Astra's default primary header so only our mega menu shows */
body.plmm-active .site-header.ast-primary-header,
body.plmm-active .ast-main-header-wrap,
body.plmm-active .ast-mobile-header-wrap {
  display: none !important;
}

/* === Anti-Astra overrides: force search toggle visibility === */
.plmm-header .plmm-header__search-toggle {
  background: #FCEACF !important;
  color: #0d3a3d !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.plmm-header .plmm-header__search-toggle svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}
.plmm-header .plmm-header__search-toggle svg circle,
.plmm-header .plmm-header__search-toggle svg path {
  stroke: currentColor !important;
  fill: none !important;
}
.plmm-header .plmm-header__search-toggle:hover,
.plmm-header .plmm-header__search-toggle:focus-visible {
  background: #F29B07 !important;
  color: #fff !important;
}
.plmm-header .plmm-header__search-toggle[aria-expanded="true"] {
  background: #124F53 !important;
  color: #fff !important;
}

/* ===== FULL HEADER (logo + nav + social + search) ===== */
.plmm-header {
  --plmm-teal: #124F53;
  --plmm-teal-dark: #0d3a3d;
  --plmm-accent: #F29B07;
  --plmm-mint: #E8F0EE;
  --plmm-cream: #FCEACF;
  --plmm-line: #e1e8e6;
  --plmm-bg: #ffffff;

  background: var(--plmm-bg);
  border-bottom: 1px solid var(--plmm-line);
  position: relative;
  z-index: 1000;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.plmm-header *,
.plmm-header *::before,
.plmm-header *::after {
  box-sizing: border-box;
}

.plmm-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 20px;
}

.plmm-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.plmm-header__logo img {
  display: block;
  height: 36px;
  width: auto;
}

.plmm-header__logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--plmm-teal);
}

.plmm-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.plmm-header__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.plmm-header__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--plmm-teal);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.plmm-header__social-link:hover,
.plmm-header__social-link:focus-visible {
  background: var(--plmm-mint);
  color: var(--plmm-teal-dark);
  outline: none;
}

.plmm-header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--plmm-cream);
  border: 0;
  cursor: pointer;
  color: var(--plmm-teal-dark);
  border-radius: 999px;
  margin-left: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.plmm-header__search-toggle svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.plmm-header__search-toggle:hover,
.plmm-header__search-toggle:focus-visible {
  background: var(--plmm-accent);
  color: #fff;
  outline: none;
  transform: scale(1.05);
}

.plmm-header__search-toggle[aria-expanded="true"] {
  background: var(--plmm-teal);
  color: #fff;
}

.plmm-header__search-panel {
  border-top: 1px solid var(--plmm-line);
  background: var(--plmm-bg);
  padding: 16px 20px;
}

.plmm-header__search-panel[hidden] {
  display: none;
}

.plmm-header__search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--plmm-mint);
  border-radius: 10px;
  padding: 6px 6px 6px 16px;
}

.plmm-header__search-form input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 10px 0;
  outline: none;
  color: var(--plmm-teal-dark);
}

.plmm-header__search-form input[type="search"]::placeholder {
  color: #7a8a8a;
}

.plmm-header__search-submit {
  background: var(--plmm-teal);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.plmm-header__search-submit:hover,
.plmm-header__search-submit:focus-visible {
  background: var(--plmm-teal-dark);
  outline: none;
}

.plmm-header__lang-toggle {
  /* Astra global button rule (.menu-toggle, button, .ast-button, ...) sets
     padding:13px 30px. With border-box that leaves 0px content width on a 40px
     button, collapsing the flag to zero. Reset padding explicitly. */
  padding: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--plmm-mint);
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  margin-left: 6px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.plmm-header__lang-toggle .plmm-header__lang-flag {
  width: 22px;
  height: 16.5px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 61, 0.12);
}

.plmm-header__lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.plmm-header__lang-toggle:hover,
.plmm-header__lang-toggle:focus-visible {
  background: var(--plmm-cream);
  outline: none;
  transform: scale(1.05);
}

.plmm-header__lang-toggle[aria-expanded="true"] {
  background: var(--plmm-teal);
}

.plmm-header__lang-panel {
  position: absolute;
  right: 20px; /* fallback until JS aligns it exactly under the toggle button */
  top: 100%;
  margin-top: 4px;
  background: var(--plmm-bg);
  border: 1px solid var(--plmm-line);
  border-radius: 12px;
  box-shadow: 0 12px 24px -8px rgba(13, 58, 61, 0.2);
  min-width: 180px;
  z-index: 1001;
  padding: 6px;
}

.plmm-header__lang-panel[hidden] {
  display: none;
}

.plmm-header__lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plmm-header__lang-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--plmm-teal-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.plmm-header__lang-link .plmm-header__lang-flag {
  width: 22px;
  height: 16.5px;
  flex: 0 0 auto;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 61, 0.12);
}

.plmm-header__lang-link:hover,
.plmm-header__lang-link:focus-visible {
  background: var(--plmm-mint);
  outline: none;
}

.plmm-header__lang-link--current {
  font-weight: 700;
  background: var(--plmm-cream);
}

/* === Variant B: flag + language code trigger === */
.plmm-header__lang-toggle--with-code {
  width: auto;
  padding: 0 12px 0 8px;
  gap: 6px;
  border-radius: 999px;
}

.plmm-header__lang-code {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--plmm-teal-dark);
}

.plmm-header__lang-toggle--with-code[aria-expanded="true"] .plmm-header__lang-code {
  color: #fff;
}

/* === Variant C: inline flag row, no dropdown === */
.plmm-header__lang-inline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 0 4px;
}

.plmm-header__lang-inline-flag {
  display: inline-flex;
  width: 24px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 61, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.plmm-header__lang-inline-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.plmm-header__lang-inline-flag:hover,
.plmm-header__lang-inline-flag:focus-visible {
  transform: scale(1.12);
  outline: none;
}

.plmm-header__lang-inline-flag--current {
  box-shadow: 0 0 0 2px var(--plmm-teal);
  cursor: default;
  transform: none;
}

.plmm-header__lang-inline-flag--current:hover {
  transform: none;
}

.plmm {
  --plmm-teal: #124F53;
  --plmm-teal-dark: #0d3a3d;
  --plmm-accent: #F29B07;
  --plmm-mint: #E8F0EE;
  --plmm-cream: #FCEACF;
  --plmm-ink: #1a1a1a;
  --plmm-muted: #5a6a6a;
  --plmm-line: #e1e8e6;
  --plmm-bg: #ffffff;
  flex: 1 1 auto;

  --plmm-radius: 10px;
  --plmm-radius-pill: 999px;
  --plmm-shadow: 0 18px 40px -16px rgba(13, 58, 61, 0.22), 0 4px 12px -4px rgba(13, 58, 61, 0.08);
  --plmm-font-head: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --plmm-font-body: 'Karla', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  font-family: var(--plmm-font-head);
  color: var(--plmm-ink);
  position: relative;
}

.plmm *,
.plmm *::before,
.plmm *::after {
  box-sizing: border-box;
}

.plmm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.plmm__item {
  position: relative;
  margin: 0;
}

.plmm__trigger,
.plmm__link,
.plmm__country,
.plmm__tool,
.plmm__overflow {
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.plmm__trigger,
.plmm__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--plmm-teal);
  border-radius: var(--plmm-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plmm__trigger:hover,
.plmm__trigger:focus-visible,
.plmm__link:hover,
.plmm__link:focus-visible {
  background: var(--plmm-mint);
  color: var(--plmm-teal-dark);
  outline: none;
}

.plmm__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 2px;
  margin-top: -3px;
}

.plmm__item--mega.plmm__item--open > .plmm__trigger .plmm__caret,
.plmm__trigger[aria-expanded="true"] .plmm__caret {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Mobile drawer toggle */
.plmm__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--plmm-teal);
}

.plmm__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.plmm__toggle[aria-expanded="true"] .plmm__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.plmm__toggle[aria-expanded="true"] .plmm__toggle-bar:nth-child(2) {
  opacity: 0;
}
.plmm__toggle[aria-expanded="true"] .plmm__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== MOBILE (default) ===== */
.plmm__list {
  display: none;
  position: fixed;
  /* Sits just under the sticky header (which stays visible at 0..~64px). The old
     page-slice bug was NOT this offset, it was a scroll-lock (`overflow:hidden` on
     <html>) that broke the sticky header. No scroll-lock now; the fixed drawer
     covers the page and overscroll-behavior:contain stops scroll chaining. */
  inset: 64px 0 0 0;
  background: var(--plmm-bg);
  padding: 8px 20px 80px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 9998;
  border-top: 1px solid var(--plmm-line);
}

.plmm__toggle[aria-expanded="true"] + .plmm__list {
  display: flex;
}

.plmm__item {
  border-bottom: 1px solid var(--plmm-line);
}
.plmm__item:last-child {
  border-bottom: 0;
}

.plmm__trigger,
.plmm__link {
  width: 100%;
  justify-content: space-between;
  padding: 18px 20px;
  border-radius: 0;
  font-size: 18px;
}

.plmm__panel {
  display: none;
  padding: 0 20px 20px;
}

.plmm__item--mega.plmm__item--open > .plmm__panel {
  display: block;
}

.plmm__regions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plmm__region-title {
  font-family: var(--plmm-font-head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plmm-teal);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.plmm__region-title::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--plmm-accent);
  border-radius: 999px;
}

.plmm__countries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.plmm__country {
  display: block;
  padding: 10px 14px;
  background: var(--plmm-mint);
  color: var(--plmm-teal-dark);
  border-radius: var(--plmm-radius-pill);
  font-family: var(--plmm-font-head);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plmm__country:hover,
.plmm__country:focus-visible {
  background: var(--plmm-teal);
  color: #fff;
  outline: none;
}

/* "+N more" chip per region — signals hidden countries, links to the full hub.
   The hidden countries themselves stay in the DOM (data-plmm-hidden) and surface
   via the type-ahead search. */
/* Text-only control, never a filled pill. Astra styles every <button> on :focus with an orange
   background and a 50px radius, and a tap on mobile LEAVES the button focused: combined with our
   own accent colour on hover that rendered "Ver menos" as orange text on an orange pill, so the
   collapse control looked like a blank orange bar. Background and radius are forced off in every
   state; the accent stays on the text only. (lessons-learned #34.) */
/* === More-chip: sits in the country grid as the next tile ===
   Previously a bare 12px inline-block link under the row: easy to miss and,
   on mobile, a ~15px tap target hugging the left edge. As a grid cell it
   inherits the tile rhythm, gets a full-size tap area, and reads as the
   natural continuation of the row. */
.plmm__country-item--more {
  display: flex;
}



.plmm__country-item--more .plmm__region-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  padding: 8px 10px !important;
  border: 1px dashed rgba(18, 79, 83, 0.35) !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  opacity: 1;
  color: var(--plmm-teal) !important;
}

.plmm__country-item--more .plmm__region-more:hover,
.plmm__country-item--more .plmm__region-more:focus-visible {
  border-color: var(--plmm-accent) !important;
  background: var(--plmm-cream) !important;
  color: var(--plmm-teal-dark) !important;
  opacity: 1;
}

/* When the row is expanded the chip becomes the collapse control and moves
   to the end of the grid; keep it visually quieter than the countries. */
.plmm__country-item--more .plmm__region-more[aria-expanded="true"] {
  border-style: solid !important;
}

.plmm__region-more {
  display: inline-block;
  margin-top: 6px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: var(--plmm-font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--plmm-teal) !important;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.plmm__region-more:hover,
.plmm__region-more:focus,
.plmm__region-more:focus-visible,
.plmm__region-more:active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--plmm-accent) !important;
  opacity: 1;
  outline: none;
}

.plmm__region-more span[aria-hidden] {
  margin-right: 1px;
}

.plmm__overflow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--plmm-accent);
  color: #fff;
  border-radius: var(--plmm-radius-pill);
  font-family: var(--plmm-font-head);
  font-weight: 700;
  font-size: 15px;
  transition: background-color 0.15s ease;
}

.plmm__overflow:hover,
.plmm__overflow:focus-visible {
  background: #d18506;
  outline: none;
}

.plmm__tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.plmm__tool {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  background: var(--plmm-bg);
  border: 1px solid var(--plmm-line);
  border-radius: var(--plmm-radius);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.plmm__tool:hover,
.plmm__tool:focus-visible {
  border-color: var(--plmm-teal);
  background: var(--plmm-mint);
  outline: none;
}

.plmm__tool-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--plmm-cream);
  color: var(--plmm-teal);
  border-radius: var(--plmm-radius);
}

.plmm__tool-icon svg {
  width: 24px;
  height: 24px;
}

.plmm__tool-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plmm__tool-label {
  font-family: var(--plmm-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--plmm-teal-dark);
  line-height: 1.25;
}

.plmm__tool-tagline {
  font-family: var(--plmm-font-body);
  font-size: 13px;
  color: var(--plmm-muted);
  line-height: 1.35;
}

/* ===== DESKTOP (>= 1024px) ===== */
@media (min-width: 1024px) {
  .plmm__toggle {
    display: none;
  }

  .plmm__list {
    display: flex;
    flex-direction: row;
    position: static;
    inset: auto;
    padding: 0;
    overflow: visible;
    border-top: 0;
    background: transparent;
    gap: 4px;
    align-items: center;
  }

  .plmm__item {
    border-bottom: 0;
  }

  .plmm__trigger,
  .plmm__link {
    padding: 16px 18px;
    font-size: 17px;
    font-weight: 600;
    width: auto;
    justify-content: center;
  }

  .plmm__item--mega {
    position: static; /* so mega panel can be full-width */
  }

  .plmm__panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    top: 100%;
    margin-top: 12px;
    width: min(1120px, calc(100vw - 32px));
    background: var(--plmm-bg);
    border: 1px solid var(--plmm-line);
    border-radius: var(--plmm-radius);
    box-shadow: var(--plmm-shadow);
    padding: 20px 24px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  /* Invisible bridge between trigger and panel — keeps :hover continuous */
  .plmm__panel::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
  }

  /* Panel visibility is fully JS-controlled via .plmm__item--open class.
     This avoids the click-close conflict where :hover would override aria-expanded. */
  .plmm__item--mega.plmm__item--open > .plmm__panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .plmm__panel--destinations {
    text-align: center;
  }

  /* Regions stack vertically as horizontal bands; each region's countries
     wrap into a dense grid so all 61 destinations fit on one screen. */
  .plmm__regions {
    display: block;
    text-align: left;
  }

  .plmm__region + .plmm__region {
    margin-top: 12px;
  }

  .plmm__region-title {
    margin-bottom: 8px;
    font-size: 14px;
  }

  .plmm__countries {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 3px 6px;
  }

  .plmm__country {
    background: var(--plmm-mint);
    color: var(--plmm-teal-dark);
    border-radius: 10px;
    padding: 4px 8px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    gap: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }

  .plmm__country-flag {
    width: 20px;
    height: 15px;
    flex: 0 0 20px;
  }

  .plmm__country-flag--circle {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
  }

  .plmm__country-name {
    font-size: 12.5px;
    line-height: 1.15;
  }

  .plmm__country:hover,
  .plmm__country:focus-visible {
    background: var(--plmm-teal);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(13, 58, 61, 0.35);
  }

  .plmm__overflow {
    margin-top: 28px;
  }

  /* Single-region destinations: let countries spread across multiple columns inside the one region */
  .plmm__panel--single .plmm__regions {
    grid-template-columns: 1fr;
  }
  .plmm__panel--single .plmm__countries {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 16px;
  }
  .plmm__panel--single .plmm__region-title {
    margin-bottom: 16px;
  }

  .plmm__panel--tools {
    width: min(1180px, calc(100vw - 32px));
  }

  .plmm__tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
  }
}

@media (min-width: 1280px) {
  /* Slightly roomier chips on wide screens but still compact. */
  .plmm__countries {
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  }
}

/* ===== TABLET (768-1023px) — hybrid: drawer remains, but country grid widens ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .plmm__countries {
    grid-template-columns: repeat(3, 1fr);
  }
  .plmm__tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sub-pages dropdown (About me etc.) — smaller panel */
.plmm__panel--pages {
  padding: 12px;
}

.plmm__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}

.plmm__sublink {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--plmm-teal-dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.plmm__sublink:hover,
.plmm__sublink:focus-visible {
  background: var(--plmm-mint);
  outline: none;
}

/* Desktop: nav centers between logo and actions */
@media (min-width: 1024px) {
  .plmm-header__inner {
    padding: 14px 28px;
    gap: 24px;
  }

  .plmm {
    display: flex;
    justify-content: center;
  }

  .plmm__list {
    justify-content: center;
  }

  /* Sub-pages dropdown — auto-width, left-aligned to trigger */
  .plmm__item--page-mega {
    position: relative; /* override the static rule above for page mega */
  }

  .plmm__item--page-mega .plmm__panel--pages {
    width: auto;
    min-width: 220px;
    left: 0;
    right: auto;
    transform: translateY(4px);
    padding: 8px;
  }

  .plmm__item--page-mega.plmm__item--open > .plmm__panel--pages {
    transform: translateY(0);
  }
}

/* Mobile: hide social icons in header strip, hamburger pushed to far right */
@media (max-width: 1023px) {
  .plmm-header__social {
    display: none;
  }

  .plmm-header__inner {
    padding: 10px 16px;
    gap: 8px;
  }

  .plmm-header__logo img {
    height: 32px;
  }

  /* Reorder: logo (left) - search (right of logo space) - hamburger (far right) */
  .plmm-header__logo { order: 1; }
  .plmm-header__actions { order: 2; margin-left: auto; }
  .plmm { order: 3; flex: 0 0 auto; }

  /* Search panel needs to sit above the drawer overlay on mobile */
  .plmm-header__search-panel {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 10000;
    border-top: 1px solid var(--plmm-line);
    box-shadow: 0 8px 16px -8px rgba(13, 58, 61, 0.12);
  }

  .plmm__list::after {
    content: '';
    display: block;
    height: 24px;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .plmm__panel,
  .plmm__caret,
  .plmm__toggle-bar,
  .plmm__tool,
  .plmm__country,
  .plmm__trigger,
  .plmm__link,
  .plmm__overflow {
    transition: none;
  }
}

/* ============================================================
   v0.6 — Primary nav prominence + featured stack
   ============================================================ */

/* Make Destinations + Travel Tools + Trip Studio visually leading. Each is a
   split-trigger: the label is a real link (click = navigate to the hub) and a
   small caret button toggles the mega panel. Pure typography + accent underline
   spanning the whole split-trigger, so it still reads as one primary item. */
@media (min-width: 1024px) {
  .plmm__item--destinations > .plmm__split-trigger,
  .plmm__item--tools > .plmm__split-trigger,
  .plmm__item--routemaker > .plmm__split-trigger {
    position: relative;
    align-items: center;
  }

  .plmm__item--destinations > .plmm__split-trigger > .plmm__trigger-link,
  .plmm__item--tools > .plmm__split-trigger > .plmm__trigger-link,
  .plmm__item--routemaker > .plmm__split-trigger > .plmm__trigger-link {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.005em;
    color: var(--plmm-teal-dark);
    background: transparent;
    border-radius: 0;
    padding: 14px 4px 12px 18px;
  }

  .plmm__item--destinations > .plmm__split-trigger > .plmm__trigger--caret,
  .plmm__item--tools > .plmm__split-trigger > .plmm__trigger--caret,
  .plmm__item--routemaker > .plmm__split-trigger > .plmm__trigger--caret {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--plmm-teal-dark);
    padding: 14px 18px 12px 4px;
  }

  .plmm__item--destinations > .plmm__split-trigger > .plmm__trigger-link:hover,
  .plmm__item--tools > .plmm__split-trigger > .plmm__trigger-link:hover,
  .plmm__item--routemaker > .plmm__split-trigger > .plmm__trigger-link:hover {
    background: transparent;
    color: var(--plmm-teal-dark);
  }

  /* Permanent thin oranje accent underline — the visual "I'm primary" cue */
  .plmm__item--destinations > .plmm__split-trigger::after,
  .plmm__item--tools > .plmm__split-trigger::after,
  .plmm__item--routemaker > .plmm__split-trigger::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    background: var(--plmm-accent);
    border-radius: 2px;
    transform-origin: left center;
    transform: scaleX(0.35);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background-color 0.15s ease;
  }

  .plmm__item--destinations > .plmm__split-trigger:hover::after,
  .plmm__item--tools > .plmm__split-trigger:hover::after,
  .plmm__item--routemaker > .plmm__split-trigger:hover::after,
  .plmm__item--destinations.plmm__item--open > .plmm__split-trigger::after,
  .plmm__item--tools.plmm__item--open > .plmm__split-trigger::after,
  .plmm__item--routemaker.plmm__item--open > .plmm__split-trigger::after {
    transform: scaleX(1);
  }

  /* Primary caret slightly thicker for matching weight */
  .plmm__item--destinations > .plmm__split-trigger .plmm__caret,
  .plmm__item--tools > .plmm__split-trigger .plmm__caret,
  .plmm__item--routemaker > .plmm__split-trigger .plmm__caret {
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }

  /* Secondary items: lighter, no underline */
  .plmm__item--page > .plmm__link,
  .plmm__item--page-mega > .plmm__split-trigger > .plmm__trigger,
  .plmm__item--page-mega > .plmm__split-trigger > .plmm__trigger-link {
    font-weight: 600;
    font-size: 16px;
    color: var(--plmm-teal);
  }
}

/* Split trigger: parent label is a real link + separate caret toggle button */
.plmm__split-trigger {
  display: flex;
  align-items: stretch;
}

.plmm__trigger-link {
  display: inline-flex;
  align-items: center;
  padding: 14px 6px 14px 16px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--plmm-teal);
  text-decoration: none;
  border-radius: var(--plmm-radius) 0 0 var(--plmm-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plmm__trigger-link:hover,
.plmm__trigger-link:focus-visible {
  background: var(--plmm-mint);
  color: var(--plmm-teal-dark);
  outline: none;
}

.plmm__trigger--caret {
  padding: 14px 12px 14px 4px;
  border-radius: 0 var(--plmm-radius) var(--plmm-radius) 0;
}

.plmm__item--page-mega.plmm__item--open .plmm__trigger-link,
.plmm__item--page-mega:hover .plmm__trigger-link {
  background: var(--plmm-mint);
  color: var(--plmm-teal-dark);
}

@media (max-width: 1023px) {
  /* On mobile, split trigger fills full width with link taking most space */
  .plmm__split-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .plmm__trigger-link {
    flex: 1 1 auto;
    padding: 18px 8px 18px 12px;
    font-size: 18px;
    border-radius: 0;
  }
  .plmm__trigger--caret {
    flex: 0 0 auto;
    padding: 18px 16px;
    border-radius: 0;
  }
}

/* Featured stack — wraps 1 or 2 tiles */
.plmm__featured-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1024px) {
  .plmm__featured-stack--multi .plmm__featured {
    padding: 18px 20px;
  }
  .plmm__featured-stack--multi .plmm__featured-title {
    font-size: 16px;
  }
  .plmm__featured-stack--multi .plmm__featured-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }
  .plmm__featured-stack--multi .plmm__featured-icon svg {
    width: 22px;
    height: 22px;
  }
  .plmm__featured-stack--multi .plmm__featured-desc {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .plmm__featured-stack--multi .plmm__featured-cta {
    font-size: 13px;
  }
}

/* ============================================================
   v0.5 — Visual upgrade layer (frontend-design)
   ============================================================ */

/* === Country flag badges (SVG, lipis/flag-icons, MIT) === */
.plmm__country {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.plmm__country-flag {
  flex: 0 0 auto;
  width: 26px;
  height: 19.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 61, 0.12);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plmm__country-flag svg,
.plmm__country-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plmm__country-name {
  flex: 1 1 auto;
  min-width: 0;
}

.plmm__country:hover .plmm__country-flag,
.plmm__country:focus-visible .plmm__country-flag {
  transform: scale(1.12);
}

/* === Destinations flag variant: circle badge (matches the pre-existing ISO-badge shape) === */
.plmm__country-flag--circle {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 61, 0.12), 0 1px 2px rgba(13, 58, 61, 0.12);
}

.plmm__country-flag--circle svg {
  /* object-fit does not apply to an inline <svg>. Size the 4:3 artwork so it
     covers the round 1:1 badge and let the parent overflow:hidden crop it:
     133.34% of a 26px badge = 34.67px wide x 26px tall = exact 4:3 cover. */
  width: 133.34%;
  height: 100%;
  margin-left: -16.67%;
  object-fit: unset;
}

.plmm__country-flag--circle img {
  /* img supports object-fit natively; simple 1:1 cover, no manual % hack needed */
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-left: 0;
}

@media (min-width: 1024px) {
  .plmm__country {
    background: #fafbfb;
    border: 1px solid #eef3f1;
  }

  .plmm__country:hover,
  .plmm__country:focus-visible {
    background: #fff;
    border-color: var(--plmm-teal);
    color: var(--plmm-teal-dark);
    box-shadow: 0 10px 20px -12px rgba(13, 58, 61, 0.25);
  }
}

/* === Region title — editorial style with count === */
.plmm__region-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.plmm__region-meta {
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--plmm-accent);
  font-style: italic;
}

/* === Filter input (type-ahead search in Destinations) === */
.plmm__filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7faf9;
  border: 1px solid #e1e8e6;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 22px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.plmm__filter:focus-within {
  background: #fff;
  border-color: var(--plmm-teal);
  box-shadow: 0 0 0 3px rgba(18, 79, 83, 0.08);
}

.plmm__filter-icon {
  color: #7a8a8a;
  flex: 0 0 auto;
}

.plmm__filter-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  color: var(--plmm-teal-dark);
  outline: none;
  min-width: 0;
}

.plmm__filter-input::placeholder {
  color: #8a9a9a;
}

.plmm__filter-clear {
  flex: 0 0 auto;
  background: var(--plmm-mint);
  border: 0;
  color: var(--plmm-teal);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.plmm__filter-clear[hidden] { display: none; }
.plmm__filter-clear:hover { background: var(--plmm-teal); color: #fff; transform: rotate(90deg); }

.plmm__country-item[data-plmm-hidden="1"] { display: none; }

.plmm__filter-empty {
  padding: 24px 4px;
  text-align: center;
  color: var(--plmm-muted);
  font-family: 'Karla', sans-serif;
  font-size: 14px;
}
.plmm__filter-empty[hidden] { display: none; }

/* === Featured tile === */
.plmm__panel-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plmm__panel-main {
  min-width: 0;
}

.plmm__featured {
  position: relative;
  background: linear-gradient(155deg, #FCEACF 0%, #fbf3e1 60%, #FFFFFF 100%);
  border: 1px solid rgba(242, 155, 7, 0.18);
  border-radius: 14px;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
}

.plmm__featured::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(242, 155, 7, 0.18), transparent 60%);
  z-index: -1;
}

.plmm__featured-eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plmm-accent);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.plmm__featured-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 12px;
  color: var(--plmm-teal);
  margin-bottom: 12px;
  box-shadow: 0 6px 16px -8px rgba(13, 58, 61, 0.2);
}

.plmm__featured-icon svg {
  width: 28px;
  height: 28px;
}

.plmm__featured-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--plmm-teal-dark);
  margin: 0 0 8px;
}

.plmm__featured-desc {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #3a4848;
  margin: 0 0 16px;
}

.plmm__featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--plmm-teal-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--plmm-accent);
  padding-bottom: 2px;
  transition: gap 0.2s ease, color 0.15s ease;
}

.plmm__featured-cta:hover {
  gap: 10px;
  color: var(--plmm-accent);
}

/* Desktop: 2-column with featured on the right */
@media (min-width: 1024px) {
  .plmm__panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
  }

  .plmm__panel:not(.plmm__panel--has-featured) .plmm__panel-body {
    grid-template-columns: 1fr;
  }

  .plmm__panel--has-featured.plmm__panel--destinations {
    width: min(1180px, calc(100vw - 32px));
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .plmm__panel--has-featured .plmm__panel-body {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 24px;
  }
}

/* === Sticky header + slim variant === */
.plmm-header[data-plmm-sticky="1"] {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.plmm-header[data-plmm-sticky="1"].plmm-header--slim {
  box-shadow: 0 4px 16px -8px rgba(13, 58, 61, 0.15);
}

/* The frosted look (translucent bg + blur) is desktop-only. On mobile it must
   stay fully opaque (base #fff) or page content bleeds through the header, and
   backdrop-filter creates a containing block that re-anchors the fixed drawer
   after scrolling (the drawer would open at the wrong place). Keep both here. */
@media (min-width: 1024px) {
  .plmm-header[data-plmm-sticky="1"].plmm-header--slim {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
  }
}

/* NOTE: do NOT scroll-lock via `html.plmm-drawer-open { overflow: hidden }`.
   Setting overflow:hidden on the scroll root kills `position:sticky` on the
   header (it falls back to its in-flow spot at document top, i.e. off-screen
   when scrolled), which made the menubar vanish behind the open drawer. The
   fixed drawer (inset:0) already covers the page, so no scroll-lock is needed;
   overscroll-behavior:contain on the drawer stops scroll chaining. */

.plmm-header__inner {
  transition: padding 0.2s ease;
}

.plmm-header__logo img {
  transition: height 0.2s ease;
}

@media (min-width: 1024px) {
  .plmm-header--slim .plmm-header__inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .plmm-header--slim .plmm-header__logo img {
    height: 30px;
  }
  .plmm-header--slim .plmm__trigger,
  .plmm-header--slim .plmm__link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* === Stagger animation: country chips fade-in on panel open === */
@media (min-width: 1024px) {
  .plmm__item--mega.plmm__item--open .plmm__country-item,
  .plmm__item--mega.plmm__item--open .plmm__tools-grid > li {
    animation: plmmFadeUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--plmm-idx, 0) * 14ms + 40ms);
  }

  .plmm__item--mega.plmm__item--open .plmm__featured {
    animation: plmmFadeIn 0.4s ease backwards;
    animation-delay: 200ms;
  }
}

@keyframes plmmFadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes plmmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plmm__item--mega.plmm__item--open .plmm__country-item,
  .plmm__item--mega.plmm__item--open .plmm__tools-grid > li,
  .plmm__item--mega.plmm__item--open .plmm__featured {
    animation: none;
  }
}

/* === Atmosphere: subtle dot pattern in panel background === */
@media (min-width: 1024px) {
  .plmm__panel--destinations,
  .plmm__panel--tools {
    background-image:
      radial-gradient(circle at 1px 1px, rgba(18, 79, 83, 0.04) 1px, transparent 0);
    background-size: 22px 22px;
    background-position: 0 0;
  }
}

/* === Mobile adaptation for new components === */
@media (max-width: 1023px) {
  .plmm__featured {
    margin-top: 16px;
  }

  .plmm__filter {
    margin-bottom: 16px;
  }

  .plmm__country-flag {
    width: 22px;
    height: 16.5px;
  }

  .plmm__country-flag--circle {
    width: 22px;
    height: 22px;
    border-radius: 999px;
  }

  /* On mobile: country chips stay mint-pill, flag SVG shown inline */
  .plmm__country {
    background: var(--plmm-mint);
    border: 1px solid transparent;
    text-align: left;
    justify-content: flex-start;
  }
}

/* ===========================================================
   JS-disabled fallback (progressive enhancement)
   Goal: keep the JS-on visual layout. Header stays compact at
   top, panels open in their normal dropdown position on
   :hover / :focus-within. Page content underneath remains
   visible — panels are still position:absolute so they don't
   push the layout. Mobile (no drawer JS) falls back to a
   stacked sitemap so all links remain reachable.
   =========================================================== */
@media (scripting: none) {
  /* Search & filter need JS — hide everywhere. */
  .plmm-header__search-toggle,
  .plmm-header__search-panel,
  .plmm__filter,
  .plmm__filter-empty { display: none !important; }

  /* --- Desktop (>= 1024px): topbar + hover/focus dropdowns --- */
  @media (min-width: 1024px) {
    /* Mobile drawer button irrelevant on desktop. */
    .plmm__toggle { display: none; }

    /* List stays as horizontal topbar regardless of toggle state. */
    .plmm__list,
    .plmm__toggle[aria-expanded="false"] + .plmm__list {
      display: flex !important;
      flex-direction: row;
      position: static;
      inset: auto;
      background: transparent;
      padding: 0;
      overflow: visible;
      border-top: 0;
    }

    /* Open mega panels on hover and keyboard focus. Panels keep
       their absolute positioning so the rest of the page stays
       visible — the panel overlays content, just like JS-on. */
    .plmm__item--mega:hover > .plmm__panel,
    .plmm__item--mega:focus-within > .plmm__panel,
    .plmm__item--page-mega:hover > .plmm__panel,
    .plmm__item--page-mega:focus-within > .plmm__panel {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
  }

  /* --- Mobile (< 1024px): stacked fallback. No JS drawer, so
     show the list inline under the header and unfold every
     panel. Crawlers + tap-only users without JS reach all links. */
  @media (max-width: 1023px) {
    .plmm__toggle { display: none; }
    .plmm__caret { display: none; }

    .plmm__list,
    .plmm__toggle[aria-expanded="false"] + .plmm__list {
      display: flex !important;
      flex-direction: column;
      position: static !important;
      inset: auto;
      background: transparent;
      padding: 12px 16px 24px;
      overflow: visible;
      border-top: 1px solid var(--plmm-line);
    }

    .plmm__item { border-bottom: 1px solid var(--plmm-line); width: 100%; }
    .plmm__item:last-child { border-bottom: 0; }

    .plmm__trigger {
      width: 100%;
      justify-content: flex-start;
      padding: 14px 0 6px;
      font-size: 16px;
      font-weight: 700;
      background: transparent;
      border: 0;
      cursor: default;
      color: var(--plmm-teal);
    }

    .plmm__item--mega .plmm__panel,
    .plmm__item--page-mega .plmm__panel,
    .plmm__panel--destinations,
    .plmm__panel--tools,
    .plmm__panel--pages {
      display: block !important;
      position: static !important;
      inset: auto !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      box-shadow: none;
      border: 0;
      padding: 0 0 12px;
      background: transparent;
      max-height: none;
      overflow: visible;
    }

    .plmm__panel-body,
    .plmm__panel-main,
    .plmm__regions { display: block !important; }

    .plmm__region { margin-bottom: 10px; }

    .plmm__countries,
    .plmm__tools {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .plmm__featured { display: none !important; }
  }
}

/* ============================================================
   v0.12 — Primary nav: force the intended text + orange-underline
   look (same as packlightly.nl) and add Travel Marketplace as a
   third primary item in that same style.
   Why !important: on some locales Astra's global <button> styling
   wins over the plugin's v0.6 rules and turns Destinations/Travel
   Tools into a teal pill, with an unreadable orange-bg + black-text
   hover. These rules beat Astra so the nav is always transparent
   bg + dark-teal text + a growing orange underline. Text stays
   dark-teal on white in every state, so it is always readable.
   ============================================================ */
@media (min-width: 1024px) {
  .plmm-header .plmm__item--destinations > .plmm__trigger,
  .plmm-header .plmm__item--tools > .plmm__trigger,
  .plmm-header .plmm__item--marketplace > .plmm__link {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--plmm-teal-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em;
    padding: 14px 18px 12px !important;
  }

  /* Permanent orange accent underline (grows on hover/open) */
  .plmm-header .plmm__item--destinations > .plmm__trigger::after,
  .plmm-header .plmm__item--tools > .plmm__trigger::after,
  .plmm-header .plmm__item--marketplace > .plmm__link::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    background: var(--plmm-accent);
    border-radius: 2px;
    transform-origin: left center;
    transform: scaleX(0.35);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  /* Hover + open: stay transparent (kill Astra's filled hover),
     keep dark-teal text (readable), grow the underline. */
  .plmm-header .plmm__item--destinations > .plmm__trigger:hover,
  .plmm-header .plmm__item--destinations > .plmm__trigger:focus-visible,
  .plmm-header .plmm__item--destinations.plmm__item--open > .plmm__trigger,
  .plmm-header .plmm__item--tools > .plmm__trigger:hover,
  .plmm-header .plmm__item--tools > .plmm__trigger:focus-visible,
  .plmm-header .plmm__item--tools.plmm__item--open > .plmm__trigger,
  .plmm-header .plmm__item--marketplace > .plmm__link:hover,
  .plmm-header .plmm__item--marketplace > .plmm__link:focus-visible {
    background: transparent !important;
    color: var(--plmm-teal-dark) !important;
  }

  .plmm-header .plmm__item--destinations > .plmm__trigger:hover::after,
  .plmm-header .plmm__item--destinations > .plmm__trigger:focus-visible::after,
  .plmm-header .plmm__item--destinations.plmm__item--open > .plmm__trigger::after,
  .plmm-header .plmm__item--tools > .plmm__trigger:hover::after,
  .plmm-header .plmm__item--tools > .plmm__trigger:focus-visible::after,
  .plmm-header .plmm__item--tools.plmm__item--open > .plmm__trigger::after,
  .plmm-header .plmm__item--marketplace > .plmm__link:hover::after,
  .plmm-header .plmm__item--marketplace > .plmm__link:focus-visible::after {
    transform: scaleX(1) !important;
  }

  /* Caret matches the dark-teal text on the transparent nav */
  .plmm-header .plmm__item--destinations > .plmm__trigger .plmm__caret,
  .plmm-header .plmm__item--tools > .plmm__trigger .plmm__caret {
    border-color: var(--plmm-teal-dark) !important;
  }
}

/* ============================================================
   v0.12.4 — Site-wide mobile overflow guard (page content)
   ------------------------------------------------------------
   The tools-overview timeline (.tov / .pl-timeline) renders its
   .tw tool rows as a flex row with a non-shrinking right side
   (.tw-r, flex-shrink:0) and a non-wrapping tool name
   (.tw-n, white-space:nowrap). In the timeline's narrow left-
   indented column that row cannot fit at 375px, so it pushes the
   whole document past the viewport and the entire page (incl. the
   sticky header) scrolls horizontally. menu.css loads on every
   page of all 5 domains, so the fix lives here once. Scoped under
   .entry-content + !important to beat the page's inline <style>
   (which loads after this file and otherwise wins on source order).
   Verified at 375px: document scrollWidth 471 -> 360 (clean).
   ============================================================ */
@media (max-width: 600px) {
  .entry-content .pl-timeline { padding-left: 2.25rem !important; }
  .entry-content .pl-tl-stage,
  .entry-content .pl-tl-body,
  .entry-content .tg,
  .entry-content .tw,
  .entry-content .tw-r { min-width: 0 !important; }
  .entry-content .pl-tl-body,
  .entry-content .tg,
  .entry-content .tw { max-width: 100% !important; }
  .entry-content .tw {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .entry-content .tw-r {
    flex-shrink: 1 !important;
    flex-wrap: wrap !important;
  }
  .entry-content .tw-n {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
   v0.12.5 — Mobile drawer: stop the split-trigger from overflowing
   ------------------------------------------------------------
   "Sobre nosotros" style page items use .plmm__split-trigger
   (a flex row: a .plmm__trigger-link + a small .plmm__trigger--caret
   <button>). The generic mobile rule `.plmm__trigger, .plmm__link
   { width: 100% }` also matches that caret <button> and stretches it
   to full width, so the row becomes ~link-width + 100% and runs
   ~100px past the drawer. Because .plmm__list is overflow-y:auto
   (which forces overflow-x to compute to auto), the open drawer then
   scrolls sideways. Keep the caret compact and let the link flex.
   Verified at 375px: drawer inner scrollWidth 462 -> 360 (fits).
   ============================================================ */
@media (max-width: 1023px) {
  .plmm__split-trigger { display: flex; align-items: stretch; }
  .plmm__split-trigger .plmm__trigger-link { flex: 1 1 auto; min-width: 0; }
  .plmm__split-trigger .plmm__trigger--caret { flex: 0 0 auto; width: auto; }

  /* Guard: a vertical drawer must never scroll horizontally. */
  .plmm__list { overflow-x: hidden; }
}

/* ============================================================
   v0.13 — Trip Studio nav item (app.pack-lightly.com) + mobile
   primary-item highlighting
   ============================================================ */

/* --- Desktop: compact panel anchored under the Trip Studio trigger.
   Same panel frame (white, border, shadow) as Destinations/Travel Tools, with a
   cream featured-tile inside so it stays consistent but still stands out. --- */
@media (min-width: 1024px) {
  .plmm__item--routemaker {
    position: relative; /* anchor the narrow panel to the item, not full-width */
  }

  .plmm__panel--routemaker {
    left: auto;
    right: 0;
    transform: translateY(4px);
    width: min(340px, calc(100vw - 32px));
    text-align: left;
  }

  .plmm__item--routemaker.plmm__item--open > .plmm__panel--routemaker {
    transform: translateY(0);
  }

  .plmm__panel--routemaker .plmm__panel-body {
    display: block;
  }
}

/* --- Trip Studio featured tile (shared desktop + mobile) — mirrors
   .plmm__featured styling so it reads as part of the same family. --- */
.plmm__routemaker {
  position: relative;
  background: linear-gradient(155deg, #FCEACF 0%, #fbf3e1 60%, #FFFFFF 100%);
  border: 1px solid rgba(242, 155, 7, 0.18);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
}

.plmm__routemaker::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(242, 155, 7, 0.18), transparent 60%);
  z-index: -1;
}

.plmm__routemaker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.plmm__routemaker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 12px;
  color: var(--plmm-teal);
  box-shadow: 0 6px 16px -8px rgba(13, 58, 61, 0.2);
}

.plmm__routemaker-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--plmm-teal);
  fill: none;
}

.plmm__routemaker-eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plmm-accent);
  margin-bottom: 2px;
}

.plmm__routemaker-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--plmm-teal-dark);
  margin: 0;
}

.plmm__routemaker-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plmm__routemaker-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Karla', sans-serif;
  font-size: 13.5px;
  line-height: 1.35;
  color: #2f3d3d;
}

.plmm__routemaker-check {
  flex: 0 0 16px;
  color: var(--plmm-accent);
}

.plmm__routemaker-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--plmm-teal-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--plmm-accent);
  padding-bottom: 2px;
  transition: gap 0.2s ease, color 0.15s ease;
}

.plmm__routemaker-cta:hover {
  gap: 10px;
  color: var(--plmm-accent);
}

/* --- Mobile: highlight the three primary items (Destinations, Travel Tools,
   Trip Studio) so they lead over Blog/About, mirroring the desktop cue with an
   orange accent bar instead of a filled pill (see lessons-learned #20). --- */
@media (max-width: 1023px) {
  .plmm__item--destinations > .plmm__split-trigger,
  .plmm__item--tools > .plmm__split-trigger,
  .plmm__item--routemaker > .plmm__split-trigger {
    border-left: 3px solid var(--plmm-accent);
  }

  .plmm__item--destinations > .plmm__split-trigger > .plmm__trigger-link,
  .plmm__item--tools > .plmm__split-trigger > .plmm__trigger-link,
  .plmm__item--routemaker > .plmm__split-trigger > .plmm__trigger-link {
    font-weight: 800 !important;
    color: var(--plmm-teal-dark) !important;
    font-size: 18px;
    padding: 18px 8px 18px 17px;
  }

  .plmm__item--destinations > .plmm__split-trigger > .plmm__trigger--caret,
  .plmm__item--tools > .plmm__split-trigger > .plmm__trigger--caret,
  .plmm__item--routemaker > .plmm__split-trigger > .plmm__trigger--caret {
    padding: 18px 20px 18px 8px;
    color: var(--plmm-teal-dark);
  }

  /* Featured tile sits inside the accordion with drawer-edge margins. */
  .plmm__panel--routemaker { padding: 0 20px 14px; }
  .plmm__panel--routemaker .plmm__panel-body { display: block; }
}

/* --- Site-wide overflow guard: Astra blog/archive listings ---
   On the blog/archive/search listing the Astra `.ast-row` carries a negative
   horizontal gutter (margin: 0 -14.59px) but the `main.site-main` parent has no
   padding to absorb it, so at mobile the row bleeds ~7px past each edge and the
   whole document scrolls sideways (measured live: scrollWidth 382 > 375). The
   column children keep their own padding, so zeroing the row's negative margin
   removes the leak without losing the gutter. menu.css loads on every page.
   Verified cause live at 375px (blog archive). */
@media (max-width: 600px) {
  body.blog .site-main .ast-row,
  body.archive .site-main .ast-row,
  body.search .site-main .ast-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}