/*!
 Theme Name:   FWG Theme
 Theme URI:    
 Description:  Child-Theme für die FWG Stadt Ramstein-Miesenbach
 Author:       Jochen Meier
 Author URI:
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  fwg-child
*/


/*--------------------------------------------------------------
  Canvas Background Layering
  - Ensures gradient canvas sits above the scroller but below
    header and footer.
  - grauer Übergang) hat niedrigen z-Index, aber höher als Scroller
--------------------------------------------------------------*/
#fwg-gradientCanvas {
  position:       fixed;
  top:            var(--header-height, 100px); /* Höhe des Headers */
  left:           0;
  right:          0;
  width:          100%;
  z-index:        2;              /* unter Submenü, über Scroller */
  pointer-events: none;           /* erlaubt Klicks durch den Canvas hindurch */
}

/*--------------------------------------------------------------
  Header & Footer Z-Index
  - Keeps header and footer above all other elements, insbesondere den Scroller
--------------------------------------------------------------*/
.site-header,
#masthead {
  position: fixed;
  z-index: 4;
}
.site-footer,
#colophon,
.footer-widgets {
  position: relative;
  z-index: 10;
}


/*--------------------------------------------------------------
  Global Container Padding Override
  - Applies 88px left/right padding site-wide (instead of 40px).
  - Kopf soll fest sein - beim Scrollen
  
  ACHTUNG: hier kann Canvas mit Submenü Probleme machen
--------------------------------------------------------------*/
.container {
  padding-top:    0    !important;
  padding-left:   88px !important;
  padding-right:  88px !important;
}
.inside-header {
  display: flex;
  align-items: center;
  padding: 0 88px;           /* behält deine Außenabstände */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height, 100px);
  background-color: #fcf2e8;
  z-index: 11;
}
/* Logo bleibt Item 0 - erstes Element im Header */
.site-logo {
  order: 0;
  flex: 0 0 auto;
}
/* Box als flexibles Pseudo-Element an Position 2 */
.inside-header::after {
  content: "";
  order: 1;
  flex: 1;
  margin: 0 24px;
  height: 40px;
  background-color: #fcf2e8;  /* hellorange => unsichtbar */
}
/* Navi ans Ende im Header */
.main-navigation {
  order: 2;
  flex: 0 0 auto;
}


/*--------------------------------------------------------------
  Logo Sizing
  - Locks logo height to 60px, maintains aspect ratio.
--------------------------------------------------------------*/
.site-logo img,
.custom-logo-link img {
  height:     60px;
  width:      auto;
  max-width:  100%;
  display:    block;
}


/*--------------------------------------------------------------
  Submenu Styling
  - Applies an orange border and background to dropdown menus.
--------------------------------------------------------------*/
.main-navigation .sub-menu,
.main-nav ul ul {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  border:           1px solid #f7a141;
  border-radius:    0;        /* change to 6px for rounded corners */
  padding:          6px;
  background-color: #fcf2e8;
  position:         fixed !important;  /* nötig sonst funktioniert z-Index nicht */
  top:     var(--header-height);
  left:    0;
  z-index:          999       !important;  /* höher als Inside-Header */
}
/* Alle leeren Dropdown-Container verbergen */
.main-navigation .sub-menu:empty {
  display: none !important;
}
/* Nur beim Hover des Eltern-Elements anzeigen */
.main-navigation li.menu-item-has-children:hover > .sub-menu {
  display: block;           /* sichtbar machen */
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* falls zuvor eine TranslateY-Animation */
}


/*--------------------------------------------------------------
  Heading Separator Styling
  - Adds 112px top margin on main headings and inserts a
    left-aligned orange bar below them.
--------------------------------------------------------------*/
.page-title,
.entry-title {
  margin-top: 112px !important;
}

.page-title::after,
.entry-title::after {
  content: "";
  display: block;
  width:   240px;
  height:  3px;
  background-color: #f7a141;
  margin: 24px 0 8px 0;
}

/*--------------------------------------------------------------
  Text Block Width Limit
  - Restricts specific text blocks to 560px, aligns block right,
    keeps text inside left-aligned.
--------------------------------------------------------------*/
.text-size-medium {
  max-width:     560px;
  margin-left:   auto;
  margin-right:  0;
  text-align:    left;
}

/*--------------------------------------------------------------
  Vertical Image Scroller Clipping
  - Prevents the scroller from growing page height beyond
    footer, while still allowing horizontal hover effects.
--------------------------------------------------------------*/
.vis-wrapper {
  overflow-y: hidden !important;
  overflow-x: visible !important;
}