/**
 * CVPhotoVault - Elementor Compatibility Styles
 * Ensures theme works well with Elementor page builder
 */

/*
 * Global container system. Every "boxed" section already gets this
 * .elementor-container automatically. "full_width" sections (hero, CTA
 * banners) let their BACKGROUND run edge-to-edge, but Elementor also
 * leaves their .elementor-container unconstrained by default - which is
 * why hero/CTA text and buttons previously drifted from the same
 * left/right boundary every boxed section (headings, paragraphs, grids,
 * footer) uses. Capping full_width containers to the same variable fixes
 * that at the source instead of nudging individual elements.
 */
.elementor-container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    box-sizing: border-box;
}

.elementor-section-full_width > .elementor-container {
    max-width: var(--container-width) !important;
}

.elementor-row {
    margin: 0 !important;
}

.elementor-column {
    padding: var(--spacing-md) !important;
}

/* Elementor Text Editor */
.elementor-text-editor {
    line-height: 1.8;
}

.elementor-text-editor p {
    margin-bottom: var(--spacing-md);
}

/* Elementor Heading */
.elementor-heading-title {
    font-family: var(--font-family-heading) !important;
    font-weight: 600;
}

.elementor-widget-heading .elementor-heading-title {
    margin-bottom: var(--spacing-md);
}

/*
 * Elementor Button - one shared height/alignment system for every button
 * on the site. Individual widgets still set their own background/border/
 * text color (that's how primary vs. outline buttons stay visually
 * distinct), but height, padding, line-height and centering are forced
 * here so two buttons never render at different heights or baselines
 * just because one widget's own font-size or padding setting differs.
 * The !important pins mirror the pattern already used throughout this
 * file for the same reason: Elementor emits per-widget generated CSS
 * scoped to that widget's own element class, which is more specific than
 * a plain .elementor-button rule and would otherwise win the cascade.
 */
.elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--btn-height) !important;
    padding: 0 var(--btn-padding-x) !important;
    line-height: 1 !important;
    font-size: var(--font-size-small) !important;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-sm) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    transition: var(--transition-default) !important;
}

.elementor-button .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/*
 * Colors are deliberately NOT forced here. Each button widget already
 * sets its own background_color/border_color/text_color (that's how the
 * demo content distinguishes a solid "primary" button from an outline
 * "secondary" one that intentionally has no background_color). Forcing
 * one background color onto every .elementor-button here - which the
 * pre-existing rule did - would paint every outline/secondary button
 * solid gold too, destroying that distinction. A plain hover lift is
 * safe to apply universally since it doesn't touch color.
 */
.elementor-button:hover {
    transform: translateY(-2px);
}

/*
 * Hero (Home page). Targeted via the widgets' own Elementor "_element_id"
 * (Advanced tab > CSS ID) rather than a blanket heading/paragraph rule,
 * so this doesn't narrow every other heading or paragraph on the page -
 * only the specific hero widgets that opted in via that id.
 */
#hero-title .elementor-heading-title {
    max-width: 900px;
    margin-inline: auto;
    font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
}

#hero-description {
    max-width: 640px;
    margin-inline: auto;
}

#hero-actions {
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    #hero-actions {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    #hero-actions .elementor-widget-button {
        width: 100%;
    }

    #hero-actions .elementor-button {
        width: 100%;
    }
}

/* Elementor Image */
.elementor-image img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Guarantee crop-not-stretch whenever a widget sets a fixed height (the
 * demo content's Recent Projects / Follow The Journey galleries do this).
 * Applied directly here rather than relying solely on Elementor's own
 * per-widget "object_fit" setting, so it takes effect immediately for
 * every page - no per-post CSS regeneration or re-import required.
 */
.elementor-widget-image img,
.elementor-widget-image .elementor-image img {
    object-fit: cover;
}

.elementor-image-box-img img {
    display: block;
}

/* Elementor Icon */
.elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-default);
}

