/* 
 * ================================================================
 * Mobile Filter & Sort Sticky Header (Your Original - Fixed Selectors)
 * - Targets screens 1023px and narrower
 * ================================================================
*/
@media (max-width: 1023px) {

    /* --- 0. Easy-to-Edit Color Variables (Using Your Theme's Palette) --- */
    :root {
        --pill-bg-active: var(--theme-palette-color-8);   /* Brand Brown */
        --pill-text-active: #ffffff;                      /* White */
        --pill-bg-default: var(--theme-palette-color-10);  /* Medium Tan */
        --pill-text-default: var(--theme-palette-color-14); /* Medium Grey */
        --pill-divider-color: var(--theme-palette-color-7); /* white */
    }
	

/* --- 1. The Sticky Header Container (Final Version) --- */

aside#sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);

    /* --- Full Width Rules --- */
    width: calc(100% + 30px);  /* 100% + (2 * 15px) */
    margin-left: -15px;
    margin-right: -15px;
	
    /* This is your NON-STICKY padding */
    padding: 0px 15px;

    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center; 
}
	

    /* --- 2. "Pill Style" Category Filter (REVISED) --- */
    
    /* A. Reset to neutralize plugin defaults */
    .ct-sidebar .wpc-filters-widget-content .wpc-label-item,
    .ct-sidebar .wpc-filters-widget-content .wpc-term-item-content-wrapper,
    .ct-sidebar .wpc-filters-widget-content .wpc-label-item label,
    .ct-sidebar .wpc-filters-widget-content .wpc-filter-label-wrapper {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* B. Pill container setup */
    .ct-sidebar .wpc-filters-widget-content .wpc-filters-ul-list {
        display: flex;
        flex-direction: row;
        gap: 0;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
    }

    /* C. Core "Button" Styling */
    .ct-sidebar .wpc-filters-widget-content .wpc-filter-link {
        display: block;
        text-decoration: none !important;
        font-weight: 600;
        font-size: 12px; /* smaller so long text fits on one line */
        text-transform: uppercase; /* ALL CAPS */
        padding: 12px 14px; /* slightly taller */
        transition: background-color 0.2s ease, color 0.2s ease;
        text-align: center;
        white-space: nowrap;
        
        background-color: var(--pill-bg-default) !important;
        color: var(--pill-text-default) !important;
        border: none;
        border-radius: 0;
    }

    /* D. Dividing border + rounded corners */
    .ct-sidebar .wpc-filters-widget-content .wpc-label-item:first-child .wpc-filter-link {
        border-right: 1px solid var(--pill-divider-color) !important;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    .ct-sidebar .wpc-filters-widget-content .wpc-label-item:last-child .wpc-filter-link {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    /* E. Active/selected state */
    .ct-sidebar .wpc-filters-widget-content li.wpc-term-selected a.wpc-filter-link {
        background-color: var(--pill-bg-active) !important;
        color: var(--pill-text-active) !important;
        border-color: transparent !important;
    }

    /* F. Fix phantom gap between buttons with negative margin */
    .ct-sidebar .wpc-filters-widget-content .wpc-label-item + .wpc-label-item {
        margin-left: -8px !important; /* tweak: try -0.5px to -2px until it looks perfect */
    }

/* --- 3. Styled Sorting Dropdown (Tan, Polished, Matches Pills) --- */
.ct-sidebar .widget_wpc_sorting_widget { 
    width: 100%; 
}
.ct-sidebar .widget_wpc_sorting_widget .widgettitle { 
    display: none; 
}
.ct-sidebar .wpc-sorting-form { 
    width: 100%; 
    position: relative; 
}
.ct-sidebar .wpc-orderby-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 100%;
    margin-bottom: 0;

    background-color: var(--pill-bg-default) !important; /* always tan */
    border: none !important;
    border-radius: 16px; /* matches pill corners */
    padding: 12px 40px 12px 16px; /* same as pills, with chevron space */

    font-size: 12px; /* matches pills */
    font-weight: 600;
    text-transform: uppercase; /* matches pills */
    letter-spacing: 0.5px; /* subtle readability tweak */
    color: var(--pill-text-default) !important;
    cursor: pointer;


    /* Chevron */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
	
  /* * Targets the sort widget ONLY on the "archived-deals" page 
   * to adjust its vertical spacing.
   */
  body.category-archived-deals .widget_wpc_sorting_widget {
    margin-top: 10px;    /* Adds space ABOVE the sort button */
    margin-bottom: 5px;  /* Sets the space BELOW the sort button */
  }
}
/*
 * ================================================================
 * Tablet-Only Spacing Fix for Deal Archive Page
 * ================================================================
*/
@media (min-width: 768px) and (max-width: 1023px) {
  
  /* Adds a bit of space above the sort dropdown */
  body.category-archived-deals .widget_wpc_sorting_widget {
    margin-top: 15px; /* You can adjust this value */
  }

}

/*
 * ================================================================
 * Desktop - Custom Sort Menu (Scoped to Sidebar)
 * ================================================================
*/
@media (min-width: 1024px) {
  .widget_wpc_sorting_widget {
    display: none;
  }

  aside#sidebar .custom-sort-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  aside#sidebar .custom-sort-list a {
    display: block;
    padding: 10px 12px 10px 0px;
    text-decoration: none;
    color: #374151;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    font-size: 0.95em;
  }

  aside#sidebar .custom-sort-list a:hover {
    background-color: #F9FAFB;
    color: #111827;
  }

  aside#sidebar .custom-sort-list .active-sort a {
    background-color: #F7F5F2;
    color: #573519;
  }

  aside#sidebar .custom-sort-list .active-sort a::before {
    content: '▶';
    font-size: 0.75em;
    margin-right: 6px;
    margin-left: -6px;
    vertical-align: middle;
    display: inline-block;
    width: 12px;
    text-align: center;
  }

  aside#sidebar .custom-sort-list > li > a::before {
    content: '';
    display: inline-block;
    width: 12px;
  }

  /*
   * ================================================================
   * Desktop - Custom Category Menu (Scoped to Sidebar)
   * ================================================================
   */
  aside#sidebar .custom-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  aside#sidebar .custom-category-list a {
    display: block;
    padding: 10px 12px 10px 0px;
    text-decoration: none;
    color: #374151;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    font-size: 0.95em;
  }

  aside#sidebar .custom-category-list a:hover {
    background-color: #F9FAFB;
    color: #111827;
  }

  aside#sidebar .custom-category-list .active-cat a {
    background-color: #F7F5F2;
    color: #573519;
  }

  aside#sidebar .custom-category-list .active-cat a::before {
    content: '▶';
    font-size: 0.75em;
    margin-right: 6px;
    margin-left: -6px;
    vertical-align: middle;
    display: inline-block;
    width: 12px;
    text-align: center;
  }

  aside#sidebar .custom-category-list > li > a::before {
    content: '';
    display: inline-block;
    width: 12px;
  }

  /*
   * ================================================================
   * Desktop - Deal Archive Style (Static Label)
   * ================================================================
   */
  aside#sidebar .static-cat-label {
    display: block;
    padding: 10px 12px 10px 0px;
    font-weight: 500;
    font-size: 0.95em;
    background-color: #F7F5F2;
    color: #573519;
    border-radius: 6px;
  }

  aside#sidebar .static-cat-label::before {
    content: '▶';
    font-size: 0.75em;
    margin-right: 6px;
    margin-left: -6px;
    vertical-align: middle;
    display: inline-block;
    width: 12px;
    text-align: center;
  }
}

