/*
 * Front-end design polish for the Freunde von Giromagny site.
 * Loaded via functions.php enqueue (fgm_enqueue_frontend_styles).
 */

/* === A+F: Page title as H1, visually distinct from post titles === */
.fgm-page-head {
  margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

.fgm-page-head .fgm-page-title,
.fgm-page-title {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
}

/* === Headings: balanced lines + proper German hyphenation (no mid-word breaks) === */
h1, h2, h3, h4, h5, h6 {
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: balance;
}

/* === B: Post titles stay simple; NO card separation (intended original look) === */

.fgm-associated-posts .fgm-post-title {
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  font-weight: 600;
  line-height: 1.3;
}

.fgm-associated-posts .fgm-post-title a {
  text-decoration: none;
}

.fgm-associated-posts .fgm-post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fgm-associated-posts .fgm-post-date {
  font-size: 0.85rem;
  color: #686868;
  margin-top: 0.4rem;
}

/* Space between page content and the posts section */
.fgm-associated-posts {
  margin-top: var(--wp--preset--spacing--50, 2.5rem);
}

/* Gap between consecutive entries only (no wasted space at top/bottom) */
.wp-block-post-template > li + li {
  margin-top: var(--wp--preset--spacing--60, 3rem);
}

/* === C: Active nav menu item — thicker underline ===
   The navigation renders client-side; core adds aria-current="page" to the
   current item's link and li.current-menu-item when available. Cover both. */
.wp-block-navigation [aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  font-weight: 600;
}

/* === Sticky sidebar: logo + nav stay visible while scrolling ===
   The nav column is taller than the viewport, so plain position:sticky
   lets the top (logo, Home, Der Verein) scroll out of view. Fix: cap the
   column at viewport height, pin it to the top, and let the menu scroll
   internally — the logo always stays visible. */
.wp-block-column.navigation {
  position: sticky;
  top: var(--wp--preset--spacing--30, 20px);
  align-self: flex-start;
  max-height: calc(100vh - var(--wp--preset--spacing--30, 20px) - var(--wp--preset--spacing--30, 20px));
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Keep the logo pinned above the scrollable menu area */
.wp-block-column.navigation .fgm-side-logo {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  padding-bottom: 0.5rem;
}

/* Widen the content column: TT5 constrains blocks to 660px; the content
   column is 75% of the viewport, so let the posts use more of it. */
.wp-block-columns > .wp-block-column:not(.navigation) {
  --wp--style--global--content-size: 1200px;
}


.fgm-associated-posts .fgm-pagination-top { display: none; }
body.fgm-query-paged .fgm-associated-posts .fgm-pagination-top { display: flex; }

/* === Mobile: fixed burger menu bar on top, no logo ===
   On phones the sidebar stacks above the content. The big logo wastes
   half the viewport and pushes the burger below the fold, and the menu
   button gets overlapped by sliders (z-index stacking). Fix: hide the
   logo, pin the burger bar to the top of the viewport with a high
   z-index so it is always reachable and visible. */
@media (max-width: 800px) {
  /* Menu bar must touch the screen top. */
  .wp-site-blocks > .wp-block-columns {
    padding-top: 0 !important;
  }

  /* Compact pill: menu bar hugs its content, rounded right corners */

  .wp-block-column.navigation .fgm-side-logo {
    display: none;
  }

  /* WP core hides the burger at min-width:782px; re-show it for our 782-800 gap */
  .wp-block-column.navigation .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .wp-block-column.navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
  .wp-block-column.navigation .wp-block-navigation__responsive-container-close {
    display: none !important;
  }


  .wp-block-columns > .wp-block-column.navigation {
    position: sticky;
    top: 0;
    max-height: none;
    overflow-y: visible;
    z-index: 10000;
    flex-basis: fit-content !important;
    flex-grow: 0 !important;
    width: fit-content;
    background: #fff;
    padding: 20px 12px 0.5rem 12px !important;
    /* Flush to the screen's left edge: counter the columns container padding */
    margin-left: calc(-1 * var(--wp--preset--spacing--40, 30px)) !important;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* The nav renders the burger button — lift it above everything */
  .wp-block-column.navigation .wp-block-navigation {
    z-index: 10000;
    width: fit-content;
  }

  /* Overlay menu flyout must also sit above all sliders */
  .wp-block-navigation__responsive-container.is-menu-open {
    z-index: 100000;
  }
}


/* Submenus: hidden by default; open on hover, focus, or when the parent item is selected */
@media (min-width: 801px) {
  .wp-block-navigation .has-child {
    display: block;
  }
  .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
    position: static;
    height: 0;
    width: auto;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1.2em;
    margin: 0;
    transition: opacity 0.15s ease;
  }
  .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child.current-menu-item > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child.current-menu-ancestor > .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child:has(li.current-menu-item) > .wp-block-navigation__submenu-container {
    height: auto;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }
}

/* Keep submenu arrow inline next to the parent label */
.wp-block-navigation .has-child > .wp-block-navigation-item__content {
  display: inline-block;
}