/* The library catalogue of the Forum in Kronstadt. It looks like the Forum's website (neu.forumkronstadt.ro,
   forum_sitepackage/Resources/Public/Css/forum.css): navy, orange and grey, Droid Sans, a white sheet on a
   tinted page. It runs on its own and, mostly, inside an iframe on the Forum's pages (html.is-embedded):
   then only the content shows, on a transparent background, so it sits in the Forum's own white sheet.
   Light only on purpose: a dark catalogue inside the Forum's light page would look broken.
   Everything also works at the ~300 px a phone leaves for the frame. */

@font-face { font-family: "Droid Sans"; src: url("/static/DroidSans-95241414.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Droid Sans"; src: url("/static/DroidSans-Bold-3c35a242.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --navy: #2c3749;
  --navy-deep: #222b3a;
  --navy-soft: #3d4a60;
  --orange: #e14f00;            /* rules and focus rings; white text on it is too faint */
  --orange-text: #c24400;       /* links and buttons: 5.0:1 on white */
  --orange-dark: #a33a00;
  --orange-tint: #fbeee6;
  --page: #eef0f3;
  --line: #dde1e7;
  --field-line: #b9c0cc;
  --text: #1f2430;
  --muted: #5d6573;
  --white: #fff;
  --radius: 10px;
  --radius-s: 6px;
  --shadow: 0 1px 2px rgba(31, 36, 48, .06), 0 6px 20px rgba(31, 36, 48, .07);
  --font: "Droid Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1040px;
  --gutter: clamp(16px, 3vw, 32px);
}

/* ------------------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/1.6 var(--font); overflow-wrap: break-word; }
a { color: var(--orange-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-dark); }
h1, h2 { color: var(--navy); font-weight: 700; line-height: 1.25; letter-spacing: -.005em; }
h1 { position: relative; margin: 0 0 .5em; padding-bottom: .35em; font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); }
h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--orange); }
h2 { margin: 1.6em 0 .55em; font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); font-size: 14px; }
.skiplink { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--white); padding: 10px 16px; border-radius: var(--radius-s); }
.skiplink:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 26px;
  border: 0; border-radius: 999px; background: var(--orange-text); color: var(--white); cursor: pointer;
  font: 700 15px/1.2 var(--font); text-decoration: none; transition: background .15s;
}
.btn:hover { background: var(--orange-dark); color: var(--white); }
.btn--outline { min-height: 40px; padding: 8px 20px; background: var(--white); color: var(--orange-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--outline:hover { background: var(--orange-tint); color: var(--orange-dark); }

/* ------------------------------------------------------------------------------ header (stand-alone only) */
.topbar { background: var(--navy-deep); color: #cfd5df; font-size: 13px; }
.topbar__inner { display: flex; align-items: center; gap: 8px 20px; min-height: 38px; }
.topbar__place { margin: 0 auto 0 0; letter-spacing: .04em; }
.langnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.langnav__item { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border-radius: 999px;
                 color: #e8ecf2; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-decoration: none; }
.langnav__item:hover { color: var(--white); background: rgba(255, 255, 255, .1); }
.langnav__item.is-active { color: var(--white); background: rgba(255, 255, 255, .16); }

.brandbar { background: var(--white); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); padding: 16px 0; text-decoration: none; }
.brand__logo { width: clamp(60px, 8vw, 92px); height: auto; }
.brand__name { display: flex; flex-direction: column; color: var(--orange); text-transform: uppercase;
               font-size: clamp(15px, .8rem + .9vw, 23px); line-height: 1.12; letter-spacing: .015em; }
.brand:hover .brand__name { color: var(--orange-text); }

.navbar { background: var(--navy); }
.navbar__inner { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 50px; }
.navbar__item { display: flex; align-items: center; padding: 12px 16px; color: var(--white); font-weight: 700; text-decoration: none; }
.navbar__item:first-child { margin-left: -16px; }
.navbar__item:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.navbar__item.is-active { box-shadow: inset 0 -4px 0 var(--orange); }

/* ------------------------------------------------------------------------------ page */
.page { max-width: var(--wrap); margin: 0 auto; padding: clamp(16px, 3vw, 28px) var(--gutter) 48px; }
.sheet { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 4vw, 40px); }
.embed-footer { display: none; }
.prose { max-width: 72ch; }

.catalogue-head__stand { margin: 0 0 .3em; color: var(--navy-soft); font-weight: 700; }
.catalogue-head__note { margin: 0 0 1.4em; color: var(--muted); font-size: 14.5px; }

/* ------------------------------------------------------------------------------ search form */
.search { margin: 0 0 28px; padding: clamp(14px, 3vw, 22px); border-radius: var(--radius); background: var(--page); }
.search__fields { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field label { display: block; margin-bottom: 4px; color: var(--navy); font-size: 14px; font-weight: 700; }
.field input, .field select {
  display: block; width: 100%; min-height: 44px; padding: 9px 16px; border: 1px solid var(--field-line); border-radius: 999px;
  background-color: var(--white); color: var(--text); font: 16px var(--font); transition: border-color .15s, box-shadow .15s;
}
.field select {
  appearance: none; padding-right: 40px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232c3749' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input::placeholder { color: #7d8594; }
.field input:focus, .field select:focus { outline: none; border-color: var(--navy-soft); box-shadow: 0 0 0 3px rgba(44, 55, 73, .18); }
.search__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 14px; }
.search__reset { font-weight: 700; font-size: 15px; }
.search__hint { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }

/* ------------------------------------------------------------------------------ results */
.results__heading { margin: 0 0 10px; font-size: 1.15rem; }
.results__none { color: var(--muted); }
.results__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.book { border-bottom: 1px solid var(--line); }
.book summary { position: relative; display: block; min-height: 44px; padding: 11px 40px 11px 8px; border-radius: var(--radius-s); cursor: pointer; list-style: none; }
.book summary::-webkit-details-marker { display: none; }
.book summary::after {
  content: ""; position: absolute; top: 19px; right: 14px; width: 9px; height: 9px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s;
}
.book details[open] > summary::after { top: 23px; transform: rotate(-135deg); }
.book summary:hover { background: var(--page); }
.book__title { display: block; color: var(--navy); font-weight: 700; line-height: 1.35; }
.book summary:hover .book__title { color: var(--orange-text); }
.book__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; color: var(--muted); font-size: 14px; }
.book__category { padding: 0 9px; border-radius: 999px; background: var(--page); color: var(--navy-soft); font-size: 13px; line-height: 1.6; }
.book summary:hover .book__category { background: var(--white); }
.book__body { padding: 4px 8px 16px; }
.book__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 18px; margin: 0 0 14px; font-size: 15px; }
.book__facts dt { color: var(--muted); }
.book__facts dd { margin: 0; }
@media (max-width: 420px) {
  .book__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .book__facts dd { margin-bottom: 6px; }
}
.book__reserve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.book__reserve-hint { color: var(--muted); font-size: 13.5px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.pager__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px;
               background: var(--white); color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; }
.pager__link:hover { border-color: var(--orange); color: var(--orange-text); }
.pager__link--previous::before { content: "‹"; margin-right: 8px; }
.pager__link--next { margin-left: auto; }
.pager__link--next::after { content: "›"; margin-left: 8px; }
.pager__status { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------------------ footer (stand-alone only) */
.site-footer { background: var(--navy); color: #d6dbe4; font-size: 15px; }
.site-footer a { color: var(--white); }
.site-footer__inner { display: flex; gap: 18px; align-items: flex-start; padding-top: 32px; padding-bottom: 28px; }
.site-footer__inner p { margin: 0 0 .35em; }
.site-footer__inner strong { color: var(--white); }
.site-footer__logo { flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--white); }
.site-footer__bottom { background: var(--navy-deep); color: #aeb6c4; font-size: 13px; }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 14px; padding-bottom: 14px; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: #d6dbe4; }
@media (max-width: 520px) { .site-footer__inner { flex-direction: column; gap: 12px; } }

/* ------------------------------------------------------------------------------ inside the Forum's iframe */
/* The Forum's page gives the frame its heading, its white sheet and its language, so the catalogue shows
   only its content, flush with the page's text column. What touches the frame's side edges (the book
   rows, the pager) draws its focus ring inside, where the frame can't clip it. */
.is-embedded body { background: transparent; }
.is-embedded .site-header, .is-embedded .site-footer, .is-embedded .catalogue-head__note { display: none; }
.is-embedded .page { max-width: none; padding: 4px 0 6px; }
.is-embedded .book summary:focus-visible, .is-embedded .pager__link:focus-visible { outline-offset: -3px; }
.is-embedded .sheet { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.is-embedded .catalogue-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-embedded .catalogue-head__stand { font-size: 14.5px; }
.is-embedded .embed-footer { display: block; margin: 22px 0 0; color: var(--muted); font-size: 13px; }

@media print {
  .site-header, .site-footer, .search, .pager, .book__reserve, .embed-footer { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .page { padding: 0; }
  .sheet { padding: 0; box-shadow: none; }
  .book summary::after { display: none; }
}