/**
 * @file
 * Menu and header styles for the republica FL theme.
 *
 * Handles the top header bar layout, hamburger toggle,
 * navigation drawer, and menu item styling.
 * No hardcoded colors — uses CSS variables from base.css.
 */

/* ========================================================================
   Header bar layout
   The header region renders blocks (site branding, main menu, language
   switcher) as direct flex children thanks to region--header.html.twig
   using display:contents / no wrapper.
   ======================================================================== */

.site-header {
  position: relative;
}

.site-header a {
  text-decoration:none;
}

.site-header .header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  position: relative;
  z-index: 1;
  background-color: #fff;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 var(--block-padding);
}

/* Top row: logo, toggle, language — fixed height */
.site-header .header-bar > * {
  height: 4.5rem;
  display: flex;
  align-items: center;
}

/* Site branding (logo) — first in flow */
.site-header [id*="site-branding"] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-header [id*="site-branding"] img {
  height: 2.2rem;
  width: auto;
}

/* Menu toggle button — next to logo */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: 0.75rem;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hamburger icon (2 bars → X) */
.menu-toggle__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 14px;
  position: relative;
}

.menu-toggle__icon span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* X state */
.menu-open .menu-toggle__icon span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-open .menu-toggle__icon span:nth-child(2) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Header buttons (tickets etc.) — pushed to the right */
.site-header [id*="headerbuttons"] {
  margin-left: auto;
}

.site-header [id*="headerbuttons"] .field__item {
  display: flex;
}

/* Language switcher */
.site-header .language-switcher-language-url {
  flex-shrink: 0;
}

.site-header .language-switcher-language-url .links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}

.site-header .language-switcher-language-url .language-link {
  text-decoration: none;
  font-size: var(--font-size-lang-switch);
  line-height: var(--line-height-lang-switch);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: 0.25rem;
}

.site-header .language-switcher-language-url .language-link.is-active {
  color: var(--color-text);
  font-weight: 700;
}

.site-header .language-switcher-language-url .language-link:hover {
  color: var(--color-text);
}

@media (max-width: 767px) {
  .site-header [id*="headerbuttons"] {
    display: none;
  }

  .site-header .language-switcher-language-url {
    margin-left: auto;
  }
}

/* ========================================================================
   Menu drawer (overlay container for nav + utility bar)
   ======================================================================== */

.menu-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
}

.menu-open .menu-drawer {
  display: block;
  animation: menuSlideDown 0.4s ease both;
}

.menu-drawer.menu-closing {
  animation: menuSlideUp 0.35s ease both;
}

/* ========================================================================
   Navigation drawer (main menu dropdown)
   The <nav> block for the main menu is positioned as a full-width panel
   below the header bar. Hidden by default, shown when .menu-open is set.
   ======================================================================== */

.site-header nav[id*="main-menu"] {
  background-color: var(--color-bg);
  padding: 1.5rem 2rem;
  border-top: 1px solid #000000;
  width: 100%;
  max-width: calc(var(--layout-width) - 2rem);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
   Menu drawer inner: event logos + main nav side by side
   ======================================================================== */

.menu-drawer__inner {
  display: flex;
  background-color: var(--color-bg);
  border-top: 1px solid #000000;
  max-width: calc(var(--layout-width) - 2rem);
  margin: 0 auto;
}

/* When inner wrapper is used, remove border/bg from nav itself */
.menu-drawer__inner .site-header nav[id*="main-menu"],
.menu-drawer__inner nav[id*="main-menu"] {
  border-top: none;
  max-width: none;
  margin: 0;
  flex: 1;
}

/* Event logos sidebar */
.menu-drawer__events {
  flex-shrink: 0;
  width: 190px;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu-drawer__events-heading {
  font-size: var(--font-size-menu-heading);
  line-height: var(--line-height-menu-heading);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-light);
  margin-bottom: 0;
  padding-top: 0.5rem;
}

.menu-drawer__events .view--event-menue .views-row {
  margin-bottom: 1rem;
}

.menu-drawer__events .view--event-menue .views-row:last-child {
  margin-bottom: 0;
}

.menu-drawer__events .view--event-menue img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.menu-drawer__events .view--event-menue a:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Nav column takes remaining space */
.menu-drawer__nav {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .menu-drawer__inner {
    flex-direction: column;
  }

  .menu-drawer__events {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    border-top: 1px solid var(--color-grey-light);
  }

  .menu-drawer__events-heading {
    padding-top: 0;
    width: 100%;
  }

  .menu-drawer__nav {
    order: 1;
  }

  .menu-drawer__events .view--event-menue .views-row {
    margin-bottom: 0;
  }

  .menu-drawer__events .view--event-menue {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }

  .menu-drawer__events .view--event-menue img {
    max-height: 60px;
    width: auto;
  }
}

/* Hidden state (Drupal hidden attribute) */
.site-header nav[id*="main-menu"][hidden] {
  display: none;
}

/* ========================================================================
   Menu items
   ======================================================================== */

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin: 0;
  padding: 0;
}

