/*
Theme Name: Enfold Child
Description: habs*gut - Cafe und Tagesbar, Maria Enzersdorf
Version: 4.0
Author: habsgut
Template: enfold
*/

/* =============================================================================
   GOOGLE FONTS IMPORT
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   CSS CUSTOM PROPERTIES — matched to original habsgut.at
   ============================================================================= */
:root {
  --hg-black: #000000;
  --hg-white: #FFFFFF;
  --hg-beige: #EFEBEA;
  --hg-warm-gray: #CEC3BE;
  --hg-font-heading: 'Instrument Serif', serif;
  --hg-font-body: 'Inter', 'Inter Display', sans-serif;
}

/* =============================================================================
   GLOBAL TYPOGRAPHY — matched to original
   Original: body 20px Inter Display, headings 400-weight Instrument Serif
   ============================================================================= */
body {
  font-family: var(--hg-font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--hg-black);
  background-color: var(--hg-beige);
}

/* Headings: Instrument Serif, weight 400 (NOT 600) */
h1, h2, h3, h4, h5, h6,
.av-special-heading h1, .av-special-heading h2,
.av-special-heading h3, .av-special-heading h4,
.av-special-heading-tag {
  font-family: var(--hg-font-heading);
  font-weight: 400;
}

/* Default heading sizes (Enfold inline sizes will override these) */
h1, .av-special-heading h1 { font-size: 120px; line-height: 108px; }
h2, .av-special-heading h2 { font-size: 40px; line-height: 40px; }
h3, .av-special-heading h3 { font-size: 50px; line-height: 50px; }
h4, .av-special-heading h4 { font-size: 40px; line-height: 40px; }
h5, .av-special-heading h5 { font-family: var(--hg-font-body); font-size: 20px; line-height: 30px; }

/* Body paragraphs — defaults, Enfold textblock sizes override */
p, span, a, li {
  font-family: var(--hg-font-body);
}

.avia-section p,
.avia-section .av_textblock_section p {
  font-weight: 400;
  color: var(--hg-black);
  line-height: 1.6;
}

/* Lead/intro paragraphs — opt-in class only */
.hg-lead-text,
.hg-lead-text p {
  font-family: var(--hg-font-heading);
  font-size: 30px;
  line-height: 42px;
}

/* Hero heading color: beige #EFEBEA on dark backgrounds (NOT pure white) */
.hg-hero-section .av-special-heading-tag {
  color: var(--hg-beige) !important;
  display: block !important;
  width: 100% !important;
}

.hg-hero-section .av-special-heading {
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
}

.hg-hero-section .flex_column,
.hg-hero-section .flex_column_table {
  text-align: center !important;
}

/* =============================================================================
   NAV — Layout: Left(Tagesbar|Seminare|Feiern) Center(☰) Right(Reservieren|Logo)
   ============================================================================= */
#top .main_menu .menu > li > a,
.av-main-nav > li > a {
  font-family: var(--hg-font-body) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Active page indicator */
#top .main_menu .menu > li.current-menu-item > a {
  border-bottom: 1px solid currentColor;
}

/* --- Header: transparent, inverted colors, sticky on ALL devices --- */

/* Entire header fixed at top on ALL screen sizes */
#top #wrap_all #header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* All header backgrounds: transparent */
#top #header,
#top #header_main,
#top #header .header_bg,
#top #header_main .container,
#top .av-burger-overlay-bg,
.av-hamburger {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Nav links: white */
#top #header .av-main-nav > li > a {
  color: #FFFFFF !important;
}

/* Mobile/tablet burger lines: white, NO background box */
#top .av-hamburger {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#top .av-hamburger span,
#top .av-hamburger span::before,
#top .av-hamburger span::after {
  background-color: #FFFFFF !important;
}

/* Mobile menu text "Menü": white */
#top #header .av-open-burger-text,
#top .av-burger-menu-main a {
  color: #FFFFFF !important;
}

/* --- Header layout: desktop only (>989px) — nav LEFT, logo RIGHT --- */
@media only screen and (min-width: 990px) {
  #top #header_main .container,
  #top #header_main .container.av-logo-container {
    max-width: 100% !important;
    padding: 0 40px !important;
  }

  #top .inner-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Nav goes LEFT (order 1) */
  #top .inner-container > .main_menu,
  #top #header_main .main_menu {
    order: 1 !important;
    float: none !important;
    position: static !important;
    flex: 1 !important;
    width: auto !important;
  }

  /* Logo goes RIGHT (order 2) */
  #top .inner-container > .logo,
  #top #header_main span.logo {
    order: 2 !important;
    float: none !important;
    position: static !important;
    flex-shrink: 0 !important;
  }

  #top .av-main-nav,
  #top ul.av-main-nav {
    display: flex !important;
    align-items: center !important;
    float: none !important;
  }

  #top #header_main .container *:not(img):not(svg) {
    float: none !important;
  }
}

/* Burger: positioned relative to the HEADER, not the nav */
#top #header_main {
  position: relative !important;
}

