/* logo-design */
.main-head.compact .title a img{
    width: 300px !important;
	padding: 16px;
	{

}
	
}

.the-wrap.head {
    display: none;
}
section.feat-grid.feat-grid-c.static.feat-grid-ratio.feat-grid-neq {
    padding-top: 25px;
}
header#main-head {
    min-height: unset !important;
}
.navigation.inline .menu>li>a {
    padding-right: 0;
    font-size: 14px;
}
/* .grid-post .post-footer {
    display: none;
} */

/* Footer-sec */
.robots-nocontent.sd-block.sd-social.sd-social-icon.sd-sharing {
    display: none;
}
div#like-post-wrapper-4296166-117680-67f64035efde0 {
    display: none;
}

.mf-subscribe{
  background: linear-gradient(180deg, #dbf0ec, #d7ebf0);
  border-radius:14px;
  padding:16px;
  max-width:420px;
}

.mf-subscribe-title{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
  color:#1f2937;
}

.mf-subscribe-subtitle{
  margin:0 0 14px;
  font-size:14px;
  color:#4b5563;
}

.mf-subscribe-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mf-label{
  font-size:13px;
  font-weight:600;
  color:#374151;
}

.mf-input{
  margin-top:6px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(34,142,169,.3);
  font-size:15px;
}

.mf-input:focus{
  outline:none;
  border-color:#568984;
}

.mf-button{
  margin-top:6px;
  background:#568984;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}

.mf-button:hover{
  opacity:.95;
}

.mf-privacy{
  margin:10px 0 0;
  font-size:12px;
  color:#6b7280;
}

/* ============================================
   MOSS & FOG - REFINED CUSTOM STYLES
   CheerUp Theme Targeted Enhancements

   Add via: Appearance → Customize → Additional CSS
   ============================================ */

/* ============================================
   BRAND VARIABLES
   Adjust these to fine-tune your brand colors
   ============================================ */
:root {
  --mf-brand: #3d7a6b;
  --mf-brand-hover: #2f5f54;
  --mf-text: #2d2d2d;
  --mf-text-light: #6b6b6b;
  --mf-border: #e8e8e8;
}

/* ============================================
   GLOBAL REFINEMENTS
   ============================================ */

/* Smoother font rendering */
body.wp-theme-cheerup {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Refined link transitions */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Subtle header shadow on scroll */
.main-head {
  transition: box-shadow 0.3s ease;
}

.main-head.sticky {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* Logo hover polish */
.main-head .title a {
  transition: opacity 0.2s ease;
}

.main-head .title a:hover {
  opacity: 0.85;
}

/* Navigation link refinements */
.navigation.navigation-main .menu > li > a {
  position: relative;
  transition: color 0.2s ease;
}

/* Elegant underline on hover */
.navigation.navigation-main .menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--mf-brand);
  transition: width 0.25s ease, left 0.25s ease;
}

.navigation.navigation-main .menu > li > a:hover::after,
.navigation.navigation-main .menu > li.current-menu-item > a::after {
  width: 100%;
  left: 0;
}

/* Dropdown/Mega menu refinements */
.navigation .sub-menu,
.navigation .mega-menu {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: none;
  border-radius: 4px;
  margin-top: 0;
}

.navigation .sub-menu li a {
  transition: background 0.15s ease, color 0.15s ease;
}

.navigation .sub-menu li a:hover {
  background: #f8f9fa;
}

/* Top bar social icons */
.top-bar .social-icons a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.top-bar .social-icons a:hover {
  color: var(--mf-brand);
  transform: translateY(-1px);
}

/* ============================================
   FEATURED SLIDER / HERO
   ============================================ */

/* Better text legibility on slider */
.main-slider .heading,
.main-slider .post-title {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

/* Category badge on slider */
.main-slider .cat-labels a {
  transition: background 0.2s ease, transform 0.2s ease;
}

.main-slider .cat-labels a:hover {
  transform: translateY(-1px);
}

/* Slider navigation arrows */
.main-slider .slider-nav {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.main-slider:hover .slider-nav {
  opacity: 1;
}

/* ============================================
   ARTICLE CARDS / POSTS
   ============================================ */

/* Post card hover effect */
.post {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Only apply lift to grid posts, not slider posts */
.grid-post:hover,
.posts-listing .post:hover,
.block .col-3.post:hover,
.block .col-4.post:hover {
  transform: translateY(-3px);
}

/* Post thumbnail image zoom */
.post .post-thumb {
  overflow: hidden;
  border-radius: 3px;
}

.post .post-thumb img,
.post .post-thumb .img {
  transition: transform 0.4s ease;
}

.post:hover .post-thumb img,
.post:hover .post-thumb .img {
  transform: scale(1.02);
}

/* Post title refinements */
.post-title {
  transition: color 0.2s ease;
}

.post-title a:hover {
  color: var(--mf-brand);
}

/* Post meta styling */
.post-meta,
.post-meta-a {
  letter-spacing: 0.02em;
}

.post-meta a {
  transition: color 0.2s ease;
}

.post-meta a:hover {
  color: var(--mf-brand);
}

/* ============================================
   CATEGORY LABELS / BADGES
   ============================================ */

/* Category badge polish */
.post-cat a.category,
.cat-labels a {
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.post-cat a.category:hover,
.cat-labels a:hover {
  opacity: 0.85;
}

/* ============================================
   SECTION HEADINGS
   ============================================ */

/* Block heading refinements */
.block-head.block-heading {
  position: relative;
}

.block-head .heading {
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* "View All" links */
.block-head .view-all,
.view-link {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mf-text-light);
  transition: color 0.2s ease;
}

.block-head .view-all:hover,
.view-link:hover {
  color: var(--mf-brand);
}

/* ============================================
   SIDEBAR & WIDGETS
   ============================================ */

/* Widget container refinements */
.widget.widget-a-wrap {
  border-radius: 6px;
}

/* Widget titles */
.widget .widget-title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Subscribe widget enhancement */
.widget.widget-subscribe,
.widget-newsletter {
  background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%);
  border: 1px solid var(--mf-border);
}

/* Email input styling */
.widget input[type="email"],
.widget input[type="text"] {
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget input[type="email"]:focus,
.widget input[type="text"]:focus {
  border-color: var(--mf-brand);
  box-shadow: 0 0 0 3px rgba(61, 122, 107, 0.1);
  outline: none;
}

/* Widget buttons */
.widget button,
.widget input[type="submit"] {
  transition: background 0.2s ease, transform 0.15s ease;
}

.widget button:hover,
.widget input[type="submit"]:hover {
  transform: translateY(-1px);
}

/* Social icons in sidebar */
.widget .social-icons a {
  transition: background 0.2s ease, transform 0.2s ease;
}

.widget .social-icons a:hover {
  transform: translateY(-2px);
}

/* ============================================
   ARTICLE PAGE
   ============================================ */

/* Article content improvements */
.the-post .post-content,
.entry-content {
  line-height: 1.85;
}

/* Article links */
.post-content a:not(.wp-block-button__link) {
  color: var(--mf-brand);
  text-decoration: underline;
  text-decoration-color: rgba(61, 122, 107, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}

.post-content a:not(.wp-block-button__link):hover {
  text-decoration-color: var(--mf-brand);
}

/* Blockquotes */
.post-content blockquote {
  border-left-color: var(--mf-brand);
  font-style: italic;
}

/* Image captions */
.wp-caption-text,
figcaption {
  font-size: 0.85rem;
  color: var(--mf-text-light);
  font-style: italic;
}

/* ============================================
   FOOTER
   ============================================ */

/* Footer refinements */
.main-footer.dark {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer links */
.main-footer a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.main-footer a:hover {
  opacity: 0.85;
}

/* Back to top button */
.back-to-top {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================
   FLOATING SUBSCRIBE BUTTON
   ============================================ */

/* If you have a floating subscribe button */
.floating-subscribe,
button[class*="subscribe"] {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-subscribe:hover,
button[class*="subscribe"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   THUMBNAIL ROW (Below slider)
   ============================================ */

.posts-carousel-b .post-thumb {
  border-radius: 4px;
  overflow: hidden;
}

.posts-carousel-b .post {
  transition: transform 0.2s ease;
}

.posts-carousel-b .post:hover {
  transform: scale(1.02);
}

/* ============================================
   SEARCH MODAL
   ============================================ */

.search-modal input[type="search"] {
  transition: border-color 0.2s ease;
}

.search-modal input[type="search"]:focus {
  border-color: var(--mf-brand);
}

/* ============================================
   BUTTONS (Global)
   ============================================ */

.button,
.btn,
input[type="submit"],
button {
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* ============================================
   LOADING / LAZY IMAGES
   ============================================ */

/* Smooth fade-in for lazy loaded images */
img.lazyload,
img.lazyloading {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.lazyloaded {
  opacity: 1;
}

/* ============================================
   RESPONSIVE REFINEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Remove hover effects on mobile (touch devices) */
  .post:hover {
    transform: none;
  }

  .post:hover .post-thumb img {
    transform: none;
  }

  /* Better mobile nav */
  .mobile-menu a {
    transition: background 0.15s ease;
  }
}

/* ============================================
   SUBTLE ANIMATIONS
   ============================================ */

/* Gentle fade-in for page elements */
@keyframes subtleFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply to posts if desired (uncomment to enable) */
/*
.posts-listing .post {
  animation: subtleFadeIn 0.5s ease forwards;
}
*/

/* ============================================
   END OF CUSTOM STYLES
   ============================================ */


/* ============================================
   MOSS & FOG - CATEGORY SECTION REDESIGN
   Modern pills with gradient background

   Add via: Appearance → Customize → Additional CSS
   ============================================ */

/* ============================================
   SECTION BACKGROUND
   Soft mesh gradient effect
   ============================================ */
.vc_custom_1759353094278 {
  padding: 50px 20px 70px !important;
  /* Soft warm-to-cool gradient */
  background: linear-gradient(160deg, #f5f0eb 0%, #e8eff3 40%, #dae7ed 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle mesh gradient overlay */
.vc_custom_1759353094278::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 20% 80%, rgba(200, 220, 230, 0.4) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(230, 215, 200, 0.3) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(220, 235, 240, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.vc_custom_1759353094278 h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
  position: relative;
  z-index: 1;
}

.vc_custom_1759353094278 p {
  font-size: 0.95rem;
  color: #666;
  max-width: 500px;
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
}

/* ============================================
   TABLE → FLEX GRID TRANSFORMATION
   ============================================ */
.vc_custom_1759353094278 table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 700px;
  margin: 0 auto;
  border: none !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.vc_custom_1759353094278 table tbody,
.vc_custom_1759353094278 table tr {
  display: contents;
}

/* ============================================
   CATEGORY PILLS
   Glassmorphism style
   ============================================ */
.vc_custom_1759353094278 table td {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Hover state - inverts to dark */
.vc_custom_1759353094278 table td:hover {
  background: #1a1a1a;
  border-color: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.vc_custom_1759353094278 table td:hover a {
  color: #fff !important;
}

/* ============================================
   LINK STYLING
   ============================================ */
.vc_custom_1759353094278 table td a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .vc_custom_1759353094278 {
    padding: 40px 15px 60px !important;
  }

  .vc_custom_1759353094278 h2 {
    font-size: 1.5rem;
  }

  .vc_custom_1759353094278 table {
    gap: 8px;
  }

  .vc_custom_1759353094278 table td {
    padding: 8px 14px;
  }

  .vc_custom_1759353094278 table td a {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .vc_custom_1759353094278 table td {
    padding: 7px 12px;
  }

  .vc_custom_1759353094278 table td a {
    font-size: 0.75rem;
    gap: 4px;
  }
}

/* ============================================
   END OF CATEGORY SECTION STYLES
   ============================================ */

/* ============================================
   MOSS & FOG - CATEGORY HEADER MOBILE FIX
   Fixes text cutoff on category archive pages

   Add via: Appearance → Customize → Additional CSS
   ============================================ */

/* ============================================
   PROBLEM:
   The .description element has a fixed 680px width
   and negative margin that causes text to overflow
   and get clipped by the parent's overflow:hidden
   ============================================ */

/* Tablet breakpoint */
@media (max-width: 768px) {
  /* Fix the archive header container */
  .archive-head {
    overflow: visible !important;
    padding: 25px 20px !important;
  }

  /* Fix the description width and margin */
  .archive-head .description {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
  }

  /* Ensure description text wraps properly */
  .archive-head .description h3,
  .archive-head .description p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Adjust title size for mobile */
  .archive-head .title {
    font-size: 1.75rem !important;
    width: 100% !important;
  }

  /* Adjust subtitle */
  .archive-head .sub-title {
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
  }

  /* Hide the large background watermark text on mobile */
  /* It takes up space and looks cluttered on small screens */
  .archive-head .background {
    display: none !important;
  }
}

/* Smaller mobile screens */
@media (max-width: 480px) {
  .archive-head {
    padding: 20px 15px !important;
  }

  .archive-head .title {
    font-size: 1.5rem !important;
  }

  .archive-head .description h3,
  .archive-head .description p {
    font-size: 0.9rem !important;
  }
}

/* ============================================
   END OF MOBILE CATEGORY FIX
   ============================================ */



/* ============================================
   MOSS & FOG - MOBILE TYPOGRAPHY FIX

   Increases body copy from 14px to 16px on mobile
   for improved readability.

   Add via: Appearance → Customize → Additional CSS
   ============================================ */

@media (max-width: 768px) {
  /* Body copy - bump from 14px to 16px */
  .post-content p,
  .entry-content p,
  .the-post-content p,
  .content-spacious p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* List items */
  .post-content li,
  .entry-content li,
  .content-spacious li {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Blockquotes */
  .post-content blockquote,
  .entry-content blockquote {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   MOSS & FOG - COMPREHENSIVE MOBILE FIXES

   Fixes identified during mobile audit:
   1. Category archive headers - description cutoff
   2. Floating SUBSCRIBE button - overlaps content
   3. Ad banners - text cutoff

   Add via: Appearance → Customize → Additional CSS
   ============================================ */


/* ============================================
   1. CATEGORY ARCHIVE HEADER FIX
   The .description element has fixed 680px width
   that overflows on mobile
   ============================================ */

@media (max-width: 768px) {
  /* Fix the archive header container */
  .archive-head {
    overflow: visible !important;
    padding: 25px 20px !important;
  }

  /* Fix the description width and margin */
  .archive-head .description {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
  }

  /* Ensure description text wraps properly */
  .archive-head .description h3,
  .archive-head .description p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Adjust title size for mobile */
  .archive-head .title {
    font-size: 1.75rem !important;
    width: 100% !important;
  }

  /* Adjust subtitle */
  .archive-head .sub-title {
    font-size: 0.7rem !important;
    letter-spacing: 0.15em !important;
  }

  /* Hide the large background watermark text on mobile */
  .archive-head .background {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .archive-head {
    padding: 20px 15px !important;
  }

  .archive-head .title {
    font-size: 1.5rem !important;
  }

  .archive-head .description h3,
  .archive-head .description p {
    font-size: 0.9rem !important;
  }
}


/* ============================================
   2. FLOATING SUBSCRIBE BUTTON FIX
   The Jetpack subscribe button overlaps content
   on mobile - reposition or hide it
   ============================================ */

@media (max-width: 768px) {
  /* Option A: Hide the floating button on mobile */
  /* Uncomment below if you want to hide it completely */
  /*
  .jetpack-subscribe-floating-button {
    display: none !important;
  }
  */

  /* Option B: Make it smaller and less intrusive */
  .jetpack-subscribe-floating-button {
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
    opacity: 0.9 !important;
    bottom: 10px !important;
    right: 10px !important;
  }

  /* Make the button more transparent when scrolling */
  .jetpack-subscribe-floating-button:not(:hover) {
    opacity: 0.7 !important;
  }
}

@media (max-width: 480px) {
  /* On very small screens, make it even smaller */
  .jetpack-subscribe-floating-button {
    transform: scale(0.75) !important;
    opacity: 0.6 !important;
  }

  /* Or hide it completely on very small screens */
  /* Uncomment below to hide on small phones */
  /*
  .jetpack-subscribe-floating-button {
    display: none !important;
  }
  */
}


/* ============================================
   3. AD BANNER / THIRD-PARTY WIDGET FIX
   Some ad banners have text overflow issues
   ============================================ */

@media (max-width: 768px) {
  /* Fix ad container overflow */
  [class*="adsbygoogle"],
  [class*="ad-container"],
  .advertisement,
  iframe[src*="ad"] {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Fix Visual Composer row overflow */
  .vc_row,
  .wpb_row {
    overflow-x: hidden !important;
  }
}


/* ============================================
   4. GENERAL MOBILE TYPOGRAPHY IMPROVEMENTS
   Better readability on small screens
   ============================================ */

@media (max-width: 768px) {
  /* Improve post content readability - bump from 14px to 16px */
  .post-content p,
  .entry-content p,
  .the-post-content p,
  .content-spacious p {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* Also bump up list items for consistency */
  .post-content li,
  .entry-content li,
  .content-spacious li {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Blockquotes slightly larger for emphasis */
  .post-content blockquote,
  .entry-content blockquote {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* Prevent any element from overflowing horizontally */
  .main-wrap,
  .wrap,
  .container {
    overflow-x: hidden !important;
  }

  /* Fix any tables that might overflow */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Fix pre/code blocks overflow */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
  }

  /* Ensure CONTENT images don't overflow (not featured images) */
  .post-content img,
  .entry-content img,
  .content-spacious img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Keep featured/hero images contained in their fixed-height containers */
  .featured img,
  .single-featured img,
  .feat-img img,
  .single-cover img,
  .single-creative .featured img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Fix embedded content (YouTube, etc.) */
  iframe,
  embed,
  object,
  video {
    max-width: 100% !important;
  }
}


/* ============================================
   5. TOUCH-FRIENDLY IMPROVEMENTS
   Better tap targets for mobile
   ============================================ */

@media (max-width: 768px) {
  /* Increase tap target size for navigation links */
  .mobile-menu-container .menu > li > a {
    padding: 14px 20px !important;
    min-height: 44px !important;
  }

  /* Improve social icon tap targets */
  .social-icons a,
  .social-links a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ============================================
   END OF MOBILE FIXES
   ============================================ */