/* The Yomu Originals website (originals-site/): what it adds to the brand styles (/styles.css) and to the
   storefront styles it shares with the marketing site's home shelf (/assets/originals.css, os- prefix). The
   marketing site's own two files are not touched by this one. Logical properties throughout, so right-to-left
   needs only the few mirrored glyphs. Nothing here is inline in a page: the site's Content-Security-Policy
   allows its own style files only. */

/* ─── Header: the longer brand ("Yomu Originals") has to share a phone's width with the picker and the button ─── */
.nav { gap: 12px; }
.nav__brand { min-width: 0; flex: 0 1 auto; }
.nav__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__links { flex: 0 0 auto; }
.nav__cta { white-space: nowrap; }
@media (max-width: 640px) {
  .nav { padding-inline: 14px; gap: 8px; }
  .nav__brand { font-size: 16px; gap: 8px; }
  .nav__icon { width: 30px; height: 30px; }
  .nav__links { gap: 8px; }
  .nav__lang-trigger { gap: 4px; padding: 7px 9px; }
  .nav__lang-trigger > span { display: none; }
  .nav__cta { padding: 8px 12px; }
  /* the name may take two lines rather than be cut: it is the longest word in some languages ("Originales de Yomu") */
  .nav__brand span { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; }
}
@media (max-width: 359px) {
  .nav__lang-trigger > svg:last-child { display: none; }
}

/* The language list on a phone. styles.css makes it a bottom sheet (position: fixed; bottom: 0) below 541px, but the header
   is blurred (backdrop-filter), which makes the header, not the window, the box a fixed child is placed in: the sheet then
   hangs from the header's bottom edge and rises out of the top of the screen. Here it is a panel under the header instead,
   as wide as the header's content. */
@media (max-width: 540px) {
  .nav__lang { position: static; }
  .nav__lang-menu, [dir="rtl"] .nav__lang-menu { position: absolute; top: calc(100% + 6px); bottom: auto; left: 14px; right: 14px; width: auto; max-height: min(70vh, 460px); border-radius: 14px; }
}

/* ─── Home and genre pages ─────────────────────────────────────── */
/* A title or summary with one very long word (a URL, a long compound) wraps inside the window instead of widening the page */
.os-head__title, .os-hero__title, .os-hero__summary, .os-shelf__title { overflow-wrap: anywhere; }
a.os-hero__cover { display: block; }
a.os-tag { transition: border-color .15s, background .15s; }
a.os-tag:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .16); color: var(--text); }
a.os-tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A format badge on a cover wraps rather than being cut with an ellipsis (the longest name, Greek "Κορεάτικο κόμικ", does not fit a 116 px cover) */
.os-badge { white-space: normal; text-overflow: clip; border-radius: 12px; overflow-wrap: anywhere; }

/* The format tabs filter the grid with CSS (:has); the rules are static because the formats are (originals.php) */
@supports selector(:has(a)) {
  .os-all:has(#f-manga:checked) .os-grid > li:not([data-f="manga"]),
  .os-all:has(#f-manhwa:checked) .os-grid > li:not([data-f="manhwa"]),
  .os-all:has(#f-manhua:checked) .os-grid > li:not([data-f="manhua"]),
  .os-all:has(#f-comic:checked) .os-grid > li:not([data-f="comic"]),
  .os-all:has(#f-novel:checked) .os-grid > li:not([data-f="novel"]),
  .os-all:has(#f-short:checked) .os-grid > li:not([data-f="short"]) { display: none; }
}

/* Genres: links to their pages */
.os-genres { margin-block: 0 28px; }
.os-all .os-filter + .os-genres { margin-top: -12px; }
.os-genres .os-filter__label { margin-bottom: 8px; }
.os-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.os-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elev); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--text-muted); transition: color .15s, border-color .15s, background .15s; }
.os-chip:hover { border-color: rgba(255, 255, 255, .32); color: var(--text); }
.os-chip[aria-current="page"] { border-color: var(--text); background: var(--text); color: #0A0A0F; }
.os-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.os-page .os-all { padding-block: 8px 16px; }

/* ─── Breadcrumb ───────────────────────────────────────────────── */
.os-crumbs { padding-block: 18px 14px; }
.os-crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.os-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.os-crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--text-dim); }
[dir="rtl"] .os-crumbs li + li::before { content: "‹"; }
.os-crumbs a { color: var(--text-muted); }
.os-crumbs a:hover { color: var(--text); }
.os-crumbs [aria-current="page"] { color: var(--text); }
.os-page .os-head { padding-block: 4px 18px; }

/* ─── A series ─────────────────────────────────────────────────── */
/* The store's hero, for one series: the whole summary is shown, and the counts sit under it */
.os-hero--series .os-hero__summary { display: block; overflow: visible; -webkit-line-clamp: unset; }
.os-hero--series .os-hero__title { overflow-wrap: anywhere; }
.os-hero__copy .os-facts { justify-content: center; }
@media (min-width: 820px) { .os-hero__copy .os-facts { justify-content: flex-start; } }
.os-hero--series .os-facts > div { background: rgba(10, 10, 15, .5); }

/* The chapters (episodes): one row each, free or locked */
.os-chapters { padding-block: 40px 8px; }
.os-chlist { display: grid; gap: 8px; max-width: 780px; margin: 14px 0 0; padding: 0; list-style: none; }
.os-ch { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.os-ch__n { flex: 0 0 auto; min-width: 2.2ch; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.os-ch__t { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.os-ch__s { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.os-ch--free .os-ch__s { background: rgba(224, 45, 36, .16); color: #ff8a82; }
.os-ch--locked { background: transparent; }
.os-ch--locked .os-ch__t { color: var(--text-muted); }
.os-ch--locked .os-ch__s { background: rgba(255, 255, 255, .07); color: var(--text-muted); }
.os-ch__lock { flex: 0 0 auto; }
.os-chapters__note { max-width: 780px; margin-top: 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.os-page .cta { margin-top: 32px; padding-block: 80px; }

/* ─── Footer (the 404 page uses the brand stylesheet's .notfound) ─── */
.footer__links { flex-wrap: wrap; gap: 10px 24px; }
.footer__lang-grid a { text-align: start; }