/*
 Theme Name:   Exploribotics
 Template:     blogone
*/

/* --- 1. ANIMATED LINKS --- */
.exploribotics-animated-link {
  color: white;
  font-weight: 600;
  font-size: 1.2rem; 
  position: relative;
  display: inline-block;
  /* Ensure the background gradient is exactly what you want */
  background: linear-gradient(to right, #007bff 50%, #9a9a9a 50%); 
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:
    background-position 0.25s ease, 
    font-size 0.25s ease;
}

.exploribotics-animated-link:hover {
  background-position: 0 0;
  font-size: 2rem;
}

/* --- 2. ROUNDED CORNERS --- */
article { 
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    background-color: #fff;
    margin-bottom: 30px;
}

/* --- 3. HIDING UNWANTED ELEMENTS (Specific Blog Meta) */
.bs-date {
    display: none !important;
}
.bs-time {
    display: none !important;
}
.bs-author,
.bs-category {
    display: none !important;
}
.entry-meta .posted-on,
.entry-meta .comments-link,
.entry-footer,
.breadcrumb-area,    
.page-header,        
.page-title {        
    display: none !important;
}

/* ------------------------------------------------------------------- */
/* --- 4. WOOCOMMERCE MINI-CART VISIBILITY FIX (Sharp Text) --- */
/* ------------------------------------------------------------------- */

/* --- A. ICON COLOR FIX (Unhovered and Hovered) --- */
.exploribotics-animated-link.nav-cart .wc-block-mini-cart__button {
    color: #9a9a9a !important; 
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.exploribotics-animated-link.nav-cart .wc-block-mini-cart__button:hover {
    color: #007bff !important;
}


/* --- B. BADGE COLOR FIX (The Number Text) --- */
.exploribotics-animated-link.nav-cart .wc-block-mini-cart__badge {
    background-color: #007bff !important;
    
    /* We retain the color rule */
    color: #FFFFFF !important; 
    
    /* SHARP WHITE TEXT SHADOW: We set the blur radius to 0 and stack 
       multiple sharp shadows to force the color without fuzziness. */
    text-shadow: 0 0 0 #FFFFFF, 0 0 0 #FFFFFF, 0 0 0 #FFFFFF;
    
    min-width: 1.2em; 
    height: 1.2em;
    line-height: 1.2em;
}


/* ------------------------------------------------------------------- */
/* --- 6. CENTERED CONTENT (90% Width) --- */
/* ------------------------------------------------------------------- */

/* Target the specific column element, set width to 90% and center it */
.col-xl-8.col-lg-8.col-md-12.col-12 {
    width: 90% !important; /* Set width to 90% of parent */
    max-width: 90% !important; /* Ensure no higher max-width interferes */
    
    float: none !important; 
    display: block !important;
    margin-left: auto !important; /* CRITICAL: Centers the 90% width block */
    margin-right: auto !important;
}

/* Ensure the inner wrappers don't interfere with the float behavior */
.bs-content-area,
.bs-content-area-inner {
    float: none !important;
}

/* Explicitly Center the Page Title (Retained) */
.blog-post-item .blog_content {
    text-align: center !important; 
}
/* Ensure the title itself can be centered */
.blog-post-item .blog_content .title {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ------------------------------------------------------------------- */
/* --- 7. FINAL SOLUTION: FIXED POSITIONING FOOTER (FORCE LAYOUT) --- */
/* ------------------------------------------------------------------- */

/* 1. Universal Clean Slate: Removes default margins/padding. */
html, 
body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
}

/* 2. Decouple the Footer and Stick it to the Bottom of the Viewport */
#custom-footer {
    position: fixed !important; /* Forces the footer out of the normal document flow */
    bottom: 0 !important;       /* Sticks it to the bottom of the viewport */
    width: 100% !important;     /* Ensures it spans the entire screen */
    z-index: 9999;              /* Keeps it above all other content */
}

/* 3. Global Content Wrapper Cleanup: Ensure zeroing on the content area. */
.bs-page_wrapper,
.bs-section.bs-blog_section,
.site-content {
    margin-bottom: 0 !important;
    overflow-y: visible !important; 
}

/* 4. CRITICAL SPACE COMPENSATION: Add large bottom padding to the main wrapper 
   to prevent content from being hidden behind the fixed footer. 
   This value should be slightly larger than the height of your footer. */
.bs-page_wrapper {
    /* If your footer is ~100px tall, use 120px padding for clearance. */
    padding-bottom: 120px !important; 
    margin-bottom: 0 !important; 
}

/* ADDED: Makes the footer initially hidden (off-screen) */
#custom-footer {
    /* Keep all your existing rules (position: fixed, bottom: 0, etc.) */
    /* Add this line to move the footer down by its own height, making it invisible */
    transform: translateY(100%); 
    /* Add a smooth transition */
    transition: transform 0.3s ease-in-out; 
}

