/**
 * @file
 * Optional site styling and customization examples for ABC.
 */
/*
 * Theme customization > Custom CSS file selects this stylesheet.
 * Copy it outside the theme before making personal changes; adjust image paths.
 * Uncommented rules are active; all customization examples are commented out.
 * Clear a custom color field to use its default.
 */

/* APPEARANCE AND BRANDING */

/* Branding below the page. Comment out to hide it. */
/*
#brand {
  height: 50px;
  margin: 0 auto 1rem;
  background: url(logo/grey/abc.png) 50% 0 no-repeat;
  background-size: 48px 32px;
}
*/

/* ABC's background, title and menu overrides (choose No preset in settings). */
/*
.bi0.bgs #bg1 { background: linear-gradient(#d3eaf5, #fff) 0 0 / 100% 435px no-repeat; }
.bi0.bgf #bg1 { background: linear-gradient(#d3eaf5, #fff) 0 0 / 100% 435px no-repeat fixed; }
body.bi0 { background: #d3eaf5; }
.bi0 #pgwpp { background: #fff linear-gradient(#fff, #d3eaf5) 0 100% / 100% 190px no-repeat; }
.sn0 #name-and-slogan a { color: #900; }
.nt0 .page-title, .nt0 .node > header h2 a { color: #090; }
.bt0 { --abc-block-title: #069; }
.tr0 { --abc-top-menu-background: #069; --abc-top-menu-text: #fff; }
.fb0 .primary-nav__menu--level-1 > li:first-child > .primary-nav__menu-link--level-1 { background: #900; }
.lb0 .primary-nav__menu--level-1 > li:last-child > .primary-nav__menu-link--level-1 { background: #069; }
.mb0 .pure-menu-link { background: #090; color: #fff; }
.mr0 .pure-menu-link:hover, .mr0 .pure-menu-link:focus { background: #f60; color: #000; }
*/

/* Optional: use your own top background image instead of ABC's bundled art.
   Enable the Background image option in theme settings. The example image
   is not bundled; adjust its path if the custom stylesheet is moved. */
/*
.bimg #bg2 {
  background-image: url(my-top-background.jpg);
  background-position: center top;
  background-size: cover;
}
*/

/* Optional: change colors and surfaces outside the standard ABC controls.
   Prefer the theme's Appearance settings where they provide a color picker. */
/*
.region-highlighted { border-color: #c69; }
.themed-block { background-color: #f9f4f8; }
#section2 { background-color: #fafafa; }
h1, h2, h3 { color: #3b3040; }
.node__content a { color: #8a2450; }
.node__content a:is(:hover, :focus-visible) { color: #5e1437; }
*/

/* Optional typography, logo position and rounded user pictures. */
/*
html { line-height: 1.25; }
.node__content .field--name-body p:first-of-type::first-letter { font-size: 2em; }
.logoimg { padding: 0.5rem 1rem; }
.field--name-user-picture img { border-radius: 100%; }
*/

/* HEADER, NAVIGATION AND SEARCH */

/* Optional submenu presentation, toggle color and per-item backgrounds. */
/*
.menu-toggle { background: #ffd; }
.menu-toggle .bars { background: #900; }
.pure-menu-children { box-shadow: none; }
#menu .submenu-toggle > span { font-size: 1.25rem; }
#menu .primary-nav__menu--level-1 > li:first-child > .pure-menu-link { background: #631f3a; }
#menu .primary-nav__menu--level-1 > li:last-child > .pure-menu-link { background: #777; }
#menu .primary-nav__menu--level-1 > li:not(:first-child):not(:last-child) > .pure-menu-link { background: #777; }
.pure-menu-children .pure-menu-link { color: #777; background: #eee; }
*/

/* Optional: show Search before other Top-region blocks without changing
   the compact controls' layout or moving their Drupal block placement. */
/*
.region-topreg > .block-wrapper:has(.block-search) { order: -1; }
*/

/* SOCIAL AND PAGE ICONS */

