/* ============================================================
   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 shrink on scroll — proportions taken from the client's preview file
   (logo 38→28px, nav 16→13px, bar padding 12→6px). Applied on desktop only and
   eased, so it reads as one smooth step rather than the abrupt jump we had
   before. Mobile keeps a single fixed size (see the media queries below). */
/* Both states live in the same media query so the cascade is unambiguous -
   a global base rule with !important outranked the scrolled one across
   breakpoints and the header simply never shrank. */
@media (min-width: 992px) {
  header .navbar-brand img { height: 60px !important; }
  header .navbar-brand .logo-text p,
  header .navbar-brand p { font-size: 20px !important; line-height: 30px !important; }

  header.header-scroll .navbar-brand img { height: 44px !important; }
  header.header-scroll .navbar-brand .logo-text p,
  header.header-scroll .navbar-brand p { font-size: 15px !important; line-height: 22px !important; }
  header.header-scroll .navbar { padding-top: 4px; padding-bottom: 4px; }
  header.header-scroll .navbar-nav { gap: 16px; }
  header.header-scroll .navbar-nav .nav-link { font-size: 14px; }

  header .navbar { transition: padding .22s ease; }
  header .navbar-brand img { transition: height .22s ease; }
  header .navbar-brand .logo-text p,
  header .navbar-brand p { transition: font-size .22s ease, line-height .22s ease; }
  header .navbar-nav { transition: gap .22s ease; }
  header .navbar-nav .nav-link { transition: font-size .22s ease; }
}
@media (prefers-reduced-motion: reduce) {
  header .navbar, header .navbar-brand img, header .navbar-brand p,
  header .navbar-nav, header .navbar-nav .nav-link { 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; }
}

/* ---- Client feedback: inner-page layout polish ---- */
/* #1 Building/inner pages: let content breathe — padding under images & before footer */
.article-wrapper .content-wrapper { padding-bottom: 2.5rem; }
.article-wrapper .content-wrapper img { margin-bottom: 1.2rem; }
.container-fluid > .page-wrapper { margin-bottom: 3rem; }

/* #2 Orange sidebar strip: reaches the footer, and BOTH columns float on scroll.
   The strip is a flex item stretched to the row height; the menu inside it is
   sticky, so the orange never stops short of the footer (no white gap). */
.page-wrapper { display: flex; align-items: stretch; min-height: 70vh; }
.sidebar-menu {
  align-self: stretch;          /* strip runs the full height of the row */
  display: block;
  overflow: visible;            /* was `auto` - that breaks position:sticky */
}
.sidebar-menu .sidebar-wrapper,
.sidebar-menu > ul { position: sticky; top: 96px; width: 100%; }
/* pages with the right-hand "Услови за посетители" column set align-items:flex-start,
   which is what made the orange strip stop short of the footer - stretch it too */
.page-wrapper.has-terms { align-items: stretch; }
/* right-hand column floats as well */
.page-wrapper .terms-sidebar { align-self: flex-start; position: sticky; top: 96px; }
@media (max-width: 991px) {
  .page-wrapper { display: block; min-height: 0; }
  .sidebar-menu .sidebar-wrapper, .sidebar-menu > ul,
  .page-wrapper .visit-terms, .page-wrapper .terms-sidebar { position: static; }
}

