/**
 * Árpád Úti Óvoda – a régi Drupal 7-es style.css Drupal 11-es változata.
 * A Bootstrap 3 CDN-ről jön (alaptéma), ez csak a saját felülírásokat tartalmazza.
 */

/* Betűtípusok – csak a modern formátumok (woff2/woff/ttf). */
@font-face {
  font-family: 'cindyyoboldbold';
  src: url('../fonts/cindyyobold/cindyyobold-webfont.woff2') format('woff2'),
       url('../fonts/cindyyobold/cindyyobold-webfont.woff') format('woff'),
       url('../fonts/cindyyobold/cindyyobold-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'encodesanscompressed';
  src: url('../fonts/encodesans/EncodeSansCompressed-Regular.woff') format('woff'),
       url('../fonts/encodesans/EncodeSansCompressed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'encodesansregular';
  src: url('../fonts/encodesans/EncodeSans-Regular.woff') format('woff'),
       url('../fonts/encodesans/EncodeSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'encodesansbold';
  src: url('../fonts/encodesans/EncodeSans-Bold.woff') format('woff'),
       url('../fonts/encodesans/EncodeSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #DFF3FD;
  font-family: encodesansregular, sans-serif;
}

a {
  font-weight: bold;
}

a:hover,
a:focus {
  text-decoration: none;
}

b,
strong {
  font-family: encodesansbold, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: encodesansregular, sans-serif;
}

div.main-container {
  max-width: 1170px;
}

/* Fejléc */
.navbar-default {
  background-color: transparent;
  border: 0;
}

.navbar.container {
  margin-top: 0;
  max-width: 1170px;
}

/* A felirat a képsor fölött lebeg, ahogy a régi oldalon. */
.site-title {
  position: absolute;
  z-index: 1000;
  margin: 10px;
}

span#site-name {
  font-family: cindyyoboldbold, cursive;
  font-size: 3.5em;
}

.navbar-collapse {
  background-color: #FF9817;
}

/* Tartalom */
li.node-readmore,
.links .node-readmore {
  display: none;
}

div.input-group {
  max-width: 150px;
}

/* Képek mező: bélyegképek egymás mellett (régi D7 szelektor helyett D11-es). */
.field--name-field-image .field--item {
  width: 150px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}

.field--name-field-image::after {
  content: "";
  display: table;
  clear: both;
}

/* Reszponzív felirat */
@media all and (max-width: 480px) {
  span#site-name {
    font-size: 1em;
  }
}

@media all and (max-width: 1024px) and (min-width: 480px) {
  span#site-name {
    font-size: 2em;
  }
}

@media all and (min-width: 1024px) {
  span#site-name {
    font-size: 3.5em;
  }
}

/* Szövegbe illesztett képek: felső korlát minden nézetben */
.field--name-body img {
  max-width: 100%;
}

/* Telefonon a lebegtetett kép teljes szélességben a szöveg fölé kerül */
@media (max-width: 767px) {
  .field--name-body img[style*="float"] {
    float: none !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 1em 0 !important;
  }
}

/* Beágyazott videók: soha ne legyenek szélesebbek a tartalomnál */
.field--name-body iframe {
  max-width: 100%;
}

/* Telefonon és tableten a videó teljes szélességben, a szöveg fölött */
@media (max-width: 991px) {
  .field--name-body iframe[src*="youtube"],
  .field--name-body iframe[src*="vimeo"] {
    float: none !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 0 1em 0;
  }
}

/* Közös utakon: hosszú URL-linkek egy sorban, a befoglaló elem szélességénél „…”-tel levágva */
.kozos-utakon .field--name-body a[href^="http"] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Biztonsági háló minden oldalra: egy link se lóghasson ki, inkább törjön sort */
.field--name-body a {
  overflow-wrap: anywhere;
}