/* --- 1. Establish the positioning context on the parent container --- */
.your-page-wrapper-class {
    position: relative;
    overflow: hidden; /* Hides the parts of the watermark that go outside the container */
}

/* --- 2. Style the watermark image for the mid-left position --- */
.background-watermark {
    position: absolute;
    z-index: 1; /* Sits above the background but below the content */
    pointer-events: none; /* Prevents the image from being selectable */

    /* Sizing and Style */
    width: 400px;
    height: auto;
    opacity: 0.03; /* Makes it very faint */
    
    /* Positioning */
    top:250px;  /* Start from the vertical midpoint */
    right: 50px; /* Pull it left so only part is visible */
    
    /* This centers the element on the midpoint and then rotates it */
    transform: translateY(0%) rotate(-45deg); 
}
/* ================================================================
   Push socials to the bottom of the off-canvas menu (mobile only)
   ================================================================ */
@media (max-width: 1024px) {

  /* Make the mobile panel fill height & flex */
  #offcanvas .ct-panel-content[data-device="mobile"] {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Let inner wrapper stretch full height */
  #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
    display: flex;
    flex-direction: column;
    flex: 1; /* critical: takes remaining space */
  }

  /* Menu (ul) should not stretch */
  #offcanvas .mobile-menu {
    flex: 0 0 auto;
  }

  /* Push socials to bottom */
  #offcanvas .ct-header-socials[data-id="socials"] {
    margin-top: auto;  /* this does the pushing */
    padding-top: 15px;
    border-top: 1px solid var(--theme-palette-color-3);
    margin-left: 0px;
    margin-right: 0px;
  }

  /* Center the social icons row */
  #offcanvas .ct-header-socials[data-id="socials"] .ct-social-box {
    display: flex;
    justify-content: center;
    gap: 25px;
  }
}