/* Optional social/page icon colors; leave theme color fields blank. */
/*
body {
  --abc-social-color: #690;
  --abc-social-hover: #c09;
  --abc-page-icon-color: #690;
  --abc-page-icon-hover: #c09;
}
*/

/* Optional image for the Other social network (supply your own file). */
/*
.social-media-menu .sociallinks.myother {
  background: transparent url(myother-social-network_32.png) no-repeat center;
}
.social-media-menu .sociallinks.myother > .social-media-menu__icon {
  display: none;
}
*/

/* SLIDESHOW */

/* Optional: center slideshow caption text (uses ABC's slider markup). */
/*
#slider .txww { text-align: center; }
*/

/* Optional: slideshow minimum height and sidebar borders. */
/*
#slider img {
  min-height: 12em;
}
#sidebar-left .block,
#sidebar-right .block {
  border: 1px solid #ddd;
}
*/

/* Optional slideshow zoom. Respect reduced motion when enabling it. */
/*
#slider .slide-image {
  animation: abc-custom-zoom 30s infinite;
}
@keyframes abc-custom-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
*/

/* CONTENT, MEDIA AND LAYOUTS */

/* Optional: hide teaser titles or Read more links on the front page. */
/*
.front #main .node--view-mode-teaser > header h2 { display: none; }
.front #main .node--type-article > header h2 { display: none; }
.front .node-readmore { display: none; }
*/

/* Optional per-View Zebra and Cards colors. Replace VIEW-ID. */
/*
.view-VIEW-ID .abc-listing--zebra {
  --abc-zebra-odd: rgba(242, 245, 247, 0.85);
  --abc-zebra-even: rgba(232, 238, 242, 0.85);
}
.view-VIEW-ID .abc-listing--cards {
  --layout-card-background: #fff;
  --layout-card-text: #222;
  --layout-border: #d5d5d5;
}
*/

/* Optional: adjust Cards' rounded corners while respecting the theme's
   Rounded corners setting. These component rules do not require --radius. */
/*
.rnd .layout-card,
.rnd .abc-aggregator--cards > article {
  border-radius: 0.75rem;
}
*/

/* Optional: adjust listing vertical spacing for one View. Replace VIEW-ID. */
/*
.view-VIEW-ID { --layout-section-space: 1rem; }
*/

/* Optional Aggregator card colors. */
/*
.abc-aggregator--cards {
  --layout-card-background: #fff;
  --layout-card-text: #333;
}
*/

/* Optional: float one field to the right. Replace NAME with the field
   machine name (for example, nofollow). */
/*
.field--name-field-NAME {
  float: right;
  clear: both;
}
[dir="rtl"] .field--name-field-NAME {
  float: left;
}
*/

/* Optional per-content-type image placement and centered sidebar images. */
/*
.node--type-book .field--name-body .pure-img {
  float: inline-end;
  margin: 0.6rem 0 0.6rem 0.6rem;
}
[dir="rtl"] .node--type-book .field--name-body .pure-img {
  margin: 0.6rem 0.6rem 0.6rem 0;
}
#sidebar-left .block img,
#sidebar-right .block img {
  display: block;
  float: none;
  margin: 0 auto;
}
*/

/* Optional: float Body images; Media galleries remain independent. */
/*
.node__content .field--name-body .pure-img {
  float: inline-start;
  margin-block: 0 1rem;
  margin-inline: 0 1rem;
}
*/

/* Optional: change only the Media gallery's preferred column width and gap.
   Images retain their Drupal image-style dimensions and aspect ratios. */
/*
.node__content > .field--name-field-media.field__items,
.node__content > .field--name-field-media > .field__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
}
*/

/* Optional: change selected Media thumbnail spacing on content edit forms. */
/*
.js-media-library-widget .js-media-library-selection {
  gap: 1rem;
}
*/

/* Optional inline sharing controls and node links. */
/*
.addtoany_list, .node__links { display: inline-block; }
*/

/* Optional: adjust pager and Book-navigation spacing in one place. */
/*
.pager__items { margin-block: 1.5rem; }
.book-navigation { margin-block-start: 1.5rem; }
*/

