/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. GLOBAL STYLES & TYPOGRAPHY
3. BULMA OVERRIDES & ENHANCEMENTS
4. LAYOUT & HELPERS
5. HEADER & NAVIGATION
6. FOOTER
7. HERO SECTION
8. CARD STYLES (General & Specific)
    8.1. General Card Styles
    8.2. Feature Cards
    8.3. Testimonial Cards
    8.4. External Link Cards
9. SECTION-SPECIFIC STYLES
    9.1. Behind The Scenes
    9.2. Clientele
    9.3. Press Mentions
    9.4. Contact Section
10. FORM ELEMENTS
11. BIOMORPHIC ELEMENTS & ACCENTS
12. ANIMATIONS & PARTICLES
13. UTILITY CLASSES
14. SPECIFIC PAGE STYLES
    14.1. Success Page
    14.2. Privacy & Terms Pages
15. MEDIA QUERIES
-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --font-primary: 'Space Grotesk', 'Tajawal', sans-serif;
    --font-secondary: 'DM Sans', 'Tajawal', sans-serif;
    --font-arabic-main: 'Tajawal', 'Cairo', 'Amiri', sans-serif;

    /* Split-Complementary Scheme + Biomorphic Accent */
    /* Primary: Corporate Blue */
    --primary-color: #007bff; /* #3D52A0; */
    /* Split Accents (from Orange, Blue's complement) */
    --accent-color-split-1: #ffc107; /* Yellow-Orange */
    --accent-color-split-2: #fd7e14; /* Red-Orange */
    /* Biomorphic/CTA Accent */
    --accent-biomorphic: #48C774; /* Green from HTML */
    
    --text-color: #343a40; /* Dark Grey */
    --text-color-light: #f8f9fa; /* Off-white */
    --text-color-medium: #6c757d; /* Medium Grey */
    --text-color-headings: #222222; /* Darker for section titles */

    --background-color: #ffffff;
    --background-color-light: #f8f9fa; /* Light sections */
    --background-color-dark: #212529; /* Footer */
    
    --card-background: var(--background-color);
    --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    --card-border-radius: 12px;

    --button-border-radius: 25px; /* Pill-shaped for biomorphic */
    --input-border-radius: 8px;

    --border-color: #dee2e6;
    --border-color-light: rgba(255, 255, 255, 0.2);

    --section-padding: 4rem 1.5rem; /* Vertical, Horizontal */
    --transition-speed: 0.3s;
    --transition-easing: ease-in-out;
}

img {
  object-fit: cover;
}

/* 2. GLOBAL STYLES & TYPOGRAPHY */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
    direction: rtl; /* For Arabic */
}

body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.7;
    overflow-x: hidden;
    font-weight: 400; /* DM Sans regular */
}

h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-primary);
    color: var(--text-color-headings);
    font-weight: 700; /* Space Grotesk Bold */
    line-height: 1.3;
}
.title { margin-bottom: 0.75rem; }
.subtitle { margin-top: -0.5rem; color: var(--text-color-medium); }

.section-title {
    margin-bottom: 2.5rem !important;
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.section-title::after { /* Subtle underline accent */
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--accent-biomorphic);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

p {
    margin-bottom: 1rem;
    font-family: var(--font-arabic-main); /* Ensure Arabic font for paragraphs */
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-easing);
}
a:hover {
    color: var(--accent-color-split-2);
}

.content strong {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--text-color-headings);
}

/* 3. BULMA OVERRIDES & ENHANCEMENTS */
.section {
    padding: var(--section-padding);
}

.button {
    font-family: var(--font-primary);
    border-radius: var(--button-border-radius) !important;
    transition: all var(--transition-speed) var(--transition-easing) !important;
    font-weight: 500 !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
.button.is-primary {
    background-color: var(--accent-biomorphic) !important;
    border-color: transparent !important;
}
.button.is-primary:hover {
    background-color: color-mix(in srgb, var(--accent-biomorphic) 90%, black) !important;
}
.button.is-primary.is-outlined {
    background-color: transparent !important;
    border-color: var(--accent-biomorphic) !important;
    color: var(--accent-biomorphic) !important;
}
.button.is-primary.is-outlined:hover {
    background-color: var(--accent-biomorphic) !important;
    color: var(--text-color-light) !important;
}
.button.is-light.is-outlined {
    border-color: var(--text-color-light) !important;
    color: var(--text-color-light) !important;
    background-color: transparent !important;
}
.button.is-light.is-outlined:hover {
    background-color: var(--text-color-light) !important;
    color: var(--text-color-headings) !important;
}

.input, .textarea {
    font-family: var(--font-secondary);
    border-radius: var(--input-border-radius) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    transition: border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing) !important;
}
.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
    border-color: var(--accent-biomorphic) !important;
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--accent-biomorphic) 25%, transparent) !important;
}

