/*
 Theme Name:   Divi-AlphaOmega
 Description:  AlphaOmega Child Theme
 Author:       Michael Schäuble
 Author URI:   https://alpha-omega.de
 Template:     Divi
 Version:      1.1
 Text Domain:  alphaomega-child
*/

/* ================================================================
   ALPHA-OMEGA DIGITAL - CUSTOM STYLES
   ================================================================
   Version: 1.1
   Last Updated: 2025-11-22
   Changes: Added navigation enhancement
   ================================================================ */

/* Global font (self-hosted) */
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;
}

/* ================================================================
   FILMSTRIP GALLERY
   ================================================================ */

/* Filmstrip base */
.filmstrip-text-column, .filmstrip-column{ position:relative; }
.filmstrip-column{ overflow:hidden; }
.ao-filmstrip{ position:relative; isolation:isolate; background:transparent!important; }
.ao-filmstrip .et_pb_gallery{ background:transparent!important; }
.ao-filmstrip .et_pb_gallery_items, .ao-filmstrip ul{ list-style:none; margin:0; padding:0; background:transparent!important; }
.ao-filmstrip .et_pb_gallery_item{ margin:0!important; border:0!important; box-shadow:none!important; background:transparent!important; }
.ao-filmstrip .et_pb_gallery_item a{ display:block; position:relative; z-index:1; }
.ao-filmstrip .et_pb_gallery_item img,
.ao-filmstrip .et_pb_gallery_image img,
.ao-filmstrip .et_pb_gallery_item a img{ display:block; width:100%; height:auto; object-fit:cover; opacity:1!important; }

/* Decorative edges */
.ao-filmstrip::before,.ao-filmstrip::after{ content:""; position:absolute; z-index:2; pointer-events:none; }

/* Horizontal filmstrip */
.ao-filmstrip.ao-horizontal{ padding-top:24px; padding-bottom:24px; }
.ao-filmstrip.ao-horizontal::before,.ao-filmstrip.ao-horizontal::after{
  left:0; right:0; height:24px;
  background-image:url("https://www.alpha-omega.de/wp-content/media/film-edge-cropped-horizontal.png");
  background-repeat:repeat-x; background-position:center; background-size:auto 100%;
}
.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:12px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.ao-filmstrip.ao-horizontal .et_pb_gallery_item{ flex:0 0 auto; scroll-snap-align:start; }
.ao-filmstrip.ao-horizontal .et_pb_gallery_item img{ height:200px; width:auto; object-fit:cover; }

/* Vertical filmstrip (dynamic height via column sync) */
.ao-filmstrip.ao-vertical{ padding-left:18px; padding-right:18px; height:100%; max-height:inherit; }
.ao-filmstrip.ao-vertical::before,.ao-filmstrip.ao-vertical::after{
  top:0; bottom:0; width:18px;
  background-image:url("https://www.alpha-omega.de/wp-content/media/film-edge-cropped-vertical.png");
  background-repeat:repeat-y; background-position:center; background-size:100% auto;
}
.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:8px;
  height:100%; max-height:100%;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}

/* Hide native scrollbars */
.ao-filmstrip .et_pb_gallery_items{ scrollbar-width:none; }
.ao-filmstrip .et_pb_gallery_items::-webkit-scrollbar{ width:0; height:0; display:none; }
.ao-filmstrip .et_pb_gallery_pagination{ display:none!important; }

/* Utility classes */
.ao-filmstrip.ao-horizontal.ao-edge-20{ padding-top:20px; padding-bottom:20px; }
.ao-filmstrip.ao-horizontal.ao-edge-20::before,.ao-filmstrip.ao-horizontal.ao-edge-20::after{ height:20px; }
.ao-filmstrip.ao-horizontal.ao-track-200 .et_pb_gallery_item img{ height:200px; }
.ao-filmstrip.ao-vertical.ao-edge-18{ padding-left:18px; padding-right:18px; }
.ao-filmstrip.ao-vertical.ao-edge-18::before,.ao-filmstrip.ao-vertical.ao-edge-18::after{ width:18px; }

/* ================================================================
   HEADER / LOGO
   ================================================================ */

/* Header logo */
.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;
}

/* ================================================================
   HERO SLIDER
   ================================================================ */

/* HERO section full-bleed (escape central container) */
.hero-section{
  position:relative !important;
  width:100vw; max-width:100vw;
  left:50%; transform:translateX(-50%);
  margin:0; padding:0 !important;
}

/* Per-slide Description overlay */
#hero-slider{ position:relative; }
#hero-slider .et_pb_slide{ position:relative; padding:0!important; }
#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; }
#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;
}

/* Dots/arrows inside visible area */
#hero-slider .et-pb-slider-arrows, #hero-slider .et-pb-controllers{ display:flex!important; opacity:1!important; z-index:3; }
#hero-slider .et-pb-controllers{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); }

/* HERO: container height by aspect ratio; backgrounds anchored to top */
#hero-slider{
  aspect-ratio: 2048 / 820;  /* your image ratio */
  height:auto;
}
#hero-slider .et_pb_slides, #hero-slider .et_pb_slide{ min-height:inherit; height:100%; }
#hero-slider .et_pb_slide_background,
#hero-slider .et_parallax_bg{
  background-position:50% 0% !important; /* top center */
  background-size:cover!important; background-repeat:no-repeat!important;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  #hero-slider{ min-height:clamp(340px, 40vw, 720px); }
}

/* ================================================================
   NAVIGATION (Added 2025-11-22)
   ================================================================ */

/* Navigation Container */
body #main-header {
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

body #main-header .container.clearfix,
body #main-header .et_menu_container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !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) */
body #main-header .logo_container {
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    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: 60px !important;
    width: auto !important;
    height: auto !important;
}

/* Menu (Right) */
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: 30px !important;
    float: none !important;
}

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 15px !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 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 */
@media screen and (max-width: 980px) {
    body #main-header #top-menu-nav {
        display: none !important;
    }
    
    body #main-header {
        padding: 15px !important;
    }
    
    body #main-header .logo_container img#logo {
        max-height: 40px !important;
    }
}

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