/* =========================================
   Erdélyi Múzeum look – colours and motifs of the old www.eme.ro/erdelyimuzeum
   site (eme_em_style.css) on top of the EME Kiadó layout.
   ========================================= */

:root {
  /* old site palette */
  --em-brown: #8d4f06;        /* menu bar (mm_bgr.gif) */
  --em-brown-light: #996119;  /* menu hover (mm_bgr_over.gif) */
  --em-brown-dark: #6f410b;
  --em-red: #d43c4a;          /* .links */
  --em-red-dark: #8e131e;     /* a.links:hover */
  --em-text: #412708;         /* .title, .bodytext */
  --em-page: #f9f9de;         /* .body background */
  --em-tan: #e2d5b0;          /* .left_column */
  --em-tan-dark: #cfb88c;     /* search_head_bgr */
  --em-row-1: #f0eed0;        /* .p_adatok1_bgr */
  --em-row-2: #e8e5c4;        /* .p_adatok2_bgr */
  --em-border: #bc9963;
  --em-label: #8b7b5e;

  /* map onto the kiado theme variables */
  --primary: var(--em-brown);
  --primary-dark: var(--em-brown-dark);
  --primary-light: var(--em-brown-light);
  --secondary: var(--em-label);
  --secondary-light: var(--em-border);
  --light: var(--em-row-1);
  --lighter: #fbfbe8;
  --border: var(--em-border);
  --border-light: var(--em-row-2);
  --background: var(--em-tan);
  --background-dark: var(--em-tan-dark);
  --color-text: var(--em-text);
  --color-heading: var(--em-text);
  --color-muted: var(--em-label);
  --nav-bg: var(--em-brown-dark);
}

body {
  background-color: var(--em-page);
  color: var(--em-text);
}
a {
  color: var(--em-red);
}
a:hover,
a:focus {
  color: var(--em-red-dark);
}
h1, h2, h3, h4,
.page-title,
.block-title {
  font-family: "Bona Nova", Georgia, serif;
  font-weight: 400;
  color: var(--em-text);
}

/* -----------------------------------------
   Header: brown band instead of the bookshelf, red wordmark as site name
   ----------------------------------------- */
.header {
  background-image: none;
  background-color: var(--em-page);
  border-top: 8px solid var(--em-brown);
}
.header .container::before,
.header .container::after {
  background-color: var(--em-tan);
}
header .site-logo {
  background-color: var(--em-page);
}
header .site-name a {
  display: block;
  width: 326px;
  max-width: 100%;
  height: 55px;
  background: url("../images/em-wordmark.png") left center / contain no-repeat;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
@media (min-width: 992px) {
  /* the 60px bookshelf strip is gone: pull the branding up */
  header .site-name {
    padding-top: 1.1em;
  }
  header .site-logo {
    margin-top: 14px;
  }
}
header .site-slogan {
  color: var(--em-text);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}
@media (max-width: 991.98px) {
  header .site-name a {
    width: 220px;
    height: 37px;
  }
}

/* Menu bar */
.primary-menu-wrapper {
  background-color: var(--em-brown);
  background-image: linear-gradient(to bottom, var(--em-brown-light), var(--em-brown) 45%, var(--em-brown-dark));
}
.menu-wrap .menu-item a:hover,
.menu-wrap .menu-item > span:hover {
  background-color: var(--em-brown-light);
}

/* -----------------------------------------
   Front page: the old cover banner (1874 … 2008) above the latest issues
   ----------------------------------------- */
.homepage #block-emuzeum-views-block-legfrissebb-kiadvanyok-block-1::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 760 / 181;
  margin-bottom: 1.5rem;
  background: url("../images/em-banner.jpg") center / contain no-repeat;
  border-bottom: 1px solid var(--em-border);
}

/* Block title "pills" (Legfrissebb lapszámok) */
#block-emuzeum-views-block-legfrissebb-kiadvanyok-block-1 .block-title {
  background-color: var(--em-brown);
}
#block-emuzeum-views-block-legfrissebb-kiadvanyok-block-1 .block-content {
  border-top-color: var(--em-border);
}

/* Issue grid */
.products .views-field-title a,
.products .views-field-title h3 a {
  color: var(--em-red);
}
.products .views-field.views-field-field-borito img {
  box-shadow: 0 2px 8px rgba(65, 39, 8, 0.25);
}

/* -----------------------------------------
   Sidebar: tan boxes with the old ornamental heading tab
   ----------------------------------------- */