.menu-item a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.menu-item a:hover,
.menu-item a:focus {
  color: var(--color-link);
}

/* Active trail */
.menu-item--active-trail > a,
.menu-item a.is-active {
  font-weight: 700;
}

/* ========================================================================
   Mega menu: multi-column layout inside the drawer
   Top-level items act as column headings (bold, uppercase).
   Nested <ul> items are the sub-links below each heading.
   ======================================================================== */

/* Top-level menu = horizontal row of equal columns on desktop */
.site-header nav[id*="main-menu"] > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
}

/* Each top-level <li> = one column, equal width */
.site-header nav[id*="main-menu"] > ul > li {
  flex: 1 1 0;
  min-width: fit-content;
  display: flex;
  flex-direction: column;
}

/* Top-level link = column heading */
.site-header nav[id*="main-menu"] > ul > li > a,
.site-header nav[id*="main-menu"] > ul > li > span {
  font-size: var(--font-size-menu-heading);
  line-height: var(--line-height-menu-heading);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-light);
  margin-bottom: 0.45rem;
}

/* Nested sub-menu list */
.site-header nav[id*="main-menu"] > ul > li > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-header nav[id*="main-menu"] > ul > li > ul > li {
    margin-bottom: .3rem;
}

/* Sub-menu links */
.site-header nav[id*="main-menu"] > ul > li > ul > li > a {
  font-size: var(--font-size-menu-item);
  line-height: var(--line-height-menu-item);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-grey-dark);
  padding: 0.375rem 0;
  border-bottom: none;
}

.site-header nav[id*="main-menu"] > ul > li > ul > li > a:hover, 
#block-rp-fl-footer a:hover {
  color: var(--color-text);
  font-family: var(--font-heading); 
  letter-spacing: -.05rem;
}

/* ========================================================================
   Desktop: ensure sub-menus are always visible and no accordion artifacts
   ======================================================================== */

@media (min-width: 768px) {
  .site-header nav[id*="main-menu"] > ul > li > ul {
    display: flex !important;
  }

  .site-header nav[id*="main-menu"] > ul > li > a::after {
    display: none;
  }
}

/* ========================================================================
   Responsive: Mobile accordion menu
   On small screens the mega-menu grid becomes a vertical accordion.
   Top-level items are toggle buttons with chevrons; sub-menus collapse.
   ======================================================================== */

@media (max-width: 767px) {

  /* Stack vertically */
  .site-header nav[id*="main-menu"] > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /* Top-level item = accordion section */
  .site-header nav[id*="main-menu"] > ul > li {
    border-bottom: none;
  }

  /* Top-level link/span = accordion header with chevron */
  .site-header nav[id*="main-menu"] > ul > li > a,
  .site-header nav[id*="main-menu"] > ul > li > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 0;
    border-bottom: none;
    font-family: var(--font-heading);
    font-size: var(--font-size-menu-heading);
    line-height: var(--line-height-menu-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-grey-light);
    cursor: pointer;
  }

  /* Chevron via ::after pseudo-element */
  .site-header nav[id*="main-menu"] > ul > li > a::after,
  .site-header nav[id*="main-menu"] > ul > li > span::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-grey-light);
    border-bottom: 2px solid var(--color-grey-light);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 1rem;
  }

  /* Chevron rotated when open */
  .site-header nav[id*="main-menu"] > ul > li.accordion-open > a::after,
  .site-header nav[id*="main-menu"] > ul > li.accordion-open > span::after {
    transform: rotate(-135deg);
  }

  /* Bold heading when open */
  .site-header nav[id*="main-menu"] > ul > li.accordion-open > a,
  .site-header nav[id*="main-menu"] > ul > li.accordion-open > span {
    font-weight: 700;
  }

  /* Sub-menu hidden by default */
  .site-header nav[id*="main-menu"] > ul > li > ul {
    display: none;
    padding: 0 0 1rem 0;
  }

  /* Sub-menu visible when parent is open */
  .site-header nav[id*="main-menu"] > ul > li.accordion-open > ul {
    display: flex;
  }

  /* Sub-menu links */
  .site-header nav[id*="main-menu"] > ul > li > ul > li > a {
    font-size: var(--font-size-menu-item);
    line-height: var(--line-height-menu-item);
    padding: 0.5rem 0;
  }

  /* No chevron on items without sub-menu */
  .site-header nav[id*="main-menu"] > ul > li.no-children > a::after,
  .site-header nav[id*="main-menu"] > ul > li.no-children > span::after {
    display: none;
  }
}

