/* Intare — packages styles. Loaded after style.css by intare_scripts(). */

/* =====================================================================
   Safari package archive: filter rail + result grid + FAQ
   =====================================================================
   style.css already carries a .pkg-card / .pkg-grid from the first pass,
   when the cards were text only. The archive now leads with a photograph,
   so the card rules below deliberately re-declare those properties rather
   than layering on top of them; anything not restated still comes from the
   main sheet. Nothing here is scoped to .page-shell, because the single
   template reuses .pkg-tax and must not inherit the archive card layout.
   ===================================================================== */

/* ---------- Shell ---------- */
.pkg-intro {
  max-width: 820px;
  margin: 0 0 42px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--body);
  font-weight: 300;
}

.pkg-layout {
  position: relative;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.pkg-results { min-width: 0; }

/* ---------- Filter rail ---------- */
.pkg-sidebar { min-width: 0; }

/* The rail is taller than most viewports, so it scrolls inside itself rather
   than pinning and hiding its own last facet below the fold. Sticky only works
   here because style.css clips html/body on the x axis instead of hiding them;
   `hidden` would make body a scroll container and nothing would ever pin. */
@media (min-width: 992px) {

  .pkg-sidebar {
    position: sticky;
    top: calc(var(--intare-hdr, 114px) + 18px);
    max-height: calc(100vh - var(--intare-hdr, 114px) - 38px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
    margin: -2px;
    scrollbar-width: thin;
  }

  .pkg-sidebar::-webkit-scrollbar { width: 7px; }
  .pkg-sidebar::-webkit-scrollbar-thumb { background: #e2ded7; border-radius: 7px; }
}

/* Off-screen but still focusable, so the drawer label works from the keyboard. */
.pkg-drawer-cb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.pkg-drawer-btn { display: none; }

.pkg-filters {
  background: #fff;
  border: 1px solid #eae6df;
  border-radius: 14px;
  padding: 24px 24px 20px;
  box-shadow: 0 10px 34px rgba(33, 54, 44, .06);
}

.pkg-filters-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eae6df;
}

.pkg-filters-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--green);
  margin: 0;
  line-height: 1.2;
}

.pkg-clear {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-dk);
  border-bottom: 1px solid rgba(189, 149, 92, .45);
  transition: color .25s, border-color .25s;
}

.pkg-clear:hover { color: var(--green); border-color: var(--green); }

.pkg-facet {
  border: 0;
  border-bottom: 1px solid #f0ece5;
  margin: 0;
  padding: 18px 0;
}

.pkg-facet:last-of-type { border-bottom: 0; padding-bottom: 6px; }

.pkg-facet-legend {
  display: block;
  width: 100%;
  float: none;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dk);
  line-height: 1.4;
}

.pkg-facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkg-facet-list.is-scrollable {
  max-height: 236px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
}

.pkg-facet-list.is-scrollable::-webkit-scrollbar { width: 6px; }
.pkg-facet-list.is-scrollable::-webkit-scrollbar-thumb { background: #e2ded7; border-radius: 6px; }

.pkg-facet-list li { margin: 0; }

.pkg-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 0;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.pkg-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.pkg-check-mark {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid #d8d2c7;
  border-radius: 4px;
  background: #fdfcfa;
  position: relative;
  transition: background .2s, border-color .2s;
}

.pkg-check-mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .18s, transform .18s;
}

.pkg-check input:checked ~ .pkg-check-mark {
  background: var(--gold);
  border-color: var(--gold-dk);
}

.pkg-check input:checked ~ .pkg-check-mark::after { opacity: 1; transform: rotate(45deg) scale(1); }

.pkg-check input:focus-visible ~ .pkg-check-mark {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}

.pkg-check-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--green);
  overflow-wrap: anywhere;
}

.pkg-check-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #9a978f;
  background: var(--stone);
  border-radius: 9999px;
  padding: 2px 8px;
  min-width: 26px;
  text-align: center;
}

.pkg-check:hover .pkg-check-text { color: var(--gold-dk); }
.pkg-check:hover .pkg-check-count { background: rgba(189, 149, 92, .15); color: var(--gold-dk); }

/* A checked option whose count has fallen to zero stays visible so it can be
   unchecked, but it must not read as an available choice. */
.pkg-check.is-empty .pkg-check-text { color: #a5a29a; }

.pkg-filters-actions { padding-top: 18px; border-top: 1px solid #eae6df; }

.pkg-apply {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: var(--green);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .3s, transform .3s;
}

.pkg-apply:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(189, 149, 92, .35); }

/* ---------- Result toolbar ---------- */
.pkg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(189, 149, 92, .3);
}

.pkg-count {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8b8b82;
}

.pkg-count b { color: var(--green); font-weight: 600; }

.pkg-sort { display: flex; align-items: center; gap: 10px; }

.pkg-sort-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-dk);
}

