/* Custom CSS for header text positioning and button hover color */

/* Target the main content container within the header image div */
.head_img > .flex {
    align-items: center !important; /* Default: Centers content vertically within the container */
}

/* For larger screens (md/lg breakpoint), adjust padding and margins */
@media (min-width: 768px) {
    .head_img > .flex {
        /* Keep align-items: center to ensure content is still centered within the space */
        padding-top: 5vh !important; /* ADJUSTED: Further reduced to bring content further UP, away from sofa */
        padding-bottom: 5vh !important; /* Adjust bottom padding for overall balance on desktop */
        margin-top: unset !important; /* Ensure no unwanted top margin from mobile affects desktop */
    }
}

/* Mobile Adjustments for Header Text Position (max-width: 767px) */
@media (max-width: 767px) {
    .head_img > .flex {
        /* Use margin-top to push the entire text block down from the top */
        margin-top: 0vh !important; /* Pushes the entire text block down a little MORE on mobile */
        /* Maintain existing padding-bottom or adjust as needed for balance */
        padding-bottom: 5vh !important; /* Adjusted bottom padding for mobile */
        /* The align-items will remain 'center' from the default rule, centering content within the newly positioned flex container */
    }

    /* Adjust font size for the main header title (h1) on mobile */
    .head_img h1 {
        font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem) !important; /* Increased base mobile size */
        line-height: 1.2 !important; /* Adjust line height for better readability */
    }

    /* Adjust font size for the header description paragraph (p) on mobile */
    .head_img p {
        font-size: clamp(1rem, 0.7rem + 1.5vw, 1.5rem) !important; /* Increased base mobile size */
        line-height: 1.5 !important;
    }
}

/* Custom CSS to change the header button text color on hover */
.head_img .w-fit.bg-\[var\(--m-color\)\].rounded-\[4px\).py-2.px-6.text-white.hover\:bg-\[var\(--f-color\)\].hover\:text-\[var\(--m-color\)\].border.border-\[var\(--m-color\)\].hover\:rounded-\[4px\].transition-all.duration-300 a:hover {
    color: white !important; /* Force text color to white on hover */
}

/* Master CSS for the main section containers */
/* This targets the 'container' div that wraps both the text and image parts of each section */
.container.flex.justify-center.lg\:justify-between {
    align-items: center; /* Vertically align content within each section */
    gap: 20px; /* Add spacing between the text column and the image column */
    /* IMPORTANT: Ensure 'flex-direction: row;' is NOT explicitly set here or any other conflicting global rule */
    /* The default flex-direction is 'row', which is what we want for the non-reversed sections. */
}

/* NEW RULE: For sections where JavaScript adds the 'js-reverse-layout' class */
.container.flex.justify-center.lg\:justify-between.js-reverse-layout {
    flex-direction: row-reverse;
}

/* Styles for the text content block within each section */
.text-center.flex.flex-col.justify-start.items-center {
    /* Ensure the container is a flex column and takes up space */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items horizontally */
    text-align: center; /* Centers text inside text elements */
    padding: 10px; /* Adjust as needed */
}

/* 1. Styles for the H1 (Title) */
.text-center.flex.flex-col.justify-start.items-center h1 {
    text-align: center !important; /* Ensures the title is centered */
    margin-bottom: 0.5rem; /* Ensure some space below H1 */
}

/* 2. Styles for the Descriptive Paragraph (added by JS) */
.text-center.flex.flex-col.justify-start.items-center p.section-description-text {
    /* Important for visibility and layout */
    display: block !important;
    text-align: center !important;
    margin: 1rem auto !important; /* Top/bottom margin, auto left/right for centering */
    max-width: 100% !important;
    width: auto !important; /* Allow width to be flexible */
    font-size: clamp(0.87rem, 0.4933rem + 1.5067vw, 2rem)!important;
    line-height: 1.5 !important;
    color: var(--m-color) !important; /* Ensure the text has the correct color */
    opacity: 0.7; /* Match the opacity of the main header description */
    z-index: 2; /* Ensure it's above other elements if applicable */
    position: relative; /* Needed for z-index to work correctly */
    /* IMPORTANT: Reset previous padding and apply directionally */
    padding: 0 !important; /* Remove any previous explicit padding */
}

