/* 
 * Custom CSS for BeautyParlour Theme
 * Override WordPress block editor font presets
 */

/* Override WordPress block editor font presets */
:root {
    --wp--preset--font-family--manrope: 'Manrope', sans-serif;
    --wp--preset--font-family--libre-baskerville: 'Libre Baskerville', serif;
}

/* Ensure theme fonts take priority over WordPress presets */
body,
p,
span,
div {
    font-family: var(--bodyFont) !important;
}

h1, h2, h3, h4, h5, h6,
.single_slider_text h1,
.single_slider_text h5,
.banner_2_text h1,
.breadcrumb_text h1 {
    font-family: var(--bannerFont) !important;
}

/* Override any WordPress block editor styles */
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title {
    font-family: var(--bannerFont) !important;
}

/* Ensure banner text uses correct fonts */
.single_slider_text h5 {
    font-family: var(--bannerFont) !important;
    font-weight: 400 !important;
}

.single_slider_text h1 {
    font-family: var(--bannerFont) !important;
    font-weight: 600 !important;
}

/* Override any Gutenberg block styles */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    font-family: var(--bannerFont) !important;
}

.editor-styles-wrapper p,
.editor-styles-wrapper div {
    font-family: var(--bodyFont) !important;
}

/* Fix banner button positioning - override conflicting CSS */
.banner .common_btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* Featured Services Icon Styling */
.featured_service_single .service-svg-icon {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.featured_service_single span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.featured_service_single span i {
    font-size: 3rem;
    color: #faa392;
}

/* Fix Venobox lightbox image display - prevent cropping/zooming */
.vbox-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
}

.vbox-container {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vbox-content {
    max-width: 100% !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
}

/* Override any 600px max-height restriction */
.vbox-overlay .vbox-content,
.vbox-container .vbox-content,
.vbox-content[style*="max-height: 600px"],
.vbox-content[style*="max-height:600px"] {
    max-height: 90vh !important;
    height: auto !important;
}

/* Force override any inline styles or other CSS rules */
.vbox-overlay .vbox-content {
    max-height: 90vh !important;
    height: auto !important;
}

.vbox-content img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* Ensure images fit properly in lightbox */
.vbox-inline {
    max-width: 90vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.vbox-inline img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Additional lightbox fixes */
.vbox-close {
    color: #fff !important;
    font-size: 2rem !important;
    z-index: 9999 !important;
}

.vbox-preloader {
    color: #fff !important;
}

/* Custom Logo Size Control */
.custom-logo {
    max-width: 200px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .custom-logo {
        max-width: 150px !important;
        max-height: 60px !important;
    }
}

@media (max-width: 480px) {
    .custom-logo {
        max-width: 120px !important;
        max-height: 50px !important;
    }
}