.navbar-item img {
    max-height: 2.5rem; /* Adjust logo height */
}

.navbar-dropdown {
    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
    border-top: 2px solid var(--accent-biomorphic);
    box-shadow: var(--card-shadow);
}
.navbar-item.has-dropdown.is-hoverable .navbar-link::after {
    border-color: var(--primary-color);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 500;
}
.navbar-burger span {
    background-color: var(--primary-color) !important; /* Burger color */
    height: 2px;
}
.is-right-to-left { /* For RTL dropdowns */
    left: auto;
    right: 0;
}


/* 4. LAYOUT & HELPERS */
.main-container {
    overflow-x: hidden; /* Prevent horizontal scroll from AOS or other animations */
}
.container {
    max-width: 1140px; /* Standard container width */
    margin: 0 auto;
}

/* 5. HEADER & NAVIGATION */
.header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0; /* Changed from right for LTR thinking, but RTL handles it */
    z-index: 1000;
    direction: ltr; /* Navbar itself might be better LTR for layout if Bulma expects it */
}
.header .container {
    direction: rtl; /* Content within container RTL */
}
.navbar-menu .navbar-start {
    margin-right: auto;
    margin-left: 0;
}
.navbar-menu .navbar-end {
    margin-left: auto;
    margin-right: 0;
}

/* Add padding to body to prevent content from being hidden by fixed header */
body {
    padding-top: 5rem; /* Adjust based on actual header height */
}

/* 6. FOOTER */
.footer-custom {
    background-color: var(--background-color-dark);
    color: var(--text-color-light);
    padding: 3rem 1.5rem 1.5rem;
}
.footer-custom .title {
    color: var(--text-color-light) !important;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.footer-custom p, .footer-custom ul li a {
    color: var(--text-color-medium) !important;
    font-family: var(--font-arabic-main);
}
.footer-custom ul li a:hover {
    color: var(--accent-biomorphic) !important;
}
.footer-custom .social-link {
    display: inline-block;
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    font-family: var(--font-primary);
    font-weight: 500;
}
.footer-custom .social-link:hover {
    text-decoration: underline;
}
.footer-custom hr {
    background-color: #4a4a4a;
    height: 1px;
}
.footer-custom .input.is-biomorphic-input-dark {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-color-light);
}
.footer-custom .input.is-biomorphic-input-dark::placeholder {
    color: var(--text-color-medium);
}