/* "Mehr" burger item (5th): dead center of the entire header */
#top .av-main-nav > li:nth-child(5) {
  position: fixed !important;
  left: 50vw !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  z-index: 100 !important;
}

/* Vertically align with the other nav items */
#top .av-main-nav > li:nth-child(5) > a {
  display: flex !important;
  align-items: center !important;
}

/* Hide "Mehr" text, show burger icon */
#top .av-main-nav > li:nth-child(5) > a .avia-menu-text {
  font-size: 0 !important;
  line-height: 0 !important;
}
#top .av-main-nav > li:nth-child(5) > a .avia-menu-text::before {
  content: '☰' !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: block !important;
}

/* Burger dropdown styling — single column, clean */
#top .av-main-nav > li:nth-child(5) .sub-menu {
  min-width: 200px !important;
  max-width: 220px !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  padding: 15px 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

#top .av-main-nav > li:nth-child(5) .sub-menu li {
  width: 100% !important;
  float: none !important;
  display: block !important;
  text-align: left !important;
  border: none !important;
  border-bottom: none !important;
}

#top .av-main-nav > li:nth-child(5) .sub-menu li:last-child,
#top .av-main-nav > li:nth-child(5) .sub-menu li:last-child a {
  border-bottom: none !important;
}

#top .av-main-nav > li:nth-child(5) .sub-menu li a {
  color: #333 !important;
  padding: 8px 25px !important;
  display: block !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

#top .av-main-nav > li:nth-child(5) .sub-menu li a:hover {
  color: #000 !important;
  background: #f5f5f5 !important;
}

/* =============================================================================
   BUTTONS — match original: pill 30px radius, Inter Display
   ============================================================================= */
.avia-button {
  border-radius: 30px;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 36px;
  font-family: var(--hg-font-body);
  letter-spacing: 0;
}

/* Card buttons */
.hg-card .avia-button {
  border-radius: 30px;
}

/* Buttons on dark backgrounds */
.hg-bg-black .avia-button.avia-color-light,
.hg-bg-black .avia-button[style*="transparent"] {
  border: 1px solid var(--hg-beige) !important;
  color: var(--hg-beige) !important;
}

/* =============================================================================
   CASCADING TEXT (Genussentspannt / Arbeiten / Feiern)
   — NO scrolling, NO marquee, just static staggered italic text
   ============================================================================= */

/* Cascading italic text (Genussentspannt / Arbeiten naturstadtnah / Feiern wie daheim) */
.hg-cascade-text {
  padding: 60px 0;
  text-align: center;
}

.hg-cascade-line {
  font-family: var(--hg-font-heading);
  font-style: italic;
  font-size: 70px;
  line-height: 0.85;
  color: var(--hg-black);
  font-weight: 400;
  padding-top: 10px;
}

.hg-cascade-line:nth-child(1) { text-indent: -5%; }
.hg-cascade-line:nth-child(2) { text-indent: 5%; }
.hg-cascade-line:nth-child(3) { text-indent: 15%; }

@media only screen and (max-width: 768px) {
  .hg-cascade-line {
    font-size: 32px;
    padding-left: 5% !important;
  }
}

/* =============================================================================
   FAQ ACCORDION (details/summary)
   ============================================================================= */
details.hg-faq-item {
  border-bottom: 1px solid var(--hg-warm-gray);
  padding: 20px 0;
}

details.hg-faq-item summary {
  font-family: var(--hg-font-heading);
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details.hg-faq-item summary::-webkit-details-marker {
  display: none;
}

details.hg-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  font-family: var(--hg-font-body);
  transition: transform 0.2s;
}

details.hg-faq-item[open] summary::after {
  content: '\2212';
}

details.hg-faq-item .faq-answer {
  padding-top: 15px;
  font-size: 16px;
  line-height: 1.7;
  font-family: var(--hg-font-body);
}

/* =============================================================================
   FIX: Enfold wraps & in span.special_amp with Baskerville — override to inherit
   ============================================================================= */
.special_amp {
  font-family: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
}

/* =============================================================================
   TARGETED COLOR OVERRIDES
   ============================================================================= */
.hg-bg-beige {
  background-color: var(--hg-beige);
}

.hg-bg-black {
  background-color: var(--hg-black);
  color: var(--hg-beige);
}

