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

/* === GUIDES MEGA MENU: IMAGE TILES === */
#menu-item-160312 .mega-menu .column.sub-cats{width:100% !important;float:none !important;border:none !important;}
#menu-item-160312 .mega-menu .column:not(.sub-cats){display:none !important;}
#menu-item-160312 .mega-menu ol.sub-nav{display:flex;gap:14px;padding:24px !important;}
#menu-item-160312 .mega-menu ol.sub-nav li{flex:1;border:none !important;margin:0 !important;padding:0 !important;}
#menu-item-160312 .mega-menu ol.sub-nav li a{display:flex !important;align-items:flex-end;height:220px;border-radius:10px;overflow:hidden;background-color:#18130c;background-size:cover;background-position:center;color:#fff !important;font-weight:300 !important;letter-spacing:.03em;font-size:15px !important;line-height:1.3 !important;padding:16px !important;box-shadow:inset 0 -110px 70px -40px rgba(0,0,0,.72);transition:transform .3s ease;}
#menu-item-160312 .mega-menu ol.sub-nav li a:hover{transform:translateY(-5px);color:#d4b47a !important;}
#menu-item-160312 li.menu-item-160307 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/01/night-aurora-moss-and-fog-2.jpg?w=640&quality=77);}
#menu-item-160312 li.menu-item-160308 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/07/photography-elliot-mcgucken-feature.jpg?w=640&quality=77);}
#menu-item-160312 li.menu-item-160309 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/05/atacama1.jpg.webp?w=640&quality=77);}
#menu-item-160312 li.menu-item-160310 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2026/06/85-19-2.webp?w=640&quality=77);}
@media(max-width:991px){#menu-item-160312 .mega-menu ol.sub-nav{flex-direction:column;}#menu-item-160312 .mega-menu ol.sub-nav li a{height:64px;}}

/* === NAV: FIT ON ONE LINE === */
@media(min-width:992px){#menu-main-mf-menu > li > a{padding:0 11px !important;font-size:11px !important;letter-spacing:.04em !important;}}
@media(min-width:992px) and (max-width:1350px){#menu-main-mf-menu > li > a{padding:0 8px !important;font-size:10.5px !important;}}

/* === RETROFUTURISM MEGA MENU TILE === */
#menu-item-160312 li.menu-item-160397 a{background-image:url(https://i0.wp.com/mossandfog.com/wp-content/uploads/2025/04/winter2019-dreamscapes-A.jpg?w=640&quality=77);}

/* === KIT FORM: BUTTON TEXT FLOW FIX === */
.formkit-form[data-uid] .formkit-submit,.formkit-form[data-uid] button{letter-spacing:.12em !important;width:100% !important;word-break:keep-all !important;line-height:1.5 !important;padding:14px 12px !important;}
.formkit-form[data-uid] .formkit-input{width:100% !important;min-width:0 !important;}
.formkit-form[data-uid] .formkit-field{min-width:0 !important;}

/* ============================================================
   MOSS & FOG — HOMEPAGE SPACING & POLISH  (added Aug 2026)
   Scoped to body.home only. Safe to delete this whole block.
   ============================================================ */

/* 1. Breathing room under the in-content ad so it never touches the post grid */
.home .mf-homepage-main > .wp-block-column > ins.adsbygoogle { margin-bottom: 48px; }

/* Collapse ad slots that come back unfilled instead of leaving a blank hole */
.home ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* 2. Even vertical rhythm between stacked homepage sections */
.home .mf-homepage-main > .wp-block-column > section.block + section.block { margin-top: 30px; }

/* 3. Close the dead zone between the In Motion block and the newsletter */
.home .the-page > .wp-block-spacer { height: 56px !important; }
.home .the-page form.seva-form { margin-top: 0 !important; }

/* 4. Homepage doesn't need the post-style share / like blocks */
.home .the-page .sharedaddy { display: none !important; }

/* 5. Sidebar follows the reader instead of leaving a tall empty gutter */
@media (min-width: 992px) {
  .home .mf-homepage-main > .wp-block-column:last-child {
    align-self: flex-start;
    position: sticky;
    top: 76px;
    margin-top: -24px;
    padding-top: 24px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
  }
}

/* 6. Mobile: same rhythm, tighter numbers */
@media (max-width: 767px) {
  .home .mf-homepage-main > .wp-block-column > ins.adsbygoogle { margin-bottom: 32px; }
  .home .mf-homepage-main > .wp-block-column > section.block + section.block { margin-top: 22px; }
  .home .the-page > .wp-block-spacer { height: 36px !important; }
}

/* 7. Newsletter form spans the content width instead of floating narrow */
@media (min-width: 768px) {
  .home .the-page form.seva-form { max-width: 100% !important; width: 100% !important; }
  .home .the-page form.seva-form > div { padding-left: 64px !important; padding-right: 64px !important; align-items: center !important; }
  .home .the-page form.seva-form .formkit-column { background-color: transparent !important; }
}
/* ============ end Moss & Fog homepage spacing block ============ */


/* ============================================================
   FOOTER — COMPACT "WHAT PEOPLE ARE READING" (Aug 2026)
   Two-up post grid + tightened rows + vertical link list.
   ============================================================ */

@media (min-width: 941px) {
  .main-footer .upper-footer { padding-top: 46px; padding-bottom: 30px; }
  .main-footer .upper-footer .widgets { align-items: flex-start; }
  .main-footer .upper-footer .widget.column.col-4 { width: auto; }
  .main-footer #bunyad-widget-about-2 { width: 26%; }
  .main-footer #bunyad-posts-widget-5 { width: 53%; }
  .main-footer #custom_html-11 { width: 21%; }

  .main-footer #bunyad-posts-widget-5 ul.posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

.main-footer .upper-footer .widget-title { margin-bottom: 20px !important; }

.main-footer #bunyad-posts-widget-5 ul.posts > li.post {
  margin-bottom: 0;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.main-footer #bunyad-posts-widget-5 ul.posts > li.post:nth-last-child(-n+2) { border-bottom: 0; }

.main-footer #bunyad-posts-widget-5 .post-thumb {
  width: 44px;
  flex: 0 0 44px;
  margin-right: 14px;
}
.main-footer #bunyad-posts-widget-5 .post-title { margin-bottom: 2px !important; }
.main-footer #bunyad-posts-widget-5 .post-title a {
  font-size: 13.5px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.main-footer #bunyad-posts-widget-5 .meta-below .post-cat a {
  font-size: 9.5px;
  letter-spacing: .1em;
  opacity: .6;
}

.main-footer #custom_html-11 .textwidget::before {
  content: "More to Explore";
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .68px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 20px;
}
.main-footer #custom_html-11 .mf-utility-nav {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
}
.main-footer #custom_html-11 .mf-utility-nav > span { display: none !important; }
.main-footer #custom_html-11 .mf-utility-nav > a {
  display: block;
  padding: 6px 0;
  line-height: 1.3;
}

