/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
 
/* Main Popular Posts Widget Styling */
.popular-posts {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Ensure widget uses full width */
    box-sizing: border-box; /* Prevent padding from affecting the width */
}

.popular-posts li {
    margin-bottom: 15px;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
    min-height: 120px; /* Consistent height for layout stability */
    transition: background-color 0.3s ease;
}

.popular-post-thumb {
    margin: 0 auto 8px;
    width: 100%; /* Ensure the image uses the container's width */
    height: auto;
    overflow: hidden;
    position: relative;
}

.popular-post-thumb img {
    width: 100%;
    max-height: 175px;
    height: auto;
    object-fit: cover;
    border: 2px solid #555;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.popular-post-thumb:hover img {
    transform: scale(1.05);
}

.popular-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.popular-post-title {
    font-size: 18px;
    text-align: center;
    margin: 0;
    line-height: 1.2em; /* Ensure reserved space for title */
    min-height: 2.4em; /* Adjust to match expected title length */
}

/* Hover effect for title underline */
.popular-post-link:hover .popular-post-title {
    text-decoration: underline;
}

/* Hover effect for list item background */
.popular-posts li:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Light background color on hover */
    border-radius: 4px;
}

/* Widget title styling */
.widget-title {
    font-weight: 700 !important;
    margin-bottom: 0em;
    line-height: 1.5;
    font-size: 22px;
    text-align: center;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .widget-title {
        font-size: 20px;
    }

    .popular-posts li {
        padding: 10px;
    }

    .popular-post-thumb img {
        max-height: 150px;
    }
}

/* Only apply styling to content/featured images inside FUNNY posts */
.custom-image-width .entry-content img,
.custom-image-width .post-thumbnail img {
    width: 700px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 2px solid #333;
}

/* Exclude avatars from being affected */
.custom-image-width .avatar,
.custom-image-width .author img,
.custom-image-width .post-meta img {
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-radius: 50% !important; /* keep them circular */
}


/* Style the image caption */
figcaption.wp-element-caption {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 5px;
    color: #666;
}

/* Container for share count and buttons */
.share-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-block: 5px;
    margin-top: -10px;
}

/* Share count styles */
.share-count-container {
    text-align: center;
    margin-top: 12px;
}

.share-count-number {
    font-size: 15px;
    font-weight: bold;
    display: block;
    line-height: 0.2;
}

.share-text {
    font-size: 12px;
    margin-top: -20px;
}

/* Style for social icons */
.social-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-share-btn {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    padding: 1px 30px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* Specific background colors for each platform */
.social-share-btn[data-platform="facebook"] {
    background-color: #3b5998;
}

.social-share-btn[data-platform="twitter"] {
    background-color: #000000;
}

.social-share-btn[data-platform="pinterest"] {
    background-color: #e60023;
}

.social-share-btn[data-platform="reddit"] {
    background-color: #ff4500;
}

/* Hover effects to slightly darken the background */
.social-share-btn[data-platform="facebook"]:hover {
    background-color: #2d4373;
}

.social-share-btn[data-platform="twitter"]:hover {
    background-color: #333333;
}

.social-share-btn[data-platform="pinterest"]:hover {
    background-color: #b81b1b;
}

.social-share-btn[data-platform="reddit"]:hover {
    background-color: #cc3700;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .share-container {
        justify-content: center;
        gap: 5px;
        margin-top: 0;
    }

    .share-count-number {
        font-size: 13px;
    }

    .share-text {
        font-size: 10px;
    }

    .social-share-btn {
        font-size: 16px;
        padding: 1px 20px;
    }
}


/* ==========================================================
   QUIRK FINDS — main + subcategories + single posts styling
   ========================================================== */

