/*
 Theme Name:   Divi-AlphaOmega
 Description:  AlphaOmega Child Theme for Film Restoration Company
 Author:       Michael Schäuble
 Author URI:   https://alpha-omega.de
 Template:     Divi
 Version:      2.9-divi-native-colors
 Text Domain:  alphaomega-child
*/

/* ================================================================
   ALPHA-OMEGA DIGITAL - CUSTOM STYLES
   ================================================================
   Version: 2.9 - Divi Native Color System
   Last Updated: 2025-12-20
   
   Changes in 2.9:
   - REMOVED all color !important overrides
   - Colors now managed in Divi → Customizer → Global Settings
   - Kept custom variables for special components (filmstrip)
   - Removed ao_force_brand_colors PHP filter
   
   Changes in 2.8:
   - Implemented global 3% section padding system
   - Removed page-specific width overrides (Bildergalerie)
   - Simplified exception handling (Hero Slider only)
   - Consolidated redundant CSS rules
   - Removed dead code (unused utility classes)
   
   CRITICAL: This is the ONLY place for custom CSS
   Theme Options Custom CSS: EMPTY
   Customizer Additional CSS: EMPTY
   ================================================================ */

/* ================================================================
   GLOBAL TYPOGRAPHY
   ================================================================ */
/* Self-hosted ao-arial font for all elements */
html, body, #page-container,
.et_pb_module, .et_pb_text, .et_pb_menu, .et_pb_button,
.et_pb_blurb, .et_pb_slider, .et_pb_slide, .et_pb_cta,
.et_pb_post, .et_pb_column, h1,h2,h3,h4,h5,h6, p, a, li {
  font-family: "ao-arial", Arial, sans-serif !important;
  font-weight: 400;
}

/* ================================================================
   HEADER - CRITICAL CONFIGURATION
   ================================================================
   
   IMPORTANT: Header uses sticky positioning to float OVER content
   This prevents it from pushing the hero slider down
   DO NOT change position property without testing slider!
   ================================================================ */

body #main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    margin-bottom: 0 !important;
    padding: 24px 3% !important; /* etwas höher als vorher (20px) */
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

body #page-container {
    padding-top: 0 !important;
}

/* Header Container */
body #main-header .container.clearfix,
body #main-header .et_menu_container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Flexbox Layout */
body #main-header .et_menu_container.clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

body #main-header .et_menu_container::before,
body #main-header .et_menu_container::after {
    display: none !important;
}

/* ================================================================
   LOGO (LEFT SIDE)
   ================================================================ */

body #main-header .logo_container {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-right: 3% !important;
    max-width: 280px !important; /* mehr Platz für größeres Logo */
    display: flex !important;
    align-items: center !important;
}

body #main-header .logo_container .logo_helper {
    display: none !important;
}

body #main-header .logo_container img#logo {
    max-height: 80px !important; /* vorher 60px */
    width: auto !important;
    height: auto !important;
}

/* Legacy logo support */
.et_pb_menu .et_pb_menu__logo img, 
.et_pb_menu .logo img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 64px;
    height: auto;
    width: auto;
    filter: none !important;
}

/* ================================================================
   NAVIGATION MENU (RIGHT SIDE)
   ================================================================ */

body #main-header #et-top-navigation {
    flex: 1 1 auto !important;
    float: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #main-header #top-menu-nav {
    display: flex !important;
    align-items: center !important;
}

body #main-header nav#top-menu-nav ul#top-menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    float: none !important;
}

/* Menu Items */
body #main-header nav#top-menu-nav ul#top-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

body #main-header nav#top-menu-nav ul#top-menu > li > a {
    padding: 10px 5px !important;
    font-size: 16px !important;
    color: #333333 !important;
    border-radius: 4px !important;
}

body #main-header nav#top-menu-nav ul#top-menu > li > a:hover {
    color: #008080 !important;
    background-color: rgba(0, 128, 128, 0.1) !important;
}

/* Shop Button (add CSS class "shop-button" to menu item) */
body #main-header nav#top-menu-nav ul#top-menu > li.shop-button > a {
    background-color: #008080 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
}

body #main-header nav#top-menu-nav ul#top-menu > li.shop-button > a:hover {
    background-color: #006666 !important;
}

/* ================================================================
   MOBILE NAVIGATION (< 980px)
   ================================================================ */