@media (max-width: 940px) {
  .main-footer #bunyad-posts-widget-5 ul.posts > li.post:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .main-footer #bunyad-posts-widget-5 ul.posts > li.post:last-child { border-bottom: 0; }
}


/* ============================================================
   SIDEBAR — "THE GUIDES" WIDGET (Aug 2026)
   Uppercase Montserrat rows with a teal left rule that fills on hover.
   Scoped to the widget instance #custom_html-16.
   ============================================================ */

#custom_html-16 .textwidget br { display: none; }

#custom_html-16 .textwidget a {
  display: block;
  margin-bottom: 6px;
  padding: 13px 10px 13px 18px;
  border-left: 3px solid rgba(1,102,102,.18);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #1d2b2b;
  text-decoration: none;
  background: transparent;
  transition: border-color .2s ease, color .2s ease, padding-left .2s ease, background-color .2s ease;
}

#custom_html-16 .textwidget a:last-child { margin-bottom: 0; }

#custom_html-16 .textwidget a:hover {
  border-left-color: #016666;
  color: #016666;
  padding-left: 24px;
  background-color: rgba(1,102,102,.045);
}


/* ------------------------------------------------------------
   Hide the empty box drawn by the script-only sidebar widget.
   custom_html-2 holds the slider / carousel / AdSense injector
   JS. It outputs nothing visible, but the boxed widget wrapper
   still renders a bordered empty card. DO NOT DELETE THE WIDGET.
   ------------------------------------------------------------ */
#custom_html-2 { display: none !important; }


/* ============================================================
   HOMEPAGE MASTHEAD (Aug 2026)
   The site's one-line self-definition + the page's only H1.
   Block: core/group.mf-masthead at the top of page 153734.
   ============================================================ */

.mf-masthead {
  text-align: center;
  margin: 4px 0 46px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(29,43,43,.10);
}

.mf-masthead::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0 auto 24px;
  background: #4aa99a;
}

.mf-masthead .mf-masthead-h1 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.004em;
  color: #1d2b2b;
}

.mf-masthead .mf-masthead-sub {
  max-width: 520px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #6a7676;
}

@media (max-width: 767px) {
  .mf-masthead { margin-bottom: 34px; padding-bottom: 26px; }
  .mf-masthead::before { margin-bottom: 18px; }
  .mf-masthead .mf-masthead-h1 { font-size: 22px; }
  .mf-masthead .mf-masthead-sub { font-size: 13.5px; }
}