/* 7. HERO SECTION */
.hero-section-custom {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    color: var(--text-color-light) !important; /* Ensure all text is white */
}
.hero-section-custom .title, .hero-section-custom .subtitle {
    color: var(--text-color-light) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* For better readability on varied backgrounds */
}
.hero-section-custom .hero-body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; /* Above particle effect */
}
#hero-particle-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden; /* Contain particles */
}
.animated-chevron {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* 8. CARD STYLES */
/* 8.1. General Card Styles */
.card {
    background-color: var(--card-background);
    box-shadow: var(--card-shadow);
    border-radius: var(--card-border-radius);
    transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    display: flex; /* For STROGO rule */
    flex-direction: column; /* For STROGO rule */
    align-items: center; /* For STROGO rule */
    text-align: center; /* For STROGO rule: content centering */
    overflow: hidden; /* Ensure content respects border radius */
    height: 100%; /* Make cards in a row same height */
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.card .card-image { /* Bulma's card-image */
    width: 100%; /* Ensure it spans the card width before centering image container */
    display: flex;
    justify-content: center;
}
.card .image-container { /* Custom container for img */
    width: 100%; /* Or a fixed width if desired */
    height: 200px; /* STROGO: Fixed height for image containers */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .card-image img, .card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: object-fit */
}
.card .card-content {
    padding: 1.5rem;
    width: 100%; /* Ensure content block takes full width for text-align to work as expected */
}
.card .card-content .title {
    margin-bottom: 0.5rem;
    color: var(--text-color-headings);
}
.card .card-content .subtitle {
    margin-top: 0;
    color: var(--text-color-medium);
}
.card .card-content .content {
    font-size: 0.95rem;
    color: var(--text-color);
    font-family: var(--font-arabic-main);
}

/* 8.2. Feature Cards (is-biomorphic-card is a general class for this style) */
.is-biomorphic-card {
    /* Additional biomorphic styling if needed beyond .card */
}

/* 8.3. Testimonial Cards */
.testimonial-card .card-image {
    padding-top: 1.5rem; /* Space for the image */
}
.testimonial-card .image-container { /* Overriding for potentially circular images */
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Circular images */
    border: 4px solid var(--accent-biomorphic);
    margin: 0 auto; /* Centering the image container itself if not full width */
}
.testimonial-card .card-content .title {
    font-size: 1.1rem;
}
.testimonial-card .card-content .subtitle {
    font-size: 0.9rem;
    color: var(--accent-biomorphic);
}

/* 8.4. External Link Cards */
.external-link-card .button {
    margin-top: 1rem;
}
.external-link-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* 9. SECTION-SPECIFIC STYLES */
/* 9.1. Behind The Scenes */
#behind-the-scenes .content.is-medium {
    font-size: 1.1rem;
}
#behind-the-scenes img {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}

/* 9.2. Clientele */
#clientele.has-background-light-biomorphic {
    background-color: var(--background-color-light);
}
.client-logos img {
    max-height: 60px; /* Adjust logo sizes */
    width: auto;
    filter: grayscale(80%);
    transition: filter var(--transition-speed) var(--transition-easing);
    opacity: 0.8;
}
.client-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* 9.3. Press Mentions */
.press-mention.box {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    background-color: var(--background-color);
    border-left: 5px solid var(--accent-biomorphic);
}
.press-mention strong {
    color: var(--primary-color);
}
.press-mention small {
    color: var(--text-color-medium);
}

/* 9.4. Contact Section */
.contact-section-custom {
    background-color: var(--background-color-light); /* Or a subtle gradient/image */
}
.contact-info-box {
    background-color: var(--card-background);
    padding: 2rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}
.contact-info-box .title {
    color: var(--text-color-headings);
}
.contact-info-box .icon-text .icon {
    color: var(--accent-biomorphic);
}
.contact-info-box hr {
    background-color: var(--border-color);
    margin: 1rem 0;
}
.map-placeholder img {
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}

/* 10. FORM ELEMENTS */
.is-biomorphic-input { /* Custom class from HTML */
    /* Handled by global .input styles */
}
.is-biomorphic-button { /* Custom class from HTML */
    /* Handled by global .button styles */
}
.is-biomorphic-accent.button {
    background-color: var(--accent-color-split-1) !important;
    color: var(--text-color-headings) !important;
}
.is-biomorphic-accent.button:hover {
    background-color: color-mix(in srgb, var(--accent-color-split-1) 90%, black) !important;
}
.is-biomorphic-item { /* General class for items with biomorphic styling */
    border-radius: var(--card-border-radius);
    background-color: var(--card-background);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

/* 11. BIOMORPHIC ELEMENTS & ACCENTS */
/* For sections with data-biomorphic-shape, requires SVG or complex CSS, e.g. */
[data-biomorphic-shape="wave-divider-top"] {
    position: relative;
    /* Example: Add a pseudo-element for a wave using SVG */
}
[data-biomorphic-shape="wave-divider-top"]::before {
    /* content: ''; display: block; ... */
}
.has-background-light-biomorphic {
    background-color: color-mix(in srgb, var(--accent-biomorphic) 5%, var(--background-color-light));
    /* Or more complex background pattern */
}

/* 12. ANIMATIONS & PARTICLES */
/* For #particles-js-placeholder (if used for general background particles) */
#particles-js-placeholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all content */
    /* JS library will populate this */
}
/* Style for particles created by Motion One in hero */
#hero-particle-effect .particle {
    position: absolute; /* Handled by JS inline style, but good to define */
    background-color: rgba(255, 255, 255, 0.3); /* Lighter for hero */
    border-radius: 50%;
    will-change: transform, opacity; /* Performance hint */
}
.animated-chevron { /* Already defined in hero */ }

