/*
 * Oliveto Blog Style
 * Scoped entirely to .obs-content (the single blog post body).
 * Does not style .top_bar, #masthead, #footer, #page_caption, or any other
 * theme chrome — those are left completely alone.
 */

.obs-content {
  font-family: 'Lora', sans-serif !important;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a32 !important;
  max-width: 760px;
  margin: 0 auto;
}

.obs-content * {
  box-sizing: border-box;
}

/* ---------- Paragraphs ---------- */

.obs-content p,
.obs-content p.wp-block-paragraph {
  font-family: 'Lora', sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a32 !important;
  font-weight: 300;
  margin: 0 0 18px;
}

.obs-content p:empty,
.obs-content h1:empty,
.obs-content h2:empty,
.obs-content h3:empty,
.obs-content h4:empty {
  display: none;
}

/* Lede / intro paragraph */
.obs-content .obs-intro {
  font-size: 20px;
  line-height: 1.65;
  color: #2a2a22 !important;
  font-weight: 300;
  margin-bottom: 40px;
  border-left: 3px solid #5a7a3a;
  padding-left: 24px;
}

/* ---------- Headings ---------- */

.obs-content h2,
.obs-content h3,
.obs-content h4,
.obs-content h2.wp-block-heading,
.obs-content h3.wp-block-heading,
.obs-content h4.wp-block-heading {
  font-family: 'Cinzel', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #1a1a18 !important;
  margin: 52px 0 20px;
  line-height: 1.3;
}

.obs-content h2,
.obs-content h2.wp-block-heading {
  font-size: 30px !important;
}

.obs-content h3,
.obs-content h3.wp-block-heading {
  font-size: 26px !important;
}

.obs-content h4,
.obs-content h4.wp-block-heading {
  font-size: 20px !important;
}

.obs-content strong {
  color: #1a1a18;
  font-weight: 500;
}

.obs-content a {
  color: #5a7a3a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.obs-content a:hover {
  color: #3f5a29;
}

/* ---------- Images / galleries ---------- */

.obs-content > figure {
  margin: 36px 0;
}

/* Two-image galleries: force a real 2-up grid ourselves rather than relying
   on WordPress core's flex layout, which only kicks in above 600px and is
   easy for other plugin/theme CSS to knock out of alignment. */
.obs-content .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px !important;
  margin: 36px 0;
}

/* A gallery with only one image should span full width, not sit at 50%. */
.obs-content .wp-block-gallery.has-nested-images:has(> figure.wp-block-image:only-of-type) {
  grid-template-columns: 1fr;
}

.obs-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

.obs-content .wp-block-gallery img,
.obs-content .wp-block-gallery.columns-default figure.wp-block-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Single, standalone images directly in the post body */
.obs-content > figure.wp-block-image img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.obs-content figcaption {
  font-size: 11px !important;
  color: #8a8a78 !important;
  letter-spacing: 0.05em;
  margin-top: 8px;
  font-style: italic;
  text-align: left !important;
}

/* ---------- Blockquotes ---------- */

.obs-content blockquote,
.obs-content blockquote.wp-block-quote {
  border-left: 3px solid #5a7a3a;
  border-right: none;
  padding: 4px 28px;
  margin: 36px 0;
  background: transparent;
}

.obs-content blockquote p,
.obs-content blockquote.wp-block-quote p {
  font-family: 'Cinzel', serif !important;
  font-size: 22px !important;
  font-style: italic;
  color: #2a3a1a !important;
  line-height: 1.55;
  margin: 0;
}

.obs-content blockquote cite {
  font-family: 'Lora', sans-serif;
  font-size: 12px;
  color: #8a8a78;
}

/* ---------- FAQ block (auto-generated from a "FAQ" heading) ---------- */

.obs-faq {
  margin-top: 60px;
}

.obs-faq-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: #1a1a18 !important;
  margin: 0 0 24px !important;
  padding-bottom: 12px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
}

.obs-faq-list {
  display: block;
}

.obs-faq-item {
  padding: 20px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
}

.obs-faq-item:last-child {
  border-bottom: none;
}

.obs-faq-q {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1a1a18 !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.01em;
}