/* ========================================================================
   Header bottom: dark utility bar (account menu + social media)
   Appears at the bottom of the expanded menu drawer.
   ======================================================================== */

header .header-bottom {
  color: var(--color-white);
}

header .header-bottom .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--color-grey-dark);
  max-width: calc(var(--layout-width) - 2rem);
  margin: 0 auto;
}


header .header-bottom .container div {
    display: flex;
    gap: 1rem;
}

/* Account menu (Login/Logout) */
header .header-bottom nav[id*="account-menu"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

header .header-bottom nav[id*="account-menu"] a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

header .header-bottom nav[id*="account-menu"] a:hover {
  color: var(--color-grey-light);
}

/* Social media menu */
header .header-bottom nav[id*="socialmedia"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}

header .header-bottom nav[id*="socialmedia"] a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: opacity 0.2s ease;
}

header .header-bottom nav[id*="socialmedia"] a::before {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  text-rendering: auto;
  line-height: 1;
}

header .header-bottom nav[id*="socialmedia"] a:hover {
  opacity: 0.7;
}

nav#block-rp-fl-socialmedia {
    margin-right: 2rem;
}

/* Social media icon assignments via href matching */
header .header-bottom nav[id*="socialmedia"] a[href*="twitter.com"]::before,
header .header-bottom nav[id*="socialmedia"] a[href*="x.com"]::before {
  content: '\e61b';
}

header .header-bottom nav[id*="socialmedia"] a[href*="youtube.com"]::before {
  content: '\f167';
}

header .header-bottom nav[id*="socialmedia"] a[href*="instagram.com"]::before {
  content: '\f16d';
}

header .header-bottom nav[id*="socialmedia"] a[href*="threads.net"]::before {
  content: '\e618';
}

header .header-bottom nav[id*="socialmedia"] a[href*="facebook.com"]::before {
  content: '\f39e';
}

header .header-bottom nav[id*="socialmedia"] a[href*="mastodon"]::before,
header .header-bottom nav[id*="socialmedia"] a[href*="berlin.social"]::before {
  content: '\f4f6';
}

header .header-bottom nav[id*="socialmedia"] a[href*="flickr.com"]::before {
  content: '\f16e';
}

header .header-bottom nav[id*="socialmedia"] a[href*="linkedin.com"]::before {
  content: '\f0e1';
}

header .header-bottom nav[id*="socialmedia"] a[href*="bsky.app"]::before,
header .header-bottom nav[id*="socialmedia"] a[href*="bluesky"]::before {
  content: '\e671';
}

/* Hide block titles (already visually-hidden via Drupal, but ensure) */
header .header-bottom h2 {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

@media (max-width: 767px) {
  header .header-bottom .container div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  header .header-bottom .container {
    max-width: 100%;
    padding-left: 2rem;
    justify-content: flex-start;
  }
  header .header-bottom nav[id*="socialmedia"] {
    margin-right: 0;
  }
}

/* ========================================================================
   Hide contextual links text in header (Drupal admin)
   ======================================================================== */

.site-header .contextual {
  z-index: 200;
}

/* ========================================================================
   Keyframes
   ======================================================================== */

@keyframes menuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuSlideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ========================================================================
   speaker menu
   ======================================================================== */

nav#block-rp-fl-speaker {
    max-width: var(--layout-width);
    margin: 0 auto;
}

.path-startseite-republica nav#block-rp-fl-speaker {
    /* display: none; */
    padding: 0 1rem;
}