/*
Theme Name: Quality Pro - Child
Theme URI: https://webriti.com/quality/
Author: Webriti
Author URI: https://webriti.com/
Template: quality-pro
Version: 1.0
Text Domain: quality
*/

/* 
 * NOTE: Parent theme styles are loaded via functions.php wp_enqueue_style.
 * Do NOT use @import here as it causes conflicts.
 */

/* ============================================
   PAGE-SPECIFIC BACKGROUND CUSTOMIZATION
   ============================================
   
   IMPORTANT: The .uwe_wrap::after pseudo-element is used for the background
   image with opacity. The parent theme already defines this - we override
   it per-page here.
   
   The z-index hierarchy:
   - .uwe_wrap::after has z-index: 1 (background layer)
   - Content inside .uwe_wrap has z-index: 2+ (above background)
*/

/* Default background for uwe_wrap - only change image/opacity here */
.uwe_wrap::after {
    /* Using the same image as parent but can be overridden per page */
    background-image: url('https://uritter.com/wp-content/uploads/2020/12/business4.jpg');
    opacity: 0.2;
}

/* 
 * ADD YOUR CUSTOM PAGE BACKGROUNDS BELOW
 * =====================================
 * 
 * Option 1: Use page slug (recommended)
 *   .page-kontakt .uwe_wrap::after { ... }
 *   .page-impressum .uwe_wrap::after { ... }
 * 
 * Option 2: Use page ID
 *   .page-id-42 .uwe_wrap::after { ... }
 * 
 * Option 3: Use the custom class from Page Background Settings meta box
 *   .custom-bg-blog .uwe_wrap::after { ... }
 */

/* Example: Blog page - uncomment and customize */
/*
.page-blog .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/YOUR-BLOG-IMAGE.jpg');
    opacity: 0.3;
}
*/

/* Example: Cookie consent page - uncomment and customize */
/*
.page-datenschutz .uwe_wrap::after,
.page-cookies .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/YOUR-COOKIE-IMAGE.jpg');
    opacity: 0.25;
}
*/

/* Example: Imprint page - uncomment and customize */
/*
.page-impressum .uwe_wrap::after,
.page-imprint .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/YOUR-IMPRINT-IMAGE.jpg');
    opacity: 0.2;
}
*/

/* Example: Contact page - uncomment and customize */
/*
.page-kontakt .uwe_wrap::after,
.page-contact .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/YOUR-CONTACT-IMAGE.jpg');
    opacity: 0.35;
}
*/

/* ============================================
   PREDEFINED BACKGROUND STYLES (Meta Box)
   ============================================
   These are used by the "Page Background Settings" meta box
   when you select a style in the page editor.
*/

/* Blog style - medium opacity */
.custom-bg-blog .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/2020/12/business4.jpg');
    opacity: 0.3;
}

/* Dark style - higher opacity with dark filter */
.custom-bg-dark .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/2020/12/business4.jpg');
    opacity: 0.4;
    filter: brightness(0.7);
}

/* Light style - very subtle */
.custom-bg-light .uwe_wrap::after {
    background-image: url('https://uritter.com/wp-content/uploads/2020/12/business4.jpg');
    opacity: 0.1;
}

/* No background */
.custom-bg-none .uwe_wrap::after {
    background-image: none !important;
    opacity: 0;
}

/* ============================================
   FONT SIZE FIXES - Match Parent Theme
   ============================================
   These ensure font sizes match the original parent theme
*/

/* Base font size (parent: 14px default, 16px on large screens) */
html {
    font-size: 14px;
}
@media(min-width:60em) { 
    html { 
        font-size: 16px; 
    } 
}

/* Top menu font size */
.navbar-custom .navbar-nav > li > a {
    font-size: 1rem;
}

/* Section headers (Services title, etc.) */
.section-header h1.widget-title {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Section subtext/description */
.section-header p {
    font-size: 1.125rem;
    margin: 0;
}

/* Site description/tagline ("Kompetenz und Erfahrung") */
.site-description {
    font-size: 0.875rem;
}

/* Footer font size */
.site-footer,
.footer-sidebar {
    font-size: 0.938rem;
}

/* Footer widget titles */
.footer-sidebar .widget-title {
    font-size: 1.125rem;
}

/* Service titles */
.service .post .entry-header .entry-title {
    font-size: 1.25rem;
}

/* Slider subtitle */
.slider-caption h5,
.slider-caption .sub-title {
    font-size: 1rem;
}

/* Slider title */
.slider-caption h1 {
    font-size: 3.438rem;
}
@media (max-width: 768px) {
    .slider-caption h1 {
        font-size: 2.438rem;
    }
}