/* ===========================================
   GLOBAL SITE STYLES
   BLA - Bukharian Law Association
   =========================================== */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

.entry-content {
    margin-top: 0 !important;
}

/* ===========================================
   SIGN-IN PAGE STYLING
   =========================================== */
   .sign-in-container {
    width: 100% !important;
    max-width: 100% !important;
}

@media (min-width: 783px) {
    .sign-in-container {
        width: 480px !important;
    }
}

@media (max-width: 782px) {
    .wp-block-cover__inner-container:has(.sign-in-container) {
        width: 100% !important;
    }
}

/* ===========================================
HEADER STYLING
=========================================== */

@media (max-width: 1199px) {
    .wp-block-group:has(>.header-group-1),
    .header-group-1 {
        gap: 10px;
    }

    .header-group-2 {
        gap: 10px;
    }

    .wp-block-navigation__container {
        gap: 10px;
    }

    .wp-block-search__input {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wp-block-navigation-item__label,
    .wp-block-search__input {
        font-size: 14px;
    }
}

@media (max-width: 782px) {
    .header-group-1 .wp-block-site-logo img {
        max-width: 150px;
    }

    .header-group-1 .wp-block-navigation {
        margin-left: 10px;
        margin-left: 10px;
    }
}

.wp-block-search__inside-wrapper {
    margin-right: 0 !important;
}

/* ===========================================
MISC STYLING
=========================================== */

.hover-alt:hover {
    border-color: #EACB70 !important;
}

/* ===========================================
FORM STYLING
=========================================== */

.gform_wrapper {
    border-width: 0;
    padding-right: 0;
    padding-left: 0;
}

input[type="submit"].gform_button {
    background: #003359 !important;
}

input[type="submit"].gform_button:hover {
    color: #003359 !important;
    background: #EACB70 !important;
}

/* ===========================================
   BUTTON HOVER EFFECTS
   =========================================== */

/* Base transition for all buttons */
.wp-block-button__link,
.wp-element-button {
    transition: all 0.2s ease-out !important;
}

/* Filled button hover - lift effect */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Outline button hover - fill with dark background */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--contrast, #111111) !important;
    color: var(--wp--preset--color--base, #FFFFFF) !important;
    border-color: var(--wp--preset--color--contrast, #111111) !important;
    transform: translateY(-2px) !important;
}

/* Active/pressed state */
.wp-block-button__link:active,
.wp-element-button:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}


/* ===========================================
   COVER SECTION STYLING
   =========================================== */

   @media (max-width: 782px) {
    .wp-block-cover {
        min-height: 300px !important;
    }

    .wp-block-cover__inner-container > * {
        gap: 0;
    }
}

/* ===========================================
   FOOTER LINK HOVER EFFECTS
   =========================================== */

footer a,
.site-footer a,
.wp-block-template-part footer a {
    transition: opacity 0.2s ease-out !important;
}

footer a:hover,
.site-footer a:hover,
.wp-block-template-part footer a:hover {
    opacity: 0.6 !important;
}

/* ===========================================
   HOVER INVERT ROW EFFECT
   =========================================== */

.hover-invert-row {
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    /* padding-left: var(--wp--preset--spacing--50) !important;
    padding-right: var(--wp--preset--spacing--50) !important; */
    /* margin-left: calc(-1 * var(--wp--preset--spacing--50));
    margin-right: calc(-1 * var(--wp--preset--spacing--50)); */
}

.hover-invert-row a {
    text-decoration: none !important;
}

.hover-invert-row:hover {
    background-color: var(--wp--preset--color--custom-color-1) !important;
}

.hover-invert-row:hover,
.hover-invert-row:hover * {
    color: #EACB70 !important;
}

.hover-invert-row:hover a {
    color: #EACB70 !important;
    text-decoration: none !important;
}

.hover-invert-row:hover svg path {
    fill: #EACB70 !important;
}

.hover-invert-row:hover .wp-block-group {
    border-bottom-color: #EACB70 !important;
}

/* Hover reveal image */
.hover-invert-row {
    position: relative;
    overflow: hidden;
}

.hover-invert-row .hover-reveal-image {
    position: absolute !important;
    right: 450px;
    top: 50%;
    transform: translateY(-50%) !important;
    max-width: 280px;
    max-height: 180px;
    width: auto;
    height: auto;
    margin: 0 !important;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
    z-index: 1;
}

.hover-invert-row .hover-reveal-image img {
    max-width: 280px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: cover;
    transform: none !important;
    rotate: none !important;
    scale: none !important;
}

.hover-invert-row:hover .hover-reveal-image {
    opacity: 1;
}

/* Adjust hover image on smaller desktops */
@media (max-width: 1400px) {
    .hover-invert-row .hover-reveal-image {
        right: 200px;
        max-width: 220px;
        max-height: 140px;
    }
    .hover-invert-row .hover-reveal-image img {
        max-width: 220px;
        max-height: 140px;
    }
}

/* Hide hover image on smaller screens */
@media (max-width: 1200px) {
    .hover-invert-row .hover-reveal-image {
        display: none !important;
    }
}

/* ===========================================
   QUERY LOOP SLIDER (The Edit section)
   =========================================== */

/* Make Query Loop with bla-slider class scrollable */
.bla-slider.wp-block-query .wp-block-post-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 20px;
}