/* ADDED: This class will be toggled by JavaScript to show the footer */
#custom-footer.is-visible {
    transform: translateY(0); /* Brings the footer back up to bottom: 0 */
}

.scrollToTopBtn {
    /* Set a higher stacking order than the fixed footer (z-index: 9999) */
    z-index: 10000 !important; 
}

/* Force the background to be transparent on the Portfolio page, 
   using the special class added by PHP. */
.force-transparent {
    background: transparent !important;
    box-shadow: none !important; /* Also remove any shadow the theme might add */
}



/* ------------------------------------------------------------------- */
/* --- 8. PORTFOLIO GEAR OVERLAY AND ANIMATION (MANUAL GAP CENTERING) --- */
/* ------------------------------------------------------------------- */

/* A. Configuration Variables (Single Control Point) */
:root {
    /* POSITION & SCALE */
    --gear-x: -50%;       /* Horizontal position offset (Centered Gear) */
    --gear-y: -50%;       /* Vertical position offset (Centered Gear) */
    --gear-size: 130%;    /* Gear width/height */
    
    /* ANIMATION & IMAGE */
    --gear-speed: 6s;     
    --gear-url: url('http://www.exploribotics.com/wp-content/uploads/2025/11/goldGear2.svg'); 
    
    /* *** GAP ALIGNMENT CONTROLS ***
    UPDATE THESE VARIABLES MANUALLY to match the values in your 
    Visual Portfolio plugin's Horizontal and Vertical Gap settings.
    */
    --gap-x: 40px; /* Set to match Visual Portfolio Horizontal Gap */
    --gap-y: 40px; /* Set to match Visual Portfolio Vertical Gap */
}

/* B. Spinning Animation Keyframes */
@keyframes spin {
    to {
        transform: translate(var(--gear-x), var(--gear-y)) rotate(360deg); 
    }
}

/* C. Gear Styling and Position Shift */
.vp-portfolio__item-wrap {
    position: relative; 
    overflow: visible; 
    z-index: 10; 
}

.vp-portfolio__item-wrap::before {
    content: "";
    display: block;
    
    background-image: var(--gear-url); 
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center center;
    
    width: var(--gear-size); 
    height: var(--gear-size); 
    
    position: absolute;
    /* CRITICAL SHIFT: Shifts the gear's anchor point to the visual center 
       of the smaller, bottom-right-aligned image content. */
    left: calc(50% + (var(--gap-x) / 2));
    top: calc(50% + (var(--gap-y) / 2));
    
    /* Centers the gear itself relative to the shifted anchor point */
    transform: translate(var(--gear-x), var(--gear-y)); 
    transform-origin: 50% 50%; 
    
    opacity: 1; 
    z-index: 0; 
}

/* D. Animation Trigger and Z-Index Fixes */
.vp-portfolio__item-wrap:hover::before { 
    animation: spin var(--gear-speed) linear infinite; 
}

.vp-portfolio__item {
    position: relative;
    z-index: 1; 
}

/* ------------------------------------------------------------------- */
/* --- E. LAYOUT OVERRIDES & IMAGE INTEGRITY --- */
/* ------------------------------------------------------------------- */

