/* ── Page Meta Bar — Compact above-content redesign ──
   Overrides the existing author byline, affiliate disclosure,
   and action bar to be tighter and better spaced.
   Loaded site-wide via head.html.
   ──────────────────────────────────────────────────── */

/* ── 1. Author Byline Box — remove heavy borders/bg ── */
.top-content > div[style*="dashed"] {
  border: none !important;
  background: none !important;
  padding: 8px 10px 2px !important;
  border-radius: 0 !important;
}

/* Smaller author photo */
.top-content > div[style*="dashed"] img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
}

/* Tighten the author row */
.top-content .small-10.small-offset-1.medium-6.medium-offset-3 {
  width: auto !important;
  margin-left: 0 !important;
  float: none !important;
  padding: 0 !important;
}
.top-content .small-5.text-right {
  width: auto !important;
  float: none !important;
  padding: 0 5px 0 0 !important;
  flex-shrink: 0;
}
.top-content .small-7 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}

/* Credentials / bio line — more subtle */
.top-content p.text15 {
  font-size: 13px !important;
  color: #888 !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
}
.top-content p.text15 .small90 {
  font-size: 13px !important;
  color: #888 !important;
}
.top-content p.text15 i.fa {
  display: none !important;
}

/* ── 2. Affiliate Disclosure — slimmer ── */
.affiliate-links {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
  margin-bottom: 4px !important;
}

/* ── 3. Action Bar — flexbox single row ── */
.wrapper-sides > .text-right.clearfix {
  display: flex !important;
  align-items: center;
  overflow: visible !important;
  gap: 8px;
  flex-wrap: wrap;
}
.wrapper-sides > .text-right.clearfix .pull-left {
  float: none !important;
  flex-shrink: 0;
  margin-right: auto;
}

/* ── 4. Remove dotted line after action bar ── */
.wrapper-sides > .text-right.clearfix + .dotted-line {
  display: none !important;
}

/* ── 5. Itinerary button — flows into action bar right ── */
.hg-itinerary-btn-wrap {
  margin: 0 !important;
  order: 10;
  flex-shrink: 0;
}
.hg-itinerary-btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  border-width: 1.5px !important;
}

/* ── 6. Share icons — compact row in action bar ── */
.pm-share {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.pm-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.8;
}
.pm-share-btn:hover {
  transform: scale(1.12);
  opacity: 1;
}
.pm-share-btn .fa {
  font-size: 13px;
  line-height: 1;
  color: #fff;
}
.pm-share-btn.pm-fb { background: #1877f2; }
.pm-share-btn.pm-pin { background: #e60023; }
.pm-share-btn.pm-x { background: #14171a; }
.pm-share-btn.pm-copy { background: #6c757d; }
.pm-share-btn.pm-copy.copied { background: #2d6a4f; }
.pm-share-btn.pm-native { background: linear-gradient(135deg, #1b4332, #2d6a4f); }

/* ── 7. Hide old social-share-bar (replaced by compact icons) ── */
.social-share-bar {
  display: none !important;
}

/* ── 8. Mobile adjustments ── */
@media only screen and (max-width: 640px) {
  .top-content > div[style*="dashed"] img {
    width: 38px !important;
    height: 38px !important;
  }
  .top-content p.text15 {
    font-size: 12px !important;
  }
  .affiliate-links {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  /* Tighter gaps on mobile */
  .wrapper-sides > .text-right.clearfix {
    gap: 6px;
  }
  .pm-share {
    gap: 4px;
  }
  .pm-share-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .pm-share-btn .fa {
    font-size: 12px;
  }
  .hg-itinerary-btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}