@media screen and (max-width: 980px) {
    body #main-header #top-menu-nav {
        display: none !important;
    }
    
    body #main-header {
        padding: 18px 3% !important; /* etwas höher als vorher 15px */
    }
    
    body #main-header .logo_container img#logo {
        max-height: 52px !important; /* vorher 40px */
    }
}

/* ================================================================
   GLOBAL SECTION PADDING SYSTEM
   ================================================================
   
   ALL sections get 3% left/right padding by default
   This creates consistent alignment across the entire site
   
   EXCEPTIONS defined below for full-width elements
   ================================================================ */

.et_pb_section {
    padding-left: 3% !important;
    padding-right: 3% !important;
}

/* ================================================================
   HERO SLIDER - CRITICAL CONFIGURATION
   ================================================================
   
   ABSOLUTE PRIORITY RULES:
   1. Header floats OVER content (position: sticky)
   2. Slider MUST start at viewport top (margin-top: 0)
   3. Full viewport width escape from container
   4. Background images anchored to TOP
   5. NO PADDING - Full width exception to global rule
   
   DO NOT MODIFY without testing slider positioning!
   See: scotty-sysadmin/references/ao-website-project.md
   ================================================================ */

/* EXCEPTION: Hero Slider gets NO padding (full width) */
#hero-slider,
.hero-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full-width escape from Divi container */
.hero-section {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc((100vw - 100%) / -2) !important;
    margin-right: calc((100vw - 100%) / -2) !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Slider container with fixed aspect ratio */
#hero-slider {
    aspect-ratio: 2048 / 820;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* Slides fill container completely */
#hero-slider .et_pb_slides,
#hero-slider .et_pb_slide {
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Background images: CENTER HORIZONTAL, TOP VERTICAL */
#hero-slider .et_pb_slide_background,
#hero-slider .et_parallax_bg {
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    #hero-slider {
        min-height: clamp(340px, 40vw, 820px) !important;
    }
}

/* Slide content and captions */
#hero-slider .et_pb_slide .et_pb_slide_description,
#hero-slider .et_pb_slide .et_pb_slide_description *,
#hero-slider .et_pb_slide .et_pb_slide_content,
#hero-slider .et_pb_slide .et_pb_slide_content * {
    color: #ffffff !important;
}

/* Caption positioning (when using ao-caption-br class) */
#hero-slider.ao-caption-br .et_pb_slide .et_pb_slide_description {
    position: absolute;
    right: 5%;
    bottom: 5%;
    left: auto;
    max-width: min(60ch, 46%);
    margin: 0;
    padding: 0;
    background-color: transparent !important;
}

/* Slider controls - Indicator Dots (centered, 30px from bottom) */
.et_pb_slider#hero-slider .et-pb-controllers {
    display: flex !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    z-index: 3 !important;
    width: auto !important;
}

/* Slider arrows (visible on hover only - Divi default behavior) */
.et_pb_slider#hero-slider .et-pb-slider-arrows {
    display: flex !important;
    opacity: 1 !important;
    z-index: 3 !important;
}

/* ================================================================
   FILMSTRIP GALLERY SYSTEM (MODULAR VERSION) – FINAL
   ================================================================ */

/* Wrapper-Spalten – Text + Filmstrip */
.filmstrip-text-column,
.filmstrip-column {
    position: relative;
}

/* Linke Filmstrip-Spalte: Höhe durch Divi-Spalte begrenzt */
.filmstrip-column {
    overflow: hidden;
}

