/* ============================================================
   Global content typography — applies to every page/post body.
   Scoped to .article-wrapper so it lifts all prose without
   touching the header/footer or the custom components (which
   carry their own classes and win on specificity).
   ============================================================ */

.article-wrapper { color: #3f3a30; font-size: 16px; line-height: 1.8; }

/* Headings */
.article-wrapper .content-wrapper h2,
.stobi-history h2 {
  font-size: 1.7rem; font-weight: 700; color: #23252f; line-height: 1.25;
  margin: 1.8rem 0 0.9rem; padding-bottom: 8px; position: relative;
}
.article-wrapper .content-wrapper h2::after,
.stobi-history h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px;
  background: var(--stobi-orange, #e45635); border-radius: 2px;
}
.article-wrapper .content-wrapper h3 { font-size: 1.2rem; font-weight: 600; color: var(--stobi-orange, #e45635); margin: 1.5rem 0 0.6rem; }
.article-wrapper .content-wrapper h4 { font-size: 1.02rem; font-weight: 600; color: #23252f; margin: 1.2rem 0 0.5rem; }

/* Body */
.article-wrapper .content-wrapper p { margin: 0 0 1.05rem; }
.article-wrapper .content-wrapper > p:first-of-type { font-size: 1.08rem; color: #5a5348; }
.article-wrapper .content-wrapper strong { font-weight: 600; color: #2b2b2b; }
.article-wrapper .content-wrapper a { color: var(--stobi-orange, #e45635); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.article-wrapper .content-wrapper a:hover { border-bottom-color: var(--stobi-orange, #e45635); }

/* Lists */
.article-wrapper .content-wrapper ul,
.article-wrapper .content-wrapper ol { margin: 0 0 1.05rem; padding-left: 0; }
.article-wrapper .content-wrapper ul { list-style: none; }
.article-wrapper .content-wrapper ul > li { position: relative; padding: 4px 0 4px 22px; }
.article-wrapper .content-wrapper ul > li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--stobi-orange, #e45635); }
.article-wrapper .content-wrapper ol { padding-left: 22px; }
.article-wrapper .content-wrapper ol > li { padding: 4px 0; }

/* Blockquote */
.article-wrapper .content-wrapper blockquote {
  border-left: 3px solid var(--stobi-orange, #e45635); background: #faf7f1;
  margin: 1.4rem 0; padding: 14px 20px; border-radius: 0 8px 8px 0;
  font-style: italic; color: #4a4436;
}

/* Images in content */
.article-wrapper .content-wrapper img { max-width: 100%; height: auto; border-radius: 10px; }
.article-wrapper .content-wrapper p > img,
.article-wrapper .content-wrapper > img { margin: 1rem 0; }

/* Horizontal rule */
.article-wrapper .content-wrapper hr { border: 0; border-top: 1px solid #ece5d8; margin: 2rem 0; }

/* Reusable callout for important info: <div class="stobi-note">…</div> */
.article-wrapper .stobi-note {
  background: #fbf0d9; border: 1px solid #f0d9a3; border-radius: 10px;
  padding: 12px 16px; margin: 1.2rem 0; color: #7a5a12; font-size: 0.95rem; line-height: 1.6;
}
.article-wrapper .stobi-note strong { color: #7a5a12; }

/* Reusable key-facts row: <div class="stobi-facts"><div><span>label</span><b>value</b></div>…</div> */
.stobi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1.2rem 0; }
.stobi-facts > div { background: #fff; border: 1px solid #ece5d8; border-radius: 10px; padding: 11px 14px; }
.stobi-facts > div.hl { background: #23252f; }
.stobi-facts span { display: block; font-size: 11px; color: #8a7c63; }
.stobi-facts > div.hl span { color: #e0a58c; }
.stobi-facts b { font-size: 15px; color: #23252f; font-weight: 600; }
.stobi-facts > div.hl b { color: #fff; }

/* CTA button in content: <a class="stobi-cta" …> */
.article-wrapper .content-wrapper a.stobi-cta {
  display: inline-block; background: var(--stobi-orange, #e45635); color: #fff; border: 0;
  padding: 12px 26px; border-radius: 8px; font-weight: 600; text-decoration: none; margin: 4px 8px 4px 0;
  transition: filter .15s;
}
.article-wrapper .content-wrapper a.stobi-cta:hover { filter: brightness(.92); border-bottom: 0; }
.article-wrapper .content-wrapper a.stobi-cta.ghost { background: #fff; color: #23252f; border: 1px solid #d9d2c4; }

/* Destination cards (opportunity posts) */
.article-wrapper .content-wrapper .dest-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:1rem 0 1.4rem; }
.dest-grid > div { background:#fff; border:1px solid #ece5d8; border-radius:10px; padding:14px 16px; }
.dest-grid b { font-size:15px; color:#23252f; }
.dest-grid .loc { font-size:12.5px; color:#8a7c63; }
.dest-grid .date { font-size:13px; color:var(--stobi-orange,#e45635); margin-top:5px; font-weight:600; }

/* Inner-page hero — constrain the title to the content width (was edge-to-edge) */
section.hero-inner-section { height: 420px; }
section.hero-inner-section .hero-wrapper { justify-content: flex-start !important; }
section.hero-inner-section .hero-wrapper h1 {
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px; box-sizing: border-box;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.2;
}
@media (max-width: 900px){ section.hero-inner-section { height: 320px; } }

/* Smart Slider hero — authentic Stobi aerial backdrop behind the (transparent)
   slides, with a dark overlay so the white heading/subtitle stay legible. A
   per-slide background image set in the visual builder renders ON TOP of this. */
.hero-smartslider {
  background:
    linear-gradient(180deg, rgba(16,17,43,.62) 0%, rgba(20,22,40,.72) 100%),
    url('/wp-content/themes/stobi/assets/images/hero-slider.png');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.hero-smartslider .n2-ss-slide-background,
.hero-smartslider .n2-ss-slide-background-color { background: transparent !important; }

/* Header: ONE fixed dimension — identical whether scrolled or not, zero transition.
   The logo text was 20px at top but the scroll state shrank it to 16px (jarring
   glitch). Pin BOTH states to the same values so nothing ever changes on scroll. */
header .navbar-brand img,
header.header-scroll .navbar-brand img { height: 60px !important; }
header .navbar-brand .logo-text p,
header.header-scroll .navbar-brand .logo-text p,
header.header-scroll .navbar-brand p { font-size: 20px !important; line-height: 30px !important; }
header, header .navbar, header .navbar-brand, header .navbar-brand *,
header.header-scroll, header.header-scroll * { transition: none !important; }
/* Mobile: shrink the brand so it doesn't collide with the hamburger (the 20px
   pin above overrides the theme's responsive sizes, so restore them here). */
@media (max-width: 991px) {
  header .navbar-brand img,
  header.header-scroll .navbar-brand img { height: 46px !important; }
  header .navbar-brand .logo-text p,
  header.header-scroll .navbar-brand .logo-text p,
  header.header-scroll .navbar-brand p { font-size: 14px !important; line-height: 19px !important; }
}
@media (max-width: 420px) {
  header .navbar-brand img,
  header.header-scroll .navbar-brand img { height: 38px !important; }
  header .navbar-brand .logo-text p,
  header.header-scroll .navbar-brand .logo-text p,
  header.header-scroll .navbar-brand p { font-size: 12px !important; line-height: 16px !important; }
}

/* Locations / publications category tabs — on mobile the row is centered and
   overflows, clipping the first & last tab. Make it horizontally scrollable
   with edge padding so every tab is reachable. */
@media (max-width: 767px) {
  .location-categories, .pub-categories { padding: 14px 0 !important; }
  .location-categories-wrapper, .pub-categories-wrapper {
    justify-content: flex-start !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .location-categories-wrapper ul, .pub-categories-wrapper ul {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 1rem;
    padding: 0 16px;
  }
  .location-categories-wrapper ul li, .pub-categories-wrapper ul li { flex: 0 0 auto; }
}