/* Anti-Cropping Fix (Keeps the large gear visible) */
.vp-portfolio__items-wrap,
.vp-portfolio__items {
    overflow: visible !important; 
}

/* Ensure images are perfectly circular and fit the shrunk space */
.vp-portfolio__item-img-wrap,
.vp-portfolio__item-img, 
.vp-portfolio__item-img a,
.vp-portfolio__item-img img {
    /* Maintain the circular shape */
    border-radius: 50% !important; 
    /* Essential resets to prevent previous fix attempts from interfering */
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    height: 100% !important;
    width: 100% !important;
}


/* ------------------------------------------------------------------- */
/* --- 9. PORTFOLIO PAGE: FULL-WIDTH GRID (95vw) --- */
/* ------------------------------------------------------------------- */

/* 1. Expand all layout wrappers to 95% of screen width */
.page-id-495 #content .container,
.page-id-495 #content .row,
.page-id-495 #content .col-xl-8 {
    width: 95vw !important;
    max-width: 95vw !important;
    min-width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    flex: 0 0 95vw !important;
}

/* 2. Ensure the Portfolio fills the expanded container */
.page-id-495 .wp-block-visual-portfolio.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
}

/* 3. Global fix for horizontal scrollbars on this page */
.page-id-495, 
.page-id-495 body {
    overflow-x: hidden !important;
}




/* ------------------------------------------------------------------- */
/* --- 10. PORTFOLIO SINGLE PAGE: FEATURED IMAGE CENTERING --- */
/* ------------------------------------------------------------------- */

/* This targets the container for the main picture on single project pages */
body.single-portfolio .blog-thumb {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    /* Safety: Ensure no backgrounds or animations inherit here */
    background: none !important;
    animation: none !important;
}

/* This centers the actual image within that container */
body.single-portfolio .blog-thumb img.thumbnail-blog {
    display: inline-block !important;
    margin: 0 auto !important;
    float: none !important;
    height: auto !important;
    max-width: 100% !important;
}

/* This centers the "The Pioneer" title text */
body.single-portfolio .blog_content .title {
    text-align: center !important;
}


/* ------------------------------------------------------------------- */
/* --- 11. COMMENTS SECTION: INTERNAL INSET (THE TEXT BUFFER) --- */
/* ------------------------------------------------------------------- */

/* 1. Reset the box and add solid internal padding */
.bs-comment-list .comment-body {
    padding: 30px 40px !important; /* This creates the 'No-Go' zone at the edges */
    margin-bottom: 30px !important;
    background-color: #ffffff; /* Ensures the white background stays behind the text */
    border: 1px solid #eee; /* Optional: adds a slight definition to the box */
}

/* 2. Target the text container specifically to push it inwards */
.comment-content, 
.comment-meta, 
.reply {
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: block !important;
}

/* Hide the Website/URL field in the comment form */
.comment-form-url {
    display: none !important;
}

/* Hide the 'Save my name/email/website' checkbox and label */
.comment-form-cookies-consent {
    display: none !important;
}


/* ------------------------------------------------------------------- */
/* --- 12. HIDE PORTFOLIO NAVIGATION (NEXT/PREV WIDGETS) --- */
/* ------------------------------------------------------------------- */

/* This targets the specific widget boxes shown in your code */
.single-portfolio .recent-post-widget.post-widget-box {
    display: none !important;
}

/* This removes the extra margin/row container that held those widgets */
.single-portfolio .row.mt-4:has(.post-widget-box) {
    display: none !important;
}


/* ------------------------------------------------------------------- */
/* --- 15. ROBOT X-RAY VISION SYSTEM --- */
/* ------------------------------------------------------------------- */

.xray-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

/* Internal Drive Train (The bottom layer) */
.internal-layer {
    display: block;
    width: 100%;
    height: auto;
}

/* External Shell (The top layer) */
.external-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 5;
    /* This is the key: we will update this mask via JS */
    mask-image: radial-gradient(circle at -100% -100%, transparent 80px, black 81px);
    -webkit-mask-image: radial-gradient(circle at -100% -100%, transparent 80px, black 81px);
}