/* Elementor Icon Box */
.elementor-icon-box-wrapper {
    text-align: center;
}

.elementor-icon-box-icon {
    margin-bottom: var(--spacing-md);
}

.elementor-icon-box-content {
    padding: var(--spacing-md);
}

.elementor-icon-box-title {
    font-size: var(--font-size-h4);
    margin-bottom: var(--spacing-sm);
}

.elementor-icon-box-description {
    font-size: var(--font-size-body);
    color: var(--color-gray);
}

/* Elementor Image Gallery */
.elementor-image-gallery {
    display: grid;
    gap: var(--spacing-md);
}

.elementor-image-gallery.elementor-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.elementor-image-gallery.elementor-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .elementor-image-gallery.elementor-columns-3,
    .elementor-image-gallery.elementor-columns-2 {
        grid-template-columns: 1fr;
    }
}

.elementor-image-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
}

.elementor-image-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: var(--transition-default);
}

.elementor-image-gallery-item:hover img {
    transform: scale(1.05);
}

/* Elementor Divider */
.elementor-divider {
    margin: var(--spacing-lg) 0;
}

.elementor-divider__element {
    background-color: var(--color-border);
    height: 1px;
}

/* Elementor Spacer */
.elementor-spacer {
    margin: 0 !important;
}

/* Elementor Section Background */
.elementor-section {
    position: relative;
}

.elementor-section.elementor-section-boxed {
    padding: var(--spacing-xl) 0;
}

/* Elementor Contact Form */
.elementor-field-group {
    margin-bottom: var(--spacing-md);
}

.elementor-field {
    width: 100%;
}

.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-tel input,
.elementor-field-type-textarea textarea {
    padding: var(--spacing-sm) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    font-family: var(--font-family-body) !important;
}

.elementor-field-type-text input:focus,
.elementor-field-type-email input:focus,
.elementor-field-type-tel input:focus,
.elementor-field-type-textarea textarea:focus {
    border-color: var(--color-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

.elementor-field-label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* Elementor WP Editor Block */
.elementor-wp-editor-block {
    margin: var(--spacing-md) 0;
}

/* Elementor Section Overlay */
.elementor-section-overlay {
    opacity: 0.5;
}

/* Elementor Inner Section */
.elementor-inner-section {
    margin: 0;
}

/* Elementor Video Widget */
.elementor-video-frame {
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/*
 * Elementor Tabs - minimal generic base only. The Tabs widget isn't used
 * anywhere in the theme's demo content; kept lightweight on purpose so it
 * can never again collide with Accordion styling below (the two widgets
 * share the same .elementor-tab-title / .elementor-tab-content classes -
 * that collision, with a previous version of this file styling both at
 * once, was the actual cause of the FAQ page's broken/overlapping look).
 */
.elementor-tabs {
    margin-bottom: var(--spacing-xl);
}

.elementor-tab-content {
    padding: var(--spacing-md);
}

/* ==========================================================================
   FAQ Accordion - premium editorial styling
   Scoped entirely under #faq-accordion (set via the widget's _element_id in
   inc/demo-import/demo-content-pro.php) so this cannot affect any other
   accordion/tabs instance on the site. Only cosmetic properties are set -
   nothing here touches display/height/visibility, which Elementor's own JS
   controls for the open/close behavior.

   Real Elementor Accordion markup (unmodified):
     .elementor-accordion
       .elementor-accordion-item                     <- the "card"
         .elementor-tab-title                        <- clickable row, gets
                                                          .elementor-active when open
           .elementor-accordion-icon                 <- icon wrapper
             .elementor-accordion-icon-closed/-opened
           .elementor-accordion-title                <- the question text
         .elementor-tab-content                      <- the answer
   ========================================================================== */
#faq-accordion {
    max-width: 900px;
    margin: 0 auto;
}

#faq-accordion .elementor-accordion-item {
    background-color: #F7F6F3;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#faq-accordion .elementor-accordion-item:last-child {
    margin-bottom: 0;
}

#faq-accordion .elementor-accordion-item:hover {
    background-color: #F1EFE9;
    border-color: #D8D2C4;
}

