/* ============================================================
   OUTFITTER / ACCOMMODATION DETAIL — V4 restyle
   ------------------------------------------------------------
   The sidebar is plugin-generated Bootstrap markup, so this
   restyles it in place rather than forking the templates.

   SPECIFICITY NOTE — the reason every selector below carries
   the full ancestor chain:

     .single-outfitters article.outfitters .article-content
       .outfitter-booking .container .btn        (0,6,1)

   bootstrap/css/styles.min.css styles this sidebar at (0,4,1)
   to (0,6,2). A tidy `.outfitter-booking .btn` (0,2,0) loses
   to all of it, which is why the first attempt at this file
   changed nothing on screen. Matching the chain ties on
   specificity, and this sheet is enqueued last, so ties resolve
   here. Shortening these selectors will silently undo the
   restyle.
   ============================================================ */

/* ============================================================
   1. BOOKING CARD
   ============================================================ */

/* Outer wrapper: the theme floats it in the Bootstrap grid. */
.single-outfitters article.outfitters .article-content .outfitter-booking,
.single-accommodations article.accommodations .article-content .accommodation-booking {
  padding: 0;
  margin: 0 0 1.75rem;
  max-width: 100%;
  width: 100%;
}

/* The card itself. The theme paints a tiled topo-texture JPEG behind
   this; a flat brand ground reads cleaner behind type and costs a
   request less. */
.single-outfitters article.outfitters .article-content .outfitter-booking .container,
.single-accommodations article.accommodations .article-content .accommodation-booking .container {
  max-width: none;
  width: auto;
  margin: 0;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  background: var(--gz-dark-blue, #364b54);
  background-image: none;
  border-radius: 14px;
  color: #FAF6F0;
  box-shadow: 0 10px 30px rgba(20, 25, 28, 0.10);
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .booking-content,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .booking-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .booking-col,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .booking-col {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* "Ready to book?" was set at 2.7rem — larger than the page's own
   headings and louder than the buttons it introduces. It reads as a
   label for the actions, so it is sized like one. */
.single-outfitters article.outfitters .article-content .outfitter-booking .container .card-title,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .card-title {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(250, 246, 240, 0.62);
  margin: 0 0 0.35rem;
}

/* ---- Buttons ---- */
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Primary: book. */
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.link-outfitter,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.book-lodging {
  background: var(--gz-orange, #EB6B40);
  border-color: var(--gz-orange, #EB6B40);
  color: #fff;
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.link-outfitter:hover,
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.link-outfitter:focus-visible,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.book-lodging:hover,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.book-lodging:focus-visible {
  background: #FAF6F0;
  border-color: #FAF6F0;
  color: var(--gz-dark-blue, #364b54);
}

/* Secondary: call. Outlined, so the two actions are not equally loud. */
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.call-outfitter,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.call-lodging {
  background: transparent;
  border-color: rgba(250, 246, 240, 0.38);
  color: #FAF6F0;
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.call-outfitter:hover,
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn.call-outfitter:focus-visible,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.call-lodging:hover,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn.call-lodging:focus-visible {
  background: #FAF6F0;
  border-color: #FAF6F0;
  color: var(--gz-dark-blue, #364b54);
}

/* The domain / phone number beneath each label. The theme clipped this
   to one line with an ellipsis; a wrapped domain is more use than a
   truncated one. */
.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn small,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn small {
  display: block;
  width: 100%;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: inherit;
  opacity: 0.85;
  word-break: break-word;
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn small i,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn small i {
  margin-right: 0.35rem;
  opacity: 0.8;
}

.single-outfitters article.outfitters .article-content .outfitter-booking .container .btn:focus-visible,
.single-accommodations article.accommodations .article-content .accommodation-booking .container .btn:focus-visible {
  outline: 3px solid var(--gz-aqua, #42B5BF);
  outline-offset: 2px;
  box-shadow: none;
}

/* ============================================================
   2. META ROWS  (address, location, phone, website, details…)
   ============================================================ */
.single-outfitters article.outfitters .article-content .outfitter-meta,
.single-outfitters article.outfitters .article-content .outfitter-col .outfitter-meta {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1.05rem 0;
  border-top: 1px solid var(--gz-light-gray, #D5D2D2);
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--gz-black-gray, #3A3736);
}

.single-outfitters article.outfitters .article-content .outfitter-col .outfitter-meta:first-child,
.single-outfitters article.outfitters .article-content .outfitter-col .outfitter-booking + .outfitter-meta {
  border-top: 0;
  padding-top: 0;
}

/* The theme gave each label a 5px grey underline — a heavy rule under
   every field, six times over. A letter-spaced micro-label separates
   label from value on its own. */
.single-outfitters article.outfitters .article-content .outfitter-meta small,
.single-outfitters article.outfitters .article-content .outfitter-col .outfitter-meta small {
  display: block;
  border-bottom: 0;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-med-gray, #7B7C7F);
}

/* The plugin puts a <br> after the label, which is already a block. */
.single-outfitters article.outfitters .article-content .outfitter-meta small + br {
  display: none;
}

.single-outfitters article.outfitters .article-content .outfitter-meta span {
  display: block;
  color: var(--gz-dark-blue, #364b54);
  font-weight: 600;
}

.single-outfitters article.outfitters .article-content .outfitter-meta a {
  color: var(--gz-dark-blue, #364b54);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gz-light-gray, #D5D2D2);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.single-outfitters article.outfitters .article-content .outfitter-meta a:hover,
.single-outfitters article.outfitters .article-content .outfitter-meta a:focus-visible {
  color: var(--gz-orange, #EB6B40);
  border-bottom-color: currentColor;
}

.single-outfitters article.outfitters .article-content .outfitter-meta a i,
.single-outfitters article.outfitters .article-content .outfitter-meta a:hover i {
  margin-left: 0.3rem;
  font-size: 0.8em;
  color: var(--gz-orange, #EB6B40);
}

/* Several zones can be listed. */
.single-outfitters article.outfitters .article-content .outfitter-meta.outfitter-geographical-zone a + a {
  margin-left: 0.75rem;
}

/* Website is a long URL; let it wrap rather than clipping mid-domain. */
.single-outfitters article.outfitters .article-content .outfitter-meta.outfitter-website a {
  display: inline;
  width: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

/* Details is editor free-text, usually "Holes: 9<br>Par: 34<br>…". */
.single-outfitters article.outfitters .article-content .outfitter-meta.outfitter-details span {
  font-weight: 400;
  color: var(--gz-black-gray, #3A3736);
}

/* Amenities lists inside a meta block. */
.single-outfitters article.outfitters .article-content .outfitter-meta ul li span {
  border-bottom: 0;
  padding-bottom: 0;
  font-weight: 400;
}

.single-outfitters article.outfitters .article-content .outfitter-meta ul li {
  margin-bottom: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .single-outfitters article.outfitters .article-content .outfitter-booking .container .btn,
  .single-accommodations article.accommodations .article-content .accommodation-booking .container .btn,
  .single-outfitters article.outfitters .article-content .outfitter-meta a { transition: none !important; }
}

@media print {
  .single-outfitters article.outfitters .article-content .outfitter-booking .container,
  .single-accommodations article.accommodations .article-content .accommodation-booking .container {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc;
    box-shadow: none !important;
  }
  .single-outfitters article.outfitters .article-content .outfitter-booking .container .card-title,
  .single-accommodations article.accommodations .article-content .accommodation-booking .container .card-title { color: #000 !important; }
  .single-outfitters article.outfitters .article-content .outfitter-booking .container .btn,
  .single-accommodations article.accommodations .article-content .accommodation-booking .container .btn {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
}