.pkg-sort-select {
  height: auto;
  padding: 9px 34px 9px 14px;
  border: 1px solid #e2ded7;
  border-radius: 8px;
  background: #fdfcfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239E7B45' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center/10px 7px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--green);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  max-width: 100%;
}

.pkg-sort-go,
.pkg-empty-btn {
  padding: 9px 18px;
  border: 1px solid var(--gold-dk);
  border-radius: 8px;
  background: transparent;
  color: var(--gold-dk);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s;
}

.pkg-sort-go:hover,
.pkg-empty-btn:hover { background: var(--gold-dk); color: var(--cream); }

/* ---------- Active filter chips ---------- */
.pkg-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 26px;
}

.pkg-chips-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a5a29a;
  margin-right: 2px;
}

.pkg-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--green);
  border: 1px solid var(--green);
  color: #F7F3E7;
  font-size: 12.5px;
  line-height: 1.3;
  transition: background .25s, border-color .25s;
}

.pkg-chip span { overflow-wrap: anywhere; }
.pkg-chip i { font-size: 11px; color: var(--gold-lt); }
.pkg-chip:hover { background: var(--gold-dk); border-color: var(--gold-dk); color: #fff; }
.pkg-chip:hover i { color: #fff; }

.pkg-chip-clear {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-dk);
  border-bottom: 1px solid rgba(189, 149, 92, .45);
  padding-bottom: 2px;
}

.pkg-chip-clear:hover { color: var(--green); border-color: var(--green); }

/* ---------- Cards ---------- */
.pkg-archive .pkg-grid,
.pkg-inline .pkg-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 30px;
  margin-bottom: 0;
}

.pkg-archive .pkg-card,
.pkg-inline .pkg-card {
  overflow: hidden;
  padding: 0;
  min-width: 0;
}

.pkg-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--green);
}

.pkg-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}

.pkg-card:hover .pkg-card-media img { transform: scale(1.05); }

.pkg-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 23, 18, .55), rgba(13, 23, 18, 0) 55%);
  pointer-events: none;
}

.pkg-archive .pkg-card-dest,
.pkg-archive .pkg-card-days,
.pkg-inline .pkg-card-dest,
.pkg-inline .pkg-card-days {
  position: absolute;
  z-index: 2;
  margin: 0;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 13px;
  backdrop-filter: blur(4px);
}

.pkg-archive .pkg-card-dest,
.pkg-inline .pkg-card-dest {
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 240, .92);
  color: var(--green);
}

.pkg-archive .pkg-card-days,
.pkg-inline .pkg-card-days {
  bottom: 14px;
  left: 14px;
  background: rgba(189, 149, 92, .92);
  color: var(--green);
}

.pkg-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
  min-width: 0;
}

.pkg-archive .pkg-card-title,
.pkg-inline .pkg-card-title { font-size: 20px; margin: 0 0 10px; }

.pkg-archive .pkg-card-excerpt,
.pkg-inline .pkg-card-excerpt { margin: 0 0 14px; font-size: 14.5px; }

.pkg-archive .pkg-card-where,
.pkg-inline .pkg-card-where {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8b8b82;
}

.pkg-card-where i { color: var(--gold); margin-top: 3px; flex: 0 0 auto; }
.pkg-card-where span { min-width: 0; overflow-wrap: anywhere; }

.pkg-archive .pkg-card-link,
.pkg-inline .pkg-card-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  border-bottom: 0;
  padding-bottom: 0;
}

.pkg-card-link i { font-size: 11px; transition: transform .3s; }
.pkg-card:hover .pkg-card-link i { transform: translateX(5px); }

/* ---------- Empty state ---------- */
.pkg-empty {
  text-align: center;
  padding: 60px 30px;
  background: var(--stone);
  border: 1px dashed #ded8ce;
  border-radius: 14px;
}

.pkg-empty > i { font-size: 34px; color: var(--gold); margin-bottom: 18px; display: block; }
.pkg-empty h2 { font-family: var(--serif); font-size: 26px; color: var(--green); margin: 0 0 12px; }

.pkg-empty p {
  max-width: 540px;
  margin: 0 auto 26px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--body);
  font-weight: 300;
}

.pkg-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.pkg-empty-btn { display: inline-block; text-decoration: none; }

.pkg-empty-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid rgba(33, 54, 44, .35);
  padding-bottom: 3px;
}

.pkg-empty-link:hover { color: var(--gold-dk); border-color: var(--gold-dk); }

/* ---------- Inline block: [intare_packages] inside an article ----------
   Same cards, dropped into the 820px prose column of a park guide. The rules
   below are only the ones .page-content would otherwise win outright — its
   generic img, p and a styling is written for body copy and would put a 34px
   margin and a gold underline through every card. */
.pkg-inline {
  margin: 56px 0;
  padding-top: 34px;
  border-top: 1px solid rgba(189, 149, 92, .35);
}

