/**
 * Cassiopeia Custom CSS overrides (DIFOS)
 * Fully responsive layout design with mobile off-canvas right slide-in menu, horizontal desktop header,
 * circular 5-item semicircle team layout on the About Us page, and DPCalendar list view overrides.
 */

:root {
  --cassiopeia-color-primary: #0066cc;
  --cassiopeia-color-hover: #73a8e6;
  --cassiopeia-color-link: #0066cc;
}

body {
  color: #252525;
  background-color: #ffffff;
}

/* Primary link styling */
a {
  color: #0066cc;
}
a:hover {
  color: #73a8e6;
}

/* =========================================================================
   HEADER STYLING (LOGO & MOBILE HAMBURGER BUTTON)
   ========================================================================= */

/* Header background styling - clean white */
.header,
.container-header {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0 !important;
}

/* Main header container */
.container-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important; /* Space between logo and menu on mobile */
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1320px !important; /* Align left edge of logo with left edge of image */
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Reset default .grid-child properties for direct children of .container-header */
.container-header > .grid-child {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Logo wrapper styling */
.container-header > .grid-child:first-child {
  flex: 0 0 auto !important;
}

/* Resize Logo to look elegant and balanced in the header */
.navbar-brand img,
.brand-logo img,
.logo-image img {
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

/* Menu wrapper container */
.container-header > .grid-child.container-nav {
  flex: 0 0 auto !important;
}

/* Mobile Toggler Styles (always floating on top of off-canvas menu on mobile) */
.header .navbar-toggler {
  border: 1px solid #0066cc !important;
  background: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 10100 !important; /* Float above the slide-in menu panel */
}

.header .navbar-toggler .icon-menu {
  color: #0066cc !important;
  font-size: 1.5rem !important;
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Style main menu links (top-level only to avoid styling submenus) */
.container-header .container-nav ul.metismenu > li > a {
  color: #252525 !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  display: block !important;
}

.container-header .container-nav ul.metismenu > li > a:hover,
.container-header .container-nav ul.metismenu > li.active > a {
  color: #0066cc !important;
  background-color: transparent !important;
}

/* Hide mobile toggle sub-arrows since we use normal tree dropdowns */
.header .mod-menu__toggle-sub {
  display: none !important;
}

/* =========================================================================
   STYLE LOGIN MENU ITEM TO SHOW ONLY THE ICON
   ========================================================================= */

/* Hide the text content of the login link */
.header .container-nav ul.metismenu a.fa-user {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Show and format the FontAwesome user icon */
.header .container-nav ul.metismenu a.fa-user::before {
  font-size: 1.2rem !important; /* Elegant icon size */
  color: #252525 !important;
  transition: color 0.15s ease !important;
}

/* Hover color for the icon */
.header .container-nav ul.metismenu a.fa-user:hover::before,
.header .container-nav ul.metismenu li.active > a.fa-user::before {
  color: #0066cc !important;
}


/* =========================================================================
   DESKTOP VIEWPORT SPECIFIC STYLES (992px and up)
   ========================================================================= */
@media (min-width: 992px) {
  /* Logo and menu next to each other, left-aligned */
  .container-header {
    justify-content: flex-start !important;
    gap: 40px !important;
  }
  
  .container-header > .grid-child:first-child {
    flex: 0 0 auto !important;
  }
  
  .container-header > .grid-child.container-nav {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }
  
  .container-header .container-nav nav.navbar {
    display: flex !important;
    width: auto !important;
  }

  /* Horizontal menu list */
  .container-header .container-nav ul.metismenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .container-header .container-nav ul.metismenu > li {
    display: inline-block !important;
    position: relative !important;
  }

  /* Hide the navbar toggler on desktop */
  .header .navbar-toggler {
    display: none !important;
  }
}


/* =========================================================================
   MOBILE VIEWPORT SPECIFIC STYLES - RIGHT SLIDE-IN OFF-CANVAS MENU (under 992px)
   ========================================================================= */
@media (max-width: 991.98px) {
  .container-header {
    justify-content: space-between !important;
    position: relative !important;
  }

  .container-header > .grid-child:first-child {
    flex: 0 0 auto !important;
  }

  .container-header > .grid-child.container-nav {
    flex: 0 0 auto !important;
    position: static !important; /* Remove relative positioning context */
  }

  .container-header .container-nav nav.navbar {
    display: flex !important;
    justify-content: flex-end !important;
    position: static !important; /* Remove relative positioning context */
  }

  /* 
   * Mobile dropdown styled as a slide-in off-canvas menu from the right side.
   * Overrides display to block but uses transform + visibility for smooth animations.
   */
  .container-header .container-nav .collapse.navbar-collapse {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 10050 !important; /* Sits directly below the toggler z-index (10100) */
    background: #ffffff !important;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15) !important;
    padding: 70px 20px 20px 20px !important; /* Top padding leaves space for toggler button */
    box-sizing: border-box !important;
    
    /* Off-screen by default (100% translated to the right) */
    transform: translateX(100%) !important;
    visibility: hidden !important;
    
    /* Buttery-smooth transition */
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
  }

  /* Active/Opened state: Slide onto the screen */
  .container-header .container-nav .collapse.navbar-collapse.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Vertical menu list on mobile */
  .container-header .container-nav ul.metismenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .container-header .container-nav ul.metismenu > li {
    width: 100% !important;
  }

  .container-header .container-nav ul.metismenu > li > a {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    color: #252525 !important;
  }

  .container-header .container-nav ul.metismenu > li:last-child > a {
    border-bottom: none !important;
  }
}


/* =========================================================================
   ÜBER UNS (ABOUT US) TEAM SEMICIRCLE LAYOUT (5 ITEMS)
   ========================================================================= */

/* Target German (Itemid-124) and English (Itemid-179) about pages to hide bio text */
.itemid-124 .com-content-category-blog__item p,
.itemid-179 .com-content-category-blog__item p,
.itemid-124 .com-content-category-blog__item h4,
.itemid-179 .com-content-category-blog__item h4 {
  display: none !important; /* Hide biography text paragraphs and h4 subtitles */
}

/* Hide the article name title ONLY for the central DIFOS Logo item (3rd child) */
.itemid-124 .com-content-category-blog__items > .blog-item:nth-child(3) .page-header h2,
.itemid-179 .com-content-category-blog__items > .blog-item:nth-child(3) .page-header h2 {
  display: none !important; 
}

/* Center-align layout contents for team cards */
.itemid-124 .blog-item,
.itemid-179 .blog-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Format the team member image to be centered and round */
.itemid-124 .blog-item .item-image,
.itemid-179 .blog-item .item-image {
  float: none !important;
  margin: 0 0 15px 0 !important;
}

.itemid-124 .blog-item .item-image img,
.itemid-179 .blog-item .item-image img {
  border-radius: 50% !important; /* Forces perfect circle shape */
  object-fit: cover !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* Style the team member link names */
.itemid-124 .blog-item .page-header,
.itemid-179 .blog-item .page-header {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.itemid-124 .blog-item .page-header h2,
.itemid-179 .blog-item .page-header h2 {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.itemid-124 .blog-item .page-header h2 a,
.itemid-179 .blog-item .page-header h2 a {
  color: #0066cc !important;
  text-decoration: none !important;
}

.itemid-124 .blog-item .page-header h2 a:hover,
.itemid-179 .blog-item .page-header h2 a:hover {
  text-decoration: underline !important;
}

/* Semicircle / Arch alignment layout on larger viewports */
@media (min-width: 1200px) {
  .itemid-124 .com-content-category-blog__items,
  .itemid-179 .com-content-category-blog__items {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 40px !important;
    padding-top: 30px !important;
    padding-bottom: 95px !important; /* Leaves room for translateY translation */
  }

  .itemid-124 .blog-item .item-image img,
  .itemid-179 .blog-item .item-image img {
    width: 220px !important;
    height: 220px !important;
  }

  /* Parabolic semicircle translations (middle is peak 0, inner is 18px down, outer is 65px down) */
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(1),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(1) {
    transform: translateY(65px) !important;
  }
  
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(2),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(2) {
    transform: translateY(18px) !important;
  }
  
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(3),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(3) {
    transform: translateY(0) !important;
  }

  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(4),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(4) {
    transform: translateY(18px) !important;
  }

  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(5),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(5) {
    transform: translateY(65px) !important;
  }
}

/* Tablet & small desktop viewports (768px up to 1200px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .itemid-124 .com-content-category-blog__items,
  .itemid-179 .com-content-category-blog__items {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding-top: 25px !important;
    padding-bottom: 75px !important;
  }

  .itemid-124 .blog-item .item-image img,
  .itemid-179 .blog-item .item-image img {
    width: 150px !important;
    height: 150px !important;
  }

  /* Parabolic translations scaled down for smaller images */
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(1),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(1) {
    transform: translateY(45px) !important;
  }
  
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(2),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(2) {
    transform: translateY(12px) !important;
  }
  
  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(3),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(3) {
    transform: translateY(0) !important;
  }

  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(4),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(4) {
    transform: translateY(12px) !important;
  }

  .itemid-124 .com-content-category-blog__items > .blog-item:nth-child(5),
  .itemid-179 .com-content-category-blog__items > .blog-item:nth-child(5) {
    transform: translateY(45px) !important;
  }
}

/* Mobile viewports (stacked layout for phone screens) */
@media (max-width: 767.98px) {
  .itemid-124 .com-content-category-blog__items,
  .itemid-179 .com-content-category-blog__items {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 35px !important;
    padding: 20px 0 !important;
  }

  .itemid-124 .blog-item .item-image img,
  .itemid-179 .blog-item .item-image img {
    width: 200px !important;
    height: 200px !important;
  }
}


/* =========================================================================
   DPCALENDAR TIMELINE OVERRIDES (DENA SCHULUNGEN)
   ========================================================================= */

/* Hide timeline map container globally */
.com-dpcalendar-timeline__map,
.dp-map {
  display: none !important;
}

/* Hide navigation buttons (< and > arrow pagination buttons) */
.dp-button-bar__navigation {
  display: none !important;
}

/* Hide action buttons (Print & Filter) */
.dp-button-bar__actions {
  display: none !important;
}

/* Center and clean up the remaining event date range bar */
.dp-button-bar {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 15px !important;
  margin-bottom: 25px !important;
}


/* =========================================================================
   FORCE FOOTER NAVIGATION HORIZONTAL & WHITE TEXT
   ========================================================================= */

/* Center the footer container block */
.container-footer {
  text-align: center !important;
  padding: 15px 0 !important;
}

/* Align grid child as space-between flex container to place menu on left and switcher on right */
.container-footer .grid-child {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
}

/* Force list element to horizontal row, left-aligned */
.container-footer ul.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Style list items */
.container-footer ul.mod-menu li {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* Style links to be white and slightly smaller */
.container-footer ul.mod-menu a {
  color: #ffffff !important;
  font-size: 0.8rem !important; /* Smaller text size */
  font-weight: 400 !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  transition: opacity 0.15s ease !important;
}

.container-footer ul.mod-menu a:hover,
.container-footer ul.mod-menu a:focus {
  color: #ffffff !important;
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* Format Language Switcher in Footer */
.container-footer .mod-languages {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-footer .mod-languages ul.mod-languages__list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.container-footer .mod-languages ul.mod-languages__list li {
  display: inline-block !important;
  line-height: 1 !important;
}

.container-footer .mod-languages ul.mod-languages__list img {
  width: 18px !important; /* Small clean flag sizes */
  height: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
}

/* Footer layout on smaller screens */
@media (max-width: 991.98px) {
  .container-footer .grid-child {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 15px !important;
  }
  
  .container-footer ul.mod-menu {
    justify-content: center !important;
  }
}