/*
 Theme Name:   Blocksy Child
 Theme URI:    https://creativethemes.com/blocksy/
 Description:  Child theme for the Blocksy WordPress theme
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     blocksy
 Version:      1.0.0
 Text Domain:  blocksy-child
*/

/* Add your custom CSS below */

/* Set your desired fixed image size */
:root {
  --gkit-img-width: 1003px;   /* change this */
  --gkit-img-height: 600px;  /* change this */
}

/* Apply fixed size to all GutenKit images except excluded ones */
.gutenkit [class*=wp-block-gutenkit-] 
    img:not(
        .wp-block-gutenkit-advanced-image .gkit-image,
        .wp-block-gutenkit-pro-featured-image img,
        .wp-block-gutenkit-team img,
        .wp-block-gutenkit-image-comparison .gkit-image-comparison img-comparison-slider figure img,
        [draggable]
    ) {
    
    width: var(--gkit-img-width);
    height: var(--gkit-img-height);

    /* How the image fits in the box */
    object-fit: cover;      /* fill + crop (recommended) */
    object-position: center;

    display: block;
    border-radius: 6px;     /* optional */
}

/* Set your desired fixed height */
:root {
  --carousel-slide-height: 900px;
}

/* Force each slide wrapper to a fixed height */
.carousel.slick-initialized .slick-slide > .uagb-post__inner-wrap {
    display: block;
    height: var(--carousel-slide-height);
    overflow: hidden; /* prevents content overflow */
}

/* Ensure the image matches the slide height */
.carousel.slick-initialized .slick-slide > .uagb-post__inner-wrap img {
    width: 100%;
    height: var(--carousel-slide-height);
    object-fit: cover;      /* keeps images uniform */
    object-position: center;
    display: block;
}
/* Default: MOBILE (list) */
.wp-block-categories,
.wp-block-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-block-categories li,
.wp-block-categories-list li {
    display: block;          /* vertical list on mobile */
    margin-bottom: 8px;
}

/* DESKTOP: Inline categories */
@media (min-width: 768px) {
    .wp-block-categories,
    .wp-block-categories-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    .wp-block-categories li,
    .wp-block-categories-list li {
        display: inline-block;   /* inline on desktop */
        margin-bottom: 0;
    }
}

.uagb-slick-carousel ul.slick-dots { 
  top: 72%;
	position: absolute;
}
/* Wrapper heading block */
.wp-block-gutenkit-heading {
    position: relative;
    text-align: center;
}

/* Heading text */
.wp-block-gutenkit-heading .gkit-heading-title {
    position: relative;
    display: inline-block;
    padding: 0 20px; /* space between text and lines */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 500;
    color: #3f4f63;
}

/* Left line */
.wp-block-gutenkit-heading .gkit-heading-title::before,
.wp-block-gutenkit-heading .gkit-heading-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 120px; /* line length */
    height: 1px;
    background-color: #000;
}

/* Position left */
.wp-block-gutenkit-heading .gkit-heading-title::before {
    right: 100%;
    margin-right: 20px;
	width: 500px;
}

/* Position right */
.wp-block-gutenkit-heading .gkit-heading-title::after {
    left: 100%;
    margin-left: 20px;
	width: 500px;
}
a.uagb-buttons-repeater.wp-block-button__link.customize-unpreviewable {
    background-color: #E58C18 !important;
}
.uagb-button__wrapper {
    background-color: transparent !important;
}



 /* base (non-sticky) — you can hide or style as you like */
  #reading-progress-wrapper {
    position: absolute; /* default; change if you prefer hidden until sticky */
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
    transition: top 160ms ease;
  }

  /* sticky state applied when scroll >= 30mm */
 #reading-progress-wrapper.is-sticky
 {
    position: fixed;
    top: 180px;
    left: 4%;
    width: 60%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#reading-progress-container
 {
    width: 100%;
    background: #e5e5e5;
    overflow: hidden;
    border-radius: 58px;
    height: 14px !important;
}
#reading-progress-bar{
    height: 15px !important;
    background: #2c3e50;
    width: 0%;
    transition: width 0.1s linear;
}
/* Mobile devices only (max-width: 768px or adjust as needed) */
@media (max-width: 768px) {
    #reading-progress-wrapper.is-sticky {
        position: fixed;
        top: 70px;
        left: 4%;
        width: 90%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        z-index: 9999;
    }
}
@media (max-width: 480px) {
    #reading-progress-wrapper.is-sticky {
        position: fixed;
        top: 70px;
        left: 4%;
        width: 90%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        z-index: 9999;
    }
}
div#block-288261ca-7ce1-48cd-82e3-e3a357bd5331 {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}