/* BLOCKS AND REGIONS */

/* Optional per-block title and link colors. Replace ID with an HTML ID. */
/*
#ID .block-title { color: #690; }
#ID { background-color: #f8f8f8; border: 1px solid #ddd; }
.region-content .field--name-body a { color: #c09; }
*/

/* EU COOKIE COMPLIANCE */

/* EU Cookie Compliance presentation, using the active ESUNT palette. */
body div#sliding-popup,
body div#sliding-popup .eu-cookie-withdraw-banner,
body div#sliding-popup .eu-cookie-withdraw-tab {
  color: #fff;
  background: light-dark(#333, #111);
}
/* Keep the withdrawal wrapper transparent around the visible banner. */
body div#sliding-popup.eu-cookie-withdraw-wrapper {
  background: transparent;
}
#sliding-popup .eu-cookie-compliance-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 85em;
  padding: 0.75rem;
  text-align: start;
  gap: 0.75rem 1.5rem;
}
#sliding-popup .eu-cookie-compliance-message {
  float: none;
  flex: 1 1 25em;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
#sliding-popup .eu-cookie-compliance-message :is(h1, h2, h3, p),
#sliding-popup .eu-cookie-compliance-category label,
#sliding-popup .eu-cookie-compliance-category-description {
  color: #fff;
  font-family: inherit;
  line-height: 1.4;
}
#sliding-popup .eu-cookie-compliance-message :is(h1, h2, h3) {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}
#sliding-popup .eu-cookie-compliance-message p {
  display: block;
  font-size: 0.875rem;
  font-weight: normal;
}
#sliding-popup .eu-cookie-compliance-buttons,
#sliding-popup .eu-cookie-compliance-categories-buttons {
  display: flex;
  float: none;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0;
  gap: 0.5rem;
}
#sliding-popup .eu-cookie-compliance-categories {
  flex-basis: 100%;
  padding-top: 0;
}
#sliding-popup .eu-cookie-compliance-categories-buttons {
  margin-top: 0.75rem;
}
#sliding-popup .eu-cookie-compliance-buttons button,
#sliding-popup .eu-cookie-compliance-save-preferences-button,
#sliding-popup .eu-cookie-withdraw-tab {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  white-space: normal;
  text-decoration: none;
  color: var(--heading, #102f46);
  border: 1px solid var(--border, #ccdde9);
  border-radius: 0;
  background: var(--surface, #f1f6fa);
  box-shadow: none;
  text-shadow: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.4;
}
.rnd #sliding-popup .eu-cookie-compliance-buttons button,
.rnd #sliding-popup .eu-cookie-compliance-save-preferences-button,
.rnd #sliding-popup .eu-cookie-withdraw-tab {
  border-radius: 0.3125rem;
}
#sliding-popup .eu-cookie-compliance-buttons button:hover,
#sliding-popup .eu-cookie-compliance-save-preferences-button:hover,
#sliding-popup .eu-cookie-withdraw-tab:hover {
  color: var(--heading, #102f46);
  background: light-dark(#fff, #303438);
}
#sliding-popup a,
#sliding-popup .eu-cookie-compliance-message button {
  text-decoration: underline;
  color: #fff;
}
#sliding-popup :is(button, a, input):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/*** MEDIA SCREENS (35.5, 48 & 64em) ***/

@media screen and (width < 48em) {
  #sliding-popup .eu-cookie-compliance-content {
    justify-content: center;
    text-align: center;
  }

  #sliding-popup .eu-cookie-compliance-message {
    flex-basis: 100%;
    text-align: center;
  }

  #sliding-popup .eu-cookie-compliance-buttons,
  #sliding-popup .eu-cookie-compliance-categories-buttons {
    justify-content: center;
    width: 100%;
  }
}

/* Optional: enable with the slideshow zoom example above. */
/*
@media screen and (prefers-reduced-motion: reduce) {
  #slider .slide-image { animation: none; }
}
*/


a,
a:link {
  color: #055afe;
}