/* Apply 5px padding to the RIGHT for sections that are NOT reversed (text on left, image on right) */
.container.flex.justify-center.lg\:justify-between:not(.js-reverse-layout) .text-center.flex.flex-col.justify-start.items-center p.section-description-text {
    padding-right: 5px !important;
}

/* Apply 5px padding to the LEFT for sections that ARE reversed (text on right, image on left) */
.container.flex.justify-center.lg\:justify-between.js-reverse-layout .text-center.flex.flex-col.justify-start.items-center p.section-description-text {
    padding-left: 5px !important;
}

/* 3. Styles for the BUTTON (which contains the "المزيد" link) */
.text-center.flex.flex-col.justify-start.items-center button {
    display: block !important; /* Ensures the button behaves as a block for centering */
    margin-left: auto !important; /* Centers the button element itself */
    margin-right: auto !important;
    max-width: unset !important; /* Ensures the button's width is flexible */
    width: auto !important;
    margin-top: 20px !important; /* Moves the button downward by 20 pixels for desktop */
    z-index: 2; /* Ensure button is also above other elements */
    position: relative; /* Needed for z-index to work correctly */
}

/* Adjust button position for mobile view (push it up) */
@media (max-width: 767px) { /* Applies to screens smaller than 768px (mobile) */
    .text-center.flex.flex-col.justify-start.items-center button {
        margin-top: 10px !important; /* Reduced margin-top to push button up on mobile */
    }
}

/* Ensure the anchor tag inside the button has the correct color if needed */
.text-center.flex.flex-col.justify-start.items-center button a {
    color: var(--m-color) !important; /* Ensures the link text uses your theme color */
}

/* --- Footer Logo Styling --- */
.store-footer__inner img {
    width: 120px !important; /* Keep the desired width */
    height: auto !important; /* Allow height to adjust based on aspect ratio */
    object-fit: contain !important; /* Ensure aspect ratio is maintained and prevents stretching */
    filter: brightness(0) invert(1);
}

/* --- Top Logo Styling --- */
.navbar-brand {
    height: 80px !important; /* Give the parent container of the logo a specific height */
    display: flex !important; /* Make it a flex container */
    align-items: center !important; /* Vertically center the image within this space */
}

.navbar-brand img {
    width: 150px !important; /* Aim for this width */
    height: auto !important; /* Allow height to adjust based on aspect ratio */
    max-height: 100% !important; /* Ensure it fits within its parent's height */
    object-fit: contain !important; /* Crucial: Ensures aspect ratio is maintained and prevents stretching */
    min-width: 0 !important; /* Prevents shrinking below content size in flex contexts */
}

/* Typography and layout */
.content-entry {
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.9;
    color: #4e2e36;
    font-size: 1.1rem;
}

/* Headings */
.content h1 {
    text-align: center;
    font-size: 2.2rem;
    color: #4e2e36;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Paragraph spacing */
.content-entry p {
    margin: 1.2rem 0;
}

/* Images: responsive and styled */
.content-entry img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Centered images */
.ql-align-center img {
    margin-left: auto;
    margin-right: auto;
}

/* Comments section spacing */
salla-comments {
    margin-top: 3rem;
}

/* Optional: subtle animation */
.content-entry img {
    transition: transform 0.3s ease;
}

.content-entry img:hover {
    transform: scale(1.03);
}

.text-2xl {
    line-height: 5rem;
}

/* Styles for the new link in the 'president' section */
.president .president-name-text {
    background: none !important; /* Remove background color */
    border: none !important; /* Remove border */
    padding: 0 !important; /* Remove padding */
    color: var(--m-color) !important; /* Set text color to match theme, or specific color */
    font-size: clamp(0.87rem, 0.4933rem + 1.5067vw, 2rem) !important; /* Adjust font size to match previous button text size or desired size */
    font-weight: bold !important; /* Make it bold if desired */
    margin: 10px auto !important; /* Center the text and add some vertical spacing */
    display: block !important; /* Ensure it takes full width for centering */
}

/* NEW RULE: To remove the brown background from the absolutely positioned div behind the image */
.president .relative > div:first-child {
    background-color: transparent !important;
}