/* Basis Filmstrip */
.ao-filmstrip {
    --edge-size: 32px;                    /* Randhöhe oben/unten bzw. links/rechts */
    --ao-filmstrip-image-height: 120px;   /* Bildhöhe im horizontalen Streifen */
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

/* Divi-Gallery-Basis bereinigen */
.ao-filmstrip .et_pb_gallery,
.ao-filmstrip .et_pb_gallery_items,
.ao-filmstrip ul {
    background: transparent !important;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Items */
.ao-filmstrip .et_pb_gallery_item {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

.ao-filmstrip .et_pb_gallery_item a {
    display: block;
    position: relative;
}

/* Bilder im HORIZONTALEN Filmstrip */
.ao-filmstrip.ao-horizontal .et_pb_gallery_item img {
    display: block;
    object-fit: cover;
    height: var(--ao-filmstrip-image-height);
    width: auto;
}

/* Bilder im VERTIKALEN Filmstrip */
.ao-filmstrip.ao-vertical .et_pb_gallery_item img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Dekorative Filmränder */
.ao-filmstrip::before,
.ao-filmstrip::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

/* ===========================
   HORIZONTALER FILMSTRIP
   =========================== */

.ao-filmstrip.ao-horizontal {
    padding-top: var(--edge-size);
    padding-bottom: var(--edge-size);
}

.ao-filmstrip.ao-horizontal::before,
.ao-filmstrip.ao-horizontal::after {
    left: 0;
    right: 0;
    height: var(--edge-size);
    background-image: url("/wp-content/media/film-edge-horizontal.png");
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    background-color: #292929;
}

.ao-filmstrip.ao-horizontal::before {
    top: 0;
}
.ao-filmstrip.ao-horizontal::after {
    bottom: 0;
}

.ao-filmstrip.ao-horizontal .et_pb_gallery_items {
    display: flex !important;
    flex-direction: row;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    background-color: #292929 !important;
}

/* ===========================
   VERTIKALER FILMSTRIP
   =========================== */

.ao-filmstrip.ao-vertical {
    padding-left: var(--edge-size);
    padding-right: var(--edge-size);
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;            /* Höhe von der Spalte übernehmen */
    max-height: inherit;
    background-color: #292929 !important;
}

.ao-filmstrip.ao-vertical::before,
.ao-filmstrip.ao-vertical::after {
    top: 0;
    bottom: 0;
    width: var(--edge-size);
    background-image: url("/wp-content/media/film-edge-vertical.png");
    background-repeat: repeat-y;
    background-position: center;
    background-size: 100% auto;
    background-color: #292929;
}

.ao-filmstrip.ao-vertical::before {
    left: 0;
}
.ao-filmstrip.ao-vertical::after {
    right: 0;
}

.ao-filmstrip.ao-vertical .et_pb_gallery_items {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: #292929 !important;
}

/* ===========================
   COMMON
   =========================== */

.ao-filmstrip .et_pb_gallery_items::-webkit-scrollbar {
    display: none;
}
.ao-filmstrip .et_pb_gallery_items {
    scrollbar-width: none;
}

.ao-filmstrip .et_pb_gallery_pagination {
    display: none !important;
}

.ao-filmstrip .et_overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Counter oben rechts */
.ao-filmstrip-counter {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    color: white;
    background-color: rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

/* ================================================================
   BILDERGALERIE – STICKY TOP SECTION
   ================================================================
   Wir greifen nur, wenn eine Section mit ID #sticky-top-section existiert.
   Keine Seitennummer nötig, daher gefahrlos im Child-Theme.
   ================================================================ */

#sticky-top-section {
    position: sticky;
    top: 110px;                 /* Abstand zum Header – ggf. feinjustieren */
    z-index: 9000;
    background-color: #161616;  /* dunkler Hintergrund über Filmstrips */
}

#sticky-top-section .et_pb_row {
    padding: 10px 0 15px 0 !important; /* oben/unten angenehmer Abstand */
}

#sticky-top-section .et_pb_column {
    max-width: 600px;
    margin-left: auto;
    margin-right: 0;
}

/* ================================================================
   STICKY FOOTER
   ================================================================ */

/* Make body/html full height */
html {
    height: 100% !important;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Page container grows to push footer down */
#page-container {
    flex: 1 0 auto !important;
    min-height: calc(100vh - 74px) !important;
}

/* Main content needs minimum height too */
#main-content {
    min-height: calc(100vh - 200px) !important;
}

/* Footer stays at bottom */
#main-footer {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* Footer menu alignment - right aligned */
#main-footer .bottom-nav ul {
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

#main-footer .bottom-nav {
    text-align: right !important;
    width: 100% !important;
}

/* Footer bottom bar - green instead of black */
#footer-bottom {
    background-color: #277f91 !important;
    height: 20px;
    padding-left: 3% !important;
    padding-right: 3% !important;
}

/* ================================================================
   FOOTER ALIGNMENT (3% SYSTEM)
   ================================================================ */

#main-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-footer #et-footer-nav {
    padding-left: 3% !important;
    padding-right: 3% !important;
}

