/* Custom styles for the Arabic/English website */

/* Base typography and colours */
body {
    font-family: 'Cairo', sans-serif;
    /* Use a very light beige background to match the reference design */
    background-color: var(--neutral-beige);
    color: #333;
}

/* Colour palette derived from the reference design */
:root {
    --primary-green: #00a884; /* vibrant green matching the reference */
    --secondary-orange: #f28e2b; /* warm orange close to the screenshot */
    --neutral-beige: #f8f4ef; /* light beige background similar to sections */
    --accent-gold: #d4af37; /* golden accent used for hover overlays */
}

/* Carousel images maintain aspect ratio */
.carousel-item img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

/* Section bar replicates orange header with green stripe and optional link */
.section-bar {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--neutral-beige);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--secondary-orange);
}
/* vertical line element; we use inline styles to set left or right position dynamically */
.section-bar .bar-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--primary-green);
}
.section-bar .title {
    margin-inline-start: 1.5rem;
}
.section-bar .more-link {
    margin-inline-start: auto;
    background-color: var(--secondary-orange);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    text-decoration: none;
}

/*
 * Partners section
 * We use a flex container to centre partner items and allow them to wrap gracefully.
 * Each partner item contains a circular logo and the partner name.  The width
 * is fixed to keep all logos uniform.  When more partners are added the row
 * will wrap to additional lines while remaining centred.
 */
.partners-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.partner-item {
    width: 90px;
    text-align: center;
    color: var(--primary-green);
}
.partner-logo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary-green);
    margin: 0 auto 0.5rem;
}

/* Footer logo styling: ensure the logo appears circular with a border, as
   requested.  Applies only to the image inside the footer logo container. */
.footer-logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-green);
}

/* Enhance project cards with a subtle hover effect.  The entire card lifts
   slightly and casts a deeper shadow on hover, signalling interactivity.
   Also ensure smooth transitions. */
.card-project {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Remove underlines and preserve text colour for clickable cards */
a.project-link {
    text-decoration: none;
    color: inherit;
}
a.project-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Simple fade-in animation for gallery and other elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in {
    animation: fadeInUp 0.8s ease both;
}
.section-bar .more-link:hover {
    background-color: #d67620;
    color: #fff;
}

/* Project cards with date and read more button */
/* Card project base styling */
.card-project {
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
/* Remove default card body styles since we no longer display a white panel */
.card-project .card-body {
    display: none;
}
/* New overlay card styles: the image covers the entire card and the overlay displays
   the date and title. */
.overlay-card {
    position: relative;
    overflow: hidden;
}
.overlay-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: filter 0.4s ease;
}
/* النص فوق الصورة مباشرة */
.overlay-card .overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,  /* غامق جداً بالأسفل */
        rgba(0, 0, 0, 0.4) 50%,  /* متوسط في المنتصف */
        rgba(0, 0, 0, 0.0) 100%  /* شفاف بالأعلى */
    );
}

/* نضيف طبقة تغميق تحت النص */
.overlay-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 1;
}

/* وقت الهوفر نفعّل التعتيم والبلور */
.overlay-card:hover img {
    filter: blur(3px);
}
.overlay-card:hover::after {
    opacity: 1;
}

/* ألوان النص */
.overlay-card .overlay-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff; /* أبيض صافي */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    margin-bottom: 0.25rem;
}
.overlay-card .overlay-date {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #f28e2b;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    z-index: 2;
}
.overlay-card .overlay-desc {
    font-size: 0.85rem;
    color: #e8e8e8; /* رمادي فاتح */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

/* وقت الهوفر نغيّر اللون إلى ذهبي */
.overlay-card:hover .overlay-title,
.overlay-card:hover .overlay-date {
    color: var(--accent-gold);
}



/* Announcements list styling */
.list-group-announcements .list-group-item {
    border: none;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}
.list-group-announcements .list-group-item:last-child {
    border-bottom: none;
}
.list-group-announcements .list-title {
    flex-grow: 1;
    color: var(--primary-green);
    font-weight: 500;
    text-decoration: none;
}
.list-group-announcements .list-title:hover {
    text-decoration: underline;
}
.list-group-announcements .badge {
    background-color: var(--primary-green);
    font-size: 0.75rem;
    color: #fff;
}

/* Gallery thumbnail hover effect
   We scale the image slightly and apply a shadow when hovering over
   gallery items on the home page.  This adds interactivity without
   changing the layout. */
.gallery-thumb img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-thumb:hover img {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Footer styling */
footer {
    background-color: #2c3e50;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
}
/* Navbar styling */
.navbar-nav .nav-link {
    color: var(--primary-green) !important;
    font-weight: 500;
}
.navbar-nav .nav-link:hover {
    color: var(--secondary-orange) !important;
}

/* Make the main navigation flexible when there are many menu items.  By
   allowing flex-wrap and adding a small gap, the links will wrap onto
   additional lines instead of overflowing into other areas.  This helps
   accommodate long site names and a full set of sections without
   overlapping the search form. */
.navbar-nav {
    flex-wrap: wrap;
    gap: 0.75rem;
}
footer h5 {
    font-weight: bold;
    margin-bottom: 1rem;
}
footer a {
    text-decoration: none;
    color: #f9f9f9;
}
footer a:hover {
    text-decoration: underline;
    color: #fff;
}