/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Version: 1.0
*/
/* ==========================================================================
   Zamalek Association - Global Typography
   ========================================================================== */
html {
    scroll-padding-top: 88px; 
    scroll-behavior: smooth; /* Optional: Makes the scroll animation look really nice */
}
/* Set the default body font for all standard text, paragraphs, and UI */
body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    color: rgb(87, 117, 107);
    font-size: 1rem;
}

/* Set the specific serif font for all headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Newsreader', Georgia, serif;
}

h2 {
    color: rgb(21, 40, 34);
    font-size: 3rem;
}

h3 {
    color: rgb(21, 40, 34);
    font-size: 1.25rem;
}

/* Update your specific custom classes (if you want to override defaults) */
.z-site-title,
.project-single-container,
.project-main-title,
.card-title,
.card-title a {
    font-family: 'Newsreader', Georgia, serif;
}
.text-primary {
    color:rgb(34, 119, 69);
}
/* ==========================================================================
   Main Header Wrapper (Includes Sticky Settings)
   ========================================================================== */
.z-site-header {
    background-color: #ffffff;
    padding: 15px 24px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Updated Layout: Pushes elements to the right */
.z-header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed from space-between */
    max-width: 1140px;
    margin: 0 auto;
}

/* ==========================================================================
   Section 1: Logo & Title
   ========================================================================== */
.z-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0; 
    margin-right: auto; /* CRITICAL FIX: This pushes the center & right sections to the far right */
}

.z-header-left .z-logo-wrapper {
    display: block;
    width: 34px;
    height: 56px;
    flex: 0 0 34px; 
    overflow: hidden;
}

.z-header-left .z-logo-wrapper img.z-site-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.z-site-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap; 
}

.z-site-title a {
    text-decoration: none;
    color: rgb(21, 40, 34);
    transition: color 0.3s ease;
}

/* ==========================================================================
   Section 2: Navigation Menu
   ========================================================================== */
.z-header-center {
    display: flex;
    align-items: center;
}

.z-main-navigation ul {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.z-main-navigation a {
    /* New Custom Typography */
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height:20px;
    
    text-decoration: none;
    color: rgb(87, 117, 107);
    transition: color 0.3s ease;
}

.z-main-navigation a:hover {
    color: rgb(34, 119, 69); /* Darkens text on hover */
}
.lang-item-first {
    border: 1px solid rgb(209, 224, 215);
    border-radius:14px;
    padding: 4px 10px;
    line-height:20px;
}

/* ==========================================================================
   Section 3: Social Widget Area
   ========================================================================== */
.z-header-right {
    display: flex;
    align-items: center;
    margin-left: 30px; /* Space between navigation and social icons */
    gap: 10px;
}
.z-header-right a {
    color: rgb(87, 117, 107);
    line-height:20px;
    height:20px;
}

/* ==========================================================================
   Project Hero Gallery (Splide)
   ========================================================================== */
.project-single-container .project-article {
    max-width: 750px;
    margin: 0 auto;   /* Centers the entire block on the screen */
    padding: 0 20px;  /* Ensures text doesn't touch the screen edges on mobile phones */
    width: 100%;
    box-sizing: border-box;
}

/* Ensure the hero image/gallery stretches fully edge-to-edge inside the new 750px container */
.project-hero-gallery-wrapper,
.project-hero-image {
    width: 100%;
    margin-bottom: 30px;
}

/* Main Image */
.project-main-slider img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Arrow Styling */
.project-main-slider .splide__arrow {
    background: #ffffff;
    opacity: 0.8;
}
.project-main-slider .splide__arrow:hover {
    opacity: 1;
}

/* Thumbnails */
.project-thumb-slider {
    margin-top: 15px;
    background-color: rgba(233, 239, 231, 0.5);
    border-radius: 10px;
}

.project-thumb-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease, border 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.project-thumb-slider img:hover {
    opacity: 0.8;
}

/* The actively selected thumbnail */
.project-thumb-slider .is-active img {
    opacity: 1;
    border: 3px solid rgb(34, 119, 69); /* Gives a clear border to the selected image */
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: none;
}

/* ==========================================================================
   Zamalek Association - Custom Header Styles
   ========================================================================== */

/* --- Single Project Page --- */
.project-single-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.project-hero-image img {
    width: 100%;
    height: 450px;
    object-fit: cover; /* Forces the image to fill the space without stretching */
    border-radius: 8px;
    margin-bottom: 30px;
}

.project-meta-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.project-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge { background-color: #e2e8f0; color: #475569; }
.category-badge { background-color: #d1fae5; color: #065f46; }

.project-main-title { 
    font-size: 1.875rem;
    color: rgb(21, 40, 34);
    margin-bottom: 20px; 
    font-family: 'Newsreader', Georgia, serif;
}
.project-details-meta {
    margin-bottom: 30px;
}
.project-description, .project-details-meta {
    color:rgb(87, 117, 107);
    font-size:0.875rem;
    font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* --- 4-Column Project Grid (Shortcode) --- */
.zamalek-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 25px;
}

.project-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    transform: translateY(-5px);
}
.project-card h3, .project-card a {
    color: rgb(21, 40, 34);
    font-size: 1.125rem;
}
.project-card:hover a {
    color: rgb(34, 119, 69) !important;
}

.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.card-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.card-content { padding: 20px; }
.card-category { font-size: 0.7rem; color: #FFF; font-weight: bold; text-transform: uppercase; position:absolute; top:0.75rem; left:0.75rem; padding: 4px 12px; border-radius:14px;}
.card-title { margin: 10px 0; }
.card-meta { font-size: 0.75rem; color: rgb(87, 117, 107); margin: 5px 0 0; }

/* Smoothly transition the image inside our custom card */
.zoom-image-card {
    transition: box-shadow 0.5s ease-in-out;
}

.zoom-image-card img {
    transition: transform 0.5s ease-in-out !important;
}

.zoom-image-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* When the card is hovered, scale the image up by 1.05 */
.zoom-image-card:hover img {
    transform: scale(1.05) !important;
}

/* Optional but recommended: Prevents the image from spilling out of its bounding box when it scales */
.zoom-image-card .elementor-widget-image {
    overflow: hidden;
    border-radius: 8px;
}

/* Contact Form */
form#fluentform_1 {
    font-size: 0.875rem;
}
form#fluentform_1 input {
    font-size: 0.875rem;
}


/* ==========================================================================
   Zamalek Association - Custom Footer Styles
   ========================================================================== */

.z-site-footer {
    background-color: #ffffff;
    padding: 25px 20px;
    border-top: 1px solid #e2e8f0;
    font-family: 'Instrument Sans', system-ui, sans-serif;
}

.z-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}

/* Left: Copyright Text */
.z-footer-left p {
    margin: 0;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Right: Social Icons */
.z-footer-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.z-footer-right a {
    color: rgb(87, 117, 107);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease, transform 0.2s ease;
}

.text-foreground {
    color: rgb(21, 40, 34);
}

/* ==========================================================================
   Mobile Responsiveness for Footer
   ========================================================================== */

@media (max-width: 768px) {
    .z-footer-container {
        flex-direction: column-reverse; /* Puts socials on top, copyright on bottom on mobile */
        gap: 15px;
        text-align: center;
    }
}