/* 1. Target the CONTAINER to enforce a 1:1 (square) aspect ratio */
.sp-pcp-post .sp-pcp-post-thumb-area {
    /* Required to contain the image */
    display: block; 
    overflow: hidden; 
    width: 100%;

    /* Modern method to force the container to be square */
    aspect-ratio: 1 / 1; 
    height: auto; /* Ensure height is driven by aspect-ratio */
}

/* 2. Target the IMAGE to fill the container perfectly */
.sp-pcp-post .sp-pcp-post-thumb-area img {
    /* Image must fill the 100% of the container */
    width: 100%;
    height: 100%;
    
    /* ESSENTIAL: Scales the image to cover the entire container 
       while preserving its aspect ratio and cropping any excess. */
    object-fit: cover; 
    
    /* Keep existing transition */
    transition: ease all .3s;
    
    /* Remove original max-width if it's causing issues, but 100% is fine */
    max-width: 100%; 
}

.sp-pcp-section .swiper-container.sp-pcp-carousel.top_right {
    position: initial !important;
	margin-top
}

.pcp-carousel-wrapper .sp-pcp-carousel {  
  padding-top: 0px !important;
}

/* --- 1. CENTER ALIGNMENT FOR CONTENT --- */
/* Target the main content container to center everything inside it (title, meta, etc.) */
.sp-pcp-post-details-content {
    text-align: center; /* Requirement: text-align: center; */
    padding: 10px 0; /* Add some vertical padding for spacing */
}

/* --- 2. TITLE STYLING --- */
.sp-pcp-title a {
    /* Set the required font family, size, and weight */
    font-family: 'Playfair Display', serif; /* Requirement: font-family: Playfair Display; */
    font-weight: 400;                  /* Requirement: font-weight: 400; */
    font-size: 15px !important;                   /* Requirement: font-size: 15px; */
    
    /* Optional: Remove the default underline and set a color */
    text-decoration: none; 
    color: #333; /* Adjust color as needed */
    
    /* Ensures the link behaves as a block/inline-block for better centering and flow */
    display: inline-block; 
}

/* Ensure the title container itself doesn't interfere with centering */
.sp-pcp-title {
    margin: 5px 0; /* Adjust vertical margin */
}

/* --- 3. META DATA STYLING --- */
.sp-pcp-post-meta {
    /* Apply the font family and weight to the meta text as well */
    font-family: 'Tajawal', serif;
    font-weight: 400; 
    font-size: 15px !important; /* Slightly smaller for meta data is common, adjust to 15px if needed */
    color: #888; /* Dim the color for secondary information */
    margin-bottom: 10px; /* Space below the meta */
}

/* Clean up meta list */
.sp-pcp-post-meta ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display items in a line */
    justify-content: center; /* Center the list items horizontally */
}

.sp-pcp-post-meta ul li {
    margin: 0 5px; /* Spacing between the author and date */
    display: inline-block;
}

.ct-footer .ct-widget{
	margin:auto;
}

@media (min-width: 1000px) {
  .ct-footer [data-column] {
    position: relative;
    margin: auto;
  }
}

#poststuff #sp_pcp_display .sp-pcp-section .pcp-section-title, 
#pcp_wrapper-2187 .pcp-section-title {
    /* Border above the element */
    border-top: 1px solid #000; 
	font-family: 'Playfair Display', serif;
    
    /* Border below the element */
    border-bottom: 1px solid #000;
}