/**
 * Gral Wien - custom styles on top of DXPR Theme.
 *
 * Everything that DXPR Theme cannot express through its theme settings lives
 * here. Colours come from the DXPR palette custom properties (--dxt-color-*)
 * so a palette change in the theme settings propagates here too.
 */

/* ---------------------------------------------------------------------------
 * Secondary header (utility bar: social icons + account menu)
 * ------------------------------------------------------------------------ */

/*
 * The secondary header and the footer use the regular DXPR .container (see the
 * full_width_containers theme setting), so their content lines up with the
 * navbar and the main content column. Nothing here may set its own width.
 */
.dxpr-theme-secondary-header .region-secondary-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.dxpr-theme-secondary-header .region-secondary-header > .block {
  float: none;
  margin-bottom: 0;
}

.dxpr-theme-secondary-header .region-secondary-header .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dxpr-theme-secondary-header .block-hr,
.dxpr-theme-footer .block-hr {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Main menu: pull the split-dropdown caret tight to its own label
 *
 * enhanced-dropdowns renders top-level dropdown items as "link + caret button".
 * By default the link keeps its full right padding (menu_link_spacing), the
 * caret adds 12px of its own plus a separator border, so the caret floats
 * midway between its label and the next item and reads as belonging to the
 * wrong one. We tighten it through the component's own custom properties and
 * move the item spacing out to the wrapper, so the rhythm between menu items
 * is unchanged.
 *
 * Desktop only (.body--dxpr-theme-nav-desktop is DXPR's own switch) - the
 * collapsed mobile menu keeps the full 44px touch target.
 * ------------------------------------------------------------------------ */

.body--dxpr-theme-nav-desktop
  .dxpr-theme-header
  .navbar-nav
  > .nav-item
  > .bs-dropdown-wrapper {
  --bs-dropdown-caret-width: 1.5rem;
  --bs-dropdown-caret-padding-x: 0.125rem;

  padding-right: var(--dxt-setting-menu-link-spacing, 1.25rem);
}

.body--dxpr-theme-nav-desktop
  .dxpr-theme-header
  .navbar-nav
  > .nav-item
  > .bs-dropdown-wrapper
  > .nav-link {
  padding-right: 0;
}

/* The separator border only reinforced the wrong grouping. */
.body--dxpr-theme-nav-desktop
  .dxpr-theme-header
  .navbar-nav
  > .nav-item
  > .bs-dropdown-wrapper
  > .bs-dropdown-caret {
  border-inline-start: 0;
}

/*
 * enhanced-dropdowns fills the hovered half of a split item with Bootstrap's
 * --bs-primary-bg-subtle, which resolves to a pink block against our burgundy
 * primary and fights DXPR's own menu hover styling. Drop the fill on hover.
 *
 * :focus / :focus-visible are deliberately left alone so keyboard users keep a
 * visible focus state; the hover script makes sure a pointer never lands focus
 * on the caret in the first place.
 */
.body--dxpr-theme-nav-desktop
  .dxpr-theme-header
  .navbar-nav
  .bs-dropdown-wrapper
  > .nav-link:hover,
.body--dxpr-theme-nav-desktop
  .dxpr-theme-header
  .navbar-nav
  .bs-dropdown-wrapper
  > .bs-dropdown-caret:hover {
  background-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Social icons (secondary header + footer)
 * ------------------------------------------------------------------------ */

.gral-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gral-social li {
  list-style: none;
  margin: 0;
}

.gral-social a {
  align-items: center;
  border: 0.0625rem solid currentcolor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.875rem;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  opacity: 0.75;
  /* The footer link styles add a left padding that would push the glyph off
     centre inside the circle. */
  padding: 0;
  text-decoration: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  width: 2rem;
}

.gral-social a:hover,
.gral-social a:focus {
  background-color: rgb(255 255 255 / 15%);
  opacity: 1;
}

.gral-social svg,
.gral-social i {
  display: block;
  height: 1em;
  width: 1em;
}

/*
 * dxpr_theme's footer-menu.css styles every footer link with a left padding
 * (.region-footer ul li a). Out-specify it so the glyph stays centred in its
 * circle.
 */
.region-secondary-header .gral-social li a,
.region-footer .gral-social li a {
  padding: 0;
}

#block-gral-wien-social-header .gral-social a {
  color: var(--dxt-color-secheadertext, #fff);
}

/* ---------------------------------------------------------------------------
 * Footer: the old TaraPro footer columns rebuilt inside DXPR's single region
 * ------------------------------------------------------------------------ */

/*
 * DXPR Theme has one footer region where TaraPro had footer_top /
 * footer_first..fourth / footer_bottom. Lay the region out as a wrapping flex
 * row so the link blocks form columns, and use the container's ::before as a
 * full-width flex item to break the copyright + social icons onto their own
 * bottom bar. No markup override needed.
 */
.dxpr-theme-footer .region-footer {
  align-items: flex-start;
  display: flex;
  /* dxpr_theme's footer-menu.css sets flex-direction: column; we want columns
     side by side. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  padding: 2.5rem 0 1.5rem;
}

.dxpr-theme-footer .region-footer > .block {
  flex: 1 1 15rem;
  margin-bottom: 0;
  min-width: 0;
}

/* Full-width flex item that forces a line break before the bottom bar. */
.dxpr-theme-footer .region-footer::before {
  border-top: 0.0625rem solid rgb(255 255 255 / 15%);
  content: "";
  flex: 0 0 100%;
  height: 0;
  order: 10;
}

.dxpr-theme-footer .region-footer > #block-gral-wien-copyrightgralwien {
  align-self: center;
  flex: 1 1 auto;
  order: 11;
}

.dxpr-theme-footer .region-footer > #block-gral-wien-social-footer {
  align-self: center;
  flex: 0 0 auto;
  order: 12;
}

.dxpr-theme-footer .block-title {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.dxpr-theme-footer p {
  margin: 0 0 0.5rem;
}

.dxpr-theme-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dxpr-theme-footer li {
  margin: 0 0 0.4rem;
}

.dxpr-theme-footer a {
  text-decoration: none;
}

.dxpr-theme-footer a:hover,
.dxpr-theme-footer a:focus {
  text-decoration: underline;
}

.dxpr-theme-footer #block-gral-wien-copyrightgralwien p {
  font-size: 0.875rem;
  margin: 0;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Views Bootstrap grid
 *
 * Applies to every view using the views_bootstrap grid style. Values hang off
 * the DXPR theme settings (--dxt-setting-*) so a change in the theme UI carries
 * through instead of drifting from the rest of the site.
 * ------------------------------------------------------------------------ */

.views-view-grid {
  /* Bootstrap defaults to 1.5rem horizontal and *zero* vertical, so wrapped
     rows would touch. Both now follow the theme's gutter settings. */
  --bs-gutter-x: var(--dxt-setting-gutter-horizontal, 1.875rem);
  --bs-gutter-y: var(--dxt-setting-gutter-vertical, 1.875rem);
}

/*
 * Teaser images arrive in whatever aspect ratio was uploaded (600x400, 2000x
 * 3000, ...), so the cards ended up wildly different heights. Lock the ratio
 * and crop: the image still fills the full column width, and every card in a
 * row lines up.
 */
.views-view-grid .views-field-field-image img,
.views-view-grid .views-field-field-media-image img {
  aspect-ratio: 3 / 2;
  border-radius: var(--dxt-setting-block-border-radius, 0.5rem);
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.views-view-grid .views-field-field-image a,
.views-view-grid .views-field-field-media-image a {
  display: block;
  overflow: hidden;
}

.views-view-grid .views-field-field-image img,
.views-view-grid .views-field-field-media-image img {
  transition: transform 0.35s ease;
}

.views-view-grid .views-field-field-image a:hover img,
.views-view-grid .views-field-field-image a:focus-visible img,
.views-view-grid .views-field-field-media-image a:hover img,
.views-view-grid .views-field-field-media-image a:focus-visible img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .views-view-grid .views-field-field-image img,
  .views-view-grid .views-field-field-media-image img {
    transition: none;
  }

  .views-view-grid .views-field-field-image a:hover img,
  .views-view-grid .views-field-field-media-image a:hover img {
    transform: none;
  }
}

/*
 * The teaser heading rendered at h3 (28px), which is page-heading size inside a
 * three-column card. Step it down to the theme's h4 so it stays inside the
 * existing type scale.
 */
.views-view-grid h2,
.views-view-grid h3,
.views-view-grid h4 {
  font-size: var(--dxt-setting-h4-font-size, 1.3125rem);
  line-height: 1.3;
  margin: 0 0 0.625rem;
}

.views-view-grid .views-field {
  margin-bottom: 0.625rem;
}

.views-view-grid .views-field:last-child,
.views-view-grid .views-field p:last-child {
  margin-bottom: 0;
}

/* Air between the image and the title that follows it. */
.views-view-grid .views-field-field-image,
.views-view-grid .views-field-field-media-image {
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
 * Content
 * ------------------------------------------------------------------------ */

/* TaraPro forced a distinct link colour inside body text; keep that contrast. */
.node .field--name-body a,
.ck-content a {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

/* Carried over from the TaraPro custom CSS setting. */
.gedenkort-hinweis {
  background-color: #fdfcf9;
  border: 0.125rem solid #bfa76a;
  border-radius: 0.5rem;
  margin: 2rem 0;
  padding: 1rem 1.4rem;
  text-align: center;
}

/* Sidebar and content-bottom blocks read as cards; give them room to breathe. */
.region-sidebar-first .block,
.region-sidebar-second .block,
.region-content-bottom .block {
  margin-bottom: 1.875rem;
}

/* Media inside body text should never overflow its column. */
.field--name-body img,
.field--name-body iframe,
.field--name-body table {
  max-width: 100%;
}

.field--name-body table {
  display: block;
  overflow-x: auto;
}