/*
 Theme Name:    Click To Prosper Theme
 Theme URI:     https://clicktoprosper.com
 Description:   A Custom Theme for GeneratePress 
 Author:        Sonia Zannoni
 Author URI:    hhttps://clicktoprosper.com
 Template:      generatepress
 Version:       1.2
*/

/* ==========================================================================
   1. GLOBAL & UTILITY
   ========================================================================== */

/* Optimization for Smooth Animations */
.query-card-standard, 
.query-card-featured {
    will-change: transform, box-shadow;
}

/* Featured Post Logic */
.featured-column.grid-100 { width: 100%; }
.featured-column.grid-100:not(.has-post-thumbnail) .gb-grid-wrapper > .gb-grid-column:first-child { display: none; }

/* Navigation Flex Fixes */
.featured-navigation .gb-grid-column:empty { flex: 0 1; }
@media (min-width: 769px) { .featured-navigation .gb-grid-column:not(:empty) { flex: 1 0; } }

/* Clean Paragraph Margins */
.gb-container p:last-child:last-of-type,
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
}

/* ==========================================================================
   2. CLICK TO PROSPER: CONTEXTUAL TYPOGRAPHY (TAG-AGNOSTIC)
   ========================================================================== */

/* 1. MAIN CONTENT TITLES (Featured & Grids) */
.query-title-content:is(h2) {
    font-size: clamp(1.625rem, 1.3125rem + 1.25vw, 2.25rem); /* H2: 26-36px */
}
.query-title-content:is(h3) {
    font-size: clamp(1.375rem, 1.125rem + 1vw, 1.875rem); /* H3: 22-30px */
}

/* 2. RELATED POSTS TITLES (16px - 20px) */
.query-title-related:is(h3) {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 3. SIDEBAR TITLES (Dense UI) */
.query-title-sidebar:is(h2) {
    font-size: clamp(1.25rem, 1.0625rem + 0.75vw, 1.625rem); /* H2: 20-26px */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.query-title-sidebar:is(h3) {
    font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem); /* H3: 16-18px */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================================
   3. LAYOUT GRID (The Strict 300px Lock)
   ========================================================================== */

@media screen and (max-width: 1240px) {
  .grid-post-template { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
  .post-content { order: 1; display: block; width: 100%; grid-column: auto !important; }
  /* .sidebar-content is hidden at this breakpoint by GenerateBlocks display rules — no CSS needed. */
}

@media screen and (min-width: 1241px) {
  .grid-post-template {
      display: grid;
      grid-template-columns: 1fr 80ch 300px 1fr;
      gap: 3rem; align-items: start;
  }  
  .grid-post-template .post-content { grid-column: 2 / 3; width: 100%; }
  .grid-post-template .sidebar-content { grid-column: 3 / 4; width: 300px; min-width: 300px; } 
}

.content-limit-80 { width: 100%; max-width: calc(80ch + 300px + 3rem); margin-left: auto; margin-right: auto; }

/* ==========================================================================
   4. NATIVE COMMENTS STYLING
   ========================================================================== */

.comments-area,
.separate-containers .comments-area { 
    max-width: 80ch; 
    width: 100%;
    margin-left: auto; 
    margin-right: auto;
    padding: 40px !important; /* Forces the padding to override the Customizer's zero setting */
    background-color: #ffffff; 
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); 
    box-sizing: border-box;
}

/* Mobile Optimization for Comments */
@media (max-width: 768px) {
    .comments-area,
    .separate-containers .comments-area {
        padding: 24px !important; /* Keeps it breathing nicely on an iPhone screen */
    }
}

/* ==========================================================================
   5. COMPACT SEARCH BAR
   ========================================================================== */

.sidebar-content .wp-block-search__input,
.sidebar-content .wp-block-search__button { padding: 4px 10px; font-size: 0.875rem; line-height: 1; }
.sidebar-content .wp-block-search { width: 100%; }

/* ==========================================================================
   6. NAVIGATION DROPDOWNS (Smart Cascade)
   ========================================================================== */

@media (min-width: 1025px) {
    .gb-menu-item .gb-sub-menu .gb-menu-item .gb-sub-menu {
        top: 0 !important; left: 100% !important; right: auto !important; margin-top: -5px;
    }
    .gb-menu > .gb-menu-item:last-child .gb-sub-menu .gb-menu-item .gb-sub-menu {
        left: auto !important; right: 100% !important; 
    }
}

/* ==========================================================================
   7. MOBILE HEADER TWEAKS
   ========================================================================== */

@media (max-width: 768px) {
    .wp-block-search__button, .wp-block-search__input {
        padding: 6px 10px !important; font-size: 14px !important; line-height: 1 !important;    
        min-height: auto !important; width: auto !important;            
    }
    .sidebar-content .wp-block-search, .wp-block-search { margin-bottom: 0 !important; }
}

/* ==========================================================================
   8. RELATED POSTS TABLET OPTIMIZATION
   ========================================================================== */

/* Hides the 3rd post in the related query loop on Tablets for a cleaner 2-column grid */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-third-on-tablet:nth-child(3) {
        display: none;
    }
}

/* ==========================================================================
   9. HIDE EMPTY COMMENTS AREA
   ========================================================================== */

/* Hides the specific text */
.no-comments {
    display: none !important;
}

/* Hides the entire white box if it is empty and closed */
.comments-area:has(.no-comments):not(:has(.comment-list)) {
    display: none !important;
}

/* ==========================================================================
   10. RANK MATH BREADCRUMBS: PER-WORD UNDERLINE
   ========================================================================== */

/* Target the Rank Math breadcrumb container */
.rank-math-breadcrumb {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em; 
}

/* Underline ONLY the links and the final word */
.rank-math-breadcrumb a, 
.rank-math-breadcrumb .last {
    text-decoration: underline;
    text-underline-offset: 2px; 
    text-decoration-thickness: 1px;
}

/* Force the separators (») to NOT have an underline */
.rank-math-breadcrumb span {
    text-decoration: none !important;
}

/* Hover effect */
.rank-math-breadcrumb a:hover {
    opacity: 0.7; 
}