/* 1️⃣ Hide hero title on archive pages (main + subcategories) */
body.quirk-finds-section .hero-section[data-type="type-1"] > header.entry-header > h6.page-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 2️⃣ Hide entry-meta (date, author, etc.) on all archive/list cards */
body.quirk-finds-section .entry-card .entry-meta,
body.quirk-finds-section .ct-archive .entry-card .entry-meta,
body.quirk-finds-section .ct-grid .entry-card .entry-meta,
body.quirk-finds-section .ct-list .entry-card .entry-meta {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 3️⃣ Product card images — show full image neatly, not cropped */
body.quirk-finds-section .entry-card .ct-media-container,
body.quirk-finds-section .entry-card .entry-card-media,
body.quirk-finds-section .entry-card .post-thumbnail {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 6px !important;
}

body.quirk-finds-section .entry-card img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

/* 4️⃣ Card layout alignment */
body.quirk-finds-section .entry-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* 5️⃣ Entry titles — center and handle long titles gracefully */
body.quirk-finds-section .entry-card .entry-title {
  font-size: 20px !important;
  text-align: center !important;
  display: inline-block !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* 6️⃣ Single post titles (centered + consistent sizing) */
body.quirk-finds-section.single h1.page-title {
  font-size: 25px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  width: 100% !important;
}

@media (max-width: 980px) {
  body.quirk-finds-section.single h1.page-title {
    font-size: 22px !important;
  }
}

/* 7️⃣ Mobile adjustments — fix overflow & maintain proportions */
@media (max-width: 980px) {
  body.quirk-finds-section .entry-card .ct-media-container {
    padding: 4px !important;
  }

  body.quirk-finds-section .entry-card img {
    max-height: 200px !important;
    margin-bottom: 0 !important;
  }
}

/* 8️⃣ Quirk-Finds Sidebar widgets (keep clean, minimal layout) */
.quirk-finds-sidebar .widget {
  margin-bottom: 18px !important;
  padding-bottom: 0;
}

.quirk-finds-sidebar .widget .widget-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

.quirk-finds-sidebar .popular-posts li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.quirk-finds-sidebar .popular-posts li:last-child {
  border-bottom: none;
}

.quirk-finds-sidebar .popular-post-thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ddd;
}

.quirk-finds-sidebar .popular-post-title {
  font-size: 14px;
  line-height: 1.2;
  color: inherit;
}


/* ==========================================================
   FIX: Quirk-Finds sidebar thumbnails – show full image
   ========================================================== */

.quirk-finds-sidebar .popular-post-thumb img,
#quirk_finds_sidebar .popular-post-thumb img,
.related-products .popular-post-thumb img {
  width: 100% !important;
  height: auto !important;
  max-height: 175px !important;
  object-fit: contain !important;  /* show full product image */
  display: block !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 4px !important;
}


/* Quirk Finds: reduce product box width on desktop only */
@media (min-width: 981px) {
  /* container width */
  .quirk-product-box {
    max-width: 700px;       /* change to taste (900 / 800 / 700 etc) */
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;     /* keep the internal padding if you want */
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* ensure inner layout stays two-column and image fits */
  .quirk-product-box > .wp-block-group.is-nowrap,
  .quirk-product-box .wp-container-core-group-is-layout-6c531013,
  .quirk-product-box .wp-block-group-is-layout-flex {
    display: flex !important;
    gap: 70px;
    align-items: flex-start;
    flex-wrap: nowrap;
  }

  /* image column: let it be a fixed-ish width */
  .quirk-product-box .wp-block-image img {
    width: 120% !important;      /* override inline style widths */
    max-width: 1660px;            /* change to taste */
    height: auto !important;
    display: block;
  }

  /* content column: take remaining width */
  .quirk-product-box .wp-block-group.is-layout-flex,
  .quirk-product-box .wp-block-group.wp-container-core-group-is-layout-6c531013 ~ .wp-block-group {
    flex: 1 1 auto;
    min-width: 0;
  }
}


/* Mobile: stack product image above text and make it full-width */
@media (max-width: 980px) {
  /* Target your product container (both safe selectors) */
  .quirk-product-box,
  .wp-container-core-group-is-layout-2bc9f0d2 {
    /* ensure the outer block stacks vertically */
    display: block !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Make the inner flex row become column */
  .quirk-product-box .wp-block-group.is-nowrap,
  .quirk-product-box .wp-block-group.wp-container-core-group-is-layout-6c531013,
  .wp-container-core-group-is-layout-2bc9f0d2 > .wp-block-group.is-nowrap,
  .wp-container-core-group-is-layout-2bc9f0d2 .wp-block-group.wp-container-core-group-is-layout-6c531013,
  .quirk-product-box .wp-block-group-is-layout-flex,
  .wp-container-core-group-is-layout-2bc9f0d2 .wp-block-group-is-layout-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Make the product image full width and remove restrictive inline sizing */
  .quirk-product-box .wp-block-image img,
  .wp-container-core-group-is-layout-2bc9f0d2 .wp-block-image img {
    width: 90% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
    object-fit: contain !important;
  }

  /* Ensure any image wrapper doesn't keep a fixed size */
  .quirk-product-box .wp-block-image,
  .wp-container-core-group-is-layout-2bc9f0d2 .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Slightly tighten text spacing on mobile */
  .quirk-product-box p,
  .wp-container-core-group-is-layout-2bc9f0d2 p {
    margin-top: 6px;
    margin-bottom: 10px;
  }
}


/* 1) Scoped to Quirk-Finds sidebar: boxed search widget */
/* Make Quirk-Finds search box black / high-contrast */
#quirk_finds_sidebar .ct-widget.is-layout-flow.widget_block.widget_search,
#block-109,
.quirk-finds-sidebar .widget_search,
.quirk-finds-sidebar #block-109 {
  border: 1px solid #000 !important;         /* strong black border */
  background: transparent !important;        /* keep background clean */
  padding: 12px !important;
  border-radius: 8px !important;
	margin-bottom: 25px;
}

/* inside layout */
#quirk_finds_sidebar .wp-block-search__inside-wrapper,
#block-109 .wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* input: black text and black-ish outline */
#quirk_finds_sidebar .wp-block-search__input,
#block-109 .wp-block-search__input {
  flex: 1 !important;
  padding: 10px 12px !important;
  border: 1px solid #000 !important;        /* black input border */
  color: #000 !important;                   /* black input text */
  background: #fff !important;              /* white input background for contrast */
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* placeholder slightly muted but readable */
#quirk_finds_sidebar .wp-block-search__input::placeholder,
#block-109 .wp-block-search__input::placeholder {
  color: #666 !important;
  opacity: 1 !important;
}

/* button: keep existing color, but use black border to match */
#quirk_finds_sidebar .wp-block-search__button,
#block-109 .wp-block-search__button {
  padding: 9px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #000 !important;        /* black border on button */
  background: #1f7aff !important;           /* keep blue CTA if you want */
  color: #fff !important;
  font-weight: 600 !important;
}



/* Badge above wpDiscuz form (tilted rectangle + straight text) */
.wpd-form-wrap { 
  position: relative; 
  padding-top: 50px; /* space for the badge - increase/decrease if it overlaps */
}

/* tilted background */
.wpd-form-wrap::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  width: 145px;
  height: 28px;
  background: #2872fa;           /* your requested color */
  transform: skewX(-22deg);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 10;
  border: 1px solid rgba(0,0,0,0.06);
}

/* straight white text on top of the tilted bg (counter-skew + centered) */
.wpd-form-wrap::after{
  content: "Conversation";
  position: absolute;
  left: 18px;
  top: 12px;
  height: 44px;
  line-height: 44px;            /* vertically centers the text */
  z-index: 11;
  font-weight: 700;
  font-size: 20px;
  transform: skewX(3deg);      /* counter the background skew so text is straight */
  color: #ffffff;               /* white text */
  letter-spacing: 0.4px;
}

/* Mobile adjustments */
@media (max-width: 600px){
  .wpd-form-wrap { padding-top: 72px; }
  .wpd-form-wrap::before{ width: 130px; height: 25px; left: 14px; top: 14px; }
  .wpd-form-wrap::after{ left: 20px; top: 9px; font-size:18px; line-height:33px; }
}