/* Remove container constraints in footer */
#main-footer #et-footer-nav .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main-footer #et-footer-nav .bottom-nav {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

#main-footer #et-footer-nav .bottom-nav ul {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* ================================================================
   SCROLL TO TOP BUTTON
   ================================================================ */

/* Position at footer level, right aligned with 3% system */
.et_pb_scroll_top {
    bottom: 94px !important; /* Footer height (74px) + 20px green bar */
    right: 3% !important;
    z-index: 9999 !important;
}

/* ================================================================
   EXPERT QUOTE ROW - TEXT CONTROLS HEIGHT, IMAGE FITS RIGHT-BOTTOM
   ================================================================ */

/* Row uses flexbox alignment - ALIGN TO BOTTOM */
.expert-quote-row {
    display: flex !important;
    align-items: flex-end !important;  /* Changed from flex-start to flex-end */
}

/* Text column determines row height naturally */
.expert-quote-row .et_flex_column_16_24 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Image column: no height constraints, right-bottom position */
.expert-quote-row .et_flex_column_8_24 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* Bottom alignment within column */
    align-items: flex-end !important;      /* Right alignment within column */
}

/* Image module: no constraints, align right */
.expert-quote-row .et_flex_column_8_24 .et_pb_image {
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    justify-content: flex-end !important;  /* Right alignment */
    align-items: flex-end !important;      /* Bottom alignment */
    width: 100% !important;
}

/* Actual image: natural size, positioned right-bottom */
.expert-quote-row .et_flex_column_8_24 .et_pb_image img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
}

/* Link visibility and alignment */
.expert-quote-row .et_pb_text p a {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure link paragraph is at bottom */
.expert-quote-row .et_flex_column_8_24 .et_pb_text {
    margin-top: auto !important;  /* Push to bottom */
}

/* ================================================================
   END OF CUSTOM STYLES
   ================================================================ */

/* ================================================================
   COLOR SYSTEM - ALPHA-OMEGA BRAND COLORS
   ================================================================
   Custom CSS variables for special components (filmstrip, etc.)
   Global colors are managed in: Divi → Customizer → Global Settings
   ================================================================ */
:root {
  --ao-brand-base: #0c6f84;
  --ao-brand-dark: #063842;
  --ao-brand-light: #86b7c2;
  --ao-brand-very-dark: #04272e;
}
  --gcid-secondary-color: #86b7c2 !important;     /* Use AO light for secondary */
}

/* Force headings to use the variable */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3,
.et_pb_text h4, .et_pb_text h5, .et_pb_text h6 {
  color: var(--gcid-heading-color) !important;
}

/* Force body text to use the variable */
body, p, li, td, th,
.et_pb_text, .et_pb_text p {
  color: var(--gcid-body-color) !important;
}

/* ================================================================
   FOOTER REDESIGN - AO BRAND COLORS
   ================================================================ */

/* HIDE the green bottom bar completely */
#footer-bottom {
    display: none !important;
}

/* Dark menu bar - use darkest AO color */
#main-footer #et-footer-nav {
    background-color: var(--ao-brand-very-dark) !important;  /* #04272e - very dark teal */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Footer text and links - light color for contrast */
#main-footer #et-footer-nav,
#main-footer #et-footer-nav a,
#main-footer #et-footer-nav p {
    color: #ffffff !important;
}

#main-footer #et-footer-nav a:hover {
    color: var(--ao-brand-light) !important;  /* Light teal on hover */
}

/* Social icons area - match dark background */
#main-footer #footer-info {
    background-color: var(--ao-brand-very-dark) !important;
}

#main-footer #footer-info,
#main-footer #footer-info a,
#main-footer #footer-info p {
    color: #ffffff !important;
}

/* ================================================================
   ENGLISH VERSION HEADER FIXES
   ================================================================ */

/* Hide search icon in header (both German and English) */
#main-header .et_search_icon {
    display: none !important;
}

#main-header #et_top_search {
    display: none !important;
}

/* Pharao shop button - constrain size */
#main-header nav#top-menu-nav ul#top-menu > li > a img {
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
}

/* Force hide search - more specific selectors */
body #main-header #et_top_search,
body #main-header .et_search_icon,
body .et_search_icon,
#et_top_search {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}