.sidebar .block {
  background-color: var(--em-tan);
  border: 0;
  border-bottom: 3px solid var(--em-border);
}
.sidebar .block-title {
  /* ornament of the old year tab (year_box_head_bgr.gif) above the title */
  background: url("../images/em-year-tab.gif") center top / 160px 36px no-repeat;
  text-align: center;
  padding: 1.1rem 0 0.4rem;
  margin: -0.25rem 0 0.75rem;
  border-bottom: 1px solid var(--em-border);
}
#block-emuzeum-evfolyamok {
  background-color: var(--em-tan);
  border-top: 0;
}
.evfolyamok .evfolyam {
  border-bottom-color: var(--em-row-2);
}
.evfolyamok .evfolyam h3 {
  font-family: Georgia, "Bona Nova", serif;
}
.sidebar .evfolyamok ul.evfolyam__fuzetek a {
  background: var(--em-page);
  border-color: var(--em-border);
  color: var(--em-red);
  font-weight: 700;
}
.sidebar .evfolyamok ul.evfolyam__fuzetek a:hover,
.sidebar .evfolyamok ul.evfolyam__fuzetek a:focus,
.sidebar .evfolyamok ul.evfolyam__fuzetek a.is-active {
  background: var(--em-red);
  border-color: var(--em-red);
  color: #fff;
}
.evfolyamok__toggle {
  border-color: var(--em-brown);
  color: var(--em-brown);
  background: var(--em-page);
}
.evfolyamok__toggle:hover,
.evfolyamok__toggle:focus {
  background: var(--em-brown);
  color: #fff;
}
.sidebar input[type="text"],
.sidebar input[type="search"],
.sidebar select {
  background-color: #fff;
  border-color: var(--em-border);
}
.sidebar input:focus,
.sidebar select:focus {
  border-color: var(--em-brown);
  box-shadow: 0 0 0 2px rgba(141, 79, 6, 0.15);
}

/* Buttons: kiado's pill shape in the old red "Keresés" colours */
.form-actions input.form-submit,
input.form-submit,
.more-link a {
  background-color: var(--em-red);
  border-left-color: var(--em-red-dark);
  color: #fff;
}
.form-actions input.form-submit:hover,
input.form-submit:hover,
.more-link a:hover {
  background-color: var(--em-red-dark);
  color: #fff;
}
.more-link a {
  border: 1px solid var(--em-red);
}

/* -----------------------------------------
   Issue page: labels and the "További információk" rows
   ----------------------------------------- */
.node-type--lapszam .field__label {
  color: var(--em-label);
}
.node-type--lapszam .layout--onecol .field--label-inline {
  display: flex;
  gap: 2px;
  margin: 0 0 2px;
  max-width: 44rem;
}
.node-type--lapszam .layout--onecol .field--label-inline .field__label {
  flex: 0 0 11rem;
  padding: 0.25rem 0.6rem;
  background-color: var(--em-row-1);
  font-size: 0.85rem;
}
.node-type--lapszam .layout--onecol .block,
.node-type--lapszam .layout--onecol .block-content {
  margin: 0;
  padding: 0;
}
.node-type--lapszam .layout--onecol .field--label-inline .field-item,
.node-type--lapszam .layout--onecol .field--label-inline .field__item {
  flex: 1;
  padding: 0.25rem 0.6rem;
  background-color: var(--em-row-2);
  font-weight: 700;
  font-size: 0.85rem;
}

/* -----------------------------------------
   Footer: tan background, brown band instead of the bookshelf
   ----------------------------------------- */
.footer-blocks,
.footer-bottom {
  background-color: var(--em-tan);
}
.footer-bottom {
  background-image: none;
  padding-bottom: 0;
  border-bottom: 8px solid var(--em-brown);
}
.footer a {
  color: var(--em-text);
}
.footer a:hover {
  color: var(--em-red);
}

/* Issue search box (kiado hardcodes #dbd2bf here) */
#block-emuzeum-felfedetturlaplegfrissebb-kiadvanyokpage-4 {
  background-color: var(--em-tan);
  border: 0;
  border-bottom: 3px solid var(--em-border);
}
#block-emuzeum-felfedetturlaplegfrissebb-kiadvanyokpage-4 .block-title {
  padding-right: 0;
}

/* Footer branding: wordmark + readable slogan */
.footer .site-name a {
  display: block;
  width: 326px;
  max-width: 100%;
  height: 55px;
  background: url("../images/em-wordmark.png") left center / contain no-repeat;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
.footer .site-slogan {
  color: var(--em-text);
}
.footer .site-name-slogan::after {
  display: none;
}

/* Mobile: no bookshelf strip any more, so less space above the branding */
@media (max-width: 991.98px) {
  header .site-name {
    padding-top: 1.4em;
  }
  header .site-logo {
    margin-top: 10px;
  }
}
.footer .menu li {
  border-bottom-color: var(--em-border);
}
.footer .menu li a,
.footer-block a {
  color: var(--em-text);
}
.footer .menu li a:hover,
.footer-block a:hover {
  color: var(--em-red);
}