/* 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; }
}

/* ---- Footer newsletter + lexicon link (client footer design) ---- */
.footer-newsletter { display: flex; gap: 8px; margin-top: 10px; max-width: 340px; }
.footer-newsletter input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.25); background: #fff; color: #23252f; font-size: 14px;
}
.footer-newsletter button {
  flex: 0 0 auto; padding: 10px 18px; border: 0; border-radius: 6px;
  background: var(--stobi-orange, #e45635); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
}
.footer-newsletter button:hover { filter: brightness(.93); }
.footer-newsletter-intro { margin-bottom: 4px; }
.footer-nl-msg { margin-top: 8px; font-size: 13px; color: #ffd9cd; }
footer .footer-widget h5.footer-lexicon { margin-top: 22px; }
footer .footer-widget h5.footer-lexicon a { color: #fff; text-decoration: none; }
footer .footer-widget h5.footer-lexicon a:hover { color: var(--stobi-orange, #e45635); }
@media (max-width: 560px) { .footer-newsletter { flex-direction: column; } }

/* ============================================================
   Footer — matched to the client's sent design (docs/Home/preview.html):
   background #16233a, Poppins headings 17px, Open Sans body 13px,
   4-column grid 260px/1fr/.8fr/1.3fr, copyright bar #0d1626.
   ============================================================ */
footer {
  background: #16233a !important;
  padding: 0 !important;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
}
footer .container { max-width: 1300px; width: 100%; }
footer .footer-widgets {
  display: grid !important;
  grid-template-columns: 260px minmax(0,1fr) minmax(0,0.8fr) minmax(0,1.3fr) !important;
  gap: 20px !important;
  align-items: start;
  padding: 48px 24px;
  margin: 0 auto;
}
/* app.css has `body * { font-family: Montserrat }`, which beats inheritance on
   every descendant - so the footer fonts must be set explicitly, not inherited. */
footer, footer p, footer a, footer li, footer span, footer div, footer input,
.copyright, .copyright p { font-family: 'Open Sans', sans-serif; }
footer h4, footer h5, footer .footer-newsletter button { font-family: 'Poppins', sans-serif; }

footer .footer-widgets .footer-widget { font-size: 13px; min-width: 0; }
footer .footer-widgets .footer-widget h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px; font-weight: 600; color: #fff;
  margin: 0 0 12px !important;
}
footer .footer-widgets .footer-widget p {
  font-size: 13px; line-height: 1.6; margin: 0 0 10px; color: #fff;
}
footer .footer-widgets .footer-widget ul { gap: 0 !important; }
footer .footer-widgets .footer-widget ul li { margin-bottom: 10px; }
footer .footer-widgets .footer-widget ul li a { font-size: 13px; color: #fff; }
footer .footer-widgets .footer-widget ul li a:hover { color: var(--stobi-orange, #e2592e); }
footer .footer-logo { width: 220px; max-width: 100%; opacity: .95; }

/* lexicon heading + newsletter, per the design */
footer .footer-widget h5.footer-lexicon { margin-top: 22px !important; margin-bottom: 22px !important; }
footer .footer-widgets .footer-widget p.footer-newsletter-intro { font-size: 12.5px; line-height: 1.45; opacity: .85; margin-bottom: 10px; }
footer .footer-newsletter { display: flex; gap: 8px; max-width: 340px; margin-top: 0; }
footer .footer-newsletter input[type="email"] {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 6px; border: none;
  font-size: 12px; font-family: 'Open Sans', sans-serif; color: #23252f;
}
footer .footer-newsletter button {
  flex-shrink: 0; padding: 9px 16px; border-radius: 6px; border: none;
  background: #e2592e; color: #fff; font-weight: 700;
  font-family: 'Poppins', sans-serif; font-size: 12px; cursor: pointer; white-space: nowrap;
}

/* copyright bar */
.copyright { background: #0d1626 !important; padding: 16px 24px !important; }
.copyright .container { justify-content: center !important; }
.copyright p { font-size: 12px; opacity: .75; font-family: 'Open Sans', sans-serif; }

@media (max-width: 900px) {
  footer .footer-widgets { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 20px !important; }
  footer .footer-widgets .footer-widget:first-child { display: flex; justify-content: center; }
}
@media (max-width: 560px) {
  footer .footer-widgets { grid-template-columns: 1fr !important; }
  footer .footer-newsletter { flex-direction: column; }
}

/* ---- Active page in the left sidebar: inverse (client picked option 2) ----
   White block with orange letters instead of the underline. Every link carries
   the same padding and negative margin so the text keeps its original x-position
   and nothing shifts when the active item changes. */
.sidebar-menu ul li a {
  display: block;
  padding: 5px 10px;
  margin-left: -10px;
  border-radius: 3px;
}
.sidebar-menu ul li a.active-sidebar-menu {
  background: #fff;
  color: var(--stobi-orange, #e45635) !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* Copyright bar: NI Stobi credit + "Powered by" on one centred line */
.copyright .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.copyright .powered-by { position: relative; margin: 0; }
.copyright .powered-by::before {
  content: "·"; position: absolute; left: -11px; opacity: .5;
}
.copyright .powered-by a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.copyright .powered-by a:hover { color: var(--stobi-orange, #e45635); border-bottom-color: var(--stobi-orange, #e45635); }
@media (max-width: 480px) {
  .copyright .container { flex-direction: column; gap: 4px; }
  .copyright .powered-by::before { display: none; }
}