/**
 * @file
 * Optional site styling and customization examples for ESUNT.
 */

/*
 * Set Theme customization > Custom CSS file to this file to enable active rules.
 * To retain customizations after updates, copy it outside the theme and select
 * the copy instead. Image URLs must then be adjusted to the new location.
 *
 * Optional examples are commented out. Custom color fields left blank use the
 * theme palette defaults. Use light-dark(light-color, dark-color) where needed.
 */

/* APPEARANCE AND BRANDING */

/* Developer branding below the page. Remove or comment out to hide it. */
#brand {
  width: 50px;
  height: 50px;
  margin: 0 auto 1rem;
  border-radius: 100%;
  background: #f4f6f7 url(esunt.svg) center no-repeat;
  background-size: 38px 38px;
}

/* Outer page background, static gradient. */
/*
body {
  background: #d3eaf5 linear-gradient(#d3eaf5, #fff) 0 0 / 100% 435px no-repeat;
}
*/

/* Outer page background, fixed gradient (alternative to the above). */
/*
body {
  background: #d3eaf5 linear-gradient(#d3eaf5, #fff) 0 0 / 100% 435px no-repeat fixed;
}
*/

/* Outer page background, bottom gradient (alternative). */
/*
body {
  background: #d3eaf5 linear-gradient(#fff, #d3eaf5) 0 100% / 100% 190px no-repeat;
}
*/

/* Adjust the standard content gutter if the layout needs different spacing. */
/*
body {
  --page-gutter: 1rem;
}
*/

/* Adjust rounded corners while keeping the theme's Rounded corners toggle. */
/*
body {
  --radius: 0.75rem;
}
*/

/* Additional typography, beyond the theme's color settings. */
/*
body {
  line-height: 1.25;
}
*/

/* Optional rounded user pictures and a larger Body-text initial. */
/*
.field--name-user-picture img { border-radius: 100%; }
.node__content .field--name-body p:first-of-type::first-letter {
  font-size: 2em;
}
*/

/* Adjust logo spacing. */
/*
#header .logoimg {
  padding: 0.5rem 1rem;
}
*/

/* HEADER, NAVIGATION AND SEARCH */

/* Optional menu dropdown without shadows. */
/*
.pure-menu-children {
  box-shadow: none;
}
*/

/* Optional menu-toggle and submenu presentation. */
/*
.menu-toggle { background: #f1f6fa; }
.menu-toggle .bars { background: #102f46; }
#menu .submenu-toggle > span { font-size: 1.25rem; }
#menu .pure-menu-children .pure-menu-link {
  color: var(--menu-text);
  background: var(--menu-background);
}
*/

/* Optional: move the Search block to the start of Top links. */
/*
.region-toplinks > .block-wrapper:has(.block-search) { order: -1; }
*/

/* SOCIAL AND PAGE ICONS */

/* Optional icon colors. Normally, use the theme Custom colors settings. */
/*
body {
  --social-color: #669900;
  --social-hover: #cc0099;
  --page-icon-color: #669900;
  --page-icon-hover: #cc0099;
}
*/

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

/* SLIDESHOW */

/* Optional slideshow image zoom. Reduced-motion rule is at the end. */
/*
#slider .slide-image {
  animation: zoom 30s infinite;
}
@keyframes zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
*/

/* Optional: center slideshow captions and titles. */
/*
#slider .entry-header,
#slider .entry-summary { text-align: center; }
*/

/* 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 .node-readmore {
  display: none;
}
*/

/* Optional per-View color overrides. Replace VIEW-ID with the View class. */
/*
.view-VIEW-ID .listing--zebra {
  --zebra-odd: rgba(242, 245, 247, 0.85);
  --zebra-even: rgba(232, 238, 242, 0.85);
}
.view-VIEW-ID .listing--cards {
  --layout-card-background: #fff;
  --layout-card-text: #222;
  --layout-border: #d5d5d5;
}
*/

/* Optional custom colors for the Aggregator Cards listing. */
/*
.aggregator--cards {
  --layout-card-background: #fff;
  --layout-card-text: #333;
}
*/

/* Optional Cards corners (subject to the Rounded corners setting). */
/*
.rnd .layout-card,
.rnd .aggregator--cards > article {
  border-radius: 0.75rem;
}
*/

/* Optional: compact one View's section spacing. Replace VIEW-ID. */
/*
.view-VIEW-ID { --layout-section-space: 1rem; }
*/

/* FIELDS, MEDIA AND SHARING */

/* Basic Page media */
.node--type-page .node__content > .field--name-field-media {
  float: left;
  margin: 0 1.25rem 1rem 0;
}

/* Body images float to the reading-start side; referenced Media is excluded. */
/*
.node__content .field--name-body .pure-img {
  float: inline-start;
  margin: 0 1rem 1rem 0;
}

[dir="rtl"] .node__content .field--name-body .pure-img {
  margin: 0 0 1rem 1rem;
}
*/

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

/* Optional: float images of one content type to the inline end. */
/*
.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;
}
*/

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

/* Optional: adjust the Media gallery column width and spacing.
   Drupal image-style dimensions and image proportions remain respected. */
/*
.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: adjust pager and Book navigation spacing. */
/*
.pager__items { margin-block: 1.5rem; }
.book-navigation { margin-block-start: 1.5rem; }
*/

/* BLOCKS AND REGIONS */

/* Optional: center sidebar images. */
/*
#sidebar-left .block img,
#sidebar-right .block img {
  display: block;
  float: none;
  margin: 0 auto;
}
*/

/* Optional: customize a single block title, replacing ID with its HTML ID. */
/*
#ID .block-title {
  color: #669900;
}
*/

/* Optional block surfaces and links outside the theme's color controls. */
/*
#ID {
  background: light-dark(#f9f9f9, #202d37);
  border: 1px solid var(--border);
}
.node__content a { color: var(--primary); }
.node__content a:is(:hover, :focus-visible) { color: var(--primary-hover); }
*/

/* 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;
}

/*** BZZ ***/

/* ESUNT content images */
.eleft, .ecenter, .eright {
  max-width: 100%;
  margin-bottom: 1em;
}

.eleft {
  float: left;
  margin-right: 1.5em;
}

.eright {
  float: right;
  margin-left: 1.5em;
}

.ecenter {
  display: table;
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

.eleft img, .ecenter img, .eright img {
  display: block;
  max-width: 100%;
  height: auto;
}


/*** MEDIA SCREENS (35.5, 48 & 64em) ***/
@media screen and (width < 48em) {
  /* Keep short slideshow images at least 12rem tall on phones.
     This may crop the image or exceed a lower Maximum slide height setting. */
  #slider .slide-image {
    min-height: 12rem;
    object-fit: cover;
  }

  #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%;
  }
  /*** BZZ ***/
  .eleft, .eright {
    float: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }

}

/* Optional smaller content gutter on mobile. */
/*
@media screen and (width < 48em) {
  body {
    --page-gutter: 0.75rem;
  }
}
*/

/* Optional: disable slideshow zoom for reduced-motion users. */
/*
@media screen and (prefers-reduced-motion: reduce) {
  #slider .slide-image {
    animation: none;
  }
}
*/