/* 13. UTILITY CLASSES */
.has-text-shadow {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.read-more-link {
    font-family: var(--font-primary);
    font-weight: bold;
    color: var(--accent-biomorphic);
    text-decoration: none;
    display: inline-block;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-speed) var(--transition-easing);
}
.read-more-link:hover {
    color: color-mix(in srgb, var(--accent-biomorphic) 80%, black);
    border-bottom-color: var(--accent-biomorphic);
}

/* 14. SPECIFIC PAGE STYLES */
/* 14.1. Success Page */
.success-page-container { /* Assuming a container div on success.html */
    min-height: calc(100vh - 5rem); /* Full viewport height minus header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}
.success-page-container .icon {
    font-size: 4rem;
    color: var(--accent-biomorphic);
    margin-bottom: 1rem;
}
.success-page-container .button {
    margin-top: 1.5rem;
}

/* 14.2. Privacy & Terms Pages */
.privacy-page-content, .terms-page-content { /* Assuming a container div on these pages */
    padding-top: 2rem; /* Initial padding already given by body padding-top. This is additional if needed. */
    padding-bottom: 2rem;
}
.privacy-page-content h1, .terms-page-content h1,
.privacy-page-content h2, .terms-page-content h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}


/* 15. MEDIA QUERIES */
@media screen and (max-width: 1023px) { /* Bulma's tablet breakpoint */
    .navbar-menu {
        background-color: var(--background-color);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
        padding: 0.5rem 0;
    }
    .navbar-item {
        color: var(--text-color-headings) !important;
    }
    .navbar-item:hover, .navbar-link:hover {
        background-color: var(--background-color-light) !important;
    }
    .navbar-burger {
        margin-left: auto; /* Ensure burger is on the right in RTL mobile */
        margin-right: 0;
        color: var(--primary-color) !important;
    }
    .header .container { /* Ensure container is full width on mobile for navbar */
        width:100%;
        padding-left:1rem;
        padding-right:1rem;
    }
}

@media screen and (max-width: 768px) { /* Bulma's mobile breakpoint */
    .section {
        padding: 3rem 1rem;
    }
    .section-title {
        font-size: 2rem;
    }
    .hero.is-fullheight .hero-body {
        padding: 2rem 1rem; /* More compact hero on mobile */
    }
    .hero .title.is-1 { font-size: 2.25rem; }
    .hero .subtitle.is-3 { font-size: 1.25rem; }

    .columns.is-multiline .column {
        margin-bottom: 1.5rem; /* Space between stacked cards */
    }
    .footer-custom .columns > .column {
        margin-bottom: 2rem;
    }
    .footer-custom .field.has-addons {
        flex-wrap: wrap; /* Allow button to wrap */
    }
    .footer-custom .field.has-addons .control.is-expanded {
        flex-basis: 100%;
        margin-bottom: 0.5rem;
    }
    .footer-custom .field.has-addons .control button {
        width: 100%;
    }
}

/* Cookie Consent Popup (Basic Styling from HTML, can be enhanced here) */
#cookieConsentPopup {
    font-family: var(--font-arabic-main);
}
#cookieConsentPopup a {
    color: var(--accent-biomorphic) !important;
    text-decoration: underline !important;
}
#cookieConsentPopup button {
    background-color: var(--accent-biomorphic) !important;
    font-family: var(--font-primary) !important;
}

/* Background image handling with overlays */
[style*="background-image"] {
    position: relative; /* For pseudo-element overlay */
}
/* This is a general rule, but the HTML already uses linear-gradient in style attribute.
   If not, this could be a fallback or an addition.
   For example, if a section had only `background-image: url(...)` and text on top:
*/
/*
.section-with-bg-image-and-text::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1;
}
.section-with-bg-image-and-text > .container {
    position: relative;
    z-index: 2;
}
*/