/* ================================================================
   General CSS for Desktop + Mobile
   ================================================================ */

/* --- 1. Style for Expired Deals ---*/
article.category-archived-deals .deal-status-mobile {
    color: var(--theme-palette-color-15) !important; /* Muted Red */
}
/* Hide New Customers Only Lablel */
article.category-archived-deals .new-customers-only {
    display: none !important;
}
/* Hide clock SVG */
article.category-archived-deals .wp-block-stackable-icon.deal-status-mobile svg path {
    display: none !important;
}	
	
/* --- 2. Style for Active Deals --- */
article.category-active-deals .deal-status-mobile {
    color: #367c2a !important; /* Dark Green */
}
article.category-active-deals .wp-block-stackable-icon.deal-status-mobile svg path {
    fill: #367c2a !important; /* The same Dark Green */	
}
	
/* Hide New Customers Only Lablel */
article.category-active-deals .new-customers-only {
    display: none !important;
}
/* Hide expired caution sign */
article.category-active-deals .expired-meta-info {
    display: none !important;
}

/* --- 3. Style for New Customer Deals --- */
article.category-new-customers-only .ct-dynamic-data.deal-status-mobile {
    color: #367c2a !important; /* Dark Green */
}
article.category-new-customers-only .wp-block-stackable-icon.deal-status-mobile svg path {
    fill: #367c2a !important; /* The same Dark Green */
}
/* Hide expired caution sign */
article.category-new-customers-only .expired-meta-info {
    display: none !important;
}

/* --- 4. "No Code Required" Message Logic--- */
/*
 * This rule targets the .no-code-message block that IMMEDIATELY
 * follows the shortcode's output when a promo code exists.
 * This requires placing the "No Code Required" text block directly
 * after the shortcode block in the editor.
*/
.has-code-wrapper + .no-code-message {
    display: none !important;
    margin: 0 !important; /* Add this to remove leftover margin space */
}

.no-code-message {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 1;
}

/* Make sure the parent column has relative positioning */
.no-code-message:parent,
.wp-block-column:has(.no-code-message) {
    position: relative;
}

/* --- 5. Hiding Data Blocks --- */
/* These are still needed by the old PHP but should be invisible. */
.roaster-website-url,
.deal-promo-code-data {
    display: none;
}

/* ================================================================
   Mobile/Tablet Specific Styles - Up to 1023px
   ================================================================ */
/* --- Mobile Card External Spacing --- */  

