/* ============================================================
   MOSS & FOG — CUSTOM STYLES
   ============================================================ */

/* === 1. TOP POSTS SIDEBAR WIDGET FIXES === */

/* Fix: Remove 50% opacity that washed out text */
.widgets-list-layout span { opacity: 1 !important; }

/* Fix: Flexbox alignment for thumbnail + text */
.widgets-list-layout a.bump-view {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  position: static !important;
}
.widgets-list-layout .widgets-list-layout-blavatar {
  float: none !important;
  flex-shrink: 0 !important;
  width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 3px;
}
.widgets-list-layout-links {
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  color: #1a1a1a !important;
  font-size: 13px;
  line-height: 1.4;
}
/* Remove the dark gradient title overlay on hover */
.widget_top-posts a.bump-view::after { display: none !important; }
.widgets-list-layout li { margin-bottom: 14px !important; }
.widgets-list-layout a.bump-view:hover .widgets-list-layout-links { color: #555 !important; }


/* === 2. IN MOTION SECTION — HERO TITLES === */
/* Fix: titles over full-bleed images must be white */
.mf-im h2,
.mf-im .heading,
.mf-im a h2,
.mf-im a .heading {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}


/* === 3. EXCERPT TEXT — READABLE, MEDIUM WEIGHT === */
section.blog .excerpt,
section.blog .post-excerpt,
.news-block .excerpt,
.highlights-block .excerpt,
.posts-large .excerpt {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2e2e2e !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}


/* === 4. POST META (dates, categories) — subtle but legible === */
.post-meta,
article .meta,
.meta-wrap {
  font-size: 11px !important;
  color: #999 !important;
  letter-spacing: 0.04em !important;
}
.post-meta a,
article .meta a {
  color: #888 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.post-meta a:hover,
article .meta a:hover { color: #333 !important; }


/* === 5. SECTION HEADINGS — clean, editorial === */
/* Fix the -40px negative margin that caused section label bleed */
.block-head {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #ebebeb !important;
}
.block-head h4.title,
.block-head h4.title a,
.block-head h2,
.block-head .title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  text-decoration: none !important;
}


/* === 6. SECTION BREATHING ROOM === */
section.cf.block.blog,
section.cf.block.news-block,
section.cf.block.highlights-block {
  padding-bottom: 44px !important;
}

/* === 7. WP-BLOCK-GROUP top padding === */
.wp-block-group { padding-top: 4px !important; }

/* === 8. BOLD SLIDER / COMMON SLIDER — hero overlay titles must be white === */
.bold-slider .heading h2,
.bold-slider h2.heading,
.common-slider .heading h2,
.common-slider h2.heading,
.bold-slider .heading,
.bold-slider h2 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* === 9. HEADER LOGO — constrain to appropriate compact size === */
.main-head .title .logo-image,
.main-head .title a img {
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
}

/* === 10. ARTICLE PAGE — hero title must be white over full-bleed image === */
h1.is-title,
h1.post-title,
h1.is-title.post-title {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure .post-meta color rule doesn't bleed into heading children */
.post-meta h1,
.post-meta h2,
.post-meta h3,
.post-meta .is-title,
article .meta h1,
article .meta h2 {
  color: #fff !important;
}

/* === 11. FONT OVERRIDE — Replace Lato with Montserrat === */
:root {
  --body-font: 'Montserrat', Arial, sans-serif;
}

/* === MOSS & FOG MEDIA PAGE — FULL WIDTH === */
.page-id-153183 .col-8.main-content {
  width: 100% !important;
  max-width: 100% !important;
}

.page-id-153183 .the-post {
  max-width: 1200px;
	  width: 100% !important;
  margin: 0 auto;
}

/* Hide the page title since the hero has its own */
.page-id-153183 .page-title {
  display: none;
}

/* Ensure Gutenberg columns don't break on desktop */
.page-id-153183 .wp-block-columns {
  flex-wrap: nowrap !important;
}

/* Mobile: stack columns vertically */
@media (max-width: 768px) {
  .page-id-153183 .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .page-id-153183 .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* === FIX: Override Gutenberg inner block width constraint === */
.page-id-153183 .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	  max-width: 100% !important;
}

.page-id-153183 .wp-block-group__inner-container {
	  max-width: 100% !important;
}

.page-id-153183 .entry-content > * {
	  max-width: 100% !important;
}

/* Let the content breathe with nice padding */
.page-id-153183 .the-post .post-content {
	  padding: 0 20px;
}
}
}
}
}