/* Text on dark backgrounds uses beige #EFEBEA, not pure white */
.hg-bg-black h1, .hg-bg-black h2, .hg-bg-black h3,
.hg-bg-black h4, .hg-bg-black h5, .hg-bg-black h6,
.hg-bg-black p, .hg-bg-black span, .hg-bg-black a {
  color: var(--hg-beige) !important;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media only screen and (max-width: 768px) {
  h1, .av-special-heading h1 {
    font-size: 60px !important;
    line-height: 54px !important;
  }

  .hg-marquee-inner span {
    font-size: 32px;
    padding: 0 30px;
  }

  details.hg-faq-item summary {
    font-size: 18px;
  }

  /* ===== MOBILE HERO: full width, no gaps ===== */

  /* Hero only: no side padding (video fills edge-to-edge) */
  #hero > .container,
  #hero > .av-section-cont-open {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* No top gap on mobile — header overlays content */
  .html_header_transparency .template-page.content,
  #main,
  .container_wrap:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Force header transparent on mobile (sticky is handled globally) */
  #header, #header_main, #header .header_bg,
  #header .container, .av-burger-overlay-bg {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Hero section: edge-to-edge, exactly 100vh */
  #hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  /* Hero text on mobile: centered, readable size */
  #hero .av-special-heading-tag {
    font-size: 36px !important;
    line-height: 44px !important;
  }

  #hero .av_textblock_section p,
  #hero .av_textblock_section {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  #hero .flex_column {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }

  /* Mobile hero fills exactly one screen */
  #hero .flex_column_table {
    min-height: 100vh !important;
    max-height: 100vh !important;
    padding-bottom: 40px !important;
  }
}

/* Tablet (769-989px): transparent header (sticky is handled globally) */
@media only screen and (min-width: 769px) and (max-width: 989px) {
  #header, #header_main, #header .header_bg,
  #header .container, .av-burger-overlay-bg {
    background: transparent !important;
    background-color: transparent !important;
  }

  .html_header_transparency .template-page.content,
  #main,
  .container_wrap:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* =============================================================================
   SLIDESHOW SIZE FIX
   ============================================================================= */
.avia-slideshow:not(.av-section-video-bg) {
  max-height: 600px;
}

.avia-slideshow img {
  object-fit: cover;
}

/* =============================================================================
   FIX: Remove Enfold special heading decoration lines
   ============================================================================= */
.av-special-heading .special-heading-border,
.av-special-heading .special-heading-inner-border,
.av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:before,
.av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:after {
  display: none !important;
}

/* Remove default content top-padding on transparent header pages */
.html_header_transparency .template-page.content {
  padding-top: 0 !important;
}

/* Fix: Enfold section padding not applied in fullsize mode.
   Enfold targets .content/.sidebar but fullsize pages don't have those wrappers. */
.avia-section-small.fullsize > .container { padding-top: 20px; padding-bottom: 20px; }
.avia-section-default.fullsize > .container { padding-top: 50px; padding-bottom: 50px; }
.avia-section-large.fullsize > .container { padding-top: 70px; padding-bottom: 70px; }
.avia-section-huge.fullsize > .container { padding-top: 130px; padding-bottom: 130px; }
.avia-section-no-padding.fullsize > .container { padding-top: 0; padding-bottom: 0; }

/* =============================================================================
   CONTENT WIDTH CONSTRAINTS — match original habsgut.at layout
   ============================================================================= */
.container_wrap > .container.av-section-cont-open {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avia-section > .container {
  max-width: 1054px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hg-section-full > .container,
.hg-section-full > .container.av-section-cont-open {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.avia-section.av-section-video-bg > .container,
.avia-section.avia-section-no-padding > .container,
.avia-section[style*="background-image"] > .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hg-section-wide > .container {
  max-width: 1600px !important;
}

/* Footer: full width with padding, matching original (44px 50px 30px) */
#footer .container,
.avia-footer .container,
#socket .container {
  max-width: 100% !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}

/* Footer column headers: uppercase, small, letter-spacing */
.avia-footer .widget-title,
#footer .widget-title {
  text-transform: uppercase !important;
  font-family: var(--hg-font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--hg-white) !important;
}

/* =============================================================================
   FIX: Heading text-transform - original uses normal case
   ============================================================================= */
.av-special-heading .av-special-heading-tag {
  text-transform: none;
  font-weight: 400;
}

/* =============================================================================
   VIMEO VIDEO — uses Enfold native section video, hide Vimeo controls via CSS
   ============================================================================= */
/* Hide Vimeo player controls (play, progress, share, etc.) on hero video */
#hero .av-section-video-controls,
#hero .mejs-container,
#hero .mejs-controls,
#hero .mejs-overlay,
#hero .mejs-overlay-play {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide the Vimeo UI elements inside the iframe overlay area */
#hero .avia-video {
  pointer-events: none !important;
}

/* Ensure hero content sits above the video and at the BOTTOM */
#hero .flex_column,
#hero .flex_column_table {
  position: relative !important;
  z-index: 2 !important;
}

#hero .flex_column_table {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 100vh !important;
  padding-bottom: 60px !important;
}

/* Hero heading "Öffnungszeiten" — large and prominent */
#hero .av-special-heading-tag {
  font-size: 70px !important;
  line-height: 80px !important;
  font-family: var(--hg-font-heading) !important;
}

/* Hero hours text — clearly readable */
#hero .av_textblock_section p,
#hero .av_textblock_section {
  font-size: 24px !important;
  line-height: 36px !important;
  font-family: var(--hg-font-heading) !important;
}

/* Dark overlay on the video for text readability */
#hero .av-section-color-overlay {
  background: rgba(0, 0, 0, 0.25) !important;
}