@media (max-width: 1023px) {
	.entries {
        padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 5px;
        padding-right: 5px;
		margin-top: -20px
    }

/*    Promo Code Button Styling */

/* --- 1. Container --- */
/* This is now just a simple wrapper. The column block will handle alignment. */
.promo-area {
    width: 100%;
}

/* --- 2. Base Button Styles --- */
/* Simplified for easier tweaking next to another button. */
.deal-promo-button,
.bottom-deal-cta-button {
    display: block; /* A block element will fill its container */
    width: 100%;    /* Fills the width of the column it's in */
    
    /* --- KEY VALUES TO TWEAK --- */
    padding: 12px 0px;       /* TWEAK THIS: Controls button height and inner spacing */
    font-size: 16px;          /* TWEAK THIS: Adjust to match other button's text size */
    border-radius: 18px;      /* TWEAK THIS: Controls the roundness of corners */
    line-height: 1.3; /* <-- ADD THIS LINE */
	
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* --- 3. Styles for buttons WITH a promo code  */
.deal-promo-button.has-code,
.bottom-deal-cta-button.has-code {
    font-size: 16px; /* Slightly larger for promo codes */
	font-weight: 700;
    color: var(--theme-palette-color-7);
    background-color: var(--theme-palette-color-9);
    border: 2px solid var(--theme-palette-color-9);
}

/* --- 4. Styles for buttons with NO promo code */
.deal-promo-button.is-no-code,
.bottom-deal-cta-button.is-no-code {
    color: var(--theme-palette-color-9);
    background-color: transparent;
    border: 2px solid var(--theme-palette-color-9);
}
}

/* ================================================================
   Desktop Specific Styles - Above 1024px
   ================================================================ */
@media (min-width: 1024px) {

/* --- Desktop External Spacing --- */  
[class*="entries"] {
    gap: 50px 50px !important;
}
[class*="entry-card"] {
    margin-left: 0px !important;
	margin-right: 0px !important;
}
/*    Promo Code Button Styling */

/* --- 1. Container --- */
/* This is now just a simple wrapper. The column block will handle alignment. */
.promo-area {
    width: 100%;
}

/* --- 2. Base Button Styles --- */
/* Simplified for easier tweaking next to another button. */
.deal-promo-button,
.bottom-deal-cta-button {
    display: block; /* A block element will fill its container */
    width: 100%;    /* Fills the width of the column it's in */
    
    /* --- KEY VALUES TO TWEAK --- */
    padding: 10px 0px;       /* TWEAK THIS: Controls button height and inner spacing */
    font-size: 14px;          /* TWEAK THIS: Adjust to match other button's text size */
    border-radius: 18px;      /* TWEAK THIS: Controls the roundness of corners */
    line-height: 1.3; /* Important to keep buttons the same size */
	
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* --- 3. Styles for buttons WITH a promo code  */
.deal-promo-button.has-code,
.bottom-deal-cta-button.has-code {
    font-size: 14px; /* Slightly larger for promo codes */
	font-weight: 700;
    color: var(--theme-palette-color-9);
    background-color: var(--theme-palette-color-7);
    border: 2px solid var(--theme-palette-color-9);
}

/* --- 4. Styles for buttons with NO promo code */
.deal-promo-button.is-no-code,
.bottom-deal-cta-button.is-no-code {
    color: var(--theme-palette-color-9);
    background-color: transparent;
    border: 2px solid var(--theme-palette-color-9);
}
/* --- 5. Hover button color change */
.deal-promo-button:hover,
.bottom-deal-cta-button:hover {
	color: var(--theme-palette-color-7);
	background-color: var(--theme-palette-color-9);
}

/* --- 6. Full post bottom CTA updated design */
.bottom-deal-cta-button.has-code,
    .bottom-deal-cta-button.is-no-code {
        color: var(--theme-palette-color-7);
        background-color: var(--theme-palette-color-9);
		border-width: 0px;
       padding: 20px 0px;     
       font-size: 18px;      
	}
.bottom-deal-cta-button:hover {
        background-color: #2d5a27; /*dark green on hover */
    }
}
/* ================================================================
   True Desktop-Only Hover Effects (1181px is ipad air landscape cutoff)
   ================================================================ */
@media (min-width: 1181px) {

    /* --- 1. Card Hover Effect (Lift & Shadow) --- */

    /* Add performance hint and smooth transition to the main card container */
    article.entry-card {
        /* PERFORMANCE OPTIMIZATION: Force the element onto its own rendering layer */
        transform: translateZ(0);
        will-change:  /*transform, */ box-shadow, border-color;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
     outline: 1px solid transparent; 
	}

    /* Apply the "lift" (translateY) and the soft shadow when the card is hovered */
    article.entry-card:hover {
         transform: translateY(-6px); 
       box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 
      			   0 8px 10px -6px rgba(0, 0, 0, 0.2);
		border-color: black /*var(--theme-palette-color-14)*/ !important;
outline-color: black;
	}


    /* --- 2. Roaster Logo Effect (Grayscale to Color) --- */

    /* On desktop, make the logo grayscale by default */
	.home .roaster-logo,
	.archive.category-archived-deals .roaster-logo {
        filter: grayscale(100%);
        opacity: 0.5;
        transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;  
	}

    /* On hover of the *ENTIRE CARD*, restore the logo to full color */
	article.entry-card:hover .roaster-logo {
        filter: none;
        opacity: 1;
	}
    /* --- 3. NEW: Roaster Logo Container Border Hover Effect --- */

    /* Add a smooth transition for the border color change */
    .roaster-logo-container {
        transition: border-color 0.2s ease-in-out;
    }

    /* On hover of the *ENTIRE CARD*, change the border color of the logo container */
    article.entry-card:hover .roaster-logo-container {
       /*  border-color: black !important;  */
    }
}
/* ================================================================
   Column Selector Based on Screen Size - Overwrites Blocksy
   ================================================================ */
@media (min-width: 1024px) and (max-width: 1440px) {
    [class*="entries"] {
        --grid-template-columns: repeat(2, 1fr) !important;
    }
}
/*
 * ================================================================
 * Common Desktop Monitor Widths (for media query reference)
 * ================================================================
 * 1366px - HD / Small laptops; where sidebars can feel crowded.
 * 1400px - 4:3 aspect ratio (SXGA+); older professional monitors.
 * 1440px - 16:10 aspect ratio (WXGA+); common on MacBooks/laptops.
 * 1536px - Less common 16:9; some mid-range laptops.
 * 1600px - HD+; larger laptops and budget desktop monitors.
 * 1920px - Full HD (FHD); the most common desktop resolution target.
 * 2560px - QHD / 1440p; standard for premium 27" monitors.
 * 3440px - Ultra-Wide; requires a max-width content container.
 * 3840px - 4K / UHD; high-end standard, also needs max-width.
 * ================================================================
*/

/* ================================================================
   REORDER ARCHIVE CTA BELOW PAGINATION
   ================================================================ */
/* Reorder Blocksy archive page elements (v4 - Final Target) */
.ct-container > section {
  display: flex;
  flex-direction: column;
}

/* The main grid of posts has a default 'order' of 0, so it appears first. */

/* Target the pagination and set it as the second item */
.ct-container > section > .ct-pagination {
  order: 1;
}

/* Target your hooked CTA block and set it as the last item */
.ct-container > section > div[data-block^="hook:"] {
  order: 2;
}
/* More aggressive targeting if needed */
[class*="wp-block-cb-carousel"] .swiper {
    margin-top: -20px !important;
}



@media (min-width: 1181px) and (max-width: 1250px) {
  .site-branding[data-id="logo"] {
    margin-left: 5px !important;
  }
}

@media (min-width: 1000px) and (max-width: 1180px) {
  .site-branding[data-id="logo"] {
    margin-bottom: 20px !important;
    margin-left: 350px !important;
	margin-top: 20px !important;
  }
  .ct-header-text[data-id="text"] {
      margin-top: 20px !important;
	  margin-bottom: 20px !important;
  }