#faq-accordion .elementor-accordion-item:has(.elementor-active) {
    background-color: #F1EFE9;
    border-color: #D8D2C4;
}

#faq-accordion .elementor-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 26px 28px;
    cursor: pointer;
    background: none;
    border: none;
}

/* Icon on the right regardless of Elementor's own icon-position setting -
   flexbox order guarantees this without depending on that control's exact
   key name matching across Elementor versions. */
#faq-accordion .elementor-accordion-title {
    order: 1;
    display: block;
    flex: 1;
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #1A1A1A;
    text-decoration: none;
    transition: color 0.25s ease;
}

#faq-accordion .elementor-accordion-icon {
    order: 2;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E5E5;
    border-radius: 50%;
    color: #C9A227;
    font-size: 13px;
    transition: border-color 0.25s ease, color 0.25s ease;
}

#faq-accordion .elementor-accordion-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Open/active state */
#faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
    color: #0B0B0B;
}

#faq-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
    border-color: #C9A227;
    color: #C9A227;
}

#faq-accordion .elementor-tab-content {
    padding: 0 28px 28px 28px;
    border: none;
    font-family: var(--font-family-body);
    font-size: 17px;
    line-height: 1.75;
    color: #666666;
}

@media (max-width: 1024px) {
    #faq-accordion {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 767px) {
    #faq-accordion .elementor-tab-title {
        padding: 18px 20px;
        gap: var(--spacing-sm);
    }

    #faq-accordion .elementor-accordion-title {
        font-size: 17px;
    }

    #faq-accordion .elementor-accordion-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    #faq-accordion .elementor-tab-content {
        padding: 0 20px 22px 20px;
        font-size: 16px;
    }
}

/* ==========================================================================
   FAQ page final CTA - centered composition, scoped entirely under
   #faq-final-cta (set via the section's _element_id) so it cannot affect
   any other CTA section on the site.
   ========================================================================== */
#faq-final-cta .elementor-container {
    max-width: 750px;
}

#faq-final-cta .faq-cta-support .elementor-text-editor {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Overrides the global ".elementor-divider { margin: var(--spacing-lg) 0; }"
 * rule (unchanged, still applies everywhere else) for this one divider only.
 * Uses the theme's existing spacing scale rather than new hardcoded values.
 */
#faq-final-cta .elementor-divider {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 1024px) {
    #faq-final-cta {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    #faq-final-cta .faq-cta-headline .elementor-heading-title {
        font-size: 40px;
    }
}

/* ==========================================================================
   Home page "What We Do" services - premium image card grid
   Scoped under .cvphotovault-services (set on the section's own
   _css_classes), so this cannot affect any other section on any other page.

   services-cards-row is a plain Elementor inner-section, and each
   services-card is a plain Elementor column (25% width) - the row layout
   itself is handled entirely by Elementor's own native column mechanism
   (the same one every other multi-column row in this file already uses
   correctly), not by any custom flex/grid CSS here. Only cosmetic
   properties (image crop, hover) and the tablet 2x2 override are needed.
   ========================================================================== */

/* .elementor-column has a global 24px !important padding from an earlier
   theme-wide rule; override it here for tighter, intentional card spacing. */
.cvphotovault-services .services-cards-row .elementor-column {
    padding: 0 10px !important;
}