.obs-faq-a {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #5a5a50 !important;
  line-height: 1.7;
  margin: 0 !important;
}

/* ---------- Optional [obs_stat] pull-quote shortcode ---------- */

.obs-pull-stat {
  background: #1e2e1a;
  color: #f0f5e8;
  padding: 48px 44px;
  margin: 52px 0;
}

.obs-pull-stat-number {
  font-family: 'Cinzel', serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: #b8d490;
  display: block;
}

.obs-pull-stat-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(240, 245, 232, 0.65);
  text-transform: uppercase;
  margin-top: 12px;
  display: block;
}

.obs-pull-stat-text {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-style: italic;
  line-height: 1.5;
  color: #d8e8c0;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Lists ---------- */

.obs-content ul,
.obs-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: #3a3a32;
  font-weight: 300;
}

.obs-content li {
  margin-bottom: 10px;
}

/* ---------- Content + sidebar layout ---------- */

.obs-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}

.obs-layout .obs-content {
  max-width: none;
  margin: 0;
}

.obs-sidebar {
  padding-top: 4px;
  font-family: 'Lora', sans-serif;
}

.obs-sidebar-label {
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a78 !important;
  margin: 0 0 14px !important;
}

/* Author card */
.obs-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 28px;
}

.obs-author-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #5a7a3a;
  color: #f0f5e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 16px;
}

.obs-author-info {
  display: flex;
  flex-direction: column;
}

.obs-author-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a18;
}

.obs-author-role {
  font-size: 12px;
  color: #8a8a78;
  margin-top: 2px;
}

/* Tags */
.obs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.obs-tag {
  font-size: 11px;
  padding: 5px 12px;
  border: 0.5px solid rgba(90, 122, 58, 0.4);
  color: #5a7a3a;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.obs-tag:hover {
  background: #5a7a3a;
  color: #f0f5e8;
}

/* Related posts */
.obs-related {
  margin-top: 28px;
}

.obs-related-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
  text-decoration: none;
}

.obs-related-item:first-of-type {
  padding-top: 0;
}

.obs-related-thumb {
  width: 56px;
  height: 56px;
  min-width: 56px;
  object-fit: cover;
  background: #c8c4b8;
}

.obs-related-text {
  display: flex;
  flex-direction: column;
}

.obs-related-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  line-height: 1.4;
  color: #1a1a18;
  font-weight: 400;
}

.obs-related-date {
  font-size: 11px;
  color: #8a8a78;
  margin-top: 5px;
}

/* Newsletter — real ActiveCampaign form embed (form id 30, same one
   used in the footer). We deliberately leave the form's own fields,
   button, and validation styling to ActiveCampaign's own injected
   markup/CSS rather than overriding it here — only light spacing and
   width constraints so it sits tidily inside the sidebar box. */
.obs-newsletter {
  background: #f0f5e8;
  border: 0.5px solid rgba(90, 122, 58, 0.3);
  padding: 24px;
  margin-top: 36px;
}

.obs-newsletter h4 {
  font-family: 'Cinzel', serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1a1a18 !important;
  margin: 0 0 8px !important;
}