/* === 13. EMPTY CUSTOM HTML SIDEBAR WIDGET — hide blank boxed widget === */
.sidebar .widget_custom_html:has(.textwidget:empty) {
    display: none !important;
}

/* === 14. COMMENT AREA — reduce excess whitespace before footer === */
.comments-area,
#respond {
    margin-top: 24px !important;
    padding-top: 0 !important;
}

/* === 15. PERFORMANCE: image aspect ratios prevent layout shift (CLS) === */
/* Locking aspect ratio means the browser reserves space before images load */
.ts-post-image {
    overflow: hidden;
    position: relative;
}
.ts-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === 16. PERFORMANCE: lazy-loaded hero image — reduce gray placeholder flash === */
.mf-im .post-image-wrap,
.ts-featured-post .post-image-wrap {
    background-color: #f0f0f0;
    min-height: 420px;
}

/* === 17. PERFORMANCE: contain card layout — reduce repaint scope === */
.ts-post-wrap,
.post-listing .ts-col-4 {
    contain: layout;
}

/* === 18. MOBILE: hide prev/next post edge arrows on small screens === */
@media (max-width: 768px) {
    .ts-prev-link,
    .ts-next-link,
    #prev-link,
    #next-link,
    .ts-post-prev-next {
        display: none !important;
    }
}
/* === 12. NEWSLETTER SIDEBAR WIDGET - tame oversized heading === */
.sidebar .widget_convertkit_form .formkit-header h2 {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
    font-weight: 700 !important;
}


/* === KIT SUBSCRIBE FORM: ATLAS STYLE === */
.formkit-form[data-uid]{max-width:640px !important;margin:88px auto 16px !important;border:1px solid #e6e2da !important;border-radius:14px !important;box-shadow:none !important;background:#fdfcfa !important;}
.formkit-form[data-uid] [data-style]{padding:44px 44px 36px !important;}
.formkit-form[data-uid] img,.formkit-form[data-uid] .formkit-image,.formkit-form[data-uid] .formkit-background{display:none !important;}
.formkit-form[data-uid] h1,.formkit-form[data-uid] h2,.formkit-form[data-uid] .formkit-header h1,.formkit-form[data-uid] .formkit-header h2{font-family:'Montserrat',-apple-system,sans-serif !important;font-weight:300 !important;font-size:1.9rem !important;line-height:1.2 !important;letter-spacing:-.01em !important;color:#18130c !important;}
.formkit-form[data-uid] p,.formkit-form[data-uid] .formkit-subheader{font-weight:300 !important;color:#6b6559 !important;font-size:.95rem !important;line-height:1.6 !important;}
.formkit-form[data-uid] .formkit-input{border:1px solid #d8d2c6 !important;border-radius:8px !important;background:#fff !important;font-weight:300 !important;}
.formkit-form[data-uid] .formkit-submit,.formkit-form[data-uid] button{background:#18130c !important;color:#d4b47a !important;border-radius:8px !important;font-family:'Montserrat',-apple-system,sans-serif !important;font-weight:300 !important;letter-spacing:.22em !important;text-transform:uppercase !important;font-size:11px !important;box-shadow:none !important;}
.formkit-form[data-uid] .formkit-submit:hover,.formkit-form[data-uid] button:hover{background:#2a2114 !important;}
.formkit-form[data-uid] .formkit-guarantee{font-size:11px !important;color:#a39b8b !important;letter-spacing:.04em !important;}