.cvphotovault-services .services-card-image {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.cvphotovault-services .services-card-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.cvphotovault-services .services-card:hover .services-card-image img {
    transform: scale(1.04);
}

.cvphotovault-services .services-card:hover .services-card-title .elementor-heading-title {
    color: #C9A227;
    transition: color 0.3s ease;
}

/* Tablet: 2x2 grid. Elementor columns don't natively support a "2 per row"
   breakpoint (its own responsive stacking goes straight to 100% width), so
   this override is still needed here - but a plain width override on a
   standard Elementor column is a far more reliable target than fighting
   the Container widget's flex custom-properties. */
@media (max-width: 1199px) and (min-width: 768px) {
    .cvphotovault-services .services-cards-row {
        display: flex;
        flex-wrap: wrap;
    }

    .cvphotovault-services .services-cards-row .services-card {
        width: 50% !important;
        margin-bottom: var(--spacing-lg);
    }

    .cvphotovault-services .services-main-heading .elementor-heading-title {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .cvphotovault-services {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .cvphotovault-services .services-cards-row .services-card {
        margin-bottom: var(--spacing-lg);
    }

    .cvphotovault-services .services-main-heading .elementor-heading-title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    #faq-final-cta .faq-cta-headline .elementor-heading-title {
        font-size: 32px;
    }

    #faq-final-cta .faq-cta-support .elementor-text-editor {
        font-size: 15px;
    }
}

/* ==========================================================================
   Pricing page - header, cards, and custom-package CTA. Scoped under
   #pricing-header / #pricing-cards-section / #pricing-final-cta (each set
   via that section's _element_id) so none of this can affect any other
   page's cards, headings, or CTAs.
   ========================================================================== */
#pricing-header .pricing-support-text .elementor-text-editor {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Equal-height cards with the CHOOSE PLAN button pinned to the same
 * vertical position on all three regardless of description length -
 * Elementor's column-in-a-row layout already stretches all three columns
 * to match the tallest one; this makes each card's own inner content a
 * flex column so the button can be pushed to the bottom with margin-top:
 * auto instead of relying on manual/uneven spacing to fake alignment.
 */
#pricing-cards-section .pricing-card > .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#pricing-cards-section .pricing-card .elementor-widget-button {
    margin-top: auto;
}

#pricing-final-cta .pricing-cta-support .elementor-text-editor {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    #pricing-header,
    #pricing-final-cta {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    #pricing-header .pricing-heading .elementor-heading-title {
        font-size: 40px;
    }

    #pricing-final-cta .pricing-cta-heading .elementor-heading-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    #pricing-header .pricing-heading .elementor-heading-title {
        font-size: 32px;
    }

    #pricing-header .pricing-support-text .elementor-text-editor,
    #pricing-final-cta .pricing-cta-support .elementor-text-editor {
        font-size: 15px;
    }

    #pricing-final-cta .pricing-cta-heading .elementor-heading-title {
        font-size: 30px;
    }

    #pricing-cards-section .pricing-card {
        padding: 32px 24px !important;
    }
}

/* Elementor Counter */
.elementor-counter-number-wrapper {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-accent-gold);
}

/*
 * A rule hiding .elementor-edit-area was removed here. That class is
 * Elementor's own wrapper around the EDITABLE CANVAS CONTENT inside its
 * editor - not a small "Edit with Elementor" frontend button as the original
 * comment assumed. Since this stylesheet loads on every page (including
 * inside the editor's own preview iframe), "display: none !important" was
 * force-hiding the actual page content specifically whenever Elementor's
 * editor was open, on every single page - while leaving Preview mode and the
 * live frontend untouched, since that class is only present in the DOM
 * during active editing. This was the real cause of the persistent blank
 * "Edit with Elementor" canvas.
 */

/* UAE (Ultimate Addons for Elementor) Compatibility */
.uael-creative-button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-weight: 600;
    transition: var(--transition-default);
}

/* Elementor Pro specific */
.elementor-price-table__header {
    padding: var(--spacing-lg);
    background-color: var(--color-light-gray);
}

.elementor-price-table__price {
    font-size: 42px;
    font-weight: 700;
    margin: var(--spacing-md) 0;
}

.elementor-price-table__features {
    list-style: none;
    padding: var(--spacing-md);
}

.elementor-price-table__feature-inner {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.elementor-price-table__feature-inner:last-child {
    border-bottom: none;
}