.pkg-inline .pkg-inline-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.25;
  color: var(--green);
  margin: 0 0 26px;
}

.pkg-inline .pkg-card-media,
.pkg-inline .pkg-card-title a,
.pkg-inline .pkg-card-link,
.pkg-inline .pkg-inline-link {
  text-decoration: none;
}

.pkg-inline .pkg-card-media img {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.pkg-inline .pkg-inline-more { margin: 28px 0 0; }

.pkg-inline .pkg-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dk);
  border-bottom: 1px solid rgba(189, 149, 92, .5);
  padding-bottom: 3px;
}

.pkg-inline .pkg-inline-link:hover { color: var(--green); border-color: var(--green); }
.pkg-inline .pkg-inline-link i { font-size: 11px; transition: transform .3s; }
.pkg-inline .pkg-inline-link:hover i { transform: translateX(5px); }

/* ---------- FAQ ---------- */
.pkg-faq {
  margin-top: 90px;
  padding-top: 70px;
  border-top: 1px solid rgba(189, 149, 92, .3);
}

.pkg-faq-head { max-width: 720px; margin: 0 0 38px; }

.pkg-faq-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--green);
  margin: 0 0 14px;
  line-height: 1.15;
}

.pkg-faq-sub { margin: 0; font-size: 16.5px; line-height: 1.8; color: var(--body); font-weight: 300; }

.pkg-faq-list {
  display: grid;
  gap: 12px;
  max-width: 900px;
}

.pkg-faq-item {
  background: #fff;
  border: 1px solid #eae6df;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(33, 54, 44, .05);
  overflow: hidden;
}

.pkg-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--green);
  transition: color .25s;
}

.pkg-faq-q::-webkit-details-marker { display: none; }
.pkg-faq-q:hover { color: var(--gold-dk); }
.pkg-faq-q:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: -3px; }

.pkg-faq-q span { min-width: 0; overflow-wrap: anywhere; }

.pkg-faq-q i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 13px;
  color: var(--gold-dk);
  transition: transform .3s;
}

.pkg-faq-item[open] .pkg-faq-q { color: var(--gold-dk); }
.pkg-faq-item[open] .pkg-faq-q i { transform: rotate(45deg); }

.pkg-faq-a { padding: 0 24px 22px; }

.pkg-faq-a p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--body);
  font-weight: 300;
  max-width: 68ch;
}

/* ---------- Progressive enhancement ---------- */
.pkg-js .pkg-sort-go { display: none; }

@media (min-width: 992px) {
  .pkg-js .pkg-apply { display: none; }
  .pkg-js .pkg-filters-actions { display: none; }
}

/* ---------- Tablet and below: the rail becomes a drawer ---------- */
@media (max-width: 991px) {

  .pkg-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pkg-drawer-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #eae6df;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(33, 54, 44, .05);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    cursor: pointer;
  }

  .pkg-drawer-btn > i:first-child { color: var(--gold-dk); font-size: 15px; }
  .pkg-drawer-btn-text { flex: 1 1 auto; text-align: left; }

  .pkg-drawer-badge {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--gold);
    color: var(--green);
    font-size: 11px;
    text-align: center;
  }

  .pkg-drawer-chev { flex: 0 0 auto; font-size: 12px; color: var(--gold-dk); transition: transform .3s; }

  .pkg-filters { display: none; margin-top: 12px; }

  .pkg-drawer-cb:checked ~ .pkg-sidebar .pkg-filters { display: block; }
  .pkg-drawer-cb:checked ~ .pkg-sidebar .pkg-drawer-chev { transform: rotate(180deg); }
  .pkg-drawer-cb:checked ~ .pkg-sidebar .pkg-drawer-btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

  .pkg-drawer-cb:focus-visible ~ .pkg-sidebar .pkg-drawer-btn {
    outline: 2px solid var(--gold-dk);
    outline-offset: 2px;
  }

  .pkg-facet-list.is-scrollable { max-height: 200px; }
  .pkg-faq { margin-top: 64px; padding-top: 52px; }
}

@media (max-width: 767px) {
  .pkg-archive .pkg-grid,
  .pkg-inline .pkg-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pkg-toolbar { align-items: flex-start; }
}

@media (max-width: 575px) {
  .pkg-intro { margin-bottom: 30px; font-size: 16px; }
  .pkg-filters { padding: 20px 18px 16px; }
  .pkg-sort { width: 100%; }
  .pkg-sort-select { flex: 1 1 auto; min-width: 0; }
  .pkg-empty { padding: 44px 20px; }
  .pkg-empty h2 { font-size: 22px; }
  .pkg-faq-q { padding: 17px 18px; font-size: 16px; }
  .pkg-faq-a { padding: 0 18px 20px; }
  .pkg-archive .pkg-card-body,
  .pkg-inline .pkg-card-body { padding: 20px 20px 22px; }
}