.bla-slider.wp-block-query .wp-block-post-template::-webkit-scrollbar {
    display: none !important;
}

.bla-slider.wp-block-query .wp-block-post-template > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
}

/* Equal height cards - Events section only */
.section-upcoming-events .bla-slider.wp-block-query .wp-block-post-template > * {
    display: flex !important;
    flex-direction: column !important;
}

.section-upcoming-events .bla-slider.wp-block-query .wp-block-post-template > * > .wp-block-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Event card date spacing - auto margin pushes to bottom */
.section-upcoming-events .wp-block-post-template .wp-block-post-date {
    margin-top: 75px !important;
    margin-left: 0 !important;
}

/* Desktop: 4 columns with peek */
@media (min-width: 1025px) {
    .bla-slider.wp-block-query .wp-block-post-template > * {
        width: calc(25% - 20px) !important;
    }
}

/* Tablet: 2 columns with peek */
@media (min-width: 782px) and (max-width: 1024px) {
    .bla-slider.wp-block-query .wp-block-post-template > * {
        width: calc(45% - 10px) !important;
    }
}

/* Mobile: 1 column with peek */
@media (max-width: 782px) {
    .bla-slider.wp-block-query .wp-block-post-template > * {
        width: 85% !important;
    }
}

/* ===========================================
   DONATION FORM STYLING (Form ID 8)
   =========================================== */

/* All labels white */
#gform_wrapper_8 .gfield_label,
#gform_wrapper_8 legend.gfield_label {
    color: #ffffff !important;
}

/* Name field - inline layout */
#gform_wrapper_8 #field_8_5 {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

#gform_wrapper_8 #field_8_5 legend.gfield_label {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

#gform_wrapper_8 #field_8_5 .ginput_container {
    flex: 1 !important;
}

/* Email field - inline layout */
#gform_wrapper_8 #field_8_6 {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding-top: 20px !important; 
    padding-bottom: 20px !important;
}

#gform_wrapper_8 #field_8_6 .gfield_label {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}

#gform_wrapper_8 #field_8_6 .ginput_container {
    flex: 1 !important;
}

/* All text inputs - transparent with bottom border */
#gform_wrapper_8 input[type="text"],
#gform_wrapper_8 input[type="email"],
#gform_wrapper_8 .ginput_container_name input,
#gform_wrapper_8 .ginput_container_email input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(234, 203, 112, 0.5) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    width: 100% !important;
}

#gform_wrapper_8 input[type="text"]:focus,
#gform_wrapper_8 input[type="email"]:focus {
    outline: none !important;
    border-bottom-color: #EACB70 !important;
}

/* Custom Amount - inline with Amount field */
#gform_wrapper_8 .donation-custom-amount {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#gform_wrapper_8 .donation-custom-amount .gfield_label {
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

#gform_wrapper_8 .donation-custom-amount .gfield_label::after {
    content: ":" !important;
}

#gform_wrapper_8 .donation-custom-amount .ginput_container {
    flex: 0 0 auto !important;
}

#gform_wrapper_8 .donation-custom-amount .ginput_amount,
#gform_wrapper_8 .donation-custom-amount input.ginput_amount {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    width: 100px !important;
    text-align: center !important;
}

#gform_wrapper_8 .donation-custom-amount .ginput_amount:focus {
    outline: none !important;
    border-color: #EACB70 !important;
}

/* Total field */
#gform_wrapper_8 .donation-total .ginput_container {
    color: #ffffff !important;
}

/* Submit button */
#gform_wrapper_8 .gform_button,
#gform_wrapper_8 input[type="submit"] {
    background-color: #EACB70 !important;
    color: #1e3a5f !important;
    border: none !important;
    padding: 14px 40px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-out !important;
}

#gform_wrapper_8 .gform_button:hover,
#gform_wrapper_8 input[type="submit"]:hover {
    background-color: #d4b85e !important;
    transform: translateY(-2px) !important;
}

/* ===========================================
   DONATION FORM - MOBILE RESPONSIVE
   =========================================== */
@media (max-width: 782px) {
    /* Name field - stack on mobile */
    #gform_wrapper_8 #field_8_5,
    .donation-form-section #gform_wrapper_8 #field_8_5 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        margin-top: 10px !important;
    }

    #gform_wrapper_8 #field_8_5 .ginput_container {
        width: 100% !important;
    }

    /* Email field - stack on mobile */
    #gform_wrapper_8 #field_8_6,
    .donation-form-section #gform_wrapper_8 #field_8_6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #gform_wrapper_8 #field_8_6 .ginput_container {
        width: 100% !important;
    }

    /* Custom amount - FORCE it below amount buttons on mobile */
    #gform_wrapper_8 .donation-custom-amount,
    #gform_wrapper_8 #field_8_3,
    .donation-form-section .donation-custom-amount,
    .donation-form-section #field_8_3,
    .donation-form-section .gform_wrapper .gfield.donation-custom-amount,
    fieldset.gfield.donation-custom-amount,
    .gfield.donation-custom-amount {
        position: static !important;
        position: relative !important;
        float: none !important;
        width: 100% !important;
        margin-top: 15px !important;
        margin-left: 0 !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
}