/*
Theme Name:   CyberPulse Child
Theme URI:    https://themeforest.net/user/_nK/portfolio
Author:       nK
Template:     cyberpulse
Author URI:   https://nkdev.info/
Description:  CyberPulse Child Theme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  cyberpulse-child
Tags:
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* Sci-Fi Border Style */
.wp-block-image.is-style-sci-fi-border {
    /* Optional: Add padding/margin if needed to accommodate the border */
    padding: 0;
    margin: 1em 0;  /* Adjust for spacing */
}

.wp-block-image.is-style-sci-fi-border figure {
    position: relative;  /* Helps with positioning if adding overlays */
    border-style: solid;  /* Required for border-image */
    border-width: 30px;   /* Border thickness; match your slice size */
    /* border-image: url('https://your-site.com/wp-content/uploads/2025/10/sci-fi-border.png') 30 / 30px round; */
    /* Details:
       - url(): Full URL to your uploaded border PNG (from Media Library).
       - 30: Slice pixels (top/right/bottom/left; adjust per image, e.g., 20-50).
       - / 30px: Width of border (can scale differently).
       - round: Repeat mode (alternatives: repeat, stretch, space).
    */
    border-image-outset: 0;  /* Prevent overlap on content */
    box-sizing: border-box;  /* Include border in element size */
    overflow: hidden;  /* Clip any image overflow */
}

.wp-block-image.is-style-sci-fi-border img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;  /* Remove any default gaps */
}

/* Optional: Responsiveness */
@media (max-width: 768px) {
    .wp-block-image.is-style-sci-fi-border figure {
        border-width: 20px;
        /* border-image: url('https://your-site.com/wp-content/uploads/2025/10/sci-fi-border.png') 20 / 20px round; */
    }
}

/* Optional: Hover effect for sci-fi feel */
.wp-block-image.is-style-sci-fi-border figure:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);  /* Glowing cyan shadow */
    transition: box-shadow 0.3s ease;
}