.obs-newsletter p {
  font-size: 12px !important;
  color: #5a5a50 !important;
  margin: 0 0 12px !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

.obs-newsletter ._form_30 {
  width: 100% !important;
  max-width: 100% !important;
}

.obs-newsletter ._form_30 input[type="text"],
.obs-newsletter ._form_30 input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .obs-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .obs-sidebar {
    margin-top: 52px;
    padding-top: 40px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 767px) {
  .obs-content {
    font-size: 15px;
    padding: 0 4px;
  }

  .obs-content p,
  .obs-content ul,
  .obs-content ol {
    font-size: 15px;
  }

  .obs-content .obs-intro {
    font-size: 17px;
    padding-left: 18px;
    margin-bottom: 28px;
  }

  .obs-content h2,
  .obs-content h2.wp-block-heading {
    font-size: 22px !important;
    margin: 40px 0 16px;
  }

  .obs-content h3,
  .obs-content h3.wp-block-heading {
    font-size: 20px !important;
    margin: 36px 0 14px;
  }

  .obs-content .wp-block-gallery img {
    height: 160px;
  }

  .obs-content > figure.wp-block-image img {
    height: 240px;
  }

  .obs-content blockquote p,
  .obs-content blockquote.wp-block-quote p {
    font-size: 19px !important;
  }

  .obs-pull-stat {
    padding: 36px 24px;
    margin: 36px -4px;
  }

  .obs-pull-stat-number {
    font-size: 52px;
  }

  .obs-pull-stat-text {
    font-size: 16px;
  }

  .obs-faq-title {
    font-size: 19px !important;
  }
}

/* ============================================================
 * HERO STYLING (added per client request, 2026-07-03)
 * ------------------------------------------------------------
 * This is the ONLY part of this stylesheet that touches anything
 * outside .obs-content. It restyles the site's existing hero/
 * cover-image header to match the redesign mockup: a fixed-height
 * bottom-aligned layout, pill-style category badges, and a subtle
 * dark gradient so the white text stays readable over any photo.
 * It does not replace or remove the header — the same image, the
 * same title text, the same links are all still there; only their
 * position and styling changes.
 *
 * The publish date and the "By {author} · {N} min read" line you
 * see are added as CSS ::after content (generated per-post, right
 * below, in obs_hero_meta_css()) rather than real DOM text. This
 * was the only way to add that information without editing the
 * Elementor template stored in the database — which is out of
 * scope for a plugin to touch safely. The trade-off: this text
 * isn't selectable/copyable and may not always be read by screen
 * readers exactly like real text. If that matters to you, the
 * cleaner long-term fix is adding Elementor's own Post Info widget
 * to the "Blog Template" (id 14487) directly in Elementor — happy
 * to help with that instead if you'd prefer.
 *
 * Scoped to .bg-post (a custom class already on the hero container,
 * stable across the "Blog Template" used by every post) and to the
 * first/second heading widget inside it by position, rather than
 * to Elementor's auto-generated numeric IDs — so this keeps working
 * even if the template is re-saved, as long as the category tag
 * and title stay in that order.
 * ============================================================ */

.bg-post {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 560px !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
  overflow: hidden;
}

.bg-post::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 30, 20, 0.05) 0%, rgba(10, 20, 10, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.bg-post .e-con-boxed {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 100% !important;
  padding: 44px 64px !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.bg-post .elementor-heading-title {
  text-align: left !important;
}

/* Category tag(s) -> small pill badge(s). font-size:0 on the heading
   hides the plain-text comma WordPress puts between multiple category
   links; each link's own font-size is set explicitly below so the
   pill text itself still shows normally. */
.bg-post .elementor-widget-heading:nth-of-type(1) .elementor-heading-title {
  font-size: 0 !important;
  margin: 0 0 18px !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.bg-post .elementor-widget-heading:nth-of-type(1) .elementor-heading-title a {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #d8e8c0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(184, 212, 160, 0.45) !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  margin-right: 8px;
}

.bg-post .elementor-widget-heading:nth-of-type(1) .elementor-heading-title::after {
  /* `content` is set per-post by obs_hero_meta_css() below, via a small
     inline <style> block generated fresh on every page load. Without it,
     this pseudo-element simply doesn't render — safe, no broken layout. */
  font-size: 11px !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.03em;
  text-transform: none;
  margin-left: 4px;
}

/* Title */
.bg-post .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
  font-family: 'Cinzel', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 42px !important;
  line-height: 1.2 !important;
  color: #f8f6f0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  max-width: 780px;
  margin: 0 !important;
}

.bg-post .elementor-widget-heading:nth-of-type(2) .elementor-heading-title::after {
  /* `content` is set per-post by obs_hero_meta_css() below. */
  display: block;
  font-family: 'Lora', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.03em;
  text-transform: none;
  margin-top: 18px;
}

@media (max-width: 767px) {
  .bg-post {
    min-height: 420px !important;
  }

  .bg-post .e-con-boxed {
    padding: 28px 24px !important;
  }

  .bg-post .elementor-widget-heading:nth-of-type(2) .elementor-